Background Berbeda Pada Judul Sidebar

Author : Unknownuntuk mengenal lebih jauh tentang mas mahfid silahkan klik link Info Blog

orang yang selalu ingin tahu ,mencoba sesuatu yang di anggap orang lain sulit dan berusaha untuk menjadi bisa Sobat sedang membaca artikel tentang Background Berbeda Pada Judul Sidebar. Silahkan tinggalkan jejak di kolom Komentar untuk mempermudah Unknown berkunjung kembali ke blog sobat.

 mungkin trik ini sudah banyak yang pake dan begitu mudah di terapkan ,akan tetapi kita sendiri pada tahu gimana banyak nya blogger blogger pemula (seperti admin)yang tentu saja masih awam dengan apa yang namanya kode script dan css code .mungkin sobat pernah melihat di beberapa blog tetangga warna judul sidebarnya berbeda ada yang merah,kuning ...dsb bahkan ada yang di beri gambar atau icon tertentu

jika sobat juga ingin membuat background berbeda pada judul sidebar tertentu tepat sekali sobat berkunjung ke sini karena pada pertemuan kali ini mas mahfid akan shere tentang Background Berbeda Pada Judul Sidebar coba sobat perhatikan gambar di samping ini (klik untuk memperbesar)

1. coba lihat yang di beri tanda warna hijau kode no 1 itu adalah judul sidebar/judul widget jadi jika sobat ingin mengganti background ini sobat bisa cari kode ini  .sidebar h2 {background :....dst} jika sobat lakukan hal ini maka secara otomatis semua judul widget/sidebar background nya berwarna sama 
2. untuk membuat warna berbeda sobat harus lihat dulu judul widgetnya ,seperti contoh gambar kita akan membuat warna background Popular Post menjadi warna merah,maka sobat cari dulu seperti ini  gunakan bantuan Ctrl + f cari kode Popular post maka nantinya sobat akan menemui kode seperti di bawah ini

   <div id='sidebar-wrapper'>
           <b:section class='sidebar' id='sidebar' preferred='yes'>
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
   <b:widget id='HTML6' locked='false' title='Random Post' type='HTML'/>
   <b:widget id='HTML4' locked='false' title='Comment' type='HTML'/>
   </b:section>
         </div>

   Coba perhatikan tanda yang di seleksi warna hijau itu adalah judul widget yang sobat cari maka nantinya yang di gunakan adalah kode kode yang diseleksi berwarna merah ,maka jika sobat ingin mengganti background Popular post menjadi warna merah..dsb gunakan kode ini 
   

   #PopularPosts1{background:red;...}

   Letakkan kode di atas tepat atas kode]]></b:skin> dengan kode ini sobat juga bisa mengganti warna link Popular posts dengan warna yang sobat sukai (lihat gambar di atas kode warna 2) ,karena kode link itu biasanya adalah a maka sobat tinggal menambahkan kode a di depan kode #PopularPosts1 contoh nya seperti di bawah ini
   

   #PopularPosts1 a{color: .....}

   Coba sobat lihat contoh gambar no 3 yang di beri tanda kotak warna Pink jika sobat ingin mengganti warna fontnya gunakan kode seperti di bawah ini
   

   #PopularPosts1 li{ color:.....}

3. Dari semua contoh kode di atas jika di gabungkan akan menjadi seperti di bawah ini dan letakkan semua kode tepat di atas kode ]]></b:skin> :

   #PopularPosts1{background:red;...}
   #PopularPosts1 a{color: .....}
   #PopularPosts1 li{ color:.....}

4. lakukan percobaan pada judul -judul sidebar/widget yang lain  dan cara nya sama seperti contoh yang saya jabarkan di atas jika ada yang sobat tidak mengerti silahkan tanyakan di kotak komentar