Cara Membuat Button Demo dan Download di Sidebar

Button Demo dan download memang sangat penting terlebih khusus para bloger yang mengambil niche blog download template dan download lainnya, Dengan kode di sidebar ini tidak mempersulit para pengunjung untuk melirik demo & downloadnya.

Jika sobat penasaran cara membuatnya, ada baiknya perhatikan hal hal yang akan dibahas disini, dan pahami denga teliti, karena jika salah, button demo & download di sidebar tidak akan tampil sebagaimana mestinya

Cara Membuat Button Demo dan Download di Sidebar

Tahap Pertama : 

1. Login ke Blogger

2. Lihat Tab Tema > Edit HTML

3. Masukkan Kode font awesome dibawah ini, Tepat diatas kode </head>

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

Masukkan CSS dibawah ini, Tepat diatas kode ]]></b:skin> atau </style>

/* CSS Button-Side Style By Chaya Education */
#store-style{background:#f6f8f9;display:block;overflow:hidden;padding:20px;margin:0 0 20px 0}
.rio-ss{overflow:hidden;line-height:normal;margin:0;background:#fff;display:block;padding:10px;width:100%;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;}

Lalu, Tambahkan Javascript dibawah ini, Tepat diatas kode </head>

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

Penambahan Kode
Silahkan Sobat mencari kode <aside id='sidebar-wrapper'> Atau <div id'sidebar-wrapper'>Lalu Letakkan kode dibawah ini, Tepat dibawahnya

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

Kode pada tiap tiap template berbeda beda, Silahkan sobat cari secara teliti, biasanya admin menggunakan Pencarian dengan kata "sidebar-wrapper" Nanti akan ada banyak, Silahkan cari kode yang mirip persis dengan kode diatas

Cara Pemasangan Kode
1. Login ke Blogger
2. Lihat tab Postingan > Entri baru > Pilih mode HTML, Lalu masukkan Kode dibawah ini pada tiap postingan untuk menampilkan button Demo & Downloadnya

<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>

Catatan : 

Jika Sobat ingin meletakkan kodenya, pastikan sobat meletakkan kodenya diakhir Postingan agar Blog tetap SEO, Karena jika kodenya ditaro diawal postingan, maka Tidak akan SEO+_+

Terima Kasih Sudah membaca artikel ini, Semoga bisa bermanfaat bagi kita semua