• Twitter
  • Facebook
  • Google+
  • Instagram
  • Youtube

Sunday, October 21, 2012

Cara Agar Link Tampil Dengan Icon Open Tab


            Mungkin anda pernah melihat sebuah link yang disampingnya terdapat Icon OpenTab. Trik ini mungkin tidak ada pengaruhnya terhadap traffik ataupun SEO, melainkan hanya untuk menciptakan nilai estetis tersendiri di artikel tersebut.sehingga tampilan artikel di blog anda akan menjadi lebih baik lagi


            Untuk  membuat link dengan icon opentab ini, anda cukup menambahkan kode CSS pada template blog anda. dengan langkah-langkah sebagai berikut :
     1.      Langkah yang pertama, pastinya anda harus masuk ke template editor blog anda.
     2.      Kemudian centang “Expand Widget Template”
     3.      Cari kode
.post-body {bla bla bla
}
     4.      Tempelkan kode berikut ini tepat dibawah kode nomer 3:
.post-body a{
   padding-right: 18px;
   background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-xAOca4Jjxw79Y6cURMtlR_zxblcGDxA2QERAPPidSjddKziAdJkJGOdEbTPx8_vWGIwnWS0NYYhZpvVHxnlgTHVtzbXbcfkD3PAWnpJRup3B7J46lvsse5o_sZ5cdMCTIWULyxnCkCyg/s1600/link.png) no-repeat center right;
}
.separator a{ background:none;}

     5.      jika kode .post-body a sudah tersedia, anda cukup menambahkan kode berikut ini
padding-right: 18px;
   background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-xAOca4Jjxw79Y6cURMtlR_zxblcGDxA2QERAPPidSjddKziAdJkJGOdEbTPx8_vWGIwnWS0NYYhZpvVHxnlgTHVtzbXbcfkD3PAWnpJRup3B7J46lvsse5o_sZ5cdMCTIWULyxnCkCyg/s1600/link.png) no-repeat center right;
6. Terakhir. Simpan Template.

Tetapi meskipun link tersebut memiliki icon open tab disampingnya, bukan berarti link tersebut akan terbuka di tab baru. Cara ini hanya mengubah tampilan link nya saja. Nah, jika anda ingin membuat semua link yang ada diblog anda terbuka secara otomatis di tab baru anda bisa membaca artikel saya selanjutnya mengenai Cara Agar Semua Link Terbuka di Tab Baru.
Selamat Mencoba !!
#salam terhangat dari Mr.DHI           

7 comments:

  1. sayangnya ini cuma icon :(

    coba link beneran kaya wikipedia pasti keren ehehe :D

    ReplyDelete
  2. contohnya kya apa ya ??
    bingung --'

    ReplyDelete
  3. nanti kapan kapan pasti saiia coba kang.. makasii tipsnya iia ;)

    ReplyDelete
  4. buat pemanis ya sobat, bungkus dulu ah, trims sharingnya dan salam sukses selalu

    ReplyDelete
  5. mbungkusnya kapan-kapan kayaknya, mklum saya seringnya kacaw klo edit2 template...:(

    ReplyDelete
  6. demonya bang kalau ada :D

    #salam sehat dari Yousake NKRI

    ReplyDelete

Anda diwajibkan membaca Privacy Policy terlebih dahulu sebelum berkomentar.

Contact

Get in touch with me


Adress/Street

12 Street West Victoria 1234 Australia

Phone number

+(12) 3456 789

Website

www.johnsmith.com