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 :
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqg7EqIv2_GWQtjpNtHUfmpZi-A8Z69zOO35aAeXmXKi6rntX8xNPndFVRatq-_WJfXFI8BaqzHKmTk3t140vnb4HruFqql97HWSBf9jNrKd6bDN-N2b2WpAUimuIg-TLDi94_4-gmYi0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSftG-Hf79xerl5qWUrh3DSlWT90zt1TI85qsFkxmE98VQQLiKa4q3i-xikNdGQ4UUHawJ7W_ojRxdBpiKtcOBC618TXzjNox1kZc-UDWqpeUM6lIxk6qWYAGNG10BgRZXvyGGfXpkfPj1/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs8_cnS0X1gmICZ0DMd-xZahGnsg3O818ZN-8vjbM04rtrWZts02ioVIJtnzUmLH0AVgsihFctgcuXTlEXV6xipOgveJvXIUEpvdekMfCLcmKNIN2p65n5dZOs5EsQC9BxazaAKGoq68w/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;
}
clear:both;
}
.box-column {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqg7EqIv2_GWQtjpNtHUfmpZi-A8Z69zOO35aAeXmXKi6rntX8xNPndFVRatq-_WJfXFI8BaqzHKmTk3t140vnb4HruFqql97HWSBf9jNrKd6bDN-N2b2WpAUimuIg-TLDi94_4-gmYi0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSftG-Hf79xerl5qWUrh3DSlWT90zt1TI85qsFkxmE98VQQLiKa4q3i-xikNdGQ4UUHawJ7W_ojRxdBpiKtcOBC618TXzjNox1kZc-UDWqpeUM6lIxk6qWYAGNG10BgRZXvyGGfXpkfPj1/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs8_cnS0X1gmICZ0DMd-xZahGnsg3O818ZN-8vjbM04rtrWZts02ioVIJtnzUmLH0AVgsihFctgcuXTlEXV6xipOgveJvXIUEpvdekMfCLcmKNIN2p65n5dZOs5EsQC9BxazaAKGoq68w/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...!!
- Kode yang berwarna hijau (width: 300) lebar kolom. Anda bisa mengaturnya sesuai dengan keinginan sobat.
Bambua*09
0 comments:
:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))
Post a Comment