lihat juga

Monday, August 6, 2012

Postingan di home page menjadi 2 kolom

B
anyak cara untuk membuat tampilan sebuah blog menjadi lebih simple, lebih sederhana tapi nampak berkualitas (hanya menurut author),seperti kita ketahui bersama tampilan sebuah blog yang default bloger hanya menampilkan 1 kolom tempat postingan di home page dengan deretan artikel yang panjang ,bayangkan jika akan menampilkan 6 postingan pada sebuah home page ,saya yakin jika hal itu kita lakukakn akan berimbas pada looding blog yang tentu saja sangat merugikan buat blog kita,karena saya yakin pengunjung yang datang ke blog kita butuh kenyamanan (makanya juga kang mahfid tidak memasang kode verifikasi pada koklom komentar dan shoutbox,dengan tujuan tidak membuat repot para pengunjung blog)nah untuk mengatasi maslah looding blog tersebut salah satunya pernah kita bahas beberapa waktu yang lalu yaitu tentang sembunyikan widget sidebar | untuk mempercepat looding blog .Nah untuk pertemuan kali ini pun kang mahfid akan menambahkan satu tutorial lagi untuk mengatasi masalah looding blog tersebut dengan cara membuat postingan di home page menjadi 2 kolom , ke untungan menjadikan postingan blog di home page menjadi 2 kolom salah satunya adalah membuat blog nampak rapi / sederhana akan tetapi nampak berkualitas *.untuk melihat contoh nya silahkan lihat gambar di bawah ini :
Postingan di home page menjadi 2 kolom

Nah setelah melihat contoh di atas dan sobat ingin membuat nya silahkan ikuti tutorialnya seperti di bawah ini
  1. LOgin ke blogger 
  2. setelah masuk ke dasboard pilih Edit HTML (jangan lupa download template dulu untuk berjaga jaga ke mungkinan kesalahan.
  3. dengan bantuan Ctrl + F cari kode yang seperti di bawah ini (atau hampir sama).post{margin:0.5em  0.5em;background:white} di antara kode 0.5em  0.5em sisipkan kode auto
  4. Sehingga kode akan menjadi seperti contoh di bawah ini :
    .post{margin:0.5em auto 0.5em;background:white}
  5. selanjutnya cari kode ]]></b:skin> lalu taruh kode di bawah ini tepat di bawah kode ]]></b:skin> berikut kode nya:
  6. <b:if cond='data:blog.pageType != &quot;item&quot;'>     <style>     .post {     width:280px;     height:130px;     margin-right:20px;     overflow:hidden;     float:right;     border:3px double #808080;-webkit-border-top-left-radius: 30px; -webkit-border-bottom-right-radius: 30px; -moz-border-radius-topleft: 30px; -moz-border-radius-bottomright: 30px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;-webkit-box-shadow: 4px 6px 2px 2px #000000; box-shadow: 4px 6px 2px 2px #000000;     } .post-body{color:#555;margin: 5px 10px 5px 10px;padding:0;font-family:&#39;tahoma&#39;,Helvetica,Sans-serif;font-size:11px;line-height:16px;text-align:justify} </style></b:if>
  7. Nah yang terakhir Save template
Keterangan :untuk menyesuaikan dengan template rubah kode warna biru sedangkan untuk merubah border kolom postingan sobat bisa rubah kode yang di blog warna orange /atau bisa di hilangkan ...selamat mencoba dan bereksperiment ..wassalam
Jika Artikel ini bermanfaat buat sobat semua tolong bantuannya untuk mengklik ping fast  my blog, website, or RSS feed for Free Terima kasih

ads

Ditulis Oleh : gdfysx Hari: 9:00 PM Kategori:

0 comments:

Post a Comment

surf