Membuat 3 Kolom di Bawah Header Blogspot

Apa teman-teman blogger semua ingin tampilan blognya tambah ramai? 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.

Seperti Gambar berikut ini:


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/AVvXsEgumqoDxRCNseB3VCxRrf8VmCAdgpTTWW1tKK6iMdBVS5VD2MqWsTfLekQM5_LVnDhYVyo7eavwcPE5P3k1DZKUUyhlKAz2F4zGgoHk0Ry2yQ3jJVZN66P0Avy_C8SqpmVypGcgfOsGRUDD/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.
Semoga bermanfaat dan bisa membuat blog anda jadi ramai.

Related Posts:

  • Cara Membuat Kotak Scroll Dipostingan BlogSlamat Bertemu kembali sobat blogger semua,kita bertemu lagi dipostingan blog,kali ini saya akan berbagi Cara membuat Kotak Scroll Dipostingan Blog.Bagi anda yang masih pemula,postingan ini tentulah sangat berguna,tapi bagi y… Read More
  • Cara setting custom domain pada bloggerBagaimana cara mengganti alamat blogspot menjadi nama domain sendiri? Setelah sukses registrasi domain nama-anda.com di indositehost.com Anda juga harus sudah selesai setting DNS domain tersebut diarahkan ke IP server blogge… Read More
  • Membuat 3 Kolom di Bawah Header BlogspotApa teman-teman blogger semua ingin tampilan blognya tambah ramai? Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di bawah header. W… Read More
  • Cara Cepat Membuat Desain Cover Kali ini Saya akan share bagaimana cara membuat Lembar presentasi , makalah, atau buku yang dibuat dalam file microsoft word biasanya akan dipublikasikan dalam bentuk print out. Isi dari file yang akan dicetak mungkin s… Read More
  • Cara Membuat Video CD Dari KomputerSelamat berjumpa kembali Diblok Yukam Raya,kali ini saya akan berbagi bagai mana Cara Membuat Vieo CD Dari Komputer,Anda mungkin pernah merekam acara ulang tahun anak anda, acara pernikahan teman anda atau acara lainnya denga… Read More

0 komentar:

Catat Ulasan