Pasang Iklan Disini

Minggu, 04 Agustus 2013

Cara Membuat Dua Kolom Widget Pada Blogger

Assalamualaikum wr.wb
Sekarang ini kita akan membahas kembali mengenai desain blog.
Dalam template blog biasanya kita kan selalu diberi kolom untuk widget yang terbatas ya?
Nahh kali ini kita akan coba dengan membuat dua kolom widget pada blog kita.
Ikuti langkah-langkahnya baik-baik.

  • Pertama seperti biasa masuk ke akun blogger terlebih dahulu
  • Lalu klik Template
  • Kemudian klik Edit HTML
  • Setelah itu cari kode ]]></b:skin> dengan menggunakan CTRL+F
  • Setelah kode nya ditemukan maka letakkan kode berikut ini diatas kode ]]></b:skin>
#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}




*Penjelasan
Padding = Jarak posisi gadget
$bordercolor = Warna garis tepi (kalian bisa menggantinya dengan warna yang kalian inginkan)
  • Kemudian cari salah satu dari kode ini. Kalian bisa pilih sendiri mau yang mana
  1. <div id='main-wrapper'>
  2. <div id='content-wrapper'>
  3. <div id='header'>
  4. <div id='sidebar-wrapper'>
  5. <div id='bottom'>
*Penjelasan:
<div id='main-wrapper'> = posisi halaman utama blog
<div id='content-wrapper'> = posisi postingan blog
<div id='header'> = posisi header blog
<div id='sidebar-wrapper'> = posisi sidebar blog
<div id='bottom'> =posisi footer blog
  • Jika sudah dipilih dan ditemukan kode nya maka simpan kode dibawah ini diatas ataupun dibawah kode yang tadi kalian pilih
<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>


Dua Widget



  • Jika sudah maka klik Preview atau Pratinjau dahulu dan jika sudah benar maka klik Save atau Simpan. Dan hasilnya akan seperti gambar dibawah ini.
Dua Widget


Mungkin dicukupkan sekian dahulu dari saya.
Terimakasih.
Wassalamualaikum wr.wb

Ketikkan email kalian dibawah dan klik Berlangganan untuk dapat berlangganan artikel kami:

Delivered by FeedBurner

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

 
notifikasi
close