6/7/09

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


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Cara Membuat Kolom Tambah Gadget di Bawah Header, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

32 comments:

  1. ass...pak....
    terimakasih...dah saya coba di blog dan berhasil...ada punya banyak gadget dehh...=)
    oya pak kalo ganti icon untuk design dari finalsense caranya ga sama ya dgn cara di template asli blogger?...
    mhn pencerahan...

    wassalam

    ReplyDelete
  2. pernah tuh bikin gitu, tapi karena ganti template dan lupa di back up, ilang deh...

    ReplyDelete
  3. kalo udah dibikin gitu, hati2 loadnya berat, karena pasti bakal banyak banget javascript yang dipake..

    ReplyDelete
  4. @ Jeng Sonya...sama jeng.. wah utk finalsense belum pernha nyoba tuh... coba aja tanya tuh sama pakarnya sobat gd permana..
    @ Gr permsna.. makasih ya.. linknya dah diadd semua
    @ athiete.. setuju 100 % bos..tolong masukannya.. blog ini diloads di temen2 berat gak ya.. sy juga berpikir utk link n banner mau disimpan di page khusus.. trus lagi cari template nih... mau coba ganti juga... ada yg mau share template yg SEO.. kasih bocoran ya..

    ReplyDelete
  5. PakDe makasih infonya!!!!
    Tapi kenapa yah ditempat ane gak iso??

    ReplyDelete
  6. BEajar dari master template nih, coba dulu ya

    ReplyDelete
  7. terima kasih informasinya kawan.. sangat berguna buat saya.. keep blogging

    visit my blog
    http://kutak-ketik.blogspot.com

    salam sukses kawan..

    ReplyDelete
  8. wah klo utak atik templet gak ahli nih saia.

    nice one mas.

    ReplyDelete
  9. wah mantap kang heheh~~~ yang terakhir banyak gitu mau diisi apa yach ampe 13 gitu hehehe
    Kenali Dan Kunjungi Objek Wisata Di Pandeglang

    ReplyDelete
  10. segala sesuatu yang bermanfaat harus dicoba dan hal itu ada di blog ini.

    ReplyDelete
  11. @ semua sobat : terima kasih ya atas kunjungan n comennya

    ReplyDelete
  12. Mas nanya dong tentang 3 kolom. Kalo kolom adalah kolom posting. Kolom 1 dan 2 bisa ngak dibuat 1 kolom lagi diatas kolom 1 dan 2. Yang lebarnya sama dengan total kolom 1 dan 2. Gimana sih kodenya. Ma kasih

    ReplyDelete
  13. Thanks,bagus sekali hasilnya,puaspuaspuas.......
    jai sangat terbantuk maklum pemula

    ReplyDelete
  14. terima kasih
    atas tutorialnya dan sudah saya terapkan diblog saya.
    salam kenal dari saya

    ReplyDelete
  15. Mw cb tp takut ga jd, keh kek keh ...
    http://www.purbalingga.co.cc

    ReplyDelete
  16. Ok, mantap scriptnya mas......... Thank you banget...........

    ReplyDelete
  17. Walau belum mencoba, tapi inilah yang aq cari untuk mempercantik blog bisnis modal gratis, atas info dari dunia galang. makasih mas...

    ReplyDelete
  18. thanx for tutorial :)
    post ini sangat membantu saya dalam membangun blog saya...
    sekali lagi terimakasih :)

    ReplyDelete
  19. Thanks bgt infonya, ditunggu kunjungannya ya bozzz...

    ReplyDelete
  20. Terima aksih atas tutornya, kebetulan template saya klasik jadi mudah kalau mau edit template

    ReplyDelete
  21. bagus sekali posting nya bermanfaat ijin save pakk

    ReplyDelete
  22. point ke 3 Ga bisa/bingung mau taruh dimana,udah tak coba2 tetep aja Ga bisa Gan..please help me...

    ReplyDelete
  23. Terimakasih gan,ane dah sukses berhasil meskipun ane banyak dosa hehe

    ReplyDelete
  24. makasih gan infonya...

    http://newbloggerin.blogspot.com

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger