Cari Artikel Blog Ini

Total Tayangan Laman

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.

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
3 Comments

3 komentar :

Kak I'im mengatakan...

kok gak jadi??

Lucky Melsandy mengatakan...

berhasil ,, tapi jelekk elihatannya ,, karna label jadi besar ,, sdangkan postingan nya kecil gan ,,

bloger-kmc mengatakan...

Blognya keren gan
kunjungi blog saya juga ea
http://bloger-kmc.blogspot.com

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!