Okelah Beben si bloglang anu ganteng kalem tea akan memostingkan bagaimana cara memasukan trik end of page slide out box original post End of Page Slide Out Box with jQuery. Ketika kita melakukan scroll kebawah, maka akan tampak sebuah kotak muncul. Pada blog ini contohnya seperti follower box. Sebenarnya kalau sobat mau berkreatifitas, web/blog yang Beben sharing disini kebanyakan mengusung trick and tips or tutorial gaya punya b-)
Jadi urusannya tinggal daya kreasi kita untuk mau apa, lalu masukin deh ke blog sobat tercinta :x Memang tidak semudah membalikan telapak tangan kalo mau ini mau itu. Butuh kerja keras daya upaya 199% :))
Ini yg sedikit rumitnya sob. Carilah unique ID pada template sobat yg mengarah ke bawah. Biasanya mah bertitlekan footer. Kalo sudah ketemu sisipkan code HTML ini sesudahnya. Ex:
Happy blogging \m/
Jadi urusannya tinggal daya kreasi kita untuk mau apa, lalu masukin deh ke blog sobat tercinta :x Memang tidak semudah membalikan telapak tangan kalo mau ini mau itu. Butuh kerja keras daya upaya 199% :))
Trik ini jQuery plugin yah, jadi jika mau memasang End of Page Slide Out Box ini di template sobat sudah harus tertanam script jQuery.
Kode CSS
#slidebox{
width: 400px;
height: 100px;
padding: 10px;
background-color: #fff;
border-top:3px solid #E28409;
position: fixed;
bottom: 0px;
right: -430px;
-moz-box-shadow: -2px 0px 5px #aaa;
-webkit-box-shadow: -2px 0px 5px #aaa;
box-shadow: -2px 0px 5px #aaa;
}
a.close{
background: #fff url(http://blogger.com/img/close.png) no-repeat top left;
width: 15px;
height: 15px;
position: absolute;
cursor: pointer;
top: 5px;
right: 5px;
}
a.close:hover{
background: #FF0000;
}
Secara kasar inti kode CSS yg dipakai seperti itu. Kalau mau menambahkan silahkan saja. Masukin deh diatas kode ]]></b:skin> CSS-nya. Perhatikan kode yg diberi warna merah itu. Kalau width itu dirubah, maka rubah juga kode right: -XXXpx (nilainya harus lebih besar dari coded width)width: 400px;
height: 100px;
padding: 10px;
background-color: #fff;
border-top:3px solid #E28409;
position: fixed;
bottom: 0px;
right: -430px;
-moz-box-shadow: -2px 0px 5px #aaa;
-webkit-box-shadow: -2px 0px 5px #aaa;
box-shadow: -2px 0px 5px #aaa;
}
a.close{
background: #fff url(http://blogger.com/img/close.png) no-repeat top left;
width: 15px;
height: 15px;
position: absolute;
cursor: pointer;
top: 5px;
right: 5px;
}
a.close:hover{
background: #FF0000;
}
jQuery Plugin
<script type="text/javascript">
//<![CDATA[
$(function() {
$(window).scroll(function(){
/* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
/* remove the slidebox when clicking the cross */
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
//]]>
</script>
Letakkan diatas tag </body>//<![CDATA[
$(function() {
$(window).scroll(function(){
/* when reaching the element with id "last" we want to show the slidebox. Let's get the distance from the top to the element */
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
/* remove the slidebox when clicking the cross */
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
//]]>
</script>
HTML kode
<div id="slidebox">
<a class="close"></a>
YOUR CONTENT HERE
</div>Menanamkan kode ini diantara tag <body> ... </body> Kalo gak mau ribet, Add a Gadget ► HTML/Javascript.Ini yg sedikit rumitnya sob. Carilah unique ID pada template sobat yg mengarah ke bawah. Biasanya mah bertitlekan footer. Kalo sudah ketemu sisipkan code HTML ini sesudahnya. Ex:
<div id="footer">
<div id="last">
bla bla bla
</div>
</div>Kalau tidak ada kegagalan dalam menyisipkan tag tersebut, maka sobat sukses :) Good luck...Happy blogging \m/
Loading... |
6 comments
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...