Kumpulan Cara menambah gadget kolom pada blog

Menambah Gadget diatas Header

Trisatya BlogPada umumnya blog bawaan dari blogger tidak terdapat gadget yang berada diatas header. Tapi kita sering melihat web maupun blog yang meletakkan gadget diatas header, seperti iklan baris, baner, gambar, teks berjalan, animasi, atau apa saja sesuai selera atau kebutuhan blog. Lalu bagaimana cara menambah gadget diatas header ?.

Ok....Silahkan ikuti langkah - langkah berikut ini :

1. Login ke Blogger.

2. Klik Tata Letak/layout/rancangan.

3. Klik Edit HTML.

4. Lalu cari kode berikut :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Catatan : 

Setiap template mempunyai kode yang berbeda-beda, cari saja yang mirip seperti kode diatas.

5. Ganti kode diatas dengan kode berikut ini :

<b:section class='header' id='header' preferred='yes'>

6. Klik Save Template

7. Klik Page Element ->
Lihat perubahan yang terjadi, sudah terdapat penambahan add a gadget diatas header yang dapat anda isi sesuai kebutuhan blog anda.

Cara menambah gadget pada Header

Trisatya Blog.Menambah gadget tepat pada bagian header tentu bermanfaat, diantaranya kita bisa menambahkan gambar, slide show, banner, atau iklan pada bagian header tersebut. Cara ini berbeda dengan menambah gadget diatas ataupun dibawah header yang saya tulis pada artikel Cara Menambah Gadget diatas Header. Tapi cara ini sama dengan membuat header terbagi menjadi 2 bagian yaitu header disebelah kiri dan gadget terletak disebelah kanan header.
Berikut gambar header yang terbagi menjadi 2 :

Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Cari kode yang sama atau mirip dengan kode berikut :


/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
  padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
}

Catatan :

Setiap template biasanya berbeda kodenya, yang penting perhatikan kode - kode yang ada pada bagian  (/* Header)

6. Ganti kode diatas dengan kode dibawah ini :

/* Header
----------------------------------------------- */
#header {
float:left;
width:40%;
margin: 0px;
text-align: center;
color:#ffcc66;
}

#header2{float:left; width:60%;}

7. Kemudian silahkan anda cari lagi kode yang sama atau mirip dengan kode 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>

8. Ganti kode diatas dengan kode dibawah ini :


<div id='header-wrapper'>
<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>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
10. Simpan Template.
Nah.... jadi deh....,
Selamat mencoba dan Semoga bermanfaat...

Cara menambah gadget 4 kolom dibawah header

kali ini saya akan berikan cara menambahkan gadget 4 kolom dibawah header, yang hasilnya akan tampak seperti berikut :

Dan pada bagian Elemen Laman, akan tampak seperti berikut :

Melihat gambar diatas tentu cara ini lebih sangat berguna sekali bila kita pasang pada blog kita, dan dengan cara ini kita dapat memanfaatkanya sebagai tempat seperti daftar isi, recent post, daftar link, atau bisa kitaa gunakan sebagai area iklan ataupun terserah kebutuhan anda..... OK...!!.

Bila anda berminat dengan cara ini, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. 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>

7. 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 :
Anda bisa ganti kode berwarna merah pada kode diatas, itu adalah nilai lebar setiap gadgetnya. Silahkan anda sesuaikan dengan lebar template milik anda.

8. Kemudian anda cari lagi kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

9. 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;}

9. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat... .

Penulis : ADMIN ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Kumpulan Cara menambah gadget kolom pada blog ini dipublish oleh ADMIN pada hari Monday, September 10, 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 4 komentar: di postingan Kumpulan Cara menambah gadget kolom pada blog