Cara membuat bagian postingan tampil disidebar - Membuat sebagian postingan tampil diside bar pertama kali saya lihat diblog yang membagikan themplate blogger seperti Sora Themplate dan kemudian saya mulai tertarik saat melihat blog idnthem.com juga menampilkan bagian postingan tampil disidebar. Postingan ini menampilkan informasi tombol demo, tombol download dan keterangan harga dan lain lain, untuk demonya silahkan lihat disini


Sebelum menerapkan trik ini sebaiknya kamu mengenali dulu bagian / elemen id class yang digunakan pada themplate, kode id class biasanya diawali dengan tanda tagar (#) atau titik (.) , misalnya seperti potongan kode CSS dibawah ini :

.mega-dropdown{position:....
.sidebar .widget{margin.....


Jika kamu sudah mengetahui elemen elemen yang digunakan pada themplate, maka akan mempermudah kamu saat membuat postingan khusus yang akan ditampilkan pada bagian sidebar

Cara membuat bagian postingan tampil disidebar

Log in ke blogger.com, pilih nama blog kamu, pilih menu themplate

Lalu pilih Thema, Edit HTML masukan kode CSS dibawah ini sebelum kode ]]></b:skin>  atau sebelum kode </style>

/* CSS Store 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}

Langkah selanjutnya letakan kode dibawah ini sebelum kode </body>

<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function(){
$('a[name="details"]').before($('#Theme-details').html());
$('#Theme-details').html('');
});
/*]]>*/
</script>

Cari kode sidebar yang digunakan pada themplate kamu, atau coba cari kode yang mirip dengan kode kode dibawah ini

<aside id='sidebar-idwrapper'
<id='sidebar-wrapper
<aside id='sidebar-wrapper'

Kalau pada themplate yang saya gunakan memakai kode ini

<div class='col-md-3 main-sidebar' role='complementary'>

Jika sudah ketemu letakan kode dibawah ini tepat dibawah kode sidebar kamu

<a name='details'/>
<div class='clear'/>


Silahka simpan themplate

Untuk mencobanya buat postingan, lalu pada bagian bawah postingan tambahkan kode ini , lalu publish

<div style="display: none;"><div id="Theme-details"><div id="store-style"><a class="storebutton but1" href="http://www.asis10.com/" rel="nofollow" target="_blank">Live Preview</a><br />
<div class="rio-ss idb">Cara membuat bagian postingan tampil disidebar keren keren keren .</div></div><div id="store-style"><a class="storebutton but2" href="http://www.asis10.com/" target="_blank">Free Download</a></div></div></div></p>
<span class='bottomshare'>

Silahkan dicoba coba dulu sampai berhasil

Demikianlah Cara membuat bagian postingan tampil disidebar, lihat juga artikel keren tentang blog Modifikasi halaman error 404, semoga bermanfaat
No comments