Menyesuaikan Sidebar Widget Anda di Blogger.

Bagi Anda yang suka memodifikasi Blog Blogger, disini saya memberikan tips untuk meningkatkan penampilan blog Anda. Kali ini saya akan berbagi tips bagaimana menyesuaikan widget (sidebar) yang ada diblog Anda. Apakah Anda tahu? bahwa Anda dapat mengubah banyak hal pada widget di blogger, dari menambahkan ikon di samping judul sidebar, menempatkan gambar di samping label dan mengubah font, warna, perbatasan widget.

Saya akan memberikan contoh untuk widget yang saya sesuaikan, Berikut ini panduan langkah demi langkah bagaimana memodifikasi widget. Selanjutnya, Anda dapat membuat widget sendiri berdasarkan kreativitas Anda sendiri.

Hal pertama yang harus dilakukan Anda harus masuk ke Blogger anda, lalu ke Template dan klik Edit HTML.

Bagaimana menambahkan Icon disamping Judul Sidebar Anda.

Untuk menambahkan icon ke dalam judul sidebar sangat mudah. Anda tinggal mencari kode]]></b:skin>, paste kode dibawah ini diatas kode ]]></b:skin>.

.sidebar h2{ background:url(http://www.yourwebsite.com/folder-and-image-filename); background-repeat:no- repeat; background-position:center kiri; height:25px; margin:0; padding:10px 3px 0 30px; line-height:1.5em ; text -transform:uppercase; letter-spacing:.2em; }

Mengubah tampilan Sidebar (Font, Warna, Border, dll).

Anda dapat mengubah Judul dan Isi Sidebar Anda. Untuk dapat melakukan ini, Anda harus memahami sedikit tentang CSS (Cascading Style Sheets). Bagi mereka yang tidak mengerti apa itu CSS, saya sarankan untuk belajar dulu di situs W3Schools CSS. Hal berikutnya yang harus Anda lakukan adalah mencari ID dari widget sidebar yang Anda gunakan. Karena setiap widget ID berbeda ( tergantung pada template), maka Anda harus kreatif untuk menemukan kode. Biasanya saya selalu menggunakan pencarian kata kunci "sidebar" untuk menemukannya. Blog saya menggunakan template asli Blogger. Kode berikut adalah kode dari widget sidebar.

<b:section-contents id='sidebar-right-1'> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/> <b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/> </b:section-contents >

Setelah menemukan ID dari Widget yang ingin anda modifikasi, Carilah kode </head>, Pastekan kode dibawah ini diatas kode </head>, Dalam hal ini, saya mengubah Links widget yang memiliki ID LinkList1. Kode CSSnya sebagai berikut:

# LinkList1{ background:#8393ca; padding-left:15px ; Font:14px Arial; border- bottom : 2px solid # FFE25F ; } # LinkList1 h2 { background: url ( http://vendyxiao.com/pictures/links-logo.png ) tidak mengulang- kiri bawah ; height : 35px ; padding-top : 10px ; font-size : 0px ; } # LinkList1 a : link { color: # 5F5F5F ; text-decoration : none; } # LinkList1 a : visited { color: # 5F5F5F ; text-decoration : none; } # LinkList1 a: hover { color: $ titlecolor ; text-decoration : underline ; }