Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Cara Membuat 2 Kolom Widget di Bawah Sidebar Blog

Akhir-akhir ini saya jarang sekali Blogging khususnya dalam update posting, dikarenakan padatnya kegiatan sekolah. Namun saya akan terus membuat posting saat waktu luang agar Blog ini tidak semakin terabaikan. Saya mempunyai satu hal yang sudah lama ingin saya bahas.Yaitu tentang Cara Membuat 2 Kolom Widget di Bawah Sidebar Blog. Bagi sobat yang membutuhkan keberadaan 2 Kolom Widget di Bawah Sidebar Blog, silakan simak terus posting kali ini. Tak perlu berbasa-basi lagi, langsung saja kita ke pembahasan.

2 Kolom Widget di Bawah Sidebar Blog

Namun Sebelumnya Perlu Diperhatikan!!! tulisan bercetak tebal hitam yang sobat jumpai nanti dalam pembahasan adalah kode elemen yang ditemukan hasil dari Tahap 1. Kode tersebut mungkin akan berbeda dengan elemen pada Blog sobat.

Cara Membuat 2 Kolom Widget di Bawah Sidebar Blog 

Mengetahui Elemen Sidebar

  • Login ke akun Blogger sobat. 
  • Masuk ke bagian Tata Letak.
  • Sentuhkan kursor di tulisan "Edit" pada salah satu Widget di bagian sidebar. Maka widget ID telah diketahui. Berdasarkan contoh di bawah, widget id = "HTML2"
Cara Membuat 2 Kolom Widget di Bawah Sidebar Blog
  • Masuk ke bagian Template dan klik Edit HTML.
  • Dengan tombol ctrl+F, cari HTML2. Perhatikan screenshot berikut. Widget id HTML2, berada pada elemen sidebar-wrapper. Maka elemen dari sidebar adalah sidebar-wrapper.
Cara Membuat 2 Kolom Widget di Bawah Sidebar Blog

Memasang CSS

  • Dengan tombol ctrl + F, cari CSS "#sidebar-wrapper". Kode CSS itu seperti demikian.
/* -- Sidebar -- */
#sidebar-kiri {float:left;width:150px;display:inline;margin:0;}
#sidebar-wrapper a:link,#sidebar-wrapper a:visited{}
#sidebar-wrapper{float:right;width:320px;display:inline;margin:0;}
.sidebar h2, .sidebar-kiri h2 {font-size: 12px;font-family: Arial, Tahoma, Verdana;font-weight: bold;text-transform: uppercase;margin: 0 0 10px;padding: 3px 0 3px 7px;border-bottom:1px dotted #ccc;}
#sidebar p, .sidebar-kiri p {margin: 0;padding: 0 0 0 45px;}
#sidebar ` img , .sidebar-kiri img {border: none;margin: 0;    padding: 0;}
.sidebar ul, .sidebar-kiri ul {list-style-type: none;    margin: 0;padding: 0;}
.sidebar ul li , .sidebar-kiri ul li {list-style-type: circle;margin: 0 0 5px;margin-left: 20px;}
.sidebar .widget {background: #FFF top no-repeat;float: left;width: 300px;margin: 0 0 10px;padding: 10px;border: 1px solid #DDD;} .main .widget {margin: 0 0 1.5em;}
.main .Blog {border-bottom-width: 0;}
.sidebar-kiri .widget {
background: white top no-repeat;
float: left;
width: 120px;
margin: 0 0 10px;
padding: 10px;
border: 1px solid #DDD;
}
/* -- End Sidebar -- */

  • Letakan Kode berikut tepat di bawah kode #sidebar-wrapper{float:right;width:320px;display:inline;margin:0;}.

#double-sidebar {width320px;float:left;}
#sidebar-left{border:1px solid #000000;padding:10px;width: 150px;float:left;}
#sidebar-right{border:1px solid #000000;padding:10px;width: 150px;float:right;} 

  • Pada kode berwarna biru, lebarnya samakan dengan lebar widget sidebar-wrapper.
  • Pada kode berwarna merah, tentukan lebar widget maksimal setengah dari lebar widget pada double-sidebar.
  • Untuk kode-kode tampilan lainya, silakan customize. Sepantasnya tampilan 2 kolom widget yang akan dibuat ini, samakan dengan tampilan widget sidebar yang telah ada (sidebar-wrapper). Sobat bisa mengambil kode dari sidebar-wrapper.

Memasang HTML

  • Cari kode <div id='sidebar-wrapper'>.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Iklan Baris' type='HTML'>
<b:widget id='PlusFollowers2' locked='false' title='Google+ Followers' type='PlusFollowers'>
</b:section>
</div>
 
  • Tambahkan kode berwarna biru berikut pada kode di atas tadi sehingga hasilnya menjadi seperti berikut.

<div id='sidebar-wrapper'>
<div id='double-sidebar'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Iklan Baris' type='HTML'>
<b:widget id='PlusFollowers2' locked='false' title='Google+ Followers' type='PlusFollowers'>
</b:section>
<b:section class='sidebar-left' id='sidebar-left' style='width: 150px; float: left;'/>
<b:section class='sidebar-right' id='sidebar-right' style='width: 150px; float: right;'/>
</div>
</div>

  • Ubah ukuran width sesuai dengan lebar kolom widget kanan/kiri yang sebelumnya telah sobat tentukan.
  • Klik Simpan Template, dan silakan lihat hasilnya.  
  • Jika berhasil, maka akan muncul 2 Kolom Widget di Bawah Sidebar Blog.

Artikel terkait : Cara Membuat 2 Kolom Widget di Bawah Sidebar Blog

Artikel Blog Regi Brader Lainnya :

4 komentar:

  1. Thanks, we appreciate your articles. Good day! DB Product Review

    ReplyDelete
  2. Terima kasih Infonya Bro, izin ikut menerapkan ya. hehe

    Informasi Lowongan Kerja Terbaru BUMN, BANK, Persero, Swasta, & Berbagai Perusahaan Besar di Indonesia : http://expocpnsbumn.blogspot.com/

    ReplyDelete
  3. Salam.
    Duniaku berbagi ilmu
    terimakasih sobat atas postingannya cara menambah widget..cuma yang ingin saya tanyakan untuk pengeditan huru judulnya supaya lebih kecil lagi bagaimana karna ada perbedaan discriptionnya...trims.
    Duniaku berbagi ilmu

    ReplyDelete

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved