Judul : Slider Otomatis Dengan Navigasi
link : Slider Otomatis Dengan Navigasi
Slider Otomatis Dengan Navigasi
C
oba perhatikan Slider yang ada di home page website ini (anggap sobat sudah melihat),nah seperti itulah yang akan Full Blog Design buat pada pertemuan kali ini ,jangan khawatir cara pembuatan Slider Otomatis ini super gampang sekali ,Keunggulan dari slider ini salah satunya adalah disediakan nya Navigasi khusus tepat di bawah Slider ,kode script tidak terlalu rumit,dan tidak terlalu membuat berat looding Blog (kurang lebihnya )berikut cara membuat Slider Otomatis Dengan Navigasi:(1)== Mengingat penempatan slider ini tepat di atas postingan maka di atas postingan blog minimal harus ada kolom widget kalau belum silahkan tambahkan kolom widget di atas postingan disini
(2)== Anggap sobat sudah ada di dasboard silahkan pilih Tata Letak== Tambah Gadget (widget tepat di atas postingan yang sudah sobat buat) == Pilih Html java script Lalu masukkan kode berikut :
<style type="text/css">(3)== Lalu Save
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJIdNNMrsrihphqqU9B2qYmkshBOtlJ1pQWRKdvWWStKBHzO2Y93omW84LBR7GKrDFC_71dln2XYbidTPt0A1W4cA2ZovDaqeNiUGEL3Q02uGUHsc8ikF7KZsze7SM9stA11UEYJ7MWQmH/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://fullblogdesign-demo.googlecode.com/svn/trunk/otomatis-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://www.fullblogdesign.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
Silahkan Ganti text yang berwarna merah dengan nama blog soba.
Sumber Code :http://www.softglad.com
Demikianlah Artikel Slider Otomatis Dengan Navigasi
Sekian Slider Otomatis Dengan Navigasi, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.