Maaf, Karena Semua Posting Yang Ada Di Blog ini Saya Hapus. Saya Ingin Membuka Lembaran Blog Yang Baru.
Sebagai Gantinya Saya Akan Memberitahu Kalian Bagaimana Cara Membuat End Page Slide Out Dengan jQuery Di Blog.
Sebagai Gantinya Saya Akan Memberitahu Kalian Bagaimana Cara Membuat End Page Slide Out Dengan jQuery Di Blog.
end page slide out
DEMO
karena template dari http://teduweb2.blogspot.com/ kurang bagus maka end page slide outnya juga kurang maksimal (discroll ke bawah untuk melihat demonya)
karena template dari http://teduweb2.blogspot.com/ kurang bagus maka end page slide outnya juga kurang maksimal (discroll ke bawah untuk melihat demonya)
Apa Itu End Page Slide Out? Untuk Mencari Tahu Apa Itu End Page Slide Out Lebih Baik Ikuti Tutorial Di Bawah.
TUTORIAL
1.HTML
Untuk Membuat End Page Slide Out Kita Memerlukan Struktur HTML Sebagai Berikut :
<p id="last">
Tentangduniadanweb.blogspot.com
</p>
Tentangduniadanweb.blogspot.com
</p>
Dan
<div id="slidebox">
<a class="close"></a>
<p>More in Technology & Science (4 of 23 articles)</p>
<h2>Tentangduniadanweb.blogspot.com</h2>
<a class="more">Read More »</a>
</div>
<a class="close"></a>
<p>More in Technology & Science (4 of 23 articles)</p>
<h2>Tentangduniadanweb.blogspot.com</h2>
<a class="more">Read More »</a>
</div>
Copy Script Diatas Dan Paste Di HTML/Javascript (Rancangan-Edit HTML-Tambah Gadget-HTML/Javascript)
2.CSS
Kita Memerlukan CSS Seperti Dibawah :
#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;
}
#slidebox p, a.more{
font-size:11px;
text-transform:uppercase;
font-family: Arial,Helvetica,sans-serif;
letter-spacing:1px;
color:#555;
}
a.more{
cursor:pointer;
color:#E28409;
}
a.more:hover{
text-decoration:underline;
}
#slidebox h2{
color:#E28409;
font-size:18px;
margin:10px 20px 10px 0px;
}
a.close{
background:transparent url(http://tympanus.net/Tutorials/EndPageSlideOutBox/images/close.gif) no-repeat top left;
width:13px;
height:13px;
position:absolute;
cursor:pointer;
top:10px;
right:10px;
}
a.close:hover{
background-position:0px -13px;
}
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;
}
#slidebox p, a.more{
font-size:11px;
text-transform:uppercase;
font-family: Arial,Helvetica,sans-serif;
letter-spacing:1px;
color:#555;
}
a.more{
cursor:pointer;
color:#E28409;
}
a.more:hover{
text-decoration:underline;
}
#slidebox h2{
color:#E28409;
font-size:18px;
margin:10px 20px 10px 0px;
}
a.close{
background:transparent url(http://tympanus.net/Tutorials/EndPageSlideOutBox/images/close.gif) no-repeat top left;
width:13px;
height:13px;
position:absolute;
cursor:pointer;
top:10px;
right:10px;
}
a.close:hover{
background-position:0px -13px;
}
Copy CSS Diatas Dan Paste Diatas Kode ]]></b:skin> (Rancangan-Edit HTML)
3.Javascript
Sebelum Memasang Javascript Ada Baiknya Memasang jQuery Dibawah
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Lalu Javascriptnya
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
$(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
Copy jQuery Tersebut Dan Paste Dibawah Kode <head>
Untuk Javascriptnya Pastekan Diatas Kode </head>
Tinggalkan Komentar
7 Orang Yang Cerewet:
ada demonya g kk....
Belum ada demonya ya kk ?? jadi takut mencoba,, disarankan supaya ada demo, agar lebih yakin
iya lbh bagus emang kalo pake demo sob ... :)
Bisa dicoba nih, tp utk demonya kok gk nongol ya?
discrool ke bawah
http://tentangduniadanweb.blogspot.com
mantab bro. :D
bisa di praktekkin jga nih. sipp. lanjutkan blogging mu.
sama sekali engga berhasil. .
bahhhh . . .
Posting Komentar