Cari Artikel Blog Ini

Total Tayangan Laman

CARA MENAMBAH KETERANGAN PADA SEBUAH LINK

Post ini berfungsi untuk menambah keterangan pada sebuah link. Tampilan keterangan tersebut akan muncul jika link ddisorot oleh mouse. Cara menerapkannya sangat mudah, anda hanya perlu menambahkan kode CSS pada template blog anda daan menambahkan kode pada link yang akan ditambah keterangan. Jadi ada dua langkah yang harus anda lakukan.
LANGKAH PERTAMA
  1. Masuk ke Blogger dengan ID anda.
  2. Pilih Rancangan bagian Edit HTML
  3. Cari kode ]]></b:skin>
  4. Copy kode CSS dibawah ini, kemudian paste tepat diatas kode ]]></b:skin>


    /*---------- Keterangn link -----------*/
    a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
    font-weight:bold;
    text-decoration:none;
    }
    a.tt span{ display: none; }

    a.tt:hover{ z-index:25; color: #aaaaff; background:;}
    a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
    padding: 15px 0 0 0;
    width:200px;
    color: #993300;
    text-align: center;
    filter: alpha(opacity:90);
    KHTMLOpacity: 0.90;
    MozOpacity: 0.90;
    opacity: 0.90;
    }
    a.tt:hover span.top{
    display: block;
    padding: 30px 8px 0;
    background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
    }
    a.tt:hover span.middle{
    display: block;
    padding: 0 8px;
    background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
    }
    a.tt:hover span.bottom{
    display: block;
    padding:3px 8px 10px;
    color: #548912;
    background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
    }

  5. Klik Simpan Template
  6. Selanjutnya ikuti langkah kedua.

LANGKAH KEDUA
untuk langkah kedua, silahkan anda pilih dulu link mana yang akan ditambahkan keterangan . Anda bisa menempatkannya pada sidebar, juga dapat ditambahkan pada postingan.
Untuk link pada sidebar, ikuti langkah-langkahnya :
  1. Pilih Rancangan bagian Elemen Halaman.
  2. Klik Tambah Gadget.
  3. Pilih HTML/JavaScript.
  4. Masukkan kode link yang ingin anda tampilkan seperti contoh dibawah ini :

    <a href="Isi dengan sebuah alamat link tujuan" class="tt">Link yang ingin ditampilkan<span class="tooltip"><span class="top"></span><span class="middle">Teks yang akan tampil ketika link disorot mouse</span><span class="bottom"></span></span></a>

  5. Klik tombol Simpan.
  6. Lihat penampilan pada blog anda.


Untuk menambahkan pada postingan, caranya sama. Hanya yang perlu anda ingat, saat membuatnya harus pada mode Edit HTML bukan pada Mode Compose/Tulis.

Jika anda suka menampilkan link berupa sebuah image, anda tinggal menambahkan alamat sebuah image seperti contoh dibawah ini :

<a href="http://epg-studio.blogspot.com/" class="tt"><img src="http://1.bp.blogspot.com/_1j80TgNqd_8/SaESR56aNhI/AAAAAAAAAnY/3YSBhu-aHLU/S220/LOGO+EPG+1.jpg" /><span class="tooltip"><span class="top"></span><span class="middle">Berbagi Ilmu dan Pengalaman</span><span class="bottom"></span></span></a>

Selamat mencoba, semoga bermanfaat...!!!
Lihat juga Tips "Membuat Link dengan munculnya Judul Link"

Jika artikel ini bermanfaat..? Bagikan lewat :


BACA JUGA ARTIKEL DIBAWAH INI



Comments
8 Comments

8 komentar :

Abu Inayat mengatakan...

Wah rupanya di sini gudang nya tutor ya. mantab bro... mohon ijin copy buat koleksi tutor offline

blog bisnis online mengatakan...

Artikelnya menarik sekali, tentunya akan membawa banyak manfaat kepada kita semua yang membacannya.
Oh ya sekalian deh mau ngucapin "selamat tahun baru 2010" yach buat anda semua pengunjung blog ini, semoga mendapatkan banyak rejeki dan sukses selalu karir ngeblognya.
Salam sukses ber-bisnis internet dari Blog Buat Bisnis. Segera mantapkan langkah anda di tahun baru ini dan songsonglah masa depan yang lebih baik, anda pasti bisa..!!

Yuk mampir ke blog saya untuk mendapatkan kenang-kenangan akhir tahun.

anak nelayan mengatakan...

terima kasih infonya gan
selamat tahun baru yaa gan

elyas ngeblog mengatakan...

ini dia yang saya cari ketemu disini
boleh tukeran link boss? thx sebelumnya

hamasale mengatakan...

wah.. infonya sangat bermanfaat bos..
salam kenal sobat...
kalau butuh akses internet murah bisa mampir di blog aku ya... thanks

Astaga.com lifestyle on the net mengatakan...

begini -ni kalo sering blogwalking, ada2 saja tips yg didapat

Aku Cuma Seorang Blogger Yang Cinta Seo mengatakan...

mari kita majukan dunia perbloggeran dgn menebar tips yang kita ketahui

Rizal Fahmi mengatakan...

makasih mas sudah berbagi
ini yang saya cari2 dri tdi

Posting Komentar

Ceritakan keberhasilan/kegagalan anda setelah mencoba Tutorial Blogger pada kotak komentar. Kritik dan Saran juga boleh asal sifatnya membangun...!!!