SCREENSHOT
DEMO
Tempatkan script ini dimanapun yang Anda suka, maka dipastikan slider akan muncul, please try!!!
Tempatkan script ini dimanapun yang Anda suka, maka dipastikan slider akan muncul, please try!!!
<!--:[SLIDER WRAPPER START ]:-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<style type='text/css'>
#slider-wrapper{position:relative;width:620px;margin:0 -2px 20px;box-shadow:0 1em 2em -1em #000;}
.slider{overflow:hidden;position:relative;width:620px;height:300px;}
.slide-image{position:absolute;top:0;left:0;}
.slide-image img{overflow:hidden;float:left;width:620px;height:300px;}
.slide-page {background:linear-gradient(#444,#000);background:-webkit-linear-gradient(#444,#000);border-bottom:2px solid #000;padding:4px 0 2px;text-align:center;z-index: 100;}
.slide-page a{text-indent:-9999px;background:#f90;width:10px;height:10px;display:inline-block;margin:3px;border:none;outline:none;}
.slide-page a.active{background:#fff;border:none;outline:none;}
.slide-page a:hover{font-weight:700;border:none;outline:none;}
.slide-title{width:100%;display:none;position:absolute;bottom:0;left:0;z-index:101;background:rgba(0,0,0,.3);padding:5px 10px;}
.slide-title a{color:#fff;font-size:16px;font-weight:700}
.slide-title p{color:#fff;font-size:12px;}
</style>
<script type='text/javascript'>
// Simple Fast Automatic Blogspot Slider
// Original post by Maskolis 2013. See http://www.maskolis.com/2013/02/membuat-simple-slider-otomatis-gambar.html
//<![CDATA[
jQuery(document).ready(function() {
//Set Default State of each portfolio piece
$(".slide-page").show();
$(".slide-page a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".slider").width();
var imageSum = $(".slide-image img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".slide-image").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".slide-page a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
$(".slide-title").stop(true,true).slideUp('slow');
$(".slide-title").eq( $('.slide-page a.active').attr("rel") - 1 ).slideDown("slow");
//Slider Animation
$(".slide-image").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
$(".slide-title").eq( $('.slide-page a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.slide-page a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.slide-page a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 10000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Click
$(".slide-page a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/-Hu7aB3FArtc/VDalFqdQRQI/AAAAAAAADlE/KA-IqSUFOEU/w620-h300-p/wave.gif";
showRandomImg = true;
aBold = true;
summaryPost1 = 100;
summaryTitle = 25;
numposts1 = 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 showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts1; 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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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 = m+ ' ' + day + ' ' + y ;
var trtd = '<div class="slide-title"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';
document.write(trtd);
j++;
}
}
function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts1 ; 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 = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
document.write(trtd);
j++;
}
}
//]]>
</script>
<div id='slider-wrapper'>
<div class='slider'>
<div class='slide-image'>
<script>
document.write("<script src=\"/feeds/posts/default/?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script></div>
<div class='description'>
<script>
document.write("<script src=\"/feeds/posts/default/?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
</div>
<div class='slide-page'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
</div>
</div>
</b:if>
<!--:[SLIDER WRAPPER END ]:-->
.jpg "Koleksi Bingkai Islami")
.jpg "Koleksi Wallpaper Wanita Muslimah Bercadar")
tmena memang sangat siplle tapi sangat memakau gan , ijin sedot yah :)
ReplyDelete