Langsung ke konten utama

Cara Membuat Sidebar 3 Kolum Di Bawah Header


Bagaimana cara menambah widget agar terlihat lebih variasi, kalau ternyata side template terasa kurang sementara banyak pernak-pernik blog yang ingin kita tempatkan. Disini saya kasih solusinya yaitu dengan menambah widget 3 kolom yang saya khususkan peletakannya di bawah header, sedangkan untuk yang diatas footer akan saya infokan di tulisan berikutnya. Untuk sobat Asob (Asep Sutisna on Blog), yang sangat memerlukan info ini silakan ikuti caranya dibawah ini. Kita langsung menuju ke tkp pengeditan templatenya.

Silahkan login ke blogger, buka Id sobat dan langsung tuju Tata Letak., pilih tab Edit HML, jangan di klik Expand Template Widget, malah nantinya akan bikin pusing sobat saja, gimana kalau pas lagi nggak ada obatnya..D:)

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(http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkUYNZmPxI
/AAAAAAAAA4U/se2boblD4-M/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;
}

Setelah sobat 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 SOBAT (Header)' type='Header'/>
</b:section>
</div>

Setelah itu Sobat letakkan kode css ini tepat di bawah  kode css di atas :

<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.

Kelar sudah proses cara buat widget 3 kolom di bawah header, silakan sobat cek hasilnya, moga berhasil dan bisa bermanfaat buat sobat Asob.

>> Wassalam

"Ketika melakukan sesuatu bukan yang dipikirkan bagaimana hasilnya, tapi bagaimana proses menuju hasilnya"

Komentar

  1. gak muncul gan ! gimana gan ??? pdhal udh sesuai dg intruksi di atas !!!

    BalasHapus
  2. Kang sion, biasanya setelah di save ada 3 kolom ke bawah, bukan ke samping..nah isi apa saja misalnya gambar, recent post, dll, pasti muncul...posisinya 3 colom ke samping..tes lagi y..

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Jarak Tempuh Antar Kota & Antar Provinsi (di Pulau Jawa-Madura-Bali)

A. RUTE JAKARTA – JAWA TIMUR – BALI 1. Jakarta-Denpasar : Jakarta-cikampek (via tol) = 73 km, Cikampek-Sukamandi-Ciasem-Pamanukan = 46 km, Pamanukan-patrol-kandanghaur-lohbener = 56 km, Lohbener-Jatibarang-Palimanan (via tol)-Plumbon-Kanci = 74 km, Kanci-Losari = 29 km, Losari-Brebes = 27 km, Brebes-Tegal = 9 km, Tegal-Pemalang = 27 km, Pemalang-Comal-Pekalongan = 31 km, Pekalongan-Batang-Weleri-Kendal = 50 km, Kendal-Kaliwungu-Semarang = 12 km, Semarang-Demak = 18 km, Demak-Kudus = 25 km, Kudus-Pati = 24 km, Pati-Rembang = 35 km, Rembang-Tuban = 100 km, Tuban-Babat = 28 km, Babat-Lamongan = 27 km, Lamongan-Gresik = 28 km, Gresik-Surabaya = 15 km, Surabaya-Bangil-Pasuruan = 64 km, Pasuruan-Probolinggo-Situbondo-Ketapang = 246 km, Gilimanuk-Negara-Tabanan = 108 km, Tabanan-Denpasar = 26 km. Total Jarak Tempuh = 1178 km 2. Jakarta-Banyuwangi : Jakarta-cikampek (via tol) = 73 km, Cikampek-Sukamandi-Ciasem-Pamanukan = 46 km, Pamanukan-patrol-kandanghaur-lohbener = 56 km, L...

Teks Bacaan Gema Takbir Malam Lebaran

Ketenangan hati dan jiwa setelah melaksanakan ibadah puasa bulan ramadhan, terasa begitu indah ketika dikumandangkan gema takbir " Allahuakbar, Allahuakbar, Allahuakbar, Walillahilham " Dan malam lebaran adalah waktunya Takbiran.  Dan inilah  teks bacaan atau lafadz  takbir malam lebaran (Idul fitri/Idul adha). Lengkap dengan teks arab dan arti serta bentuk teks takbir versi panjang (sempurna) a. Takbir umumnya  : الله اكبر- الله اكبر- الله اكبر لااله الاالله والله اكبرالله اكبر ولله الحمد Allaahu akbar.. Allaahu akbar.. Allaahu akbar..... Laa - ilaaha - illallaahu wallaahu akbar. Allaahu akbar walillaahil - hamd. Artinya : Allah maha besar (3X) Tiada Tuhan selain Allah Allah maha besar Allah maha besar dan segala puji bagi Allah. b. Baca'an yang sempurna  : الله اكبر كبيرا والحمد لله كثيرا وسبحان الله بكرة واصيلا, لااله الا الله وحده, صدق وعده, ونصر عبده, وأعزجنده وهزم الاحزاب واحده, لااله الاالله ولانعبد الاإياه, مخلصين له الد ين, ولو كره الكا فرون, و...

‘Love Story’ trilogi cinta abadi Acha & Irwansyah

Mengawali tahun 2011, rumah produksi Kharisma Starvision Plus menghadirkan film drama cinta Love Story , yang kembali diperankan oleh aktor dan artis Acha Septriasa dan Irwansyah. Sebelum ini, keduanya dipertemukan dalam Heart (2006) dan Love Is Cinta (2007). Ini menjadi 'trilogi' dari karya sutradara Hanny R Saputra dan penulis skenario Armantono.   Kisah Love Story berangkat dari ‘cinta terlarang’ yang di film ini digambarkan sebagai mitos di daerah, bahwa cinta dari dua desa yang terpisahkan sungai akan mengakibatkan bencana. Pendekatan tradisi ini dilakukan melalui diskusi panjang produser, sutradara dan penulis skenario ketika ceritera akan ditulis. "Awalnya perbedaan agama yang akan diambil sebagai landasan ceritera, tetapi akhirnya disadari bahwa pendekatan latar belakang cinta terlarang ini bukanlah esensi dari kisah cinta dalam Love Story. Justru perjuangan bahwa cinta adalah anugerah yang menularkan hal-hal positif lebih penting untuk disampaikan,...