Subscribe to Revolution Church

Makalah Keperawatan

Blog Accessories

Blogger Pemula

Wednesday, August 3, 2011

Menambahkan 3 Kolom Element Widget Dibawah Header Pada Blogspot


Assalamualaikum Wr. Wb.

Menambahkan 3 Kolom Element Widget Dibawah Header Pada Blogspot

Kali ini saya akan memberikan tips bagaimana cara menambahkan Widgat dibawah header.

Banyak Template yang keren yang tidak dilengkapi dengan Widgad dibawah template.

Namun membuat widgat dibawah header ini berbeda dengan Membuat Widgat dibawah header bagian pertama. Tetapi kali ini yang saya akan jelaskan yaitu bagaimana cara Menambahkan 3 Kolom Element Widget Dibawah Header Pada Blogspot.

Oke langsung saja...!!
Langkah-langkah yang harus anda lakukan yaitu :

  • Seperti biasa Log in ke Blogger anda. [klik] disini
  • Pilih Tata Letak/Edit HTML.
  • Cari kode ]]></b:skin> (Gunakan saja pencarian cepat => Ctrl + F) 
  • Jika sudah dapat, silahkan sobat letakkan kode dibawah ini tepat diatas kode ]]></b:skin> 

#box-main-container {
clear:both;
}

.box-column {
background: #FFF url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU_vsmsTCI/AAAAAAAAA7E/_GZxN8lX-mM/s1600/sidebartop.gif) top no-repeat;
float: left;
width: 290px;
margin: 0 0 10px;
border: 1px solid #DDD;
padding:0px 10px 10px 10px;
border: 1px solid #DDD;
}

.box-column ul li {
background: #FFF url(http://4.bp.blogspot.com/-gMpCVF219Jc/TjlxZJy6mwI/AAAAAAAAAE8/E0YwusQL1Fc/s1600/Stock-Index-Down-icon.png) no-repeat;
list-style-type: none;
margin: 0 0 5px;
padding-left: 20px;
}

.box-column ul {
list-style-type: none;
margin: 0;
padding: 0;
}

.box-column h2 {
background: #333 url(http://4.bp.blogspot.com/_kMUpUqMmduA/SVU81KcgGkI/AAAAAAAAA5s/F42frbPwJ00/s1600/headline.png);
color: #FFF;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
text-align: center;
text-transform: uppercase;
margin: 0 10 10px;
padding: 3px 0 3px 7px;
}

  • Kemudian cari kode <div id='main-wrapper'>, jika sudah dapat letakkan kode dibawah ini tepat diatasnya :

<div id='box-main-container'>
<div id='box1' style='width: 300; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 300; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 300; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>


  • Simpan Template..Selesai...!!
Ket :
  • Kode yang berwarna hijau (width: 300) lebar kolom. Anda bisa mengaturnya sesuai dengan keinginan sobat.


Bambua*09

Artikel Terkait



0 comments:

Post a Comment

My Facebook

Statistik

 
BAMBUA*09. Copyright 2008 All Rights Reserved by Bambua*09 Blogger Template by BAMBUA*09