Cara Menambah 2 Widget Diatas Postingan

11 Oktober

Cara Menambah 2 Widget Diatas Postingan 
-Hai Tips Gobel balik lagi dengan tutorial yang kali ini berjudul Cara Menambah 2 Widget Diatas Postingan, widget ini sangat berfungsi untuk blog agan yang punya trafik tinggi dan ikut iklan PPC sehingga dapat menggunakan 2 kolom tambahan ini untuk memasang iklan..
Untuk tutorialnya silahkan perhatikan cara-cara dibawah ini

 

• Login Blogger Sobat.
• Pilih Template > Edit HTML.
• Ceklis / Centang Expand Widget Template.
• Cari kode ]]></b:skin> dengan menekan tombol CTRL+F pada keyboard.
• Letakkan script berikut ini diatas ]]></b:skin> : 

#box-main-container {clear:both;}.box-column {padding:0px 10px 10px 10px;border:1px dotted $bordercolor;} 

 *Anda dapat mengubah padding ( jarak posisi gadget ) 0px 10px 10px 10px maksudnya adalah Jarak ( Atas, Kanan, Bawah, Kiri ). 
*Anda juga dapat merubah border ( garis tepi widget ) dengan warna, caranya hapus $bordercolor dan ganti dengan kode warna yang Anda inginkan.

• Kemudian cari kode
  •   <div id='main-wrapper'>
  •   <div id='content-wrapper'>
  •   <div id='header'> atau <div id='header-wrapper'>
  •   <div id='sidebar-wrapper'>
  •   <div id='bottom'>
  Keterangan :
  *<div id='main-wrapper'> adalah posisi halaman utama anda. Biasanya dipakai untuk penempatan menu horizontall atau daftar isi sebuah blog.
  *<div id='content-wrapper'> adalah posisi postingan.
  *<div id='header'> adalah posisi kepala. Biasanya ditempatkan judul blog dan deskripsi blog.
  *<div id='sidebar-wrapper'> adalah posisi sidebar blog.
  *<div id='bottom'> adalah posisi paling bawah. Atau Footer Blog Anda.
  Silakan pilih salah satu, mau menempatkannya dimana.
• Jika sudah didapat atau hampir sama dengan kode diatas, letakkan kode HTML di bawah ini

<div id="box-main-container"> <div id="box1" style="float: left; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col1" preferred="yes" style="float: left;"> </b:section></div> <div id="box2" style="float: right; margin: 0; text-align: left; width: 50%;"> <b:section class="box-column" id="col2" preferred="yes" style="float: right;"> </b:section></div><div style="clear: both;"> </div></div>

Silakan Anda letakkan di bagian atas atau dibawah salah satu kode tadi.

• Jika sudah selesai klik Preview / Pratinjau dulu, baru klik Save Template / Simpan Template.

Itu dia tutorial Menambah 2 Kolom Widget Diatas Postingan. Semoga Bermanfaat..