- The first step, you must log in to blogger with your account
- Select the blog you want to add this image slider.
- After that go into the template >> Edit HTML and check the expand widget templates
- For the precaution to avoid mistakes in the editing later, backup your template first.
- The next step, place the following code above the code]]> </ b: skin>:
Written in blue above is the length and width of the slider on the demo, please adjust the size.
#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEdg5E2_yYXJiLeYDPgVjbnBMLLlJBPlaqYepTCZyiCyFxd44k7pSF6Je34QuQYPoKfwOVEx5hLoAlWcfBM9ecYZoW-YFaifrrroSHwbF7jMCAfxQbbWZdMo_NcmbKHDjGa1UW-OUu6fYT/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{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:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;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}
- HTML Edit is still in position, insert the following code above the </ head>:
Description:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://kauman.googlecode.com/files/contentslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnlcoeM8IyFCM0EFFMn2jrE-LkdFHxnZuup-fBf1KCExaucx9fE0BPXyqPn82WQZr6Yi_MuvNwcLFqE_d-rW-tVfbZJVO4teBrrglshgmxx1dzbsciHZuQo4vAEyoHdJghpiXEqe4Uj9A/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="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><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="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
document.write(trtd);
j++;
}
}
//]]>
</script>
Script code red (top) is the latest series jQuery.min.js script code that I use to make this slider. If the template you've found j Query.min.js although different series, the red color code above no longer need to insert. Just one jQuery.min.js in the template, it is up to the serial number, if possible the latest version.
The color blue: The number of posts displayed in the slider
The color green: Length and width of the image
Yellow: The length and width of the small image
- After the above step, save your templates first. After that go to add gadget layout >> enter this code in the box HTML / Javascript:
Description:
<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/sport?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/-/sport?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>
Note the blue text above, it is the label I put on a slider. You may change your preference. And the color red is a description of a speed slider, slider mouseover effects and others, should not be included.
- If you want to replace it with a recent post, or the latest article instead of the code (there are two instead of all):
script src = \ "/ feeds / posts / default /-/ sport? max-results
with the following code:
script src = \ "/ feeds / posts / default? max-results
- If you want to put it directly on the template, you can put the code number 7 below <div id='main-wrapper'>, for those who want to put it on the box HMTL / Javascript can be made once an empty column on the blog post. I set it up, put the following code above]]> </ b: skin>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">/* Slide Content</span> / * Slide Content</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">----------------------------------------------- */</span> ----------------------------------------------- * /</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">.slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;</span> . Slide-wrapper {padding: 0 auto; margin: 0 auto; width: auto; float: left;</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">word-wrap: break-word; overflow: hidden;}</span> word-wrap: break-word; overflow: hidden;}</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">.slide {color: #666666;line-height: 1.3em;}</span> . Slide {color: # 666 666; line-height: 1.3em;}</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">.slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}</span> . Slide ul {list-style: none; margin: 0 0 0; padding: 0 0 0;}</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">.slide li {margin:0;padding-top:0;</span> . Slide li {margin: 0; padding-top: 0;</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">padding-right:0;padding-bottom:.25em;</span> padding-right: 0; padding-bottom: .25 em;</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">padding-left:0px;text-indent:0px;line-height:1.3em;}</span> padding-left: 0px; text-indent: 0px; line-height: 1.3em;}</span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left">.slide .widget {margin:0px 0px 6px 0px;}</span> . Slide. Widget {margin: 0px 0px 0px 6px;}</span>
Then to bring it to the layout (above blog post), you should call him. Search <div id='main-wrapper'> then place the following code below:
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><b:if cond='data:blog.url == data:blog.homepageUrl'></span> <b:if cond='data:blog.url == data:blog.homepageUrl'></span>If we observe that there is script code on it too much, and certainly will further slow down the loading of a blog. To overcome this you can save the codes are too long in storage Google Code . Well, that was one feature image slider that I cover this time. I hope to review one by one feature in a template, will all my friends can make a display of the template itself by modifying the basic look I gave diatas.Selamat try and hopefully useful
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><div id='slide-wrapper'></span> <div id='slide-wrapper'></span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"><b:section class='slide' id='slide' preferred='yes'/></span> <b:section class='slide' id='slide' preferred='yes'/></span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"></ Div></span> </div></span>
<span onmouseover="_tipon(this)" onmouseout="_tipoff()"><span class="google-src-text" style="direction: ltr; text-align: left"></ B: if></span> </b:if></span>
