Memasang Icon Tab Pada Sidebar

icon tab Setelah membaca komentar beberapa sobat di postingan cara membuat tab view menu, yang menanyakan bagaimana cara membuat icon atau bullet icon pada tab view menu. Sebenarnya icon tersebut sudah ada pada template, dan tidak di tambahkan secara manual pada saat membuat tab view menu.

 

Icon tersebut akan muncul dengan sendirinya jika kita membuat daftar tulisan, link atau blogroll dengan menambahkan kode <ul><li> dan menutupnya dengan </li></ul>. Atau jika sobat membuat daftar link menggunakan fasilitas tambah gadget pada elemen halaman di blogger.

link

Untuk menambahkan icon yang berwarna kuning tersebut sangatlah mudah, ikuti langkah-langkahnya berikut ini :

 

  • Login ke blogger dengan user ID sobat.
  • Tuju Tata Letak.
  • Klik tab Edit HTML.
  • Kemudian tambahkan kode berikut ini diatas kode ]]></b:skin>

    #sidebar-wrapper ul {

    color:#333;

    margin:0px;

    padding:0px;

    }


    #sidebar-wrapper ul li {

    background:url(http://lh6.ggpht.com/_7Y9pl24WpQY/SuHhL1fZSMI/AAAAAAAAB_w/engBWuVJmlo/link_arrow_thumb%5B1%5D.png) no-repeat 0px 5px;

    margin:0px 0px 5px;

    padding:0px 0px 5px 15px;

    }


    #sidebar-wrapper ul li a:hover {

    margin:0px 0px 5px;

    padding:0px;

    }

  • Simpan Template.

 Keterangan :

  1. Kode yang berwarna merah adalah kode css untuk sidebar blog saya, sobat sesuaikan dengan kode css sidebar blog sobat, tapi umumnya sama.
  2. Kode yang berwarna ungu adalah url dari icon, bisa sobat ganti sesuai keinginan sobat.

 Contoh penulisan manual :

 

<ul>

 

<li><a href="http://miscah.blogspot.com/2009/12/mempercantik-menu-dengan-mycssmenu.html"> Mempercantik Menu Via MyCSSMenu.com</a></li>

 

<li><a href="http://miscah.blogspot.com/2009/12/memasang-widget-sharing-is-sexy.html"> Memasang Widget Sharing is Sexy di Blog</a></li>

 

<li><a href="http://miscah.blogspot.com/2009/12/pasang-breadcrumb-navigasi-di-blog.html"> Pasang Breadcrumb Navigasi di Blog</a></li>

 

<li><a href="http://miscah.blogspot.com/2009/12/acak-copy-paste-artikel-via-tynt.html"> Malacak Copy Paste Artikel via Tynt Insight</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/01/mengganti-background-dengan-gradient.html"> Mengganti Background Dengan Gradien Image</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/01/cara-membuat-label-dengan-fungsi-scroll.html"> Label Dengan Fungsi Scroll</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/01/tabel-perhitungan-google-pagerank.html"> Tabel Perhitungan Google PageRank</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/01/optimalkan-feedburner-dengan-memasang.html"> Cara Memasang PageFlip</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/01/membuat-efek-tulisan-dengan-css-text.html"> Membuat Efek Tulisan Dengan CSS Text Shadow</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/03/menyimpan-file-di-google-sites.html"> Menyimpan File di Google Sites</a></li>

 

<li><a href="http://miscah.blogspot.com/2010/03/menyembunyikan-image-pada-read-more.html"> Menyembunyikan Image Pada Read More Otomatis</a></li>

 

</ul>

Tulisan yang saya tebalkan adalah kode yang harus sobat tambahkan setiap mengisi tulisan yang didalamnya terdapat link.

 

Semoga tutorial singkat ini bisa bermanfaat.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

15 comments

21 Maret 2010 10.26

Wa Untuk Hasil sebagus Itu Susa juga ya!!

21 Maret 2010 10.44

gak susah kok mas adib..klo mo pinter, coba bt blog br u/ uji coba mas adib..otak-atik aja template-nya, lama2 pasti jago

21 Maret 2010 12.53

Mantab hasilnya sobat. Tapi sayang isi tab view saya terisi secara otomatis dengan JS. Bisa diisi ga kira2? Mohon bantuannya. Thanks.

21 Maret 2010 14.34

biasanya otomatis, dlm js top komentar atau top artikel ada <ol> ganti saja dengan <ul>

21 Maret 2010 23.47

Perlu dicoba nich... thanks kawand...

22 Maret 2010 16.29

thanks for info...
nice blog..

http://trojandecoder.blogspot.com/

23 Maret 2010 06.21

iyah begitu caranya...gimana cih kalian ini...
makacih Bos...coba ah hihi ;))

27 Maret 2010 15.21

hadir bos anak baru mohon bimbingane

lumayan banyak juga kodenya,,ijin tkp sob

30 Maret 2010 22.27

big thxs mas atas masukan2nya semoga blog tambah keren selalu

23 Mei 2010 21.53

waw keren kang blognya, dan infonya juga keren abis, makasih yach ....

23 Juni 2010 12.35

mantap gan blognya... numpang lewat ya

7 Februari 2011 08.57

mantab mas.... sudah jadi....

23 Oktober 2011 12.58

Ini dia yg ku cari mas...

12 Juni 2012 02.15

nice info...makasih gan

Poskan Komentar

Reader Community

Recent Comments