Bagaimana untuk menyesuaikan Sidebar Widget Anda di Blogger (Blogspot)

Bagi Anda yang suka memodifikasi Blog Anda berdasarkan Blogger (Blogspot) CMS, di sini saya memberi Anda lebih banyak tips untuk meningkatkan penampilan blog Anda. Kali ini saya akan berbagi tips Anda tentang bagaimana untuk menyesuaikan widget (sidebar) di blog Anda. Apakah Anda tahu bahwa Anda dapat mengubah banyak hal pada widget di blogger, dari menambahkan ikon di samping judul sidebar, menempatkan gambar di dalam label dan mengubah font, warna, perbatasan widget. Saya akan memberikan contoh untuk widget yang saya telah disesuaikan diikuti dengan panduan langkah demi langkah bagaimana memodifikasi itu. Selanjutnya, Anda dapat membuat widget sendiri berdasarkan kreativitas Anda sendiri.
Hal pertama yang harus dilakukan Anda harus memasukkan Dashboard Blogger. Hal berikutnya yang Anda harus pergi ke Template dan klik Edit HTML. Klik Lanjutkan.
Bagaimana Tambahkan Icon di samping Judul Sidebar Anda

 

 Untuk menambahkan icon ke dalam judul sidebar sangat mudah. Hanya mencari kode ini

]]></b:skin> </head>

Di atas kode, salin script berikut

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

Mengubah Sidebar Penampilan (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 mendirikan ID dari Widget Anda ingin memodifikasi, mencari "/ head"

</b:template-skin>
</head> 

Atas kode ini, menempatkan kode CSS untuk mengubah tampilan widget Anda. Dalam hal ini, saya mengubah Links saya widget yang memiliki ID LinkList1. Kode CSS yang saya buat adalah sebagai berikut:

#LinkList1 {
background:#8393ca;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #FFE25F;
}
#LinkList1 h2 {
background: url(https://vendyxiao.com/pictures/links-logo.png) no-repeat bottom left;
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;
}

 Jika sudah tinggal simpan =D

Tweet

Subscribe to receive free email updates: