KEMBAR78
Slider Widget | PDF | Typography
0% found this document useful (0 votes)
179 views8 pages

Slider Widget

The document contains CSS code for creating a slider or slideshow. It defines styles for the slider container, featured images, titles, navigation buttons, and read more links. It also includes JavaScript code to load posts from a blog feed, display them in the slider with pagination, and automatically rotate through the slides.

Uploaded by

Appi' Aprisal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
179 views8 pages

Slider Widget

The document contains CSS code for creating a slider or slideshow. It defines styles for the slider container, featured images, titles, navigation buttons, and read more links. It also includes JavaScript code to load posts from a blog feed, display them in the slider with pagination, and automatically rotate through the slides.

Uploaded by

Appi' Aprisal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 8

/*Slider http://dapasun.blogspot.

com */
#featuredSlider {background:#fff;float:left;margin:0; border:2; padding:0 0
10px;-webkit-box-shadow:1px 1px 5px #c3c3c3;-moz-box-shadow:1px 1px 5px
#c3c3c3;-ms-box-shadow:1px 1px 5px #c3c3c3;-o-box-shadow:1px 1px 5px
#c3c3c3;box-shadow:1px 1px 5px #c3c3c3;border:1px solid #fff; width:99%;
position:relative;color:#666;}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:266px; margin:0 10px 0 0;overflow:hidden;
position:relative;}
.featuredTitle{padding-top:15px;font:20px Verdana;text-bold:1px 1px 1px
#blue;}
.featuredTitle a{color:#blue}
.featuredTitle a:hover{color:E7E8E8}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0;
overflow:hidden; background-image:url(http://2.bp.blogspot.com/j2T8LeJpjkY/UBfzfSqJGSI/AAAAAAAAIDE/jiGwQpYoRO4/s1600/slider+pagination.pn
g); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #017C7C;background:#E7E8E8
url(http://2.bp.blogspot.com/S4AKqSDPUEs/ToSYCWJy4qI/AAAAAAAAABI/conBgqSajOY/s1600/fade.png) repeatx top;display:block;;font:bold 12px Arial;text: -1px -1px 0 #333;margin:10px 0 0
0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-borderradius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-mozbox-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px
rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
type='text/javascript'/><script
src='http://yourjavascript.com/221222113215/jquery.innerfade.js'
type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js'
type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/TyvG4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 170;
summaryTitle = 25;
numposts = 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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<div class="slides">')
if (numposts <= json.feed.entry.length) {
maxpost = numposts;
}
else
{
maxpost=json.feed.entry.length;
}
for (var i = 0; i < maxpost; 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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img
width="350" height="280" src="'+img[i]+'"/></a></p><div
class="featuredTitle"><a
href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,
summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Baca
Selengkapnya.... &#187;</a></div>';
document.write(trtd);

j++;
}
document.write('</div>')
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;item&quot;'><div


id='featuredSlider'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Berita
%20Pilihan?max-results=&quot;
+numposts+&quot;&amp;orderby=published&amp;alt=json-inscript&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/>

<script>

$(&#39;.slides&#39;).cycle({
fx:

&#39;fade&#39;,

speed: &#39;slow&#39;,
timeout: 3000,
pager: &#39;.pagination&#39;
});
</script>
</div>
</div>
</b:if>

</div> <!--end .container-->

Skider keren

<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default?maxresults="+numposts3+"&orderby=published&alt=json-inscript&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default?maxresults="+numposts3+"&orderby=published&alt=json-inscript&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>

http://infoupdate99.blogspot.com/2013/03/membuat-slide-show-otomatisposting.html

You might also like