TERIMA KASIH ATAS KUNJUNGANNYA,SEMOGA BISA BERMANFAAT BAGI ANDA

Cara membuat 3 kolom di bawah header blog

Diposkan oleh chimplunk on Senin, 07 Mei 2012

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(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; }

  • 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,,,,,,,

{ 1 komentar... silahkan berkomentar sesuka anda...bebas tapi sopan,terima kasih anda telah berkomentar add one }

adsa slims mengatakan... Reply Comment

menarik gan minta cara buat header tulisan bergerak kaya blog ini gan bisa help.... blz ya gan hehhe

Poskan Komentar