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.

http://fiezie-musik.blogspot.com/2011/06/postingan-bergeser-kekanan-ketika.html

CARA MEMBUAT POSTINGAN BERGESER KE KIRI/KANAN

Cara membuat postingan bergeser ke kiri/kanan ketika kita buka, wah itu sihh perkara yang mungkin terdengar mudah ya.. dan klo mau lihat contohnya kamu bisa lihat postingan AKOID BLOGGER jika kamu klik postingannya maka postingan itu akan bergeser ke kiri. apakah benar artikel yang kamu cari seperti itu, jika benar ayo kita ikuti TUTORIAL nya..

Pertama-tama yang paling di utamakan Contreng Nama Expand Template Widge, kita akan minta bantuan ke NOTEPAD/MICROSOFT OFFICE WORD.

1. cari kode.

#main-wrapper {
  width: 600px;
  float: right;
  padding-top:15px;
  padding-right:10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
 }
     
     Copy kode itu samapai ke

#sidebar-wrapper {
  width: 390px;
   Margin-top: 10px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

Atau Klo lebih jelasnya lagi gini..

#main-wrapper {
  width: 600px;
  float: right;
  padding-top:15px;
  padding-right:10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
 }

#sidebar-wrapper {
  width: 390px;
   Margin-top: 10px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar1-wrapper {width: 195px;float:right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float
*/}

#sidebar2-wrapper {width: 195px;float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float
*/}

#sidebarbaru-wrapper {
  width: 390px;
   Margin-top: 10px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

Copy kode itu dan pastekan ke NOTEPAD.

2. Cari kode  ]]></b:skin> pastekan kode dibawah ini di bawah kode ]]></b:skin> . 
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

3. Pastekan kode yang disimpan di NOTEPAD tadi di bawah kode. 
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>

4. Tutup kode tersebut atau pastekan kode tersebut dengan kode dibawah ini.

</b:if>
</style>

Kode tersebut akan tampik seperti ini.

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#main-wrapper {
  width: 600px;
  float: left;
  padding-top:15px;
  padding-right:10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
 }

#sidebar-wrapper {
  width: 390px;
   Margin-top: 10px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar1-wrapper {width: 195px;float:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float
*/}

#sidebar2-wrapper {width: 195px;float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;/* fix for long non-text content breaking IE sidebar float
*/}

#sidebarbaru-wrapper {
  width: 390px;
   Margin-top: 10px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}
</b:if>
</style>

5. selesai..!! Semoga bermanfaat dan cepat di mengerti.

Keterangan : Ubah kode Float yang berwana HIJAU dengan arahan yang berebeda misalkan left berubah menjadi right dan sebaliknya right ubah menjadi left

http://akoid.blogspot.com/2012/05/cara-membuat-postingan-bergeser-ke.html