Menambahkan Button Keren Untuk Menu Download dan Demo di Sidebar

Kali ini aku mau share tips dan tutorial receh ala blogger, yakni Cara Membuat Demo dan Download Button pada Postingan yang letaknya ada Sidebar Blogger. Tombol pada sidebar ini biasanya akan kalian temukan pada Blog-blog tempat download Template seperti IDNTHEME atau blog-blog yang menyediakan Tombol Preview, Demo, Buy Now dan lain-lain.

Tujuan menambahkan tombol ini tak lain dan tak bukan adalah untuk membuat blog tampil lebih profesional, keren dan lebih menarik. Tentu hal ini akan menjadi nilai plus bagi blog kalian.

Yang penasaran seperti apa penampakannya, silakan klik tombol Demo berikut:



Keren gak? jika tertarik silakan ikuti langkah-langkah kustomisasi templatenya sebagai berikut. By the way, Karena tombol ini menggunakan Font Awesome, jadi tambahkan link css berikut diatas </head>, jika sudah tersedia pada template kalian, maka lewati langkah ini.

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

Tambahkan CSS

Login ke akun Blogger > Tema > Edit HTML dan letakkan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>, "tekan CTRL+F untuk mencari kode"

<style>
#store-style{background:#f6f8f9;display:block;overflow:hidden;padding:20px;margin:0 0 20px 0;max-width:300px;font-family: 'Open Sans', sans-serif;}
.rio-ss{overflow:hidden;line-height:normal;margin:0;background:#fff;display:block;padding:10px;width:100%;max-width:280px;float:left;color:#888}
#store-style .storebutton{display:block;position:relative;background:#ff6550;color:#fff;text-align:left;font-size:1rem;margin:0;padding:16px 20px;border-radius:4px;overflow:hidden;box-shadow:0 1px rgba(0,0,0,.1);transition:all .3s;}
#store-style .storebutton.but2{background:#3498db}
#store-style .storebutton:hover{background:#e55b48;color:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.04), 0 6px 6px rgba(0,0,0,0.1);}
#store-style .storebutton.but2:hover{background:#2f89c5}
#store-style .storebutton:after,#store-style .storebutton.but2:after{content:'\f105';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;bottom:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:12px 20px;font-family:fontawesome;transition:all .3s;font-size:1.4rem}
#store-style .storebutton:hover:after,#store-style .storebutton.but2:hover:after{background:rgba(255,255,255,.15);-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}
.but1,.but2{padding:14px}
.storelist{background:#fff;display:flex;padding:10px 5px;width:100%;float:left;color:rgba(0,0,0,0.5);font-weight:700;border-bottom:1px dashed rgba(0,0,0,0.05);transition:all .6s}
.storelist:last-child{border-bottom:0}
.storelist:before{content:'\f00c';font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:normal;padding:5px;margin:0 5px 0 0;transition:all .6s}
.storelist:hover:before{color:#e67e22;}
</style>

Tambahkan Kode HTML

Cari kode markup sidebar <asside id='sidebar-wrapper'> atau <div id'sidebar-wrapper'> lalu letakkan kode dibawah ini tepat dibawahnya.

<a name='details'/>
<div class='clear'/>

Perlu diingat, bahwa kode pada setiap template blog berbeda-beda, maka harus lebih teliti untuk mengenal kode pada template yang digunakan.

Cara Meletakkan Tombol di Postingan

Masuk ke halaman postingan, Ubah mode post dari Compose ke HTML dan letakkan kode dibawah ini. Agar blog tetap SEO dimata search engine letakkan kode tepat setelah postingan Anda.

<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<a class="storebutton but1" href="LINK-TUJUAN" rel="nofollow" target="_blank">Preview</a>
<div class="rio-ss idb">
Your description here.</div>
</div>
<div id="store-style">
<a class="storebutton but2" href="LINK-TUJUAN" target="_blank">IDR 10K Download</a>
<div class="rio-ss">
<span class="storelist">Deskripsi 1</span>
<span class="storelist">Deskripsi 2</span>
<span class="storelist">Deskripsi 3</span>
<span class="storelist">Deskripsi 4</span></div>
</div>
</div>
</div>

Sampai disini, pengkustomisasian template selesai. Jika masih gagal, tambahkan Kode Javasript.

Tambahkan Javascript

Cari kode </head> letakkan kode dibawah ini tepat diatasnya.

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){
$('a[name="details"]').before($('#Theme-details').html());
$('#Theme-details').html('');
});
/*]]>*/
</script>

Semoga berhasil.