Menambahkan Ikon Di Samping Label List

Buat yang pengen tau cara menambahkan ikon di samping label list silakan disimak infonya, lumayan buat menambah pengetahuan kode css blog. Ikon ini akan terlihat pada saat list order berada di dalam kotak sidebar. Pada postingan artikel ini disediakan beberapa pilihan ikon label yang unik dan menarik yang bisa sobat gunakan di blognya...

Cara Pemasangan :

• Login ke blog sobat...


• Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
  
  
  


• Cari kode .sidebar ul li { pada kode CSS template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian tambahkan kode di bawah ini dan paste di dalam kode CSS .sidebar ul li { tersebut.
  
  
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixtVRttt6nvCRDVAvqrL_p1U0x7I_aVMh9ClhgcU4cSlnPmzObfXmqaTpIGLGlCMHVL_UD-vMWzls3owtwSB144hN42JmDKvrfA-eHlteGZ1zE2iKi7llwf6fXfVAcu_zenzN84TXVbqU/s1600/sidebarli.jpg) no-repeat scroll left center;vertical-align: middle;

  
  

  
  
  - Keterangan :
  • Kode yang berwarna biru merupakan URL Link Ikon Gambar.
  • Contoh hasil pemasangan kode :
    
    .sidebar ul li {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixtVRttt6nvCRDVAvqrL_p1U0x7I_aVMh9ClhgcU4cSlnPmzObfXmqaTpIGLGlCMHVL_UD-vMWzls3owtwSB144hN42JmDKvrfA-eHlteGZ1zE2iKi7llwf6fXfVAcu_zenzN84TXVbqU/s1600/sidebarli.jpg) no-repeat scroll left center;vertical-align: middle;}


• Klik "Save" dan lihat hasilnya...

Pilihan Ikon :

• 
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixtVRttt6nvCRDVAvqrL_p1U0x7I_aVMh9ClhgcU4cSlnPmzObfXmqaTpIGLGlCMHVL_UD-vMWzls3owtwSB144hN42JmDKvrfA-eHlteGZ1zE2iKi7llwf6fXfVAcu_zenzN84TXVbqU/s1600/sidebarli.jpg


• 
  https://lh3.googleusercontent.com/-pqMfNSzblE0/T3R5PDuyAeI/AAAAAAAABgc/Cee45BIaJ9M/s800/popular_list_bullet.gif


• 
  https://lh4.googleusercontent.com/-TP3TR5WoNEs/T3R5M5IgoxI/AAAAAAAABgU/eRYAKGFoFSc/s800/news_list_bullet.gif


• 
  https://lh5.googleusercontent.com/-2lKpB1qq3i4/T3R5LbvbEmI/AAAAAAAABfw/zaXSqCwKNek/s800/bullet_list.gif


• 
  https://lh3.googleusercontent.com/-LA4bBJAJSYk/T3R5Lqmw-XI/AAAAAAAABf4/Cay70AcTVf0/s800/arrow-list.gif

.: Semoga Bermanfaat :.