POSTINGAN BERGESER KEKANAN KETIKA DIBUKA

Magazine template, memiliki keistimewaan dalam penempatan postingan. Keistimewannya itu, pada beranda atau pada halaman pencarian, semua postingan berada di sebelah kiri dan sidebar di sebelah kanan, tetapi sewaktu kita buka, postingan akan bergeser ke sebelah kanan dan sidebar jadi di sebelah kiri.
Setelah dipelajari kode-kode pada Magazine Template, ternyata ada penambahan kode untuk mengatur tampilan yang dimaksud diatas.
Sekarang EPG Studio sendiri menggunakan trik ini dengan maksud sebagai variasi agar tampian postingan tidak terlalu monoton.
Jika anda berminat untuk menerapkan pada blog kesayangan anda, ikutilah langkah-langkah di bawah ini :

• Masuk ke Blogger
• Pilih Rancangan pada tab Edit HTML
• Copy code dibawah ini kemudian paste tepat dibawah kode ]]></b:skin>
  
  
  
  <style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#main-wrapper {
width: 590px;/*samakan dengan lebar main-wrapper anda*/
float: right;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
border: 1px none #FFFFFF;
width:470px;/*samakan dengan lebar sidebar anda*/
float:left;
word-wrap: break-word;
overflow: hidden;
padding:5px 5px .25em;
margin-bottom:0px;
}
</b:if>
</style>
  
  
• Kode diatas hanya berlaku pada template yang memiliki satu sidebar.
• Jika Sidebar blog anda memilik lebih dari satu, harus ditambahkan pada kode diatas yang diletakkan dibawah sidebar-wrapper.
• Sebagai contoh, coba anda perhatikan kode yang digunakan EPG Studio (6 sidebar)
  
  
  <style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#main-wrapper {
width: 590px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
#sidebaratas-wrapper {
border: 1px none #FFFFFF;
width:470px;
float:left;
padding:5px 5px .25em;
margin-bottom:0px;
}
#sidebar-wrapper {
width: 230px;
float: left;
border:0px solid $bordercolor;white;
padding:5px 5px .25em;
word-wrap: break-word;
overflow: hidden;
}
#sidebarbaru-wrapper {
width: 230px;
float: left;
padding:5px 5px .25em;
padding-right:5px;
word-wrap: break-word;
overflow: hidden;
}
#sidebartengah-wrapper {
border: 0px solid #0066CC;
width:470px;
float:left;
padding:5px;
margin-bottom:0px;
}

#sidebarbawah-wrapper {
width: 230px;
float: left;
border:0px solid $bordercolor;white;
padding:2.5px 2.5px 2.5px .5em;
word-wrap: break-word;
overflow: hidden;
}
#sidebarbawahbaru-wrapper {
width: 230px;
float: left;
border:0px solid $bordercolor;white;
padding:5px 5px .25em;
word-wrap: break-word;
overflow: hidden;
}
</b:if>
</style>
• Klk tombol Simpan Template.
• Selesai.

Posted in: Tutorial