Cara Membuat Slide Show Gambar Di Blog

Info informasi Cara Membuat Slide Show Gambar Di Blog atau artikel tentang Cara Membuat Slide Show Gambar Di Blog ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

Setelah mutar-mutar om-google, akhirnya ketemu juga trik membuat slide show gambar atau foto  berita pada blog   dengan menyatukan kode-kode yang ada pada artikel-artikel sahabat blogger (maaf tidak saya sebutkan blognya karena terlalu ramai).   Slide show gambar atau foto  berita  menyerupai seperti websitenya detik.com, Kompas, Okezone, dan lain-lain yang menggunakan fitur slide show.

Yang membuat saya bingung, bagaimana cara memasang pada blog kita. Jawabannya adalah dengan menggunakan bantuan   Jquery.

Bagi anda yang ingin memasangnya pada blog anda, silahkan ikuti langkah-langkahnya.

1. Login Ke Bloger

2. pilih rancangan/tata letak > EDIT HTML dan jangan lupa back up template anda.

3. Cari kode script   </head>  dan copy paste kode dibawah ini diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
s3Slider

Developped By: Boban Kari�ik -> http://www.serie3.info/
CSS Help: M�sz�ros R�bert -> http://www.perspectived.com/
Version: 1.0

Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */
(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items[i]).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

//]]>
</script>

<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 500px;
height: 215px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 500px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 500px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

Keterangan :

*** Jika anda ingin merubah kecepatan bergerak gambar cari kode angka 4000 dan ubah nilainya

*** Masukkan nilai yang berwarna merah pada kode diatas sesuai dengan keinginan anda. 

4. Setelah selesai lalu Simpan Template.

Selanjutnya masuk ke elemen, Pilih Tambah gadget lalu klik HTML/Java Script. masukan script dibawah ini didalamnya.

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage">
<a href="Alamat Posting Anda"><img style="width:550px;height:200px;" src="Alamat Gambar Anda" />
<span>Isi Artikel Anda</span></a>
</li>

<li class="s3sliderImage">
<a href=" Alamat Posting Anda"><img style="width:550px;height:200px;" src=" Alamat Gambar Anda" />
<span> Isi Artikel Anda</span></a>
</li>

<li class="s3sliderImage">
<a href=" Alamat Posting Anda"><img style="width:550px;height:200px;" src=" Alamat Gambar Anda" />
<span> Isi Artikel Anda </span></a>
</li>

<li class="s3sliderImage">
<a href=" Alamat Posting Anda"><img style="width:550px;height:200px;" src=" Alamat Gambar And" />
<span> Isi Artikel Anda</span></a>
</li>

</ul>
</div>

<div class='clear'></div>

5. Simpan Template

Semoga bermanfaat.

Demikian artikel tentang Cara Membuat Slide Show Gambar Di Blog ini dapat kami sampaikan, semoga artikel atau info tentang Cara Membuat Slide Show Gambar Di Blog ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik