Formulir Kontak

Nama

Email *

Pesan *

Membuat Tampilan 2 Kolom di Homepage

Aizzan Blog -- Hai sobat blogger, bagaimana upacaranya kemarin? semoga lancar dan penuh hikmat. Oh ya sebelumnya saya mau mengucapkan selamat hari jadi Indonesia yang ke 68 pada hari sabtu 17 Agustus 2013 kemarin, lomba apa nih yang sobat tunggu - tunggu saat agustusan seperti sekarang ini? 


Pastinya ya banyak sekali namun yang paling di tunggu - tunggu yaitu panjat pinang, balap karung, balap kelereng, makan kerupuk, dan balap bakiak.  
Nah, untuk pada kesempatan di malam ini saya akan berbagi sedikit tentang tutorial cara membuat tampilan dua kolom di homepage, dimana yang semula postingan di homepage hanya ada satu kolom sekarang bisa menjadi dua kolom postingan di homepage blog sobat. Untuk demonya sudah saya terapkan pada blog ini bisa langsung cek di beranda dan di bawah ini adalah screenshotnya

Membuat tampilan 2 kolom di homepage
Klik pada gambar untuk memperbesar
Langsung saja sobat mengikuti tahap - tahap di bawah ini untuk membuat tampilan 2 kolom di homepage
1. Login ke blogger sobat
2. Masuk ke "Template"
3. Backup data dulu sebelum lanjut untuk "Edit HTML"
4. Masuk ke "Edit HTML"
5. Cari kode ]]></b:skin>, lebih cepat tekan Ctrl+F (F3)
6. Masukan kode di bawah ini tepat di bawah kode ]]></b:skin>
    <style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-wrapper {width:650px;padding-left:5px;padding-right:5px;border-right:1px solid #ddd;}
h2.date-header, .jump-link, .feed-links, .post-footer {display:none;}
#blog-pager {width:98%; clear:both;}
.post {margin:.01em 10px 10px 0;background:none;width:250px;height:200px;float:left; border-bottom:3px double #ddd; positon:relative;overflow:hidden;}
.post-body {margin:0.2em 0 .75em;line-height:1.4em;font-size:13px;color:#111;overflow:hidden;}
.post h3 {height:32px;font-size:15px;font-weight:bold;line-height:1.3em;color:#102D57;text-transform:none;font-family:Arial;}
.post h3 a, .post h3 a:visited, .post h3 strong {font-weight:bold;color:#102D57;}
.post h3 strong, .post h3 a:hover {color:#000;text-decoration:underline;}
</b:if>
</style>
7. Setelah itu simpan dan lihat hasilnya

Semoga artikel di atas dapat membantu dan bermanfaat buat sobat, jika ada kritik maupun saran bisa sobat sampaikan melalui kolom komentar di bawah ini dan bisa juga melalui form Contact Me.
Previous
Next Post »
0 Komentar