Did you find out your answer? Well, that's true buddy. Featured content widget is a widget that will show a content in a different way and more elegant. Featured content widget consists of an image, link, and description. Just as you found on the screenshot above.
How to add that widget to blog?
1. Login to your blogger.
2. Go to your template and further to Edit HTML.
3. Check the "Expand widget template" box.
4. Back up your template (Important for anticipation).
5. Find this code in your template: ]]></b:skin>.
6. Put the code below before the above. Change width and height accordingly.
#featuredSlider {background:#eee;float:left;margin:0;padding:0 0 10px;width:640px;position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left;margin:10px;padding:0px;}
#featuredSlider .container {height:226px;margin:0 10px 0 0;overflow:hidden;position:relative;}
.featuredTitle {padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a} .featuredTitle a:hover{color:#000}
.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://4.bp.blogspot.com/-SIapObAxyqI/UCqkW3YAHnI/AAAAAAAADR8/_4WTqX0Rfe8/s1600/slider%252Bpagination.png);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 #444;background:#585858 url(http://1.bp.blogspot.com/-bNeeTYqTVMk/UCqk8OSQoLI/AAAAAAAADSI/Tm9OwJmBZaQ/s1600/fade.png) repeat-x top;display:block;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow:0px 1px 1px 0px rgba(0, 0, 0, 0.5); -moz-box-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}
Here to copy 7. Put the below code before </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://john-smiths-blog.googlecode.com/files/jquery.innerfade.js' type='text/javascript'/>
<script src='http://john-smiths-blog.googlecode.com/files/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array(); imgr[0] = "http://1.bp.blogspot.com/-ehn5FcCApsw/UCqlxAjYkEI/AAAAAAAADSU/c79eHCK1itU/s1600/no%252Bimage.jpg"; showRandomImg = true; aBold = true; summaryPost = 150; summaryTitle = 25; numposts = 7; 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=" 340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more »</a></div>';
document.write(trtd); j++;
}
document.write('</div>') }
//]]>
</script>
Here to copy *The Jquery script above is the latest build.
*numposts = 7; is total slide post to show.
*width=" 340" height="212" are to be the pic's width and height.
8. Now put the below code after <div id='main-wrapper'>
<b:if cond='data:blog.pageType != "item"'>
<div id='featuredSlider'><div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/sport?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='navigation'> <ul class='pagination'/>
<script>
$('.slides').cycle({
fx: 'fade', speed: 'slow', timeout: 3000, pager: '.pagination'
});
</script>
</div>
</div>
<!-- end .container-->
</div>
</b:if>
Here to copy 9. Save your changes and done.
Well, that's all everybody. Have a nice day. :)
Source: www.masterendi.com
0 comments:
Post a Comment