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