Cara Membuat Tombol / Button Demo dan Download Di Sidebar Blogspot

Selamat datang kembali guys and sobat, seperti yang pernah saya katakan pada postingan saya tentang cara membuat button / tombol demo dan download di blogspot, bahwa saya akan memberikan trik bagaimana caranya membuat tombol / button demo dan download di sidebar

Baca Juga: Cara Membuat Tombol / Button Demo dan Dowload Di Postingan Blog
Jika Anda mengunjungi situs web yang menerbitkan template unduhan gratis untuk jenis-jenis blogspot Soratemplates,Templateism, ThemeXpose, Themeindie, Idntheme dan lain sebagainya, maka Anda tentu mengerti maksud dari tulisan ini. Dari penyedia template website yang bisa Anda lihat, deskripsi template serta kata-kata "Download Free" atau "Buy This Theme" muncul tertulis di sidebar.
Dalam tutorial ini saya tidak hanya membagikan script untuk menampilkan teks di postingan, tapi juga informasi seperti konten website share Template. Misalnya kita bisa lihat pada gambar diatas ada tombol Live Preview di bagian bawah beserta deskripsi dan tidak ada tombol Buy Now yang terpisah, atau bisa diganti dengan Free Download, dan dibawah daftar tombol yang ada fitur tambahan. untuk versi premium seperti pada template ThemeIndie website templatenya bungfrangki atau website template Idntheme miliknya arlinadesign

CARA MEMBUAT TOMBOL DEMO DAN DOWNLOAD DI SIDEBAR BLOG simak caranya dibawah ini.
Karena font ini menggunakan font awesome,silahkan tambahkan dulu kode berikut, jika sudah ada silahkan lewati langkah ini.

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

1. Buka Blogger> Template> Edit HTML> lalu letakkan kode di bawah ini setelah ]]> </ b: skin> atau </style>

/* CSS Button-Side Style */ #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;}

2. Letakkan kode di bawah tepat di atas kode </ head>

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

3. Temukan kode untuk sidebar blog anda, misalnya, <aside id = 'sidebar-wrapper' atau <div id = 'sidebar-wrapper> jika bisa meletakkan kode di bawah tepat di atas kode tadi.

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

Sidebar wrapper tags pada template tidak semuanya sama, jadi sobat bisa cari seperti id = 'sidebar-right' atau id = 'sidebar' dan sebagainya.
Meletakkan kode contoh pada langkah 3 untuk dilihat pada gambar di bawah ini seperti template pada blog saya.

Simpan Template

4. Saat membuat posting baru atau entri baru, pilih mode HTML dan tambahkan kode di bawah ini dan letakkan di bagian manapun.

<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 :
Ganti URL Demo, URL Pembelian,Harga dan Kalimat sobat.
Nantinya kode diatas tidak akan muncul di postingan tapi akan pindah ke sidebar.Atau jika Anda menginginkan kode HTML asli (hanya tertulis) seperti berikut ini:

div style="display:none"><div id="Theme-details">/* Tulisan yang ingin ditampilkan di sidebar blog. */<div style="clear:both"></div></div>

Selamat mencoba,semoga bermanfaat 

Share :