Add icon in front of a link with CSS3 effect

Beberapa template memang sudah melengkapi linknya dengan icon tepat sebelum teks link, namun lebih banyak di antaranya yang "masih polos" tanpa embel-embel icon. Ada beberapa cara untuk menampilkan icon sebelum dan sesudah link (teks link).

1. Hanya menggunakan kode html.
2. Menggunakan kode html dan kode CSS.
3. Menggunakan javacript dan kode html.

Menggunakan bantuan kode CSS merupakan cara paling efisien karena memungkinkan berbagai inovasi untuk dikembangkan. Dengan kode css juga membuat kode html menjadi lebih sederhana. Agar link yang dilengkapi icon terlihat berbeda dari yang biasa kita gunakan, kita perlu menambahkan kode css3. CSS3 dapat memberikan berbagai efek menarik tanpa melibatkan javascript. Demo di bawah ini adalah efek yang dihasilkan melalui css3 pada sebuah link yang dilengkapi icon.

DEMO : Menampilkan atau menambah icon di depan link dengan efek css3 Efek tidak akan mempengaruhi posisi link terhadap teks lain di sekitarnya.

Kode CSS

.GRiconlinkcss3{
      padding-left:18px;
      padding-right:10px;
      display:inline-block;
      background:url(http://gubhugreyot-icon.googlecode.com/svn/GRworld-16x16.png) no-repeat;
      background-position:4px 6px;
      background-size:10px 10px;
      text-decoration:none;
      color: #FCE6D6; /*code by: gubhugreyot */ 
      font-weight:500;
      text-shadow:1px 1px 1px #000;
      transition:0.6s ease-in;
      -o-transition:0.6s ease-in;
      -moz-transition:0.6s ease-in;
      -webkit-transition:0.6s ease-in;
      -ms-transition:0.6s ease-in;
}
.GRiconlinkcss3:hover{
      background:url(http://gubhugreyot-icon.googlecode.com/svn/GRtricolor-16x16.png) no-epeat;
      background-position:2px 3px;
      background-size:15px 15px;
      color:#F00;
      padding-left:22px;
      padding-right:6px;
}

xHTML

<a class="GRiconlinkcss3" href="http://gubhugreyot.blogspot.com/" title="Panduan & Tutorial Blogger terlengkap">Tutorial Blogger</a>

Catatan/Keterangan

1. Simpan kode CSS di atas kode ]]></b:skin>
2. Gunakan xHTML di halaman posting atau bagian yang lain dari blog.
3. Anda dapat mengganti background image (icon) yang digunakan. Buatlah icon dengan ukuran maksimal 16x16 (pixel).

Bagi yang membutuhkan panduan cara menyimpan kode CSS di template blogger silahkan buka link berikut:

Tutorial : Tips & Trick menambah atau menyimpan kode CSS