2012-07-10

Auto Slide Show Images

Auto Slide Show Images - Widget ini akan menampilkan slide show gambar secara otomatis dari gambar pertama postingan blog kamu, nah jadi gambar ini akan secara otomatis tampil sebagai slide show kita tidak perlu repot-repot memasukkan satu per satu gambar yang akan dijadikan gambar Slide.

Auto Slide Show Images

Demo Bisa lihat disini >>


Bagaimana cara membuat Image Slide di atas? caranya lumayan mudah ikuti berikut ini :

1. Masuk ke blogger >> Template >> Edit HTML >> Proceed/Lanjutkan
2. Tambahkan CSS berikut ini diatas kode : ]]></b:skin>
/* IMAGES AUTO SLIDER - u-sup.blogspot.com
============================================================ */
#featuredContent{
float:left;
width:290px;
margin-right:10px;
display:inline;
}
#featured-slider{
position:relative;
overflow:hidden;
width:290px;
height:210px;
}
#featured-slider .sliderPostInfo{
position:absolute;
bottom:5px;
width:290px;
min-height:30px;
height:auto!important;
background:url(http://4.bp.blogspot.com/-Q79zfZN6nGA/T-A6TfnXHmI/AAAAAAAABuI/lqJtRvYfX1w/s1600/transparant.png);
}
#featured-slider .sliderPostInfo p{
color:#fff;
font-size:0.9em;
padding:0 5px 5px;
line-height:0.9em;
}
#featured-slider .sliderPostInfo h4{
color:#FFF;
font:bold 14px Tahoma;
text-transform:none;
padding:0 5px;
}
#featured-slider .contentdiv{
visibility:hidden;
position:absolute;
left:0;top:0;
z-index:1;
}
#paginate-featured-slider{
display:block;
background-color:#f0f0f0;
margin-bottom:0;
padding:0 0 5px;
}
#paginate-featured-slider ul{
width:290px;
padding-bottom:0;
list-style:none;
}
#paginate-featured-slider ul li{
display:inline;
width:50px;
float:left;
margin-left:0;
margin-right:8px;
margin-bottom:3px;
}
#paginate-featured-slider img{
padding-top:5px;
background:#f0f0f0;
}
#paginate-featured-slider a img{
border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{
border-top:4px solid #357798}
3. Lalu ttambahkan juga script berikut tepat diatas </head>
Lihat Kode:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 100;
summaryTitle = 25;

numposts3 = 5;

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts3(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = 0; i < numposts3; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="290" height="210" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h4 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h4><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);


j++;
}

}

function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = 0; i < numposts3; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<li><a class="toc" href="#"><img width="50" height="40" class="alignnone" src="'+img[i]+'"/></a></li>';
document.write(trtd);

j++;
}

}

//]]>
</script>
4. Simpan Template

5. Lihat Navigasi kiri klik "Layout"
6. Klik "Add Gadget"
7. Pilih "HTML/javascript"
8. Letakkan kode berikut pada form yg  terlihat
<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/Label Disini?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul><script>
document.write("<script src=\"/feeds/posts/default/-/Label Disini?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script> </ul>
<div class='clear'>
</div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
# Rubah teks warna merah (Label Disini) dengan lebel post yang akan dijadikan slide show
9. Simpan

Keterangan :
- Pada langkah no 2 terdapat angka yang saya cetak pink, itu adalah lebar dari body slide rubahlah angka tersebut jika belum sesuai dengan lebar kolom kamu.
- Pada kode langkah no 3 ada teks yang saya cetak biru, itu merupakan lebar dan tinggi dari gambar yang akan tampil.

Silahkan masukkan komentar jika mengikuti tutorial di atas tidak berhasil.
Terima kasih.

Dapatkan artikel terbaru seperti Auto Slide Show Images langsung ke Email kamu..!!!


Ada 7 komentar untuk Auto Slide Show Images

  1. Lama saya nggak blogwalking kesini bang, ternyata banyak tutorial baru dan bermanfaat !
    Sebelumnya saya ucapkan terima kasih banyak atas tutorial dari bang usup tentang cara membuat template blogspot dari tahap 1-6 kalo nggak salah, dan alhamdulillah banyak template blogger yg bisa saya buat dr awal tapi belum sempat di publish ke www.mytemplatezone.com
    Soalnya lagi optimasi blog utama, akhir kata saya ucapkan terima kasih banyak buat bang usup.
    Dan untuk para pembaca lainnya, tidak sia2 kalian mampir kesini, karena selain admin blog ini ramah dan baik, tutorial di blog ini pun bermanfaat semua.

    BalasHapus
    Balasan
    1. Wah mksih tp sk brlebihan ms Wandy...blog templatezone keren mas bro....

      Hapus
    2. nggak juga bang, terus terang comment sy nggak berlebihan.
      Pernah ngalami bantuan dr bang usup juga dulu,...

      Hapus
  2. siang gan....

    mau nanya nih sebagai blogger pemula :D

    untuk tahapan kedua (2) "Tambahkan CSS berikut ini diatas kode :" <--- itu mksdnya gmna, dan ditambahkan diatas kode apa gan??

    maaf klo merepotkan..
    terima kasih gan sebelumnya.

    BalasHapus
  3. Gan mau nanya ...maklum masih sangat pemula
    yg dimaksud label post itu gmanaya??? link atau apa ??
    sebelumnya trimakasih gan

    BalasHapus
    Balasan
    1. Label post yaitu kategori yg kita buat saat membuat posting :
      misal : Gadget, Berita
      Cb bc disini : http://u-sup.blogspot.com/2010/03/cara-memposting-artikel-ke-blogger.html

      Hapus