Cara Membuat Tulisan di Postingan Tampil di Sidebar
05 January 2016
Cara Membuat Tulisan di Postingan Tampil di Sidebar atau Membuat Keterangan yang biasa kita lihat pada website yang membagikan Template seperti Templateism, Soratemplates, ThemeXpose dan sebaginya.
Pada tutorial kali ini script yang saya bagikan bukan hanya script untuk menampilkan tulisan pada postingan saja tapi juga konten keterangan seperti website share Template. Contohnya bisa kita lihat pada gambar di atas ada tombol Live Preview berserta deskripsinya dan di bawahnya ada konten terpisah yaitu ada tombol Buy Now atau bisa di ganti dengan Free Download, dan di bawah tombol tersebut ada list fitur tambahan untuk versi premiumnya.
Bagi yang masih bingung untuk tampilan deskripsi template seperti gambar di atas silahkan lihat demonya :
Nah bagi sobat yang tertarik untuk memasangnya, silahkan ikuti tutorial di bawah ini :
1. Masuk ke Blogger > Template > Edit HTML > lalu letakan kode di bawah ini tepat di atas
]]></b:skin> atau </style>/* CSS StoreStyle */
#store-style{overflow:hidden;font-family:'Open Sans',sans-serif;background:#fff;border:1px solid #ddd;padding:25px 10px 10px;margin-bottom:20px}
#store-style .storebutton{background:#07ACEC;color:#fff;font-weight:bold;border-radius:3px;text-align:center;transition:all .4s ease-in-out;position:relative}.rio-ss{padding-top:15px;overflow:hidden}.idb{line-height:1.5;padding:25px 0 5px}
#store-style .storebutton:hover{background:#333;color:#fff}.but1{padding:10px 95px}.but2{padding:10px 84px}
.storelist{padding:12px 10px;border-bottom:1px solid #ddd;width:100%;float:left}
.storelist:last-child{border-bottom:none}
.storelist:before{content:"\f05d";font-family:FontAwesome;font-size:13px;font-style:normal;font-weight:400;padding:5px}
2. Letakan kode di bawah ini 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. Cari kode untuk sidebar blog, contohnya
<aside id='sidebar-wrapper' atau <div id='sidebar-wrapper jika sudah dapat letakan kode di bawah ini tepat di atas kode tadi.<a name='details'/>
<div class='clear'/>
Tag Sidebar wrapper pada template tidak semuanya sama, jadi sobat bisa mencari seperti
id='sidebar-right' atau id='sidebar' dan sebagainya.
Contoh Peletakan kode pada langkah ke 3 lihat pada gambar di bawah ini :
 |
| Contoh Penempatan kode pada langkah ke3 |
4. Pada saat membuka postingan baru atau editor postingan klik HTML lalu tambahkan kode di bawah ini dan letakan di bagian mana saja.
<div style="display:none">
<div id="Theme-details">
<div id="store-style">
<center><a class="storebutton but1" href="#LINK-DEMO" target="_blank">Live Preview</a></center>
<div class="rio-ss idb">
See it live with all the features that exist, both on the homepage and the page posts.</div>
</div>
<div id="store-style">
<center><a class="storebutton but2" href="#LINK-PURCHASE" target="_blank">$5.20 - Buy Now</a></center>
<div class="rio-ss">
<span class="storelist">Support Template Update</span>
<span class="storelist">Remove Footer Credits</span>
<span class="storelist">For Unlimited Domains</span>
<span class="storelist">No Encrypted Scripts</span>
<span class="storelist">Support Color Change</span>
<span class="storelist">And Much More...</span>
</div>
</div>
<div style="clear:both">
</div>
</div>
</div>Nantinya kode di atas tidak akan tampil di bagian postingan melainkan akan berpindah ke sidebar.
Atau jika ingin HTML originalnya (hanya tulisan) kodenya seperti berikut :
<div style="display:none">
<div id="Theme-details">
/* Tulisan yang ingin ditampilkan di sidebar blog. */
<div style="clear:both">
</div>
</div>Lalu Publishkan atau Simpan.
Baca Juga : Membuat Show Hide Contact Form with Effect di Blog
Semoga Tutorial Cara Membuat Tulisan di Postingan Tampil di Sidebar ini bermanfaat. Terima kasih.
Referensi: http://www.bungfrangki.com/2015/04/membuat-tulisan-di-postingan-tampil-di.html