Cara Membuat ToolTip Readmore dengan Efek Jquery

Akhir-akhir ini banyak pengembang website yang mulai memanfaatkan script jquery.
Karena terbukti dengan jquery serta mengaplikasikannya di dalam situs mampu merubah penampilan sehingga tidak kaku.

Penggunaan jquery sangat mendukung bagi kebanyakan praktisi blog untuk berlomba-lomba dalam memberikan service terbaiknya untuk pengunjung.  Anda pasti menginginkan blognya banyak dikunjungi, baik teman blogger maupun orang lain yang nyasar masuk di blog anda.

Tidak sulit untuk belajar mendalaminya karena sudah banyak teman blogger yang telah memberikan tutorial mengenai jquery ini. Saya bukanlah seorang yang pandai memainkan kode-kode tapi dengan berbekal niat serta nekat rasanya ingin coba tularkan ilmu yang baru saja kudapat.

Bagi sobat blogger pasti sudah akrab dengan istilah readmore (baca selengkapnya).  Dulu saya pernah meng-entry artikel tentang readmore, silahkan baca Cara Membuat Readmore di kanan
Juga artikel tentang Tooltip, silahkan baca Cara Membuat ToolTip pada Link atau Gambar

Nah Dua theme itulah yang akan kita jadikan sumber acuan dalam pembuatan tooltip readmore dengan sentuhan efek jquery.

Tidak cuman itu saja, namun pemanfaatan CSS3 pun masuk dalam tutorial kali ini.
Yuk kita mulai…

Penting.!:
Sebelum meng-edit template html, diharuskan malakukan Download Full Template serta mencentang kotak kecil bertuliskan Expand Widget Templates.
Bila sudah, sekarang kita mulai beraksi:

1. Siapkan kode CSS (tinggal copas saja kode warna merah dibawah ini lalu masukkan di atas kode ]]></b:skin>)

#easyTooltip{
padding:3px 10px 5px;
border:1px solid #333;
background: #4a6873;
color:#ffffff;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 5px 5px 5px black;
-webkit-box-shadow: 5px 5px 5px black;
box-shadow: 5px 5px 5px black;
}

2. Pasang script jquery (warna biru) ini dan tempatkan di atas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

CATATAN: Jika dalam template sobat sudah ada script jquery, maka langkah nomor 2 ini jangan dilakukan, bisa terjadi conflict.

3. Pasang kode toltip jquery ini di bawah script no 2.

<!-- begin Tooltips -->
<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>
<!-- end tooltips -->

4. Cari kode readmore dalam template html sobat.
Kode readmore adalah seperti ini:

<div>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>

5. Hapus kode pada langkah nomor 4, dan ganti dengan yang ini:

<div>
<a class='tooltip' expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>

6. Dan yang terakhir jangan lupa save (simpan)

Pekerjaan sudah selesai, sekarang lihat hasilnya, klik DEMO

DEMO