Auto Slider Images Widget Blog

Kali ini, Ilham's Blog akan memposting tentang Auto Slider Images Widget Blog. Widget ini akan menampilkan slide show gambar secara otomatis dari gambar pertama postingan blog. Jadi anda tidak perlu repot-repot memasukkan satu per satu gambar yang akan dijadikan gambar slide.

Langkah-Langkah :

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYCXsn7TzxzTnPI6lwvW8ZgZMmcZoYXsfqgMlUzh2DA9OQs2C8hNlzTNcOdhiu5l3_gXvGwCmlOu7aXm1Inp36un28s14hqs3nb3iI2Cm37NRDOnmcfgKhqJgGD66N7tAa5UANqWoSxOw/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 tambahkan juga script berikut tepat diatas Lihat Kode </head> :

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 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 (Label Disini) dengan label post yang akan dijadikan slide show

9. Simpan Keterangan.

1 komentar:

;)

;;-)

:-/

:-*

=((

:-O

B-)

:-S

#:-S

7:)

:((

:))

/:)

=))

O:-)

:-B

:-c

:)]

~X(

:-h

:-t

8-7

I-)

8-|

L-)

:-a

:-$

[-(

:O)

8-}

2:-P

(:|

=P~

:-?

#-o

=D7

:-SS

@-)

:^o

:-w

7:P

2):)

X_X

:!!

\m/

:-q

:-bd

^#(^

:ar!

Unknown7 Februari 2013 pukul 13.41
Boleh di coba nih, thank info nya :D
BalasHapus
Balasan

Tambahkan komentar

Thank you for visiting Ilham's Blog ! If you are a visitor, please leave a comment. Please give me the link or email in a comment.

If there is a broken link, a picture, or something in my blog, please tell me via chatbox or comment.

Please the comment doesn't contain elements of spam and SARA.

Selasa, 05 Februari 2013

Auto Slider Images Widget Blog

1 komentar:

Subscribe