Chyberart - Setelah sekian lama gak otak-atik
halaman blog akhirnya saya tertarik untuk mencari tau bagai mana caranya
membuat 2 Kolom yang ada d
ibawah Postingan. Mungkin sahabat-sahabat
Blogger sudah pernah melihat Blog yang dibagaian bawahnya terdapat dua
kolom dibagian bawah postingnya. Biasanya kolom tersebut banyak
digunakan untuk menempatkan artikel terkait dan feed berlangganan
artikel.
Pada
tutorial kemaren shyberart berhasil memposting tutorial cara memasang
tukar link otomatis dan artikel artikel sebelumnya tetang cara menambah
kolom diatas header maupun dibawah header. jika berminat silahkan baca
lagi tutorialnya.
Ok...!
kita fokus lagi kecara menambah 2 kolom dibawah postingan. Kalau Diblog
saya ini Kolom tersebut saya gunakan untuk meletakan iklan.Nah sekarang
saya ingin berbagi bagaina cara membuat 2 kolom tersebut dibawah
postingan blog anda. Cara membuat nya gampangbanget masbro tinggal
menambahkan sedikit kode ke dalam template anda. Hasilnya silahkan anda
lihat dibagian bawah postingan ini, kurang lebih 2 kolom yang saya
maksutkan adalah seperti ini.
Ok biar gk kelamaan langsung saja kita bahas langkah-langkahnya sebagai berikut :
- Masuk keakun blogger anda
- Pilih Rancangan => Edit HTML
- Centang Expand Widget Template
- Ok...! sekarang Cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat diatasnya
#bawahpost{background:#262626
url(http://oketrik.googlecode.com/files/borderbg.gif) 49% 0
repeat-y;text-shadow:none;border:1px solid#4d4d4d;padding:15px;margin:0 0
10px;color:#a6a6a6}
#bawahpost .related-posts{font-weight:bold;width:48%;float:right}
#bawahpost .related-posts p{margin:0}
#bawahpost .related-posts ul{font-weight:normal;margin:2px 0 0 10px}
#bawahpost .langganan{width:46%;float:left;color:#a6a6a6}
#bawahpost.langganan form{margin:0;padding:0}
.clearfixed:after{content : ".";display:block;height:0;clear:both;visibility:hidden}.clearfixed {display : inline-block;}
- Setelah itu cari lagi kode <data:post.body/> (NB: klo kamu sudah memasang fasilitas Read more otomatis pilih kode yang kedua) dan taruh kode di bawah ini tepat di bawahnya
<div class='clearfixed' id='bawahpost'>
<div class='langganan'>
Taruh Widget disini (kiri)
</div>
<div class='related-posts'>
Taruh Widget disini (kanan)
</div>
</div>
NB :
kode atau tulisan yang berwarna biru tersebut dapat kamu ganti dengan
kode widget yang akan kamu pasang di bawah post misal widget lagganan
form dan related post (postingan terkait)
- Langkah terakhir tinggal klik simpan dan lihat hasilnya
benar-benar
mudah kan sobat sekarang giliran sobat untuk berkreasi. Selamat mencoba
dan semoga berhasil dan jangan lupad tinggalkan pesan anda disini :).