Your Ad Here

Memasang Sticky Tooltips Pada Sidebar Blog.



Memasang Sticky Tooltips Pada Sidebar BlogSetelah sekian lama tidak bisa online dan oprek blog dikarenakan kerjaan yang mendesak saya untuk segera diselesaikan. Sebelumnya saya juga mohon maaf kepada para sobat Blogger karena tidak bisa membalas kunjungan sobat semua, dan semoga semua bisa memaafkan...:D

Pada kesempatan kali ini saya akan mencoba untuk berbagi sedikit tutorial yang saya rasa sobat sudah tidak asing lagi, yaitu membuat sticky tooltips pada sidebar blog.

Bagi para sobat yang belum mengetahuinya silakan sobat lihat pada gambarnya dan kalau masih kurang jelas, silakan para sobat arahkan cursor pada bagian sidebar forum disebelah kanan blog saya yang nantinya akan muncul tooltips image lengkap dengan diskripsinya.

Ok dech kita langsung saja pada pokok topiknya, dan langkah pertama yang harus sobat lakukan adalah...:

Silakan copy script js dibawah ini dan beri nama sebagai js ekstension, misalnya terserahkamu.js
/* Sticky Tooltip script (v1.0)
* Created: Nov 25th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full script
* Tweaked by Rchymera at http://rchymera.blogspot.com
*/


var stickytooltip={
tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips
fadeinspeed: 200, //duration of fade effect in milliseconds
rightclickstick: true, //sticky tooltip when user right clicks over the triggering element (apart from pressing "s" key) ?
stickybordercolors: ["black", "darkred"], //border color of tooltip depending on sticky state
stickynotice1: ["Press \"s\"", "or right click", "to sticky box"], //customize tooltip status message
stickynotice2: "Click outside this box to hide it", //customize tooltip status message

//***** NO NEED TO EDIT BEYOND HERE

isdocked: false,

positiontooltip:function($, $tooltip, e){
var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(),
x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(stickytooltip.tooltipoffsets[0]*2) : x
y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
$tooltip.css({left:x, top:y})
},

showbox:function($, $tooltip, e){
$tooltip.fadeIn(this.fadeinspeed)
this.positiontooltip($, $tooltip, e)
},

hidebox:function($, $tooltip){
if (!this.isdocked){
$tooltip.stop(false, true).hide()
$tooltip.css({borderColor:'black'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[0]}).html(this.stickynotice1)
}
},

docktooltip:function($, $tooltip, e){
this.isdocked=true
$tooltip.css({borderColor:'darkred'}).find('.stickystatus:eq(0)').css({background:this.stickybordercolors[1]}).html(this.stickynotice2)
},


init:function(targetselector, tipid){
jQuery(document).ready(function($){
var $targets=$(targetselector)
var $tooltip=$('#'+tipid).appendTo(document.body)
if ($targets.length==0)
return
var $alltips=$tooltip.find('div.atip')
if (!stickytooltip.rightclickstick)
stickytooltip.stickynotice1[1]=''
stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
stickytooltip.hidebox($, $tooltip)
$targets.bind('mouseenter', function(e){
$alltips.hide().filter('#'+$(this).attr('data-tooltip')).show()
stickytooltip.showbox($, $tooltip, e)
})
$targets.bind('mouseleave', function(e){
stickytooltip.hidebox($, $tooltip)
})
$targets.bind('mousemove', function(e){
if (!stickytooltip.isdocked){
stickytooltip.positiontooltip($, $tooltip, e)
}
})
$tooltip.bind("mouseenter", function(){
stickytooltip.hidebox($, $tooltip)
})
$tooltip.bind("click", function(e){
e.stopPropagation()
})
$(this).bind("click", function(e){
if (e.button==0){
stickytooltip.isdocked=false
stickytooltip.hidebox($, $tooltip)
}
})
$(this).bind("contextmenu", function(e){
if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
stickytooltip.docktooltip($, $tooltip, e)
return false
}
})
$(this).bind('keypress', function(e){
var keyunicode=e.charCode || e.keyCode
if (keyunicode==115){ //if "s" key was pressed
stickytooltip.docktooltip($, $tooltip, e)
}
})
}) //end dom ready
}
}

//stickytooltip.init("targetElementSelector", "tooltipcontainer")
stickytooltip.init("*[data-tooltip]", "mystickytooltip")


Silakan sobat upload terserahkamu.js tersebut pada hostingan para sobat, dan ambil URLnya.

Langkah kedua silakan sobat copy script css dibawah ini dan beri nama dengan .css, misalnya terserahkamu.css selanjutnya upload seperti langkah pertama...:
.stickytooltip{
box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
display:none;
position:absolute;
display:none;
border:5px solid black; /*Border around tooltip*/
background:white;
z-index:3000;
}


.stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
background:black;
color:white;
padding-top:5px;
text-align:center;
font:bold 11px Arial;
}


Langkah ketiga silakan sobat copy lagi script dibawah ini dan silakan edit pada bagian js dan cssnya...:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="URL terserahkamu.js">

/***********************************************
* Sticky Tooltip script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full script
***********************************************/

</script>

<link rel="stylesheet" type="text/css" href="URL terserahkamu.css" />

Setelah selesai silakan para sobat masuk pada menu Edit HTML blog sobat, dan letakkan script diatas dibawah code...]]></b:skin> kemudian save.

Langkah ke empat silakan sobat masuk bagian page element lalu tambahkan widget HTML/Java script, kemudian letakkan script dibawah ini dalam widget tersebut...:
<p><li><a href="URL YANG SOBAT TUJU" data-tooltip="sticky1"target="_blank">NAMA SITUS</a></li></p>
<p><li><a href="URL YANG SOBAT TUJU" data-tooltip="sticky2"target="_blank">NAMA SITUS</a></li></p>

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="URL IMAGE SOBAT" /><br />
TEKS DISKRIPSI TOOLTIPS <b><a href="URL YANG SOBAT TUJU"target="_blank">NAMA SITUS</a></b>, TEKS DISKRIPSI TOOLTIPS
</div>

<div id="sticky2" class="atip" style="width:200px">
<img src="URL IMAGE SOBAT" /><br />
TEKS DISKRIPSI TOOLTIPS <b><a href="URL YANG SOBAT TUJU"target="_blank">NAMA SITUS</a></b>, TEKS DISKRIPSI TOOLTIPS
</div>

</div>

<div class="stickystatus"></div>
</div>
Kemudian silakan sobat save, dan lihat hasilnya...:D
Sekian penjelasan dari saya dan sebelumnya saya juga minta maaf apabila ada kata-kata yang kurang berkenan bagi para sobat, semoga bermanfaat dan selamat bertweaking ria hehehe...:D

Credit: Here.

Share to:

Related Post:

29 Response to "Memasang Sticky Tooltips Pada Sidebar Blog."

  1. akhatam says:

    Wahh kerenn abizz..!!! mantapp tutorialnya bungg!

    Mufi_ed says:

    wah keren abizzz !!!
    like it !!!

    O y mas ryan !!!
    pngen minta tutor cara mmbuat tombol "share to" sperti mas (tepatnya diatas related post !!)
    pengen di pasang di blog ku !!!
    kasih yach !!!
    hahahhahaa....

    Khamardos's Blog | Mufied
    Blogging to share the tips and tricks for You ...

    menarik sekali tutorialnya, kapan2 pengen juga di praktekin
    makasih..

    @Kang Khatam : Yupz makasih Kang Khatam and thanks komengnya,sering2 mampir yach...:D

    @Mufi_ed : Ok2 ntar akan segera diluncurkan tapi klo kgk betah nunggunya mampir aja ke blog si Ega,hahaha...lol.

    @Khamardos's : Mantep postingannya,hahaha...lol.

    @mixedfresh : Silakan2 sobat,moga betah mampir dimari...:D

    Nice Post.. Thanks Sobat, Salam kenal. :)

    narti says:

    makasih tutorialnya...tapi pusing lihat kodenya....hiks...

    Rchymera mana sih? Bandung?

    sda says:

    tutorial yg sangat bermanfaat.
    makasih sharingnya.

    wah, keren nih tipsnya. Sobat apakah ini membuat blog kita menjadi berat.??? :) Saling Follow Balik yah sobat.. jhhee Blog ku sepi.. jhhee Terima Kasih.. im Follow U, Follow Back ya sobat, sekalian Ma tukeran Link nih...

    @Laksamana Embun : Makasih sdh mampir sobat and sering2 mampir yach tuk mempererat persahabatan walau blm prnh bertemu.

    @Mbak Narti : Yupz sama2 Mbak,btw klo pusing resepnya ditambahin lg xixixi...:D
    Saya dari Kediri JATIM nich Mbak hehehe...:D

    @Sda : Sama2 Mbak,kembali kasih hehehe...:D

    @Tanya Gratisan : Ya semua tergantung koneksi dan ketepatan dalam peletakan codingnya sobat,btw blog saya berat kgk hehehe...:D
    Ok2 follow and link back akan segera dilaksanakan klo ntar lg buka blog, tengkiyu sdh mau mampir sobat...:D

    tomo says:

    wah ini panjang amat scriptnya gan.
    aku copas aja aku save gan.
    minta ijin

    jangan lupa diangkut award buat kamu di PENGHARGAAN DI SELA-SELA PERSIAPAN UAS

    thx infonya...kalo buat platform WP gmn caranya yah? ato ada informasi plugin nya gak?

    ems says:

    hmmm.. bagus nih... hehe

    attayaya says:

    wah keren juga hasilnya ya
    makasih atas infonya neh

    @Tomo : Silakan dicomot Mas gratis kok xixixi...:D

    @Tukang Colong : Ok2 sobat akan sesegera mungkin diangkut,sblmnya thanks buat kunjungan baliknya...:D

    @The International Times : Saya rasa klo pakai WP jg bs msk pada bagian header.php, tapi klo mslh pluginnya blm pernah coba Mas hehehe...:D

    @Ems : Thanks kunjungannya sobat dan semoga betah mampir disini,slm...:D

    @Attayaya : Yupz sama2 sobat...:D

    Tihang says:

    Mantap friend, boleh ni....

    tfd says:

    wahhh...js yah? mangtaf coy...!!!

    odonk's says:

    wih tutornya lengkap bgt brad..
    nice dah... :)

    oke saya terima infonya sob :)
    oya sob aku udah follow + pajang link mu. lakukan sebaliknya yaaa :)

    fajar says:

    kunjungan balik dulu ya om....he..he..he..thanks telah mampir...

    bolehlah gan tipsnya disimpan dulu neh....thanks infonya!

    Ega says:

    Mantabs tutorialnya. sip

    wah wah wah kerennn bgt infonya.... ^0^
    muup y baru mampir balik,ma'lum lagi jenuh nie ^_^?
    sklyan ikut follow y ^_^

    sob ada award silahkan dicek yaaa :)

    ikutan ya..

    klo pake ini, blog jadi berat ga ya? saya emang agak cerewet klo soal widget yng bnyak2....


    salam kenal ya kawan.. :)

    Erie88 says:

    Kok gak bisa jalan ya? Aq coba untuk image malah kagak nongol imagenya...(jadi ilang imagenya).Thx

    noname says:

    Class = atip --> boleh diganti gak??

    Anonymous says:

    thanks banget...., dan bermutu banget ni tipsnya
    makasih banyak

Post a Comment

Sudah baca jangan lupa tinggalin komentarnya yach friend's tanpa kalian semua saya bukanlah apa-apa,thanks...:-)

Powered by Blogger