Cara Membuat Tulisan di Postingan Tampil di Sidebar atau Membuat Keterangan yang biasa kita lihat pada website yang membagikan Template ibarat Templateism, Soratemplates, ThemeXpose dan sebaginya.
Pada tutorial kali ini script yang aku bagikan bukan hanya script untuk menampilkan goresan pena pada postingan saja tapi juga konten keterangan ibarat website share Template. Contohnya sanggup kita lihat pada gambar di atas ada tombol Live Preview berserta deskripsinya dan di bawahnya ada konten terpisah adalah ada tombol Buy Now atau sanggup di ganti dengan Free Download, dan di bawah tombol tersebut ada list fitur perhiasan untuk versi premiumnya.
Bagi yang masih gundah untuk tampilan deskripsi template ibarat gambar di atas silahkan lihat demonya :
Nah bagi teman yang tertarik untuk memasangnya, silahkan ikuti tutorial di bawah ini :
1. Masuk ke Blogger > Template > Edit HTML > kemudian letakan arahan di bawah ini sempurna 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 arahan di bawah ini sempurna di atas arahan
</head><script type='text/javascript'> /*<![CDATA[*/ $(document).ready(function(){ $('a[name="details"]').before($('#Theme-details').html()); $('#Theme-details').html(''); }); /*]]>*/ </script> 3. Cari arahan untuk sidebar blog, misalnya
<aside id='sidebar-wrapper' atau <div id='sidebar-wrapper kalau sudah sanggup letakan arahan di bawah ini sempurna di atas arahan tadi.<a name='details'/> <div class='clear'/> Tag Sidebar wrapper pada template tidak semuanya sama, jadi teman sanggup mencari ibarat
id='sidebar-right' atau id='sidebar' dan sebagainya. Contoh Peletakan arahan pada langkah ke 3 lihat pada gambar di bawah ini :
 |
| Contoh Penempatan arahan pada langkah ke3 |
4. Pada ketika membuka postingan gres atau editor postingan klik HTML kemudian tambahkan arahan di bawah ini dan letakan di bab 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 arahan di atas tidak akan tampil di bab postingan melainkan akan berpindah ke sidebar.
Atau kalau ingin HTML originalnya (hanya tulisan) kodenya ibarat 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: https://jalantikusgo.blogspot.com/search?q=experience-you-need-this-templateSumber https://www.idblanter.com
