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">
#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/AVvXsEitq5_BZJpSG3YoYOx7KJ_pebxEApQS0H1vbDXsSu94M2LkHNOuumEHOwQRBMjchUHDgt3yzki6jd4ZeXplGKrrJyj2_T4PBW6QfN8nQ_IRdfH4sW6ASErKO35WmwueVy1DxVJvqnZRlQmS/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.muizcyan.co.vu",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
(3)== Lalu Save
Silahkan Ganti text yang berwarna merah dengan nama blog soba.
Sumber Code :http://www.softglad.com
tag cara membuat navigasi slider di blog|trik membat post blog berjalan diatas blog|trik membuat blog post berjalan diatas blog|trik membuat navigasi sliddder terbaik
tolong patuhi tata tertib untuk komentar dibawah ini"":
1. tidak boleh berkomentar yang bersifat spam.
2. jangan menyertakan alamat/link langsung.
3. jika komentarnya tidak terjawab oleh admin maafkan karna saya sibuk<>> EmoticonEmoticon