Cara Membuat Tombol Demo dan Download di Postingan Blog
Tombol Demo dan Download punya banyak kegunaan pada dunia blog. Bagi setiap blogger, tombol ini digunakan untuk keperluan masing-masing. Kebanyakan, tombol ini digunakan untuk menampilkan halaman demonstrasi atau link download dari pokok bahasan yang sedang diulas disatu postingan.
Kebanyakan blogger mengulas pemasangan tombol ini dengan mengharuskan kita masuk ke halaman HTML. Kali ini kita akan memasang tombol Demo dan Download dengan cara mudah. Tombol yang akan kita buat tampilannya seperti dibawah ini :
Kebanyakan blogger mengulas pemasangan tombol ini dengan mengharuskan kita masuk ke halaman HTML. Kali ini kita akan memasang tombol Demo dan Download dengan cara mudah. Tombol yang akan kita buat tampilannya seperti dibawah ini :
Pemasangan dengan cara konvensional mengharuskan kita masuk ke akun blogspot dan memilih tab Edit HTML pada tab Template. Setelah didalam kita diminta untuk mencari kode ]]></b:skin> dan mempaste script dibawah ini tepat dibawahnya.
Namun ada cara lebih mudah, jika Anda merasa kurang percaya diri bertamu dengan halaman HTML. Kita pilih tab Sesuikan yang tepat disebelah tab Edit HTML, dimana tampilannya lebih interaktif.
Setelah itu, pilihan selanjutnya adalah Tindak Lanjut dan Tambahkan CSS. Pada kotak isian CSS, masukkan script dibawah ini.
#wrap { margin:20px auto; text-align:center; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:280px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:100px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:100px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }
#wrap br { display:none; }
.bie-slide,.bie-slide2 { position:relative; display:inline-block; height:50px; width:280px; line-height:50px; padding:0; border-radius:50px; background:#fdfdfd; border:2px solid #F9690E; margin:10px; transition:.5s; }
.bie-slide2 { border:2px solid #36D7B7; }
.bie-slide:hover { background-color:#F9690E; }
.bie-slide2:hover { background-color:#36D7B7; }
.bie-slide:hover span.circle,.bie-slide2:hover span.circle2 { left:100%; margin-left:-45px; background-color:#fdfdfd; color:#F9690E; }
.bie-slide2:hover span.circle2 { color:#36D7B7; }
.bie-slide:hover span.title,.bie-slide2:hover span.title2 { left:40px; opacity:0; }
.bie-slide:hover span.title-hover,.bie-slide2:hover span.title-hover2 { opacity:1; left:40px; }
.bie-slide span.circle,.bie-slide2 span.circle2 { display:block; background-color:#F9690E; color:#fff; position:absolute; float:left; margin:5px; line-height:42px; height:40px; width:40px; top:0; left:0; transition:.5s; border-radius:50%; }
.bie-slide2 span.circle2 { background-color:#36D7B7; }
.bie-slide span.title,.bie-slide span.title-hover,.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { position:absolute; left:90px; text-align:center; margin:0 auto; font-size:16px; font-weight:bold; color:#F9690E; transition:.5s; }
.bie-slide2 span.title2,.bie-slide2 span.title-hover2 { color:#36D7B7; left:100px; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { left:100px; opacity:0; }
.bie-slide span.title-hover,.bie-slide2 span.title-hover2 { color:#fff; }
Tulisan warna Merah adalah ukuruna panjang lebar nya , anda bisa merubah nya sesuai keinginan nya
- Tarus dimana saja. Namun jika telah banyak menyimpan script CSS didalamnya, pilihlah tempat dibagian bawah. Lihat Gambar.
- Setelah itu simpan dan kembali ke dhasbor. Setiap kali ingin menampilkan tombol Demo dan Download pada postingan, sisa memasukkan script dibawah ini kedalam postingan dengan mode HTML.
<div id="wrap">
<a class="bie-slide" href="URL ANDA DISINI" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">DEMO</span>
<span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="URL ANDA DISINI" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">DOWNLOAD</span>
<span class="title-hover2">Click here</span>
</a>
</div>
<a class="bie-slide" href="URL ANDA DISINI" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">DEMO</span>
<span class="title-hover">Click here</span>
</a>
<a class="bie-slide2" href="URL ANDA DISINI" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">DOWNLOAD</span>
<span class="title-hover2">Click here</span>
</a>
</div>
Kode berwarna meRah pada script diatas silahkan ganti dengan halaman demo yang telah Anda buat.
Anda juga bisa menghapus tombol Demo atau Download jika ingin menampilkan satu saja. Caranya hapus satu baris dari <a class="bie-slide2" href="URL ANDA DISINI" target="_blank"> sampai </a>
M.Alif
If you spend time trying to be good at everything, you will never be great at anything
