Rchymera|Blog™

Setelah 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.