MINTA DO'ANYA BIAR LANGGENG ~Mi*El~


Home » » Cara Membuat Slider di Blog dengan Javasript/HTML

Cara Membuat Slider di Blog dengan Javasript/HTML


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.





Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BLOG*ISLAM

Enter your email address:

Delivered by FeedBurner

1 komentar:

  1. Thanks, sdh lama cari kode html untuk headline tapi baru kali ini dpt yang bagus, sy sdh pasang di blog http://asrifai.blogspot.co.id/

    ReplyDelete

 
Support : KANG WEB
Copyright © 2013. BLOG*ISLAM - All Rights Reserved
Proudly powered by Blogger