Membuat Tooltip Otomatis di Semua Judul Posting

Membuat Tooltip Otomatis di Semua Judul Posting – sebelum membahas lebih jauh terlebih dahulu saya akan menjelaskan mengenai tooltip. Tooltip atau infotip adalah elemen tambahan yang digunakan pada sebuah web/blog dalam hubungannya dengan kursor atau pointer. Pengguna akan melihat sebuah kotak kecil melayang yang didalamnya berisi mengenai sedikit informasi atau attribut title maupun gambar saat pointer mengarah ke link/item tooltip tanpa terlebih dahulu melakukan klik pada mouse, karena efek tooltip tersebut mucul pada saat hover. Pada tutorial yang akan saya bahas kali ini adalah bagaimana cara untuk membuat tooltip secara otomatis (auto tooltip) muncul di setiap attribut title pada judul posting dan juga cara untuk membuat tooltip secara manual di beberapa link maupun gambar yang terdapat di blog dengan metode jQuery dan sedikit style CSS untuk mempercantik tampilan tooltip. Demonya bisa terlebih dahulu di lihat pada judul artikel di atas. Jika anda sudah pernah membuat link otomatis pada judul posting pasti tidak akan kesulitan untuk penerapan kode dalam memasang efek tooltip ini. Untuk penjelasan lebih lanjut dan agar lebih mudah dipahami, berikut secara detailnya cara untuk Membuat Tooltip Otomatis di Semua Judul Posting.

1. Login ke akun blogger.
2. Masuk ke menu Template lalu pilih Edit HTML.
3. Copy kode CSS berikut ini lalu taruh di atas kode ]]></b:skin>

#tooltip{ position:absolute; border:2px solid #333; background:#222; padding:2px 5px; color:#fff; display:none; text-transform:uppercase; font-weight:bold; box-shadow:0 0 5px #00ff00; }

4. Selanjutnya copy kode berikut ini lalu taruh di atas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
this.tooltip = function(){
        xOffset = 10;
        yOffset = 20;
    $("a.tooltip").hover(function(e){                                              
        this.t = this.title;
        this.title = "";                                      
        $("body").append("<a id='tooltip'>"+ this.t +"</a>");
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");        
    },
    function(){
        this.title = this.t;        
        $("#tooltip").remove();
    });    
    $("a.tooltip").mousemove(function(e){
        $("#tooltip")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });            
};
$(document).ready(function(){
    tooltip();
});
</script>

Keterangan:
Perhatikan kode yang berwarna oranye, apabila pada template blog anda sudah terdapat kode tersebut maka tidak perlu menambahkannya lagi.

5. Kemudian cari kode

<data:post.title/>

Atau

<a expr:href='data:post.link'><data:post.title/></a>

Atau

<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

Untuk lebih jelasnya struktur keseluruhan kode tersebut seperti di bawah ini (pada template default blogger).

<h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3> 

Sesuaikan dengan template masing-masing (setiap template berbeda) cari yang semirip mungkin dengan kode di atas. Perhatikan kode yang berwarna biru, jika sudah pernah melakukan optimasi kemungkinan kode h3 sudah di rubah menjadi h1 atau h2. Apabila menggunakan template dari situs penyedia template blogger, biasanya kode tersebut sudah di perpendek. Sebagai pedoman untuk mencari, biasanya kode tersebut sudah berubah menjadi seperti berikut ini.

<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.link'><data:post.title/></a>
</b:if>
</h1>

Apabila kode tersebut sudah di temukan, ubah kode yang berwarna merah dengan menambahkan kode class='tooltip' secara lengkapnya kode tersebut menjadi seperti dibawah ini.

<a class='tooltip' expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>

Langkah terakhir tinggal lakukan klik Simpan template, maka kini secara otomatis setiap judul posting yang terdapat pada halaman blog anda sudah terdapat efek tooltip.

Efek tooltip tersebut bisa juga kita terapkan ke dalam setiap link teks maupun link gambar secara manual dengan menambahkan class="tooltip" di setiap link yang di kehendaki.

Sebagai contoh, misal akan menambahkan efek tooltip pada link yang terdapat di postingan maka penulisan link tersebut menjadi seperti di bawah ini.

<a class="tooltip" href="http://mas-andes.blogspot.com" title="Faceblog Evolutions">Faceblog Evolutions</a>

Atau jika ingin menerapkan kedalam gambar maka penulisannya menjadi seperti di bawah ini.

<a class="tooltip" href="http://mas-andes.blogspot.com" title="Faceblog Evolutions"><img src="URL-GAMBAR.jpg" width="560" height="100" alt="Faceblog Evolutions"/></a>

Maka dari kedua kode tersebut jika di tampilkan maka hasilnya akan seperti dibawah ini:

Faceblog Evolutions

dan



Demikian akhir dari tutorial cara Membuat Tooltip Otomatis di Semua Judul Posting, baik itu untuk menambahkan efek tooltip secara manual pada setiap link teks maupun gambar.