hanya sekedar arsip

18 Des 2013

Membuat Hompage Menjadi 2 Kolom

Setelah selesai bagi-bagi template Mbah Siyam Clean, kali ini saya mau share salah satu fitur yang ada di template tersebut. Fitur apa?yang mana?. Judul nya aja Membuat Hompage Menjadi 2 Kolom, jadi yang mau saya share adalah fitur itu lah.
Sebelum

Sesuah

Menerapkan 2 kolom pada hompage blog

Letakkan css berikut di bawah  ]]></b:skin>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post {width:250px;height:200px;margin:0 20px 5px 0;overflow:hidden;float:left;}
</style>
</b:if>
Keterangan :
  1. Jika kamu ingin memberi backround sisipkan kode background:#00000;   di antara kode .post {width:250px;height:200px;margin:0 20px 5px 0;overflow:hidden;float:left;} Sehingga menjadi .post {background:#00000;width:250px;height:200px;margin:0 20px 5px 0;overflow:hidden;float:left;} 
  2.  Atur lebar (width) & (height) sesuai dengan ukuran post anda, {width:250px;height:200px;
  3. Atur jarak antar postingan   [margin:0 20px 5px 0;]
Jika blog kamu di pasang read more, atur jumlah kata & ukuran gambar pada readmore tersebut agar sesuai
contoh:
Pada script read more blog kamu tertulis kode



<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250; ← perkecil angka ini
summary_img = 250; ← perkecil angka ini
img_thumb_height = 200; ← perkecil angka ini
img_thumb_width = 200; ← perkecil angka ini
</script>
<script type='text/javascript'>
.............
</script>
 
Maka perkecil kode yang ditunjukan pada kotak di atas, sehingga tampilannya dapat sesuai


Selanjutnya Cari kode css yang mirip seperti kode
.post {margin:0.5em 0 1.5em;}
setelah ketemu sisipkan kode tersebut dengan auto sehingga menjadi 
.post {margin:0.5em auto 0 1.5em;}


Penambahan auto ini sebenarnya hanya tambahan saja agar jarak antar artikel sesuai. Bisa anda tambahkan, bisa juga tidak, namun untuk mengetahuinya apakah perlu menambahkan auto, silahkan preview blog terlebih dahulu dan bandingankan hasilnya antara ada dan tidak adanya auto                         
 Kemudian klik save


Holla...blog kamu sudah jadi 2 kolom, walaupun belum rapi jangan kaget dulu ya sekarang langkah perapiannya, nah sekarang newer post atau sejenisnya berada sejajar dengan postingan, sehingga kita harus mengembalikannya ke posisi yang seharus nya, yaitu di bawah postingan.
Kamu cari kode  <b:include name='nextprev'/> kalau sudah ketemu letakkan kode berikut di bawah nya <div style='clear: both;'/> 

Hasilnya :
<b:include name='nextprev'/>

<div style='clear: both;'/>


Nah sekarang template kamu udah jadi 2 kolom, demikian cara membuat hompage menjadi 2 kolom semoga dapat bermanfaat bagi sobat mbah-siyam semua

Loading...