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..!!!