Cara Membuat Slider di Blog dengan Javasript/HTML

Cara Membuat Slider di Blog dengan Javasript/HTML

Cara Membuat Slider di Blog dengan Javasript/HTML

Sunday, January 19, 2014

Cara Membuat Slider di Blog dengan Javasript/HTML

Filled under:
Print Friendly and PDF Translate


Sekarang saya akan kasih Bagaimana Cara Membuat Slider di Blog dengan Javasript/HTML, terkadang orang suka dengan ngeblog dan di blognya tidak ada slidernya terutama saya, dulu WEB saya ini tidak ada slidernya dan saya terus menjelajah di dunia maya akhirnya saya mendapatkannya yang saya inginkan, Sekarang saya akan kasih ke kamu Javascrip/HTML nya di Blog*Islam ini, Langsung saja yuk:

1. masuk dulu ke blogger kamu

2. pilih Tata Letak

3. pilih Tambahkan Gadget, letaknya terserah kamu mau taruh mana.

4. pilih Javasript/HTML.

5. masukkan code ini di dalamnya:

<style type="text/css">
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:250px}
#slides li{width:49.9%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}
#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}
#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://3.bp.blogspot.com/-r6RYARGYuZc/UeQuKTJKu0I/AAAAAAAACHc/ip52Cim8SGM/s1600/fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #00BD79;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}
#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}
#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}
#slides .overlayx,#slides li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#buttons{margin: 5px auto;text-align: center;background:#00BD79;width: 10%;}
#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
#buttons a#nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:49.8%}
  #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%}
  #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%}
  #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}
}
</style>
<div id="featuredpost"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://slider1-minannu.googlecode.com/svn/slider1" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.minannu.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

6. rubah code yang warna kuning dengan alamat WEB/BLOG kamu.

7. SAVE dan lihat hasilnya.


Sekian Postingan saya yang tentang Cara Membuat Slider di Blog dengan Javasript/HTML, Semoga bermanfaat untuk kalian.





Comments
0 Comments

0 comments:

Post a Comment

 

Copyright © 2014. "MASTER MUNYIL". Designed by: BigsMaster