Hay sobat............................................!!
Tutorial saya kali ini mengenai tentang bagaimana cara membuat atau menambah kolom dibawah header
tidak jauh berbeda dengan tutorial yang lalu Membuat Kolom Baru diatas Posting Untuk kali ini saya akan menjelaskan cara membuat atau menambah 4kolom dibawah header,
singkat saja untuk membuat 4kolom dibawah header sobat masuk dulu ke blogger Klik disini ingat masuklah dengan akun gmail blog sobat jangan gunakan akun twitter atau facebook
setelah masuk ke dashbor masuk ke Menu Rancangan lalu Edit Html jangan lupa centang kotak kecil yang ada pada ujung halaman....
aet sepertibiasa sebelum sobat mengedit template sobat ada baik nya sobat download dulu template sobat
untuk berjaga jaga bila terjadi error saat pengeditan.
ok kita lanjut ke cara membuat atau menambah 4kolom dibawah header
Sobat bisa ganti kode berwarna merah pada kode diatas, itu adalah nilai lebar setiap gadgetnya. Silahkan sobat sesuaikan dengan lebar template milik sobat.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel maupun tutorial terbaru dari saya, silahkan anda gunakan tombol berlanggan artike yg ada di ujung atas sebelah kiri
Tutorial saya kali ini mengenai tentang bagaimana cara membuat atau menambah kolom dibawah header
tidak jauh berbeda dengan tutorial yang lalu Membuat Kolom Baru diatas Posting Untuk kali ini saya akan menjelaskan cara membuat atau menambah 4kolom dibawah header,
singkat saja untuk membuat 4kolom dibawah header sobat masuk dulu ke blogger Klik disini ingat masuklah dengan akun gmail blog sobat jangan gunakan akun twitter atau facebook
setelah masuk ke dashbor masuk ke Menu Rancangan lalu Edit Html jangan lupa centang kotak kecil yang ada pada ujung halaman....
aet sepertibiasa sebelum sobat mengedit template sobat ada baik nya sobat download dulu template sobat
untuk berjaga jaga bila terjadi error saat pengeditan.
ok kita lanjut ke cara membuat atau menambah 4kolom dibawah header
Sobat Bisa Cari kode di bawah ini atau yang
mirip dengan kode ini :
</header>
Catatan : Setiap template biasanya berbeda kodenya. Bila tidak
menemukan kode seperti diatas, anda bisa lihat contoh pada template yang
berbeda dengan ciri mirip seperti berikut :
<div class='region-inner header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>
Lalu letakkan kode dibawah ini,
setelah kode seperti diatas :
<div
id='kolom-bawah-header-container'>
<div id='kolom-bawah-header1' style='width: 225px; float: left; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='Bawah header 1' type='Text'/>
</b:section>
</div>
<div id='kolom-bawah-header2' style='width: 225px; float: left; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='Bawah header 2' type='Text'/>
</b:section>
</div>
<div id='kolom-bawah-header4' style='width: 225px; float: right; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-4' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Bawah header 4' type='Text'/>
</b:section>
</div>
<div id='kolom-bawah-header3' style='width: 225px; float: right; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-3' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Bawah header 3' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Catatan :<div id='kolom-bawah-header1' style='width: 225px; float: left; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='Bawah header 1' type='Text'/>
</b:section>
</div>
<div id='kolom-bawah-header2' style='width: 225px; float: left; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='Bawah header 2' type='Text'/>
</b:section>
</div>
<div id='kolom-bawah-header4' style='width: 225px; float: right; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-4' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Bawah header 4' type='Text'/>
</b:section>
</div>
<div id='kolom-bawah-header3' style='width: 225px; float: right; margin:0; '>
<b:section class='kolom-bawah-header' id='kolom-bawah-header-3' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Bawah header 3' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>
Sobat bisa ganti kode berwarna merah pada kode diatas, itu adalah nilai lebar setiap gadgetnya. Silahkan sobat sesuaikan dengan lebar template milik sobat.
Kemudian anda cari lagi kode di bawah ini atau yang mirip
dengan kode ini :
]]></b:skin>
Copy kode dibawah ini dan paste atau
letakkan kode dibawah ini, sebelum kode ]]></b:skin>:
#kolom-bawah-header-container { border: .3px dotted #cccccc;}
.kolom-bawah-header { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}
.kolom-bawah-header h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}
.kolom-bawah-header ul { list-style:none; margin:0 0 0; padding:0 0 0;}
.kolom-bawah-header ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}
.kolom-bawah-header .widget {margin:0 0 .5em; padding:0 0 1em;}
.kolom-bawah-header { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}
.kolom-bawah-header h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}
.kolom-bawah-header ul { list-style:none; margin:0 0 0; padding:0 0 0;}
.kolom-bawah-header ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}
.kolom-bawah-header .widget {margin:0 0 .5em; padding:0 0 1em;}
lalu save template sobat selesai dueh mudah bukan....
Selamat
mencoba dan Semoga bermanfaat....Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel maupun tutorial terbaru dari saya, silahkan anda gunakan tombol berlanggan artike yg ada di ujung atas sebelah kiri
0 komentar:
Posting Komentar
Tinggalkan jejak sobat dengan berkomentar dikolom komentar,saling menjalin persahabatan saling berbagi ilmu dan pengetahuan blogger sukses
[para blogger yg bersedia berkomentar di Media Online URL sobat akan Admin masukan ke daftar Blogger Link]