My buddy Aneesh of BloggerPlugins.com created a beautiful fully customizable widget that displays the items at the end of each message exactly as does Linkwithin (for info, now we can display up to 5 messages by default with similar Linkwithin).
Unlike Linkwithin the widget Aneesh uses an old script that is based solely on the system of labels and the blog feed. That is to say that for a given item, the messages are like those who have the same wording.
If multiple items have the same wording, so the latest will be posted if they are even less relevant than the former (as above, this widget does not take into account the titles or content of messages but only the wording). If a label is assigned to a single message, then this message will not have the like. To install this widget in your blog, login toBlogger ,
3.Now Find
Unlike Linkwithin the widget Aneesh uses an old script that is based solely on the system of labels and the blog feed. That is to say that for a given item, the messages are like those who have the same wording.
If multiple items have the same wording, so the latest will be posted if they are even less relevant than the former (as above, this widget does not take into account the titles or content of messages but only the wording). If a label is assigned to a single message, then this message will not have the like. To install this widget in your blog, login toBlogger ,
- Go to " Layout "," Edit HTML " , check the "Expand Widget Templates"
2.Now look forand replace it with</head>
<!--Related Posts with thumbnails Scripts and Styles Start--><!-- remove --><b:if cond='data:blog.pageType == "item"'><style type="text/css">#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;} #related-posts h2{font-size: 1.6em;font-weight: bold;color: black;font-family: Georgia, “Times New Roman”, Times, serif;margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{color:black;}#related-posts a:hover{color:black;} #related-posts a:hover {background-color:#d4eaf2;}</style><script type='text/javascript'> var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script>var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script><script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/><!-- remove --></b:if><!--Related Posts with thumbnails Scripts and Styles End--> </head>
3.Now Find
<div class='post-footer-line post-footer-line-1'>
If you cant find it then try finding this one
<p class='post-footer-line post-footer-line-1'>Now immediately after any of these lines(whichever you could find) place this code snippet
<!-- Related Posts with Thumbnails Code Start--><!-- remove --><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop><script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>");
removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs("<data:post.url/>");</script></div><div style='clear:both'/><!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->
var maxresults=5;5.To edit the title of the widget you can change this line of code
var relatedpoststitle="Related Posts";6.To change the default thumbnail, you can edit this line of code
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
7.To Change the Colour of the Splitter Line , edit
var splittercolor="#d4eaf2";
To change the other colours and all you will have to modify the CSS
How to display the related posts on every page and not only on the post pages?
Just remove the two lines starting with <!-- remove --> from both step 3 and step 2.
that is lines
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
and
<!-- remove --></b:if>
Log in to Blogger , Go to " Layout "," Edit HTML " , check " Developing models of gadgets"and are looking for: </ head> and just before add this code:
Search <data:post.body/> and just after add this code:
Register and you can immediately see the messages Similar / Related below Every one of your articles.
/*--Articles-Similaires-Answerblogging.com--*/
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://i906.photobucket.com/albums/ac264/leblogger/relatedarticles.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script src='http://www.hotlinkfiles.com/files/2612763_2imsg/Similiares_avecleblogger.com_.js' type='text/javascript'/><!--Message-Similaires-->
Search <data:post.body/> and just after add this code:
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Similar / Related : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
Register and you can immediately see the messages Similar / Related below Every one of your articles.
LinkWithin integrates seamlessly and automatically refers to your blog. There is no advertising in this widget and you do not even have to register or confirm your email to use it. It displays random items while others only display widgets like recent articles.
To install it on your blog, just go to the site LinkWithin , enter an e-mail, the blog URL and choose Blogger as a "Platform" then click "Get Widget" a new window appears, click "Install Widget" and you're done!
UPDATE:
To view more than three stories in the widget, send an email to LinkWithin specifying the URL of your blog and / or your "Site ID" to any of the following email addresses below: support@linkwithin.com or feedback@linkwithin.com or feedback@linkwithin.com
Log in to Blogger , Go to "Layout", click on "Add a Gadget" and then "HTML / JavaScript" and copy / paste the following code:
Replace the URL in red with the address of your blog and Save.
You can change the settings in green to customize your widget: number of articles / messages, date, summary ...
<script>function rp(json) {document.write('<ul>');for (var i = 0; i < numposts; i++) {document.write('<li>');var entry = json.feed.entry[i];var posttitle = entry.title.$t;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;}}posttitle = posttitle.link(posturl);var readmorelink = "(lire la suite)";readmorelink = readmorelink.link(posturl);var postdate = entry.published.$t;var cdyear = postdate.substring(0,4);var cdmonth = postdate.substring(5,7);var cdday = postdate.substring(8,10);var monthnames = new Array();monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";if ("content" in entry) {var postcontent = entry.content.$t;} else if ("summary" in entry) {var postcontent = entry.summary.$t;} elsevar postcontent = "";var re = /<\S[^>]*>/g;postcontent = postcontent.replace(re, "");document.write(posttitle);if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);if (showpostsummary == true) {if (postcontent.length < numchars) {document.write(postcontent);} else {postcontent = postcontent.substring(0, numchars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + '...' + readmorelink);}}document.write('</li>');}document.write('</ul>');}</script><script>var numposts = 7;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script><script src="http://www.answerblogging.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script><div style="text-align: center;"><p><a href="http://www.answerblogging.com/" target="_blank"><span style="font-size: x-small;">Widget par LeBlogger.com</span></a></p></div>
Replace the URL in red with the address of your blog and Save.
You can change the settings in green to customize your widget: number of articles / messages, date, summary ...
Alternative:
FeedBurner offers the same service with BuzzBoost to display the most recent articles . You can also use the "Feed" Blogger to display the 5 latest articles published in a widget.
Update: Here is a new widget to display recent articles with a picture. I highly recommend this widget with
the new.
<script language="JavaScript">imgr = new Array();showRandomImg = true;boxwidth = 360;cellspacing = 2;borderColor = "#FFF";bgTD = "#000000";thumbwidth = 32;thumbheight = 32;fntsize = 12;acolor = "#666";aBold = true;icon = " ";text = "Commentaires";showPostDate = false;summaryPost = 40;summaryFontsize = 10;summaryColor = "#666";icon2 = " ";numposts = 7;home_page = "http://www.answerblogging.com/";</script><script src="http://lewordpress.com//Blogger/JS/ArticleRecentsImage0.js"></script><center><a href="http://www.answerblogging.com/" target="_blank"><span style="font-size: x-small;">Answerblogging</span></a></center>
Customization:
boxwidth - Width of Widget
cellspacing - Spacing between Titles
borderColor - border color of the widget
borderColor - color of the background
thumbWidth & thumbheight - length and width of the image. f
ntsize - Text Size.
aColor - Color Titles
aColor - Color Titles
aBold - text bold (true or false)
numposts - Number of articles posted
Blog_URL : the address of your blog
if the widget is not visible on this blog, you can still see it in action on widget .
A quick and simple copy/past tutorial to add Facebook share buttons with counters to your Blogger blog.
2. Look for <data:post.body/> and immediately after that place one of the following codes :
<div style="float:left;padding:5px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'>Share</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>
<div style="float:left;padding:5px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'>Share</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>
<div style="float:left;padding:5px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button'>Share</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>
<div style="float:left;padding:5px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='icon_link'>Share</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>
<div style="float:left;padding:5px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='icon'>Share</a>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div>
Blog Archive