Cara Membuat Tiga Kolom Di Bawah Header Pada Blog
By Unknown - Friday, September 7, 2012
Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat
ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di
bawah header. Widget 3 kolom dibawah header ini sebenarnya bisa Anda
tambahkan jika pada bagian sidebar template sudah penuh dan terlalu
panjang. Sebagai alternatif untuk meletakkan kode html ataupun
javascript yang mungkin andaperlukan. Kurang lebih sama dengan postingan
saya yang dulu tentang membuat multi kolom yang diletakkan di bagian
bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya
dibawah header.
Baiklah langsung menuju lokasi pengeditan template-nya.
- Silahkan login ke blogger.
- Tuju Tata Letak.
- Pilih tab Edit HML.
- Jangan di klik Expand Template Widget, karena akan memusingkan anda.
- Letakkan kode css berikut ini diatas kode ]]></b:skin>
-
/* –- Top --*/#top {background:#fff;margin-top:10px auto;width:960px;overflow:hidden;font-size:12px;padding:10px;}#top h2 {background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;font-size:14pt;font-weight:400;text-align:center;font-style:normal;line-height:1.3em;color:#fff;padding:5px;margin-top:-10px;margin-left:-10px;margin-right:-10px;}#top ul {color:#333;margin:0;padding:0;}#top ul li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSHVaCSLVkp-vnXQ5nG5yHVy7CiN2oiqKQZLyZq01ZBw3PU2NrKdzjhy-mMc_VSqGEk8xL7PQu2zZJOrC55kqXoqMOcjJEN9X7NGV9Bk1mGA2r_kL8rVVc-D_GcK9MK-cKIubkfXk6zxrF/s320/b3.gif) no-repeat;list-style-type:none;border-bottom:1px dashed #CCC;margin:0 0 10px;padding:0 0 5px 20px;}#top ul li a:hover {margin:0px 0px 5px;padding:0px;}#topcenter {width:300px;float:left;margin-left:10px;background:#fff;padding:10px}#topleft {width:280px;float:left;margin-left:10px;background:#fff;padding:10px;}#topright {width:280px;float:right;margin-left:10px;background:#fff;padding:10px;}
- Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head><div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='JUDUL BLOG ANDA (Header)' type='Header'/></b:section></div>
- Kemudian letakkan kode berikut ini tepat setelah kode diatas : <div id='top'><b:section class='top' id='topleft' preferred='yes' showaddelement='yes'></b:section><b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'></b:section><b:section class='topright' id='topright' preferred='yes' showaddelement='yes'></b:section></div>
- Simpan Template.
Follow our blog on Twitter, become a fan on Facebook. Stay updated via RSS
0 komentar for "Cara Membuat Tiga Kolom Di Bawah Header Pada Blog"