Cara Menambahkan Button di Sidebar Ala IDNTHEME

Halo!
Kali ini Abang mau share tips blogger Cara Membuat Demo dan Download Button Postingan pada Sidebar Blogger. Tombol pada sidebar ini biasanya akan kalian temukan pada Blog-blog tempat download Template seperti IDNTHEME atau blog-blog yang ingin 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.

• SHOW DEMO

Langkah-langkah Kustomisasi

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

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

/* 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;}

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>

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

Kode pada setiap template blog berbeda-beda maka dari itu, kalian harus lebih teliti dan mengenal kode pada template yang digunakan

Contoh peletakkan kode
- gambar

Cara Memasangkan Kode Pada Postingan

Pindah mode post dari Compose ke HTML dan letakkan kode dibawah ini.

Agar blog tetap SEO dimata search engine letakkan kode tepat setelah postingan

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

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

Bang Abu

Artikel Terkait