April 10, 2011

Membuat Slide Show Gambar atau Foto Berita Pada Blog

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.

16 komentar:

DEDE AZIS NAGARA said...

MANTAP GAN...INFONYA..^_^.

MARI SALING BERBAGI DAN BUDAYAKAN KOMENTAR..^_^.

on-idea said...

oce gan . .
thanks udah komen gan :13

andreas said...

nice share sob, salam kenal

on-idea said...

salam kenal kembali agan andreas

nas said...

jasa buat account google adsense hanya 30rb, bisa di blog bhs indonesia, berminat?call/sms 02168936593, setelah account jd.. baru byr..

KJKS BMT Amanah Ummah Jawa Timur said...

THANKS BRO

admin said...

thanks gan udah share infonya.. btw gan... ada yang otomatis gak kan.. biar gak utak atik wodget lagi... :19

iSlide said...

manteb Gan..Ane udah nyoba n brhasil! Tp msti dilebihin 1 link kosong,biar yg trakhir dtampilin. Klo g..yg trakhir bkl dlewatin :14

pelita hati said...

kok konfirm nya gini : permintaan anda tidak dapat di proses coba lagi nanti. :(

tolong pencerahannya...kok bisa begitu?

PeTrick said...

punyaqu kog gag bisa ya,, :28

Petrick said...

akhirnya sukses gan,, mkasih infonya,, :14

Kak Eyo said...

Makasih infonya mas.
Mau nanya, klo kita letak slidenya di side bar gmna mas?? bisa g?

rencana untuk photo-photo kegiatan aja,:13
jadi ada photo2 + keterangan kyk gtu.

ervon ven said...

beritanya nnti update gak??atau tiap hari brtanya sama aja itu2??

Barzaien.ikhwan said...

mudah di mengerti dan gak rpot2 juga thanks brad

Srie said...

Trims ya, ... salam.

Sungkuk said...

Ini yg Ane cari-cari, akhirnya ketemu juga.
Makasih Mas Bro... :27

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58 :59 :60 :61
:62 :63

Silahkan Suarakan Pendapat Sobat

Untuk Membangun Blog Ini