Ad Unit (Iklan) BIG

Cara membuat 3 kolom di bawah header blog

Cara membuat 3 kolom di bawah header blog - Hallo sahabat Update Terkini, Pada Artikel yang anda baca kali ini dengan judul Cara membuat 3 kolom di bawah header blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara membuat 3 kolom di bawah header blog
link : Cara membuat 3 kolom di bawah header blog

Baca juga


Cara membuat 3 kolom di bawah header blog

Bagi sobat ch1mplunk yang senang banget animasi blogger pasti sangat memerlukan tempat yang cukup banyak dan kadang tak tersedia di elemen laman kita apalagi sobat blogger yang suka sekali memasang iklan.Jangan khawatir pasti masih ada jalan ketika kita masih berusaha.
nah, di sini ch1mplunk.blog akan share sebuah tutorial blog yang sangat berguna bagi sobat yang ingin tampilan blognya kelihatan lebih rame......
contoh hasil elemen laman:

langsung saja ke proses editing:
  • Silahkan login ke blogger.
  • Lansung ke Tata Letak.
  • Pilih tab Edit HTML.
  • Jangan di klik Expand Template Widget, karena akan memusingkan anda bila di klik juga gak masalah.
  • Letakkan kode css berikut ini diatas kode ]]></b:skin> 

Klik Untuk melihat
/* –- 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/AVvXsEiDHY8mhuWvFkG7oqialGfAigy3Aa-gP7j3bRzCQ0SF8J15w84F9VoSWuBwM8ykoeDOuWV4jk9pDVOV-UNJYi_LB_-MZPKiG6IioGWyM_Q5zfrFnz9Js5yBMpVlY_fCwWpnXOj7QkQdc2-h/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.
untuk keberhasilan pembuatan 3 kolom di bawah header ini tergantung dari template anda,apakah template anda compatible dengan css ini atau tidak,....
kebanyakan tutorial ini berjalan dengan baik.
semoga bermanaat,,,,,,,


Demikianlah Artikel Cara membuat 3 kolom di bawah header blog

Sekianlah artikel Cara membuat 3 kolom di bawah header blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara membuat 3 kolom di bawah header blog dengan alamat link https://re-plye.blogspot.com/2012/05/cara-membuat-3-kolom-di-bawah-header.html

Related Posts

Posting Komentar

Subscribe Our Newsletter