Tombol Demo dan Download untuk Blogger

Assalamualaikum Wr.Wb

KEYZEE Shared - Pada kesempatan kali ini saya akan memberikan tutorial yaitu "Tombol DEMO dan DOWNLOAD untuk Blogger".
Tombol Demo dan Download ini digunakan untuk keperluan masing-masing.Contohnya dari kebanyakan Tombol ini digunakan untuk Link Download atau juga yang berhubungan untuk diUnduh,contohnya di Tutorial ini kita juga dapat membantu untuk share-share tentang Template blogger dan Wordpress theme disertai dengan Demo template tersebut.Maka dari itu anda harus perlu menambahkan kedua tombol simple ini.

Demo dan Download tombol ini juga menggunakan efek hover CSS termasuk border-radius,box-shadow, linear-gradients, z-index dan transisi untuk mencapai efek yang unik dan sederhana.
dan tombol ini dibuat dengan CSS sehingga Efek Hover yang disentuh saat mouse kita mengarahkan ke tombol Demo / Download .kemudian Dua ikon ini diambil dari FontAwesome. Jadi sebelum mengikuti tutorial ini anda harus menambahkan/memasang FontAwesome di blog Anda.

Yukk langsung saja ketutorialnyaa...

"Cara Memasang Tombol Demo dan Download untuk Blogger"

1.Masuk ke Dashboard Blogger ( Halaman Utama Blog )

2.Pilih Blog Anda Yang Ingin Dipasangkan Widget lalu pilih -> Template -> EDIT HTML

3.Cari kode ]]></b:skin,lalu jika sudah ketemu kode ]]></b:skin , Copy Script dibawah ini dan tempatkan script ini diatas kode ]]></b:skin

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;} 

4.Kemudian Simpan Template
Yang terakhir adalah memasang FontAwesome,Copy kode dibawah ini dan letakkan diatas kode </head>

 <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/> 

Saat anda membuat Post baru,terapkan kode pemanggil dibawah ini dan letakkan pada postingan TAB HTML,

 <div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="LINK-DEMO-ANDA" target="_blank">DEMO</a></li>
<li><a class="download" href=" LINK-DOWNLOAD-ANDA" target="_blank">DOWNLOAD</a></li>
</ul>
</div> 

Jika anda ingin menghapus tombol Demo dan Download,dan anda ingin menampilkannya hanya satu saja.Caranya hapus satu baris kode <i> sampai kode </i> ...

Wassalamualaikum Wr.Wb

Tweet