◄ Min  Size Fonts: + | - | ± Color: Max ►

Slide Out Serelek Geleser jQuery plugin

Membuat konten muncul ketika melakukan scroll ke bawah begini caranya membuatnya end of page slide out box. Yup'z slide out merupakan salah satu trick jQuery plugin agar tercipta itu semua :D Kalau kepingin lebih full stylish dengan fitur yg begituan bisa sobat cek disini looking for slide features jquery plugin.
Sekarang kita bahas lagi fitur tersebut namun dengan kode yang lebih sedikit minimalis ;)) Tapi tetap masih memakai jQuery script bos! Okelah kalo begitu mas bero, kita langsung saja pada acara merangkai slide out serelek geleser. Walau sudah basi nih tutorial, apa boleh buat developer pada sepi updatean :))
Pada template kalian sudah harus terpasang jQuery script & dont forget to DOWNLOAD FULL TEMPLATE

<script type="text/javascript">
//<![CDATA[
$(window).scroll(function () {
    if ($(document).scrollTop() >= $(document).height() / 4) $("#slideSerelek").show("slow");
    else $("#slideSerelek").hide("slow");
});

function closeslideSerelek() {
    $('#slideSerelek').remove();
 // Optional code
}
//]]>
</script>
KODE CSS
#slideSerelek {
background: #f5f5f5;
border-radius: 9px;
box-shadow: inset 0 0 3px #333;
padding: 12px 14px;
width: 300px;
position: fixed;
bottom: 10px;
right: 2px;
z-index: 3;
height: 65px;
display: none;
}
#close {
position: absolute;
top: 14px;
right: 10px;
color: #f00;
font-size: 10px;
}
MARKPUP HTML
<div id="slideSerelek">
<a id="close" href="javascript:void(0);" onclick="return closeslideSerelek();">(X)</a> <span style="font-size: 20px;margin: 10px 0;">Blah Bleh Bloh!</span><br />
<div style="float: left; margin:10px;">
aw aw 1
</div>
<div style="float: left; margin:10px;">
aw aw 2
</div>
</div>
Lihat hasil kerja, good luck :)
Resource by: www.infozguide.com/2012/09/wordpress-adapted-social-subscription.html
Loading...
XSlide Out Serelek Geleser jQuery plugin
Membuat slide/er out menggunakan jquery script secara sederhana dan mudah
Subscribe my posts Register For Free!

1 comments:

[?] g+ convert

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


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE