Cara Membuat Keterangan dan Tombol Artikel Tampil di Sidebar
JejakSeru.com - Kali ini saya akan membahas Cara Membuat Keterangan dan Tombol Artikel Tampil di Sidebar. Umumnya cara ini digunakan untuk blog yang membagikan template seperti Sore Templates, Theme Xpose, dll. Pada pembahasan kali ini script yang saya bagikan bukan hanya menampilkan tulisan pada artikel saja tetapi juga konten keterangan seperti website share template. Contohnya bisa kamu lihat pada gambar di bawah ini.
Berikut Cara Membuat Keterangan dan Tombol Artikel Tampil di Sidebar
Langkah 1 : Masuk ke 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}
Langkah 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>
Langkah 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 kamu bisa mencari seperti id='sidebar-right' atau id='sidebar' dan sebagainya.
Langkah 4 : Simpan.
Langkah 5 : Pada saat membuat artikel 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 artikel, melainkan akan berpindah ke sidebar.
Atau jika kamu 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.
Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.