Cara mengedit dan memperindah tampilan Side Bar pada blog

Tweet

Nah, ini menarik. Kita sudah belajar untuk mengubah dan menyesuaikan dengan metode kami widget Blogger (gadget), pada umumnya. Misalnya menambahkan ikon di samping judul sidebar pos dan menempatkan ikon atau gambar di samping Label dan Link . Itu keren. Tapi sekarang, kita akan belajar cara untuk mengubah dan gaya masing-masing widget (gadget) berbeda! Artinya: 

• masing-masing widget Anda (Label, Arsip, Links, widget kustom) dapat memiliki penampilan itu sendiri (! warna, font, perbatasan, gambar apa-apa ....) 
• ingat WIDGET yang sama dengan GADGET Ok, inilah contoh sederhana:

Aku telah memilih untuk berbeda widget saya dulu, jadi saya mengubah gaya dari Label, Link, Arsip dan widget Picture. Saya memilih widget ini hanya untuk contoh ini. Ingat bahwa Anda dapat melakukan ini dengan setiap widget lainnya juga!

Ada beberapa langkah sederhana Anda harus mengambil:

1. memilih widget yang ingin Anda gaya, dan mengidentifikasinya di Blogger HTML kode
2. menambahkan beberapa gaya CSS pada kode yang akan membumbui widget kami
3. tidak kehilangan kelereng Anda (bersabar dan kreatif)

Memilih dan Mengidentifikasi

Setiap widget ditambahkan di Layout Blogger memiliki ID unik. Kami akan menggunakan ID ini untuk menerapkan beberapa gaya ke widget kita. Jadi, tugas kita adalah untuk menyelam ke dalam kode HTML Blogger, dan menemukan ini ID. Mari kita pergi.

Dari Dashboard Anda, kunjungi:

Masuk ke menu Template >> Procced >> centang Expand Template Widget dan gulir kursor ke bawah. Karena saya memilih untuk gaya saya widget sidebar (gadget), saya akan melihat ke dalam sidebar-wrapper. Dalam kasus saya, kode terlihat seperti ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='Image1' locked='false' title='My Picture' type='Image'/>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>

Ok. Anda dapat melihat ID itu widget saya:
Label widget ID >> Label1
Link widget ID >> LinkList1
Gambar widget ID >> image1
Arsip widget ID >> BlogArchive2

Terkadang, jika Anda memiliki banyak widget kustom, sulit untuk menebak ID itu. Dalam hal ini, ingatlah bahwa posisi mereka adalah sama seperti yang muncul di frontpage Blog Anda. Jika widget Label adalah dalam 1 tempat, maka akan dalam 1 tempat dalam kode terlalu ..
Langkah pertama dilakukan. Mari kita lanjutkan.


Styling dan tweaking
Sekarang, bagian yang menyenangkan. Untuk gaya widget, Anda harus tahu sedikit CSS. Tapi jangan khawatir, Anda bisa mendapatkan ini dalam beberapa menit. Pada langkah sebelumnya, kita telah belajar untuk mengidentifikasi ID dari widget kita. Sekarang, kita akan menggunakannya. Mari kita mulai dengan menyesuaikan widget Daftar Link. 


Dari Dashboard Blogger, kita akan pergi ke:
dan cari bagian ini (untuk pencarian lebih mudah, gunakan CTRL + F):

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

DI ATAS bagian ini, Anda akan menempatkan CSS style for kustom Widget Anda Daftar (gadget), sehingga semuanya akan terlihat seperti ini:

#LinkList1 {
background:#FFF4BF;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #FFE25F;
}
#LinkList1 h2 {
background: url(http://i40.tinypic.com/wummhj.jpg) 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;
}
]]></b:skin> dan </head>

Sekarang untuk menjelaskan sedikit:
Bagian warna biru adalah gaya untuk kotak widget tertentu (dalam kasus Daftar Link). Anda dapat mengubah latar belakang, gaya font, posisi, warna, perbatasan widget.
Bagian hijau adalah mendefinisikan hanya judul widget. Dalam contoh saya, saya menempatkan gambar bukan teks biasa, dan dengan "font-size:0px" judul aslinya tersembunyi. Cukup keren. Dengan cara ini, Anda dapat memiliki yang berbeda untuk setiap judul widget pada template Blogger Anda!
Pada kuning, saya telah didefinisikan bagaimana LINK saya dan warna Hover akan terlihat seperti. Saya harus melakukan ini karena latar belakang gaya widget baru saya pencampuran dengan warna link default asli. Sekarang Anda tahu bahwa Anda dapat menggunakan warna yang berbeda untuk link Anda di widget setiap!

Ok, saya pikir Anda punya itu. Ingat, ini hanya contoh. Anda dapat melakukan banyak lagi. Satu-satunya hal penting adalah untuk mengingat bahwa Anda harus KENALI widget Anda, dan STYLE melalui kode Blogger Anda.