Cara Membuat Slider Photo Pada Blogger

Tampilan website akan lebih menarik jika kita mennghiasi dengan slider photo ini. Selain sebagai hiasan ini juga sebagai informasi dan iklan tentang website kita. Nah bagaimana cara membuatnya sehingga terlihat menarik ? Ikuti langkah -langkahnya di bawah ini :

Pertama, Login Ke Dasbor Blogger --> Klik Template --> Edit HTML

Lalu --> Cari Kode ]]></b:skin> atau </style> dengan menggunakan control F dan enter

Jika sudah ketemu, letakkan kode di bawah ini DIATAS kode tersebut

.wrapper { position:relative; margin:0 auto 15px; width:600px; height:350px; display:block; padding:5px; background:#FFF; z-index:2; }
#slide-prev,#slide-next { -moz-border-radius:100px; -webkit-border-radius:100px; border-radius:100px; padding:15px; bottom:50%; position:absolute; z-index:4; }
#slide-prev { left:20px; background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuM2alOgEm124bc8XaMP3mEZE1VRkQkStVh_6b0supWTEKxbVjBn0c27yrzlv4ARnZd2UQNx0FDmmqT7OPi5q2JmSvVyRwXzgCTe1q0t7i8YwF9_9fqAs78urBOh6Hff8OlhQbMmibfVs/s1600/arrow_left.png) no-repeat center; }
#slide-next { right:20px; background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_ozhvHTkfSS2ekEQH7emRPtOmQv2ATpuBsZb7Sf-vZL366y2oWKxLCTLew9mMukYceKSuPQv5d-U8Pri2iOCe_EiZ9DiiTUaZVBPYM0SL5e7toh89unOOf2XbO-q02jeBFUb5jN6hNg/s1600/arrow_right.png) no-repeat center; }
#slider { width:600px; height:350px; margin-left:auto; margin-right:auto; position:relative; z-index:2; display:block; }
#slider img { width:100%; height:100%; }
.slide { display:none; }
.cs-activeSlide { display:block; }
.slide-descriptions { display:none; }
.caption { background:rgba(238,238,238,0.83); color:#333; display:none; padding:5px 10px; position:absolute; left:0; right:0; bottom:5px; z-index:3; font:normal 13px/20px Arial,sans-serif; }

Yang warna merah dapat di sesuaikan lebar dan tingginya agar sesuai dengan website sobat.

Lalu --> Cari kode </head>  dan Masukkan kode di bawah ini di ATAS kode tersebut

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://sites.google.com/site/vanzdy/script/jquery-chopslider-2.2.0.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script>
jQuery(function(){
    $("#slider").chopSlider({
        slide : ".slide",
        nextTrigger : "a#slide-next",
        prevTrigger : "a#slide-prev",
        hideTriggers : true,
        sliderPagination : ".slider-pagination",
        useCaptions : true,
        everyCaptionIn : ".sl-descr",
        showCaptionIn : ".caption",
        captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)",
        autoplay : true, // slidernya otomatis bermain, "false" jika tidak otomatis
        autoplayDelay : 3000, // waktu penundaan gambar
        t3D : csTransitions['3DFlips']['random'],
     t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ],
        noCSS3 : csTransitions['noCSS3']['random'],
        mobile : csTransitions['mobile']['random'],
        onStart: function(){},
        onEnd: function(){}
    })
})
</script>

Yang berwarna merah jika di template sobat sudah ada, maka hapus saja. Karena dalam satu template cukup satu kode saja. 

Next --> Simpan template sobat lalu,

Next --> masuk ke TATA LETAK dan pilih widget dimana sobat ingin meletakkan slider photonya. 

Klik --> HTML/ Java Script lalu pastekan kode di bawah ini

<div class="wrapper">
<a id="slide-next" href="#"></a>
<a id="slide-prev" href="#"></a>
<div id="slider">
<div class="slide cs-activeSlide"><img src="url gambar1.jpg"/></div>
<div class="slide"><img src="url gambar2.jpg"/></div>
<div class="slide"><img src="url gambar3.jpg"/></div>
<div class="slide"><img src="url gambar4.jpg"/></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
<div class="sl-descr">Disini deskripsi gambar anda.</div>
</div>
<div class="caption"></div>
</div>

Silahkan ganti ULR gambar dan diskripsinya sesuai sobat inginkan. 
Untuk URL gambar bisa sobat upload di blogger lalu ambil url nya dan pastekan disini


Next --> kalau ada keluhan silahkan chat di facebook

Tweet