Cara Membuat Tombol Demo Dan Downloand Responsive Di Postingan Blog

Share Pengalaman - Halo agan-agan dan aganwati, alhamdulillah kita masih bisa berjumpa di share pengalaman. Nah pada perjumpaan hari ini saya akan membagikan tutorial untuk agan dan aganwati semua Cara Membuat Tombol Demo dan Downloand Ringan dan Responsive di Blogspot.

Membuat tombol demo dan tombol downloand di postingan blog akan sangat berguna khususnya buat postingan semacam share Templeat share File dlln.

Tombol demo dan tombol downloand yang disini bersifat responsive yang di cetak dengan script CSS, jadi jangan harap akan mempengaruhi blog kalian seperti semacam lambat loading, kesalahan html dan lain-lain kecuali kalian sendiri yang menyalah gunakan script tersebut. Untuk hasil dari tombol tersebut hasilnya seperti di bawah ini.

DEMO  DOWNLOAD

Jadi buat agan dan aganwati yang mengkin bersedia dengan  ini silahkan simak di bawah cara membuatnya. Langsung saja ya.

Cara Membuat Tombol Demo dan Downloand di dalam Postingan Blog

• Pastikan kalian telah login ke akun blogger kalian.
• Jika memang sudah silahkan scrol pada menu tema dan klik edit html.
• Sampai disini sekarang silahkan kalian cari kode ]]></b:skin> dengan cara tekan ctrl+f dulu.
• Setelah kodenya kalian temukan selanjutnya silahkan copy script di bawah ini di atas kode ]]></b:skin> tadi dan jangan lupa klik simpan templeat.

/* Demo Download Button */ .boddbtn {text-align:center;color:#fff !important;list-style:none;margin:10px !important;padding:10px !important;font-size:14px;display:inline-block;text-decoration:none !important;clear:both;} .boddbtn ul {padding:0;margin:0;} .boddbtn li {list-style:none;display:inline;padding:0;margin:5px;} .demobtn,.downloadbtn{color:#fff !important;padding:10px 15px 10px 18px;font-size:13px;font-weight:700;font-family:oswald;text-transform:uppercase;text-align:center;border-radius:3px;border:0;letter-spacing:1px;transition: all 0.2s ease-out;text-decoration:none !important;} .demobtn {background-color: #3498db;} .downloadbtn {background-color: #34d968} .demobtn:hover {background-color: #2980b9;color: #fff;} .downloadbtn:hover {background-color: #2fbd5a;color: #fff;}

• Selanjutnya silahkan kalian copy script dibawah ini dan pastekan pada postingan yang ingin kalian tampilkan tombol demo dan tombol downloand tersebut, Jangan pastekan di compose tapi di mode html.

<div style="text-align: center;"> <ul class="boddbtn"> <li><a class="demobtn" href="http://www.tutorialumum.com/demo" rel="nofollow" target="_blank">DEMO</a>  <a class="downloadbtn" href="http://www.tutorialumum.com/download" rel="nofollow" target="_blank">DOWNLOAD</a></li> </ul> </div> Note: Lihat pada kode yang kedua >> Silahkan ubah sedikit kode yaitu link blog saya masukkan link demo dan link downloand kalian di sana.
Cuma itu dulu untuk postingan Cara Membuat Tombol Demo Dan Tombol Downloand Di Postingan Blog, Semoga bermamfaat Dan semoga Sukses. Jika ada kesalahan kalian boleh komen di bawah ini.