Variasi Icon Pada Judul Sidebar

variasi icon

Pernah melihat blog yang judul sidebarnya memiliki variasi icon yang berbeda antara satu widget dengan widget lainnya?

Memang sepertinya sedikit cukup menarik apabila setiap judul di sidebar mempunyai icon yang berbeda karena sejatinya judul disidebar tidak mempunyai icon, atau apabila mempunyai icon, icon tersebut akan sama anatara widget yang satu dengan widget yang lainnya.

Agar judul sidebar anda mempunyai icon yang bervariasi, maka ada sedikit trik yang harus anda lakukan.

Bagi anda yang tertarik namun belum mengetahui caranya, berikut kang rohman akan memberi gambaran bagaimana agar anda bisa dapat memasang icon favorit anda pada judul sidebar.

 

#1 Pilih Icon Favorit anda

Silahkan persiapkan icon favorit milik anda atau jika belum mempunyai koleksi icon anda bisa mendownloadnya secara gratis di internet. sedikit referensi, kang rohman pernah posting beberapa penyedia icon gratis, silahkan anda baca pada artikel Free Icon Untuk Blog Dan Website atau pada artikel

Cari icon  di IconFinder.

 

Sebagai contoh, beberapa icon yang kang Rohman pakai ;

 

 icontexto-user-web20-blogblogs icontexto-webdev-social-bookmark-09 icontexto-webdev-social-bookmark-blogblogs icontexto-webdev-valentine icontexto-webdev-arrow-right-032x032 icontexto-webdev-add-032x032 icontexto-webdev-contact-032x032 icontexto-webdev-file-032x032 icontexto-webdev-ok-032x032 icontexto-webdev-rss-feed-032x032 

 

Silahkan upload icon-icon tersebut ke hosting tempat biasanya anda menyimpan gambar, jika anda belum mengetahui bagaimana cara upload gambar, anda bisa membaca artikel kang Rohman tentang  Buat Logo & Image Button atau bisa juga anda baca artikel Upload gambar melalui blogger.

 

Berikut beberapa contoh alamat gambar (URL) icon yang telah kang di upload :

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PTdiNHemGOhf_jPgG20Jvj0N7CIPThoDdoLs7D05bhKLnO8Kfm2cJSucJADfHdj2UIAS7-PlxNPfYw62hwnHCD6kMlHC0FIBd-7FRd2vRf76slFl5f4CLQADut5pztF4_tay5EM5SQA/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEjLicl59kA7GqxGKo67F6DbZMlyoNEIq-ZQv5x00Tei3yA-b1a35Y7lAXDuXcryw-3JtAJq-kxMzmve-Jz7XjQ5MR4ikSqWmi2XkIjKe3WpWLlWORCXo20tzO1t9eEBddFdwdvvxRh8/

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0SfsNicZ7PMj3FErS3j3QdfiV2hSheDB6LCHD7kT5SYxe9DbMa20_puidwjtSGemEFvwbiyYj9wyR71BgamRYytM7woawOmVw9AR9gujKN88gV2SET2OgWLbE9KtOvQPMn70oihAA14Y/

 

Silahkan anda sesuaikan berapa jumlah icon yang ingin anda pasang. Sebagai contoh akan diterangkan untuk memasang 3 icon saja.

 

#2 Mencari Kode Widget Sidebar

Langkah kedua yaitu mencari tahu kode widget di dalam template anda, mana yang ingin di pasang icon. Berikut langkah-langkahnya :

 

  • Silahkan login ke blogger dengan ID anda.
  • Klik Tata Letak.
  • Klik tab Edit HTML
  • Carilah kode yang mirip-mirip seperti ini :

    <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
    <b:widget id='Label1' locked='false' title='Categories' type='Label'/>
    <b:widget id='HTML2' locked='false' title='Friend Llinks' type='HTML'/>
    <b:widget id='HTML1' locked='false' title='Sponsors' type='HTML'/>
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

  • Setiap blog pasti berbeda kodenya, makanya kang Rohman tulis yang mirip dengan kode diatas. Copy kode tadi pada pada note pad atau sejenisnya.

Dari contoh diatas, blog kang Rohman mempunyai 5 widget, dan yang penting harus anda perhatikan adalah yang tercetak merah  dan orange yaitu :

 

  • Profile1   -    About Me
  • Label1    -    Categories
  • HTML2   -   Friend Llinks
  • HTML1  -   Sponsors
  • BlogArchive1  -  Blog Archive

Yang dicetak merah adalah ID dari widget dan yang dicetak orange adalah judul widget atau judul yang ada di sidebar.

Sebagai contoh, kang Rohman hanya akan memasang pada widget  dengan ID Profile1, Label1, serta HTML2.

 

#3 Membuat kode CSS

Langkah ke tiga adalah membuat kode CSS untuk ID widget yang tadi (Profile1, Label1, serta HTML2). Property yang di buat cukup sederhana, yaitu anda hanya menambah h2 pada ujungnya, contoh :

 

#Profile1 h2 { }

#Label1 h2 { }

#HTML2 h2 { }

 

Untuk value nya, anda bisa berkreasi sendiri sesuai dengan keinginan, namun sebagai contoh, value nya misalkan seperti ini :

 

#Profile1 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#Label1 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#HTML2 h2{
background:transparent url(URLGambar) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}


 



Untuk URLGambar tentunya harus anda ganti dengan URl gambar anda, namun sebagai contoh kang Rohman akan memakai URL gambar yang sudah di tulis di artikel bagian atas, sehingga kodenya akan seperti ini :



 



#Profile1 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PTdiNHemGOhf_jPgG20Jvj0N7CIPThoDdoLs7D05bhKLnO8Kfm2cJSucJADfHdj2UIAS7-PlxNPfYw62hwnHCD6kMlHC0FIBd-7FRd2vRf76slFl5f4CLQADut5pztF4_tay5EM5SQA/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#Label1 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEjLicl59kA7GqxGKo67F6DbZMlyoNEIq-ZQv5x00Tei3yA-b1a35Y7lAXDuXcryw-3JtAJq-kxMzmve-Jz7XjQ5MR4ikSqWmi2XkIjKe3WpWLlWORCXo20tzO1t9eEBddFdwdvvxRh8/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}
#HTML2 h2{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0SfsNicZ7PMj3FErS3j3QdfiV2hSheDB6LCHD7kT5SYxe9DbMa20_puidwjtSGemEFvwbiyYj9wyR71BgamRYytM7woawOmVw9AR9gujKN88gV2SET2OgWLbE9KtOvQPMn70oihAA14Y/) no-repeat scroll left center;
padding:8px 8px 2px 40px;
margin-top:15px;
}


 



#4 Memasang kode CSS




Karena tadi sudah mendapatkan kode CSS yang di perlukan, maka langkah terakhir adalah memasang kode CSS tadi ke template anda, berikut langkah-langkahnya :

 




  • Silahkan login ke blogger dengan ID anda.


  • Klik Tata Letak.


  • Klik tab Edit HTML


  • Carilah kode ]]></b:skin>



  • Copy lalu paste kode berikut diatas kode tadi ( namun ingat! widget ID serta URL gambarnya harus anda ganti sesuai dengan blog anda )



     



    #Profile1 h2{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1PTdiNHemGOhf_jPgG20Jvj0N7CIPThoDdoLs7D05bhKLnO8Kfm2cJSucJADfHdj2UIAS7-PlxNPfYw62hwnHCD6kMlHC0FIBd-7FRd2vRf76slFl5f4CLQADut5pztF4_tay5EM5SQA/) no-repeat scroll left center;
    padding:8px 8px 2px 40px;
    margin-top:15px;
    }
    #Label1 h2{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYEjLicl59kA7GqxGKo67F6DbZMlyoNEIq-ZQv5x00Tei3yA-b1a35Y7lAXDuXcryw-3JtAJq-kxMzmve-Jz7XjQ5MR4ikSqWmi2XkIjKe3WpWLlWORCXo20tzO1t9eEBddFdwdvvxRh8/) no-repeat scroll left center;
    padding:8px 8px 2px 40px;
    margin-top:15px;
    }
    #HTML2 h2{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0SfsNicZ7PMj3FErS3j3QdfiV2hSheDB6LCHD7kT5SYxe9DbMa20_puidwjtSGemEFvwbiyYj9wyR71BgamRYytM7woawOmVw9AR9gujKN88gV2SET2OgWLbE9KtOvQPMn70oihAA14Y/) no-repeat scroll left center;
    padding:8px 8px 2px 40px;
    margin-top:15px;
    }



  • Klik tombol SIMPAN TEMPLATE


  • Selesai.



    Ternyata mudah sekali bukan?




      Tambahan, agar tampilan icon cocok dengan kondisi template anda maka anda bisa mengubah nilai padding atau margin nya.


    padding:8px 8px 2px 40px;



    margin-top:15px;



     



    Selamat Mencoba!

    Share on Google Plus

    About Admin

      Blogger Comment
      Facebook Comment

    1 komentar:

    1. Komentar ini telah dihapus oleh administrator blog.

      BalasHapus

    Labels

    blogspot tutorial ( 112 ) blog tutorial ( 110 ) blogging tutorial ( 34 ) download gratis ( 27 ) guest post ( 26 ) free tool ( 24 ) free template ( 23 ) SEO ( 17 ) wordpress ( 17 ) blogger tutorial ( 9 ) the mez template ( 9 ) Belajar SEO Blogger ( 8 ) freeware ( 8 ) Blogging relax Tips ( 7 ) Dokumentasi The Mez template ( 7 ) download template ( 7 ) website info ( 7 ) google adsense ( 6 ) google service ( 6 ) modifikasi blog ( 6 ) aksesori blog ( 5 ) asal posting ( 5 ) blogger isu ( 5 ) browser ( 5 ) free icons ( 5 ) menu navigasi css ( 5 ) sahabat ( 5 ) software gratis ( 5 ) Blog ( 4 ) SEO khusus blogger ( 4 ) cool website ( 4 ) edit template ( 4 ) komputer ( 4 ) Blogspot ( 3 ) Firefox ( 3 ) Kampanye Damai Pemilu Indonesia 2009 ( 3 ) Riset Keyword ( 3 ) SEO Contest ( 3 ) Tanya Saja ( 3 ) anti virus ( 3 ) google docs ( 3 ) kotak komentar ( 3 ) navigasi dengan css ( 3 ) opera ( 3 ) template 3 kolom ( 3 ) Bisnis Online ( 2 ) Iklan anda ( 2 ) PhotoShop ( 2 ) SEO Khusus blogspot ( 2 ) Template support ( 2 ) Yahoo ( 2 ) add-on ( 2 ) alexa rank ( 2 ) backup widget ( 2 ) blog tools ( 2 ) drop down menu ( 2 ) fitur blogger ( 2 ) hosting ( 2 ) read more ( 2 ) tutor wordpress ( 2 ) uang gratis ( 2 ) unek-unek ( 2 ) virus ( 2 ) weatern union ( 2 ) wordpress tutorial ( 2 ) yahoo icon ( 2 ) Biisnis Internet ( 1 ) English ( 1 ) Google chrome ( 1 ) HUT RI ( 1 ) I'm is back ( 1 ) Info Browser ( 1 ) Jasa Pembuatan Blog ( 1 ) Link Building ( 1 ) avatar ( 1 ) banner ( 1 ) bisnis ( 1 ) cari duit di internet ( 1 ) domain ( 1 ) ebook ( 1 ) favicon ( 1 ) free ebook ( 1 ) google talk ( 1 ) hiasan blog ( 1 ) internet business-RM ( 1 ) kasus ( 1 ) kontes ( 1 ) langka tapi nyata ( 1 ) membuat navbar ( 1 ) membuat readmore ( 1 ) mencari uang di internet ( 1 ) menu dropdown ( 1 ) panduan bisnis online ( 1 ) panduan blogger ( 1 ) pasang iklan ( 1 ) plugin wordpress ( 1 ) rss button ( 1 ) search engine ( 1 ) shoutbox ( 1 ) sosok favorit ( 1 ) table of content ( 1 ) uang kopi ( 1 ) video ( 1 ) video comedy ( 1 ) wallpapers ( 1 ) wordpress plugin ( 1 )