22 May 2012

Cara Menambahkan Icon Disamping Link

Pada tutorial kali ini kita akan belajar lagi menambahkan variasi icon pada template blogger. Postingan kali ini saya akan berbagi lagi bagaimana cara menambahkan icon disamping links pada sidebar dan bottom yang contohnya bisa dilihat pada screenshot berikut atau pada blog ini:
  1. Untuk menambahkan icon atau image disamping link-link pada sidebar ikuti tutorial berikut:  

    • Pada dasbor>>> Klik Tata Letak>>> Edit HTML>>> Cari kode seperti berikut:

      .sidebar ul {
      list-style:none;
      margin:0 0 0;
      padding:0 0 0;
      }

  • Kalau sudah menemukan kode tersebut tambahkan kode berikut persis dibawah kode tadi:
      .sidebar li{
     background:url(Alamat url image sobat letakkan disini) no-repeat 3px 9px;
     border-bottom:1px dotted #ccc;

     text-indent:0;

     line-height:1.4em;

     margin:0;
     padding:5px 0 4px 20px
}

2. Sedangkan untuk menambahkan icon pada link-link yang berada pada footer atau bottom
  • Cari kode seperti berikut:
#bottom ul {
padding:0;
margin:0;
color:#333;
}
  • Kalau sudah menemukan kode diatas, tambahkan kode berikut:
#bottom ul li {
list-style-type:none; 
background:url("Alamat url image sobat letakkan disini") no-repeat 0px .17em;
padding-left:17px;
margin-top:2px;
}
  • Tulisan berwarna biru ganti dengan alamat icon sobat.
  • Simpan template
  • Selesai
Semoga bermanfaat.

Monggo Donlot

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

0 comments:

Post a Comment

 

Copyright @ 2013 Monggo Download.