• About
  • Sitemap
  • Paket Wisata Karimunjawa
  • Karimunjawa Inadonesia
  • Karimunjawa Backpacker
  • Contact

Belajar Tips Trik Seo Blog Website

Cara Mudah Seo Blogger | Belajar Seo Untuk Pemula | Agar Blog Cepat Terindex Google Yahoo Bing | Blog untuk Bisnis Jualan Barang dan Jasa

  • Beranda
  • Sepakbola
    • Liga Inggris
    • Liga Spanyol
    • Liga Italia
    • Liga Indonesia
  • Tekno
    • Gadget
    • Internet
  • Entertainment
  • Trik dan Tips
  • Unik dan Menarik
  • Blogging
  • Belajar Ceo Blog
    • CaraMudahSeoBlogspot
    • CaraMudahSeoBlogger
    • NewbeNgeBlogger
    • BelajarBoger
Home » Belajar Ngeblogger » Cara Membuat Kolom Tambah Gadget di Bawah Header

Cara Membuat Kolom Tambah Gadget di Bawah Header

Jumat kemarin lepas sembahyang Isya sampai dini hari coba mengoprek template, kali ini yang dioprek adalah membuat kolom tambah gadget dibawah header untuk blogspot, tak tanggung2, empat buah gadget. saya pikir sediain dulu gadgetnya.. ngisinya kapan2 aja bila bahannya dah ada. Hasilnya bisa dilihat disini . Biar tidak lupa kalau nanti diperlukan lagi.. saya posting aja tentang Bagaimana Cara Membuat Kolom Tambah Gadget di Bawah Header. Caranya gampang2 susah , bener lho sebab kadang- kadang templatenya beda.. untuk itu perlu trial and error.
Blogger   Edit Layout
Langsung aja meluncur ke TKP, caranya seperti ini :
1. Masuk ke Dashboard , pilih Layout dan Edit HTML
2. Saya sarankan backup template lebih dulu, dengan cara Download Full Template. Siapa tahu nanti malah tambah ancur alias brantakan .
3. Setelah itu cari kode yang seperti ini ]]></b:skin>, dan tambahkan kode berikut diatasnya. ( Untuk mempermudah pencarian pakai Ctrl+F dan tulis/copas ]]></b:skin> di kotak Find yang disediakan, terus klik Next ).
#under_header1{
}
#under_header2{
float:left;
width:33.33%;
}
#under_header3{
float:left;
width:33.33%;
}
#under_header4{
float:right;
width:33.33%;
}
4. Langkah ke 3 sudah belum??. Kalau sudah coba cari kode berikut atau yang sekiranya mirip gitu lho...
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='Blog Doddy (Header)' type='Header'/>
</b:section>
</div>
dan tambahkan kode berikut dibawahnya :
<div id="under_header1">
<b:section class='header' id='underheader1' preferred='yes'/>
</div>
<div id="under_header2">
<b:section class='header' id='underheader2' preferred='yes'/>
</div>
<div id="under_header3">
<b:section class='header' id='underheader3' preferred='yes'/>
</div>
<div id="under_header4">
<b:section class='header' id='underheader4' preferred='yes'/>
</div>
5. The end alias selesai, tinggal Save Template, silahkan check gadgetnya dah muncul atau belum seperti terlihat pada gambar pertama diatas. ( biasanya kalau dosanya sedikit dan imannya kuat ... langsung muncul tuh.. hehehe )
6. Jika posisi Tambah Gadgetnya mau yang seperti dibawah ini:
4 kolom under header b_thumb[2]
Maka Script kode HTML untuk point3 diatas dirubah menjadi seperti ini :
#under_header1{

float:left;
width:33.33%;
}
#under_header2{
float:left;
width:33.33%;
}
#under_header3{
float:right;
width:33.33%;
}
#under_header4{
float:left;
width:100%;
}
7. Ah.... Sayamah ingin yang seperti ini aja :
4 kolom under header 4
Silahkan suka2 anda, tapi tolong dibawah baris kode #under_header4{ tambahkan kode berikut margin:0 25%; terus width-nya juga dirubah, sehingga kodenya akan seperti ini:
#under_header4{
float:left;
margin:0 25%;
width:50%;
}

8. Yang seperti ini juga boleh :
4 kolom under header3
kode pada poin 3 diatas ganti dengan yang ini :
#under_header1{
float:left;
width:25%;
}
#under_header2{
float:left;
width:25%;
}
#under_header3{
float:left;
width:25%;
}
#under_header4{
float:right;
width:25%;
}
9. Masih belum puas ?? ingin membuat lebih banyak gadget lagi seperti yang dibawah ini ??.

multi kolom under 5
Sok.. ah.. pokoknya sampai puas dan tinggal ikuti aja langkah-langkah yang telah dijelaskan sebelumnya.
Kemudian kode pada point 3 diatas, harus dirubah seperti dibawah ini:
#under_header1{
}
#under_header2{
float:left;
width:50%;
}
#under_header3{
float:right;
width:50%;
}
#under_header4{
float:left;
width:33.33%;
}
#under_header5{
float:left;
width:33.33%;
}
#under_header6{
float:right;
width:33.33%;
}
#under_header7{
float:left;
width:25%;
}
#under_header8{
float:left;
width:25%;
}
#under_header9{
float:left;
width:25%;
}
#under_header10{
float:right;
width:25%;
}
#under_header11{
float:left;
width:50%;
}
#under_header12{
float:right;
width:50%;
}
#under_header13{
float:right;
width:50%;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'><div id='wrap2'>
Dan ganti juga seluruh kode HTML pada point no.4 diatas menjadi seperti ini :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ali rachmad (Header)' type='Header'/>
</b:section>
</div>
<div id='under_header1'>
<b:section class='header' id='underheader1' preferred='yes'/>
</div>
aaa<div id='under_header2'>
<b:section class='header' id='underheader2' preferred='yes'/>
</div>
<div id='under_header3'>
<b:section class='header' id='underheader3' preferred='yes'/>
</div>
<div id='under_header4'>
<b:section class='header' id='underheader4' preferred='yes'/>
</div>
<div id='under_header5'>
<b:section class='header' id='underheader5' preferred='yes'/>
</div>
<div id='under_header6'>
<b:section class='header' id='underheader6' preferred='yes'/>
</div>
<div id='under_header7'>
<b:section class='header' id='underheader7' preferred='yes'/>
</div>
<div id='under_header8'>
<b:section class='header' id='underheader8' preferred='yes'/>
</div>
<div id='under_header9'>
<b:section class='header' id='underheader9' preferred='yes'/>
</div>
<div id='under_header10'>
<b:section class='header' id='underheader10' preferred='yes'/>
</div>
<div id='under_header11'>
<b:section class='header' id='underheader11' preferred='yes'/>
</div>
<div id='under_header12'>
<b:section class='header' id='underheader12' preferred='yes'/>
</div>
<div id='under_header13'>
<b:section class='header' id='underheader13' preferred='yes'/>
</div>
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
----------------Sekian aja dulu-----------------------
Catatan:
Margin adalah jarak antar elemen pada template. Angka pertama menunjukan jarak bagian atas dan bawah elemen, angka kedua menunjukan jarak bagian kiri dan kanan elemen. Satuannya bisa %, px, em. Rubah nilainya sesuai keinginan.
float menunjukan letak kolom Page Element (Tambah Gadget) yang dibuat nantinya akan berada di sebelah kiri atau kanan.
width adalah lebar kolom Page Element (Tambah Gadget) yang dibuat. Satuannya bisa %, px, em. Rubah nilainya sesuai keinginan.
Cape juga ya.. Selamat mencoba aja semoga sukses..
Source : Happy Desug
Ditulis oleh Karimunjawa Backpacker, Monday, May 20, 2013 - Rating: 4.5
Judul : Cara Membuat Kolom Tambah Gadget di Bawah Header
Deskripsi : Jumat kemarin lepas sembahyang Isya sampai dini hari coba mengoprek template, kali ini yang dioprek adalah membuat kolom tambah gadget di...

Bagikan ke

Facebook Google+ Twitter
Newer Post
Older Post
Home

Belajar Seo Blogger

  • Software Submit Social Bookmarking Otomatis
    Software Submit Social Bookmarking Otomatis Software Submit Social Bookmarking Otomatis . Buat para pemilik blog, siapa sich yang ng...
  • Daftar Situs Link Directory untuk submit artikel Blog
    Hy sahabat ILMU BLOGGER lama saya tidak nulis artikel yaa hee maaf ya soalnya banyak tugas dan urusan Lainnya.Ok kali ini saya akan memp...
  • Cara Membuat Tab View Widget Kategori Keren Banget
    Cara Membuat Tab View Widget Kategori Keren Banget – Tutorial yang kita baha kali ini  ialah bagaimana cara membuat tab view widget kate...
Travel
4gbredband.wordpress.com
Copyright © 2012 Belajar Tips Trik Seo Blog Website - All Rights Reserved
Design by Mas Sugeng - Powered by Blogger