Tentukan sendiri jalan cerita selanjutnya.

Tentukan sendiri jalan cerita selanjutnya.
SET YOURSELF THE NEXT STORY

Ads : 1 USD forever

This blog started to be written January 11, 2015.
Advertise your products and services here.
With 1 USD then your ad posted in the article forever.
1 USD per article forever.

A story with tens of thousands of articles.

A story with tens of thousands of articles.
life and death, blessing and cursing, from the main character in the hands of readers.

Campaign : Support my book "The ultimate guide to get life on earth as in heaven."

Campaign : Support my book "The ultimate guide to get life on earth as in heaven."
Campaign started October 17, 2015 (45 days)

Your contribution to my campaign

Thursday, March 5, 2015

Cara membuat 1, 2, 3 kolom gadget diatas atau dibawah header dan post.


Cara membuat kolom gadget artinya menambah ataupun menciptakan kolom gadget yang letaknya bisa dimana saja sesuai keinginan dan kebutuhan blog dengan cara memasukan dan membuat kode-kode scrift HTML sendiri, biasanya para blogger menambah kolom gadget digunakan untuk memasang iklan atau menambah aksesoris diblog sehingga blog kelihatan menarik, caranya sebagai berikut :

A. Cara membuat 1 kolom gadget diatas post, caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode <b:section class='main' id='main' showaddelement='no'> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Apabila sudah ketemu ganti tulisan showaddelement='no' menjadishowaddelement='yes'
  8. Klik Simpan dan lihat hasilnya di tata letak diatas post
B. Cara membuat 1 kolom gadget diatas header, caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode <div class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Tambahkan Kode scrift ini <b:section class="header" id="topheader"preferred="yes"> 
    dibawah kode tersebut
  8. Selanjutnya dibawah kode diatas akan melihat kode ini <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> ganti tulisan showaddelement='no' menjadi showaddelement='yes'
  9. Klik Simpan dan lihat hasilnya di tata letak diatas post
Cara menempatkanya lihat gambar dibawah ini


C. Cara membuat 1 kolom gadget dibawah header, caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin> 
  7. (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  8. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> 


  9. #under_header
    { float:left; width:100%;
    }

  10. Cari kode  <div class="region-inner header-inner"> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  11. Tambahkan Kode <b:section class="header" id="underheader"preferred="yes"> letakkan dibawah kode <div class="region-inner header-inner">
  12. Klik Simpan dan lihat hasilnya di tata letak diatas post
D. Cara membuat 2 kolom gadget dibawah Header caranya sebagai berikut :
  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>

  8. #box-kolom-widget { clear:both;
     }
     .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor;
     }

  9. Setelah itu cari kode dibawah ini :

    1. <div id="main-wrapper">
    2. atau <div id="main-outer">
    3. atau <div class="main-outer"> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)

  10. Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas

  11. <div id='box-kolom-widget'>
    <div id='box1' style ='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget'id='col1'  preferred='yes'  style='float:left;'/>
    </div>
    <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div style='clear:both;'/>
    </div>

  12. Klik Pratinjau, siapa tahu ada kesalahan
  13. Klik Simpan

E. Cara membuat 3 kolom gadget dibawah Header caranya sebagai berikut :

  1. Caranya sama seperti membuat 2 kolom gadget tinggal mengganti kode CSS dan scrift HTMLnya, seperti Copy paste kode CSS dibawah ini dan letakan diatas kode]]></b:skin>

  2. <div id="box3" style="float: left; margin: 0; text-align: left; width: 35%;"> <b:section class="box-widget" id="col3" preferred="yes" style="float: left;">

  3. Setelah itu cari kode dibawah ini :

    1. <div id="main-wrapper">
    2. atau <div id="main-outer">
    3. atau <div class="main-outer"> sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)

  4. Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas

  5. <div id='box-kolom-widget'>
    <div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
     </div>
    <div style='clear:both;'/>
    </div>

  6. Klik Simpan







No comments:

Post a Comment

Related Posts

Related Posts Plugin for WordPress, Blogger...