Cara Memasang Icon yang Berbeda di Setiap Judul Widget Blog

Cara memasang icon yang berbeda disetiap judul widget di blog. Untuk lebih jelasnya, silakan ikuti langkah-langkah dibawah ini.

Contoh gambar disamping: 3 widget dengan judul Total Tayangan Laman, Cari Blog ini, dan Blog archive.

---

Langkah Pertama, mencari kode id dari setiap widget yang akan diberi Icon, Caranya:

---

1. Login ke blogger, ke pengaturan template.

2. Lalu Klik edit html.

3. Setelah itu cari judul widget, Contoh: widget dengan judul Cari Blog Ini. Tekan Ctrl + F dikeyboard untuk memudahkan pencarian. Seperti gambar dibawah ini.

4. Selanjutnya copy kode id nya ke notepad, seperti gambar diatas yang diberi tanda kotak merah.

5. Dan lanjutkan mencari kode id dari widget yang lainnya, disini contohnya Total Tayangan Laman dan Blog archive. 

6. Kode id dari ke tiga widget diatas.

CustomSearch1
BlogArchive1
Stats1

---

Langkah Kedua, memasang kode icon diatas ]]></b:skin> , Caranya:

---

1. Buka Notepad tadi, lalu tambahkan kode seperti ini,

#CustomSearch1 h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWGvl7zkkkwCg-6sXFN_kYXxL-zOtoS6RH1prk3KwRWI4ZKQs-Jay1uYMqIluGFswCie2Z5RbpIoPoDLXxXP5C_RfDFlfsD46ZEUuEcATCisOvcGHQwRmDGjNTwkWwTkhZdq_YhTkc2pyf/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

#BlogArchive1 h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO96SyhjiaKVpJjrNONak5gMpOcyEyvf0Rc7B0_ZSYOuoGlNCMFhmWLeXQXJAj10AafPUPV7LCAc0AbuSWviHGDpJI3oLbGghlTRwVY6Gc3AXb2zxJDOg3II7VHYFmqad35R-rmOXk42l6/s1600/DESAIN.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

#Stats1 h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLMF5p1uDRNRK4UbYYCfpBu07d0aB8mGG_VpS66nktKIatRhXEJX2RWWcw4c4kB6Yrmjs66SyQna5MQ059-smkkKOaoMQ6u-SgsEEjiTNUsCVx5fol60O5XPrH6TOfXqyR4MqI0H0BLgxb/s1600/fandra-juani.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

2. Selanjutnya, Copy semua kode yang ada di Notepad,  dan pastekan diatas ]]></b:skin>.

3. Setelah itu, save Template, Selesai.

Keterangan kode diatas:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWGvl7zkkkwCg-6sXFN_kYXxL-zOtoS6RH1prk3KwRWI4ZKQs-Jay1uYMqIluGFswCie2Z5RbpIoPoDLXxXP5C_RfDFlfsD46ZEUuEcATCisOvcGHQwRmDGjNTwkWwTkhZdq_YhTkc2pyf/s1600/32x32.jpg Kode URL dari gambar yang akan dijadikan icon.
no-repeat, gambar tidak berulang.
padding:10px 0px 0px 40px; mengatur posisi tulisan.
height:22px; tinggi.

Contoh gambar: setelah diberi icon disetiap judul widget.

Untuk membuat icon sendiri, silakan baca cara membuat icon blog, dan cara upload dan ambil url  gambar, baca di cara upload dan ambil url gambar. Itulah sedikit cara desain blog yaitu tentang cara memasang icon yang berbeda disetiap judul widget. Semoga Bermanfaat.

Tweet