Menambah Gadget 2 sampai 4 dibawah Posting Blog

Menambah 2 sampai 4 Gadget

Salam Blogger!
Pada kesempatan ini saya akan memberikan trik panduan mengenai bagaimana cara Menambah 2,3,4 Gadget dibawah posting Blog, Trik ini sangat bermanfaat bagi anda yang ingin template nya terlihat ramai, sehingga para pengunjung betah berlama-lama diblog Sobat, langsung saja kita lihat panduan nya dibawah ini :
      1.    Login ke Blogger
      2.    Pilih Rancangan-Edit HTML
      3.    Centang  (√)  Expand Template Widget. 
Jangan lupa Save dahulu tamplate anda - untuk jaga-jaga.
      4.    Kalau sudah, Anda cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

      5.     #footer-column-divide
                 clear:both;

             }.footer-column {
             padding: 10px;

}

       6.     Berikutnya, cari kode yang mirip seperti kode di bawah ini : 
  
       7.     <div id='footer'>
              <b:section class='footer' id='footer' showaddelement='yes'/>

              </div>   
       8.    Atau
  
       9.    <div id='footer-wrapper'>
             <b:section class='footer' id='footer' showaddelement='yes'/>

             </div>

      10.  Note :

      Biasanya, setiap template memiliki kode yang berbeda-beda.
Dalam hal ini, jika Anda tidak dapat menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' /> , yang perlu Anda lakukan adalah menambahkan kode berikut di bawah kode =>
<div id='footer'> atau <div id='footer-wrapper'>.

      11.  Membuat footer 2 kolom, letakkan kode berikut :

<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; float:left;

margin:0; text-align:left;'>

<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/> </div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>


      12.  Membuat footer 3 kolom, letakkan kode berikut :

<div id='footer-column-divide'>
<div id='footer1' style='width: 33%; float:left;

margin:0; text-align:left;'>

<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>


      13.  Membuat footer 4 kolom , letakkan kode berikut :

<div id='footer-column-divide'>
<div id='footer1' style='width: 25%; float:left;

margin:0; text-align:left;'>

<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>


     14.  klik Pratinjau jika berhasil tekan tombol Simpan Template, dan lihat hasilnya.

Jika ada masalah ataupun kurang paham silahkan bertanya dengan mengisi dikotak komentar dibawah ini,

Semoga Bermanfaat.

Related Posts:

  • Membuat Bookmark Share tanpa Edit HTML Bookmark Share Salam Blogger! Widget pintas ini adalah untuk mempermudah pengunjung membookmark atau menyimpan Blog atau Wibsite anda dengan mudah dan cepat karena tinggal klik saja, ikuti panduannya dibawah ini 1.Klik … Read More
  • Membuat Menu Mini Vertical tanpa Edit HTML Menu Mini Salam Blogger! Bagi pengunjung setia kali ini saya akan membagikan bagimana Cara Membuat Menu Mini Vertical tapa edit HTML seperti gambar, silahkan ikuti langkahnya di bawah ini : 1.Klik Tata Letak. 2.Klik &nbs… Read More
  • Membuat Gambar Slideshow tanpa Edit HTML Slide Horizontal Salam Blogger! Sambil menunggu hujan berhenti, malam ini saya akan membagikan bagaimana cara Membuat Gambar Slideshow tanpa Edit HTML, Sobat tidak perlu lagi susah -susah edit sana edit sini, anda tingga… Read More
  • Membuat Komentar Bergerak tanpa Edit HTML Komentar Bergerak Salam Blogger! Bagi  Sobat yang ingin membuat Komentar Bergerak dan Berputar ikuti langkahnya dibawah ini 1.Klik Tata Letak. 2.Klik Elemen Halaman. 3.Klik Tambah Gadget. 4.Kemudian Pilih HTM… Read More
  • Membuat Komentar Bergambar tanpa Edit HTML Komentar Anda Salam Blogger! Bagi Sobat yang ingin membuat Kotak Komentar Bergambar tanpa Edit HTML seperti Blog saya, ikuti panduannya dibawah ini : 1.Klik Tata Letak. 2.Klik Elemen Halaman. 3.Klik Tambah Gadget. 4.Kem… Read More

0 komentar:

Posting Komentar

Silahkan sobat tinggalkan jejak di bawah ini...NO.SPAM
Dengan Memberikan Komentar Secara Otomatis akan Mendapatkan Pagerank, Traffic dan Backlink.