Powerguide9 - Kali ini kita coba memperindah link yang ada pada halaman website kita yuk, jadi nanti ketika link mau diklik atau mouse sedang berada pada link tersebut akan muncul kotak sticky, dan kotak sticky tersebut bisa kita kasih gambar dan keterangan tentang link yang akan dibuka.
Untuk membuat Sticky box, kita bisa menggunakan javascript dan CSS, jadi tentu saja tidak murni javascript, tapi tetap kita kolaborasikan dengan CSS.
Contohnya:
Tutorial Joomla
Tips Blogger Cara memasang disqus di blogspot
Tips Java Script
Tambahkan konten sesuai keinginan anda di sini
Anda bisa belajar Joomla Step by step dengan mudah.
Anda bisa belajar cara memasang disqus pada widget komentar blogspot anda.
Anda bisa belajar javascript.
Langkah-langkahnya yaitu bisa anda ikuti sebagai berikut:
Pertama buat kode html seperti kode di bawah ini:
Yang berwarna Merah adalah yang akan ditampilkan secara standar atau default pada halaman, sedangkan yang berwarna biru, adalah kode untuk mengatur tampilan sticky-nya.
Kemudian berikan CSS berikut ini
Dan berikan kode Javascript berikut
Pertama buat kode html seperti kode di bawah ini:
<html> <head> <title>tesssst</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="stickytooltip.js"> </script> <link rel="stylesheet" type="text/css" href="stickytooltip.css" /> </head> <body><p>Isi konten lainnya di sini</p> <p><a href="http://powerguide9.blogspot.com/2016/03/halaman-utama-panduan-joomla.html" data-tooltip="sticky1">Tutorial Joomla</a></p> <p><a href="http://powerguide9.blogspot.com/2016/08/cara-mudah-memasang-widget-disqus-pada-komentar-blogger.html" data-tooltip="sticky2">Tips Blogger Cara memasang disqus di blogspot</a></p> <p><A href="http://powerguide9.blogspot.co.id/search/label/Javascript?&max-results=5" data-tooltip="sticky3" />Tips Java Script</a></p> <p>Tambahkan konten sesuai keinginan anda di sini</p><!-- Mulai Deskripsi Sticky --> <div id="powerguide9-stickytooltip" class="stickytooltip"> <div style="padding:5px"> <div id="sticky1" class="atip" style="width:200px"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3iDIh9rTepkWqEuDCeDBH70x0rgAE4SH4hORdVNlVBmZ1lPfumM_fifSWZf2hRgrk_mLoGQ8Zb6jXJoWqfKHCz0bPlKXsWHcDnMDUK85IPVKbfQUK5_uR_Ue_c0rUe3c3jujKFMVniWA/s1600/joomla-Tutorial2.jpg" width='200' /><br /> Anda bisa belajar Joomla Step by step dengan mudah. </div> <div id="sticky2" class="atip" style="width:262px"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih-w7d78Di5BKu903Bt8syWf86C9ZuuVJyYr180YZ5cVSbS0yUdx6WcXj6xSkOXhnL0nPAijpXfn40ZsJaQ-F0UJwNB1o2CmFzT_9REVxWfiMkfRRw1mXUXUptukBW1OEZLbVs_lrIqjY/s1600/diskus.JPG" width='200'/><br />Anda bisa belajar cara memasang disqus pada widget komentar blogspot anda. </div> <div id="sticky3" class="atip"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM7lHRWldZlk9VdmrpB-iLv4-b-uXK8BCf-UA40E97UR6nBj5aZ6zSgZU58dLppLW_qk0tpyGqQMyeALjZ2ghp9Sz7sJ4BWeVQc2gxJhM997VYKbEe0nqbseybrvhP6QiAlOMmveuxIbk/s1600/javascript.JPG" width='200' /><br />Anda bisa belajar javascript. </div> </div> <div class="stickystatus"></div> </div> <!-- Selesai Deskripsi Sticky --></body> </html>
Yang berwarna Merah adalah yang akan ditampilkan secara standar atau default pada halaman, sedangkan yang berwarna biru, adalah kode untuk mengatur tampilan sticky-nya.
Kemudian berikan CSS berikut ini
<style>
.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;
}
</style>
Dan berikan kode Javascript berikut
<script> var stickytooltip={ tooltipoffsets: [20, -30], fadeinspeed: 200, rightclickstick: true, stickybordercolors: ["black", "darkred"], stickynotice1: ["Coba Tekan huruf \"s\"", "atau klik kanan"], stickynotice2: "Klik di luar kotak untuk menyembunyikan kotak sticky", //***** Jangan edit bagian setelah tulisan ini 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) } }) }) } } //stickytooltip.init("targetElementSelector", "tooltipcontainer") stickytooltip.init("*[data-tooltip]", "powerguide9-stickytooltip") </script>
Beritahu Teman Anda Melalui :
Tidak ada yang istimewa dalam diri saya. Terima kasih atas kunjungan anda dan membaca Cara Membuat Sticky Box Pada Link Dengan Javascript ToolTips, semoga Power Guide 9 bermanfaat untuk kita semua.
0 Komentar
Penulisan markup di komentar