Home >>
Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Twitter Badge | Follow us on Twitter Badge

Get a Twitter badge for my website

This Twitter badge calls your users to start following your twitter account.
Twitter has proven itself to be a great communication channel with your site/blog visitors.
This Twitter badge can be installed almost on any site/blog.

Twitter Badge

How to make a Twitter badge on Blogger/website
  1. Log into your Blogger account and go to Dashboard > Design > Edit HTML.
  2. Copy and paste this Twitter badge code snippet into the template, right before the </body> tag.
    Twitter badge code snippet:
    <!-- twitter badge -->
    <script src='http://chocodot.googlecode.com/files/twitter%20badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
    tfb.account = 'YourTwitterAccount';
    tfb.label = 'follow-us';
    tfb.color = '#046494';
    tfb.side = 'r';
    tfb.top = 136;
    tfb.showbadge();
    --></script>
    <!-- end of twitter follow badge -->
  3. Click Save Template. Click View Blog to preview your blog with the new Twitter badge.

Note (for Blogger):
If your Twitter Badge doesn't run after you do all the steps above, you must parse that code into XML code by using this Parse XML tool. Then retry the step 2 above.
Read full entry... Twitter Badge | Follow us on Twitter Badge
Category:

Blogger Twitter Widgets

Blogger Twitter Widgets
Before you install this Blogger Twitter Widgets you must have a Twitter account to log in. If you don't have a twitter account yet please create new account here!

With this Twitter widget you allowed to join conversation with other Twitter members. If you want to get this widget for your blog just copy and paste this code into your HTML page and replace some codes according to your Twitter account.














Blogger Twitter Widgets code:
<script src="http://chocodot.googlecode.com/files/widget.js">
</script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'list',
  rpp: 30,
  interval: 6000,
  title: 'About Me: millenixers.blogspot.com',
  subject: 'Millenix',
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#154890',
      color: '#ffffff'
    },
    tweets: {
      background: '#f5ede3',
      color: '#333333',
      links: '#0000cc'
    }
  },
  features: {
    scrollbar: true,
    loop: false,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
  }
}).render().setList('mill3nix', '').start();
</script>

Replace the following red code:
  • About Me: millenixers.blogspot.com - replace with your Widget Title
  • Millenix - replace with your Widget Subject/Description
  • mill3nix - replace with your Twitter Account/Username

You can also change widget theme colour with your preffered colour by changing colour code on that script.
Read full entry... Blogger Twitter Widgets
Category:

Create Table of Contents (TOC) or Sitemap Page for Blogger

Do you want to make a sitemap or Table of Contents page for your blog in blogger engine?

Now I try to show you how to create a sitemap with Google Feed control. This widget only index of your blog posts by only show title of blog.

If you have so many posts in your blog and if you used TOC it will be very long and make you difficult to read your posts. So this widget was designed to make it easy to read.

Preview

How to make a sitemap page for Blogger?
  1. Log into your Blogger account and go to Dashboard > Posting > Edit Pages > NEW PAGE.
  2. On Edit Pages click Edit HTML.
  3. Copy and paste this code into HTML page:
    <style type="text/css">
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em; 
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
 
}

.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}

.list-ganjil{
background-color:#F6F6F6;
}

.headactive{
 color: #fef4e9;
 border: 2px solid white !important;
 background: #f78d1d;
 background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
 background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
</style>
<script src="http://chocodot.googlecode.com/files/daftarisiv2-pack.js"></script>
<script src="http://www.sourcecode4.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://chocodot.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>

    Note: Replace "www.sourcecode4.blogspot.com" on the code above by your blog name.
  4. Click Publish Page. Click View Blog to preview your table of contents or  sitemap page.
Read full entry... Create Table of Contents (TOC) or Sitemap Page for Blogger
Category:

AddThis widget for Blogger

If you want to get more traffic for your blog with the most popular sharing platform in the world you can try to install AddThis button into your blog post template. It can help your users share your content everywhere.

AddThis is one of some popular social bookmarking widget type which most bloggers use it on their blogs. See also our post about how to Add best social bookmark widget to Blogger template.



Here is guide of Installing AddThis in your Blogger template.
  1. Log into your Blogger account and go to Dashboard > Design > Edit HTML.

  2. Check the Expand Widget Templates check box.
  3. Copy and paste the AddThis code snippet into the template, right after the <div class='post-footer'> tag.
    AddThis code snippet:
    <!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cc1566a11db9ae5' type='text/javascript'/>
<!-- AddThis Button END -->
  4. Click Save Template and you're done. Click View Blog to preview your blog with the new AddThis button. The button should appear beneath each blog post.

Widget preview:
Read full entry... AddThis widget for Blogger
Category:

Add Stylized Page Navigation Widget For Blogger (Blogspot)

If you want to add a Stylized Page Navigation Widget For your Blogspot template as mentioned in the main page of Google Most Wanted News page that it has a Page Navigation Widget that is an alternative to Recent Posts, Home and Older Posts links at the bottom of blog posts. In order to add the stylized version of Page Navigation Widget into your blog just follow these steps below.




  1. Log into your Blogger account and go to Dashboard > Design > Page Elements.

  2. Click on Add a Gadget.
  3. Then choose HTML/JavaScript Widget.
  4. Paste the code below inside the HTML/JavaScript Widget
    <style type="text/CSS">

    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #7AA1C3;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #7AA1C3;
    background-color:#F6F6F6;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #7AA1C3;
    background: #F6F6F6;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #7AA1C3;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#7AA1C3;
    }
    </style>

    <script type="text/JavaScript">

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
    var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
    var isPage = thisUrl.indexOf("/search?updated")!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
    thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= '';
    var upPageHtml ='';
    var downPageHtml ='';

    var pageCount = 2;
    var displayPageNum = 5;
    var upPageWord = 'Previous';
    var downPageWord = 'Next';

    var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

    for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=''){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c++) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    postNum++;
    htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    }
    }//end if(post.category){

    itemCount++;
    }

    }else{
    if(title!=''){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    if(title!='') postNum++;
    htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    itemCount++;
    }
    }

    for(var p =0;p< htmlMap.length;p++){
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    if(fFlag ==0 && p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +'</a></span>';
    }else{
    upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
    }
    }else{
    upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
    }

    fFlag++;
    }

    if(p==(thisNum-1)){
    html += '<span class="showpagePoint">'+thisNum+'</span>';
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+'1</a></span>';
    }else{
    html += '<span class="showpageNum"><a href="/">1</a></span>';
    }
    }else{
    html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
    }
    }

    if(eFlag ==0 && p == thisNum){
    downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
    eFlag++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    }//end for(var p =0;p< htmlMap.length;p++){

    if(thisNum>1){
    if(!isLablePage){
    html = ''+upPageHtml+' '+html +' ';
    }else{
    html = ''+upPageHtml+' '+html +' ';
    }
    }

    html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

    if(thisNum<(postNum-1)){
    html += downPageHtml;

    }

    if(postNum==1) postNum++;
    html += '</div>';

    if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");

    if(postNum <= 2){
    html ='';
    }

    for(var p =0;p< pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }

    if(pageArea&&pageArea.length>0){
    html ='';
    }

    if(blogPager){
    blogPager.innerHTML = html;
    }
    }

    }
    </script>

    <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>

    Note: If you are using a domain other than .blogspot.com or .com, you must change
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
    the bolded red text .com with your domain extension. For Example if your domain ends with .info or.net than replace .com with .info or .net . But if you are a BlogSpot user than leave the code unchanged.
  5. If you have pasted the code inside the widget, simply drag your HTML/Javascript of Page Navigation Widget to the area just below your blog post  and drop it there, as shown below

Read full entry... Add Stylized Page Navigation Widget For Blogger (Blogspot)
Category:

Related Posts with Thumbnail widget

Related Posts with Thumbnails widget.
Widget Preview

In the previous post we have posted a Related Posts widget for Blogspot (Blogger) in text only. But now, How about to add a Related Posts with Thumbnail widget for Blogger template?

The answer is just follow this guide to apply it into your template.
  1. Log into your Blogger account and go to Dasboard > Design > Edit HTML.

  2. Click the Expand Widget Templates check box.
  3. Copy and paste this code between HEAD tag:
    code:
    <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000;
}
#related-posts a:hover{
color:#2288bb;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2MjeYve-G3ZYepmewtk_ZeEfQe9CILAse6joyr-GCz4zSAWGw4Qf08R-uR51H1aiWX54KGmjzZc1cSdlTS5gdrV6ADiq5DcR1ZB89rnlVVp0W2QBvyeepN7__GL1ZZnB0WjguV-Uex0/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://chocodot.googlecode.com/files/related_post_thumbnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

    <HEAD>
    paste code here
    </HEAD>
  4. Copy this second code and paste after <div class='post-footer-line post-footer-line-1'> on Body section:

    Find this code on body section (Use Ctrl + F for quick search)
    <div class='post-footer-line post-footer-line-1'>
    paste code here

    code: 
    <!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Widget example:

Read full entry... Related Posts with Thumbnail widget
Category:

Add Best Social Bookmark Widget to Blogger Template

How to add a Sexy social Bookmark button on my Blogger template?
Social bookmarking is a method to organize, store, manage and search for bookmarks of resources online. Users save links to web pages that they want to remember and/or share.

Most of the best share and social bookmarking sites like del.icio.us, digg.com, technorati.com, stumbleupon.com, reddit.com, furl.net, facebook.com, twitter.com service provide web feeds for their lists of bookmarks, including lists organized by tags. This allows subscribers to become aware of new bookmarks as they are saved, shared, and tagged by other users.

If you want to bookmark and share your blog posts to these famous social bookmark sites like on this blog, simply add Social Bookmark Widget to your Blogger Template. 



Follow these steps to add social bookmark button to your template:
  1. Log into your Blogger account and from Dashboard go to Design > Edit HTML.

  2. Click the Expand Widget Templates check box.
  3. Copy and paste this code between HEAD tag:
    code:
    div.beauty-bookmarks{height:54px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Ss1yi-UcCwAYTvZLaXKYQ7YT1ySYjsfVrxVHynUF14XjoNs3RH5rRROulqa70IjJxStjLYG6KJ3xu3rqSfiFgx_zDKW2JHricxRcioWsAVItpmIRF2oPXan4Hqb5g6ve8y3jgsYqACo/s1600/sexy.gif) no-repeat left bottom;position:relative;width:540px}
div.beauty-bookmarks span.beauty-rightside{width:17px;height:54px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Ss1yi-UcCwAYTvZLaXKYQ7YT1ySYjsfVrxVHynUF14XjoNs3RH5rRROulqa70IjJxStjLYG6KJ3xu3rqSfiFgx_zDKW2JHricxRcioWsAVItpmIRF2oPXan4Hqb5g6ve8y3jgsYqACo/s1600/sexy.gif) no-repeat right bottom;position:absolute;right:-17px}
div.beauty-bookmarks ul.socials{position:absolute;bottom:0;left:10px;margin:0!important;padding:0!important}
div.beauty-bookmarks ul.socials li{display:inline-block!important;float:left!important;list-style-type:none!important;height:29px!important;width:48px!important;cursor:pointer!important;margin:0!important;padding:0!important}
div.beauty-bookmarks ul.socials a{display:block!important;width:48px!important;height:29px!important;font-size:0!important;color:transparent!important}
.beauty-furl,.beauty-furl:hover,.beauty-digg,.beauty-digg:hover,.beauty-reddit,.beauty-reddit:hover,.beauty-stumble,.beauty-stumble:hover,.beauty-delicious,.beauty-delicious:hover,.beauty-yahoo,.beauty-yahoo:hover,.beauty-blinklist,.beauty-blinklist:hover,.beauty-technorati,.beauty-technorati:hover,.beauty-facebook,.beauty-facebook:hover,.beauty-twitter,.beauty-twitter:hover,.beauty-myspace,.beauty-myspace:hover,.beauty-mixx,.beauty-mixx:hover,.beauty-script-style,.beauty-script-style:hover,.beauty-designfloat,.beauty-designfloat:hover,.beauty-syndicate,.beauty-syndicate:hover,.beauty-email,.beauty-email:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKhJGBo8T-9shAqZ4-ZKx3Egfbq6dErr45rKr_nPu-jLY0At7QOjwfrf8hgscGMoFITXxh0rYbGgR2ufvyZt5RW6Js3mS5KvEQrpTFHgztERv8Xvxj0ii_fHJCgz38ACXIEbYEFf1kW-o/s1600/icon.png) no-repeat!important}.beauty-furl{background-position:-300px top!important}
.beauty-furl:hover{background-position:-300px bottom!important}
.beauty-digg{background-position:-500px top!important}
.beauty-digg:hover{background-position:-500px bottom!important}
.beauty-reddit{background-position:-100px top!important}
.beauty-reddit:hover{background-position:-100px bottom!important}
.beauty-stumble{background-position:-50px top!important}
.beauty-stumble:hover{background-position:-50px bottom!important}
.beauty-delicious{background-position:left top!important}
.beauty-delicious:hover{background-position:left bottom!important}
.beauty-yahoo{background-position:-650px top!important}
.beauty-yahoo:hover{background-position:-650px bottom!important}
.beauty-blinklist{background-position:-600px top!important}
.beauty-blinklist:hover{background-position:-600px bottom!important}
.beauty-technorati{background-position:-700px top!important}
.beauty-technorati:hover{background-position:-700px bottom!important}
.beauty-myspace{background-position:-200px top!important}
.beauty-myspace:hover{background-position:-200px bottom!important}
.beauty-twitter{background-position:-350px top!important}
.beauty-twitter:hover{background-position:-350px bottom!important}
.beauty-facebook{background-position:-450px top!important}
.beauty-facebook:hover{background-position:-450px bottom!important}
.beauty-mixx{background-position:-250px top!important}
.beauty-mixx:hover{background-position:-250px bottom!important}
.beauty-script-style{background-position:-400px top!important}
.beauty-script-style:hover{background-position:-400px bottom!important}
.beauty-designfloat{background-position:-550px top!important}
.beauty-designfloat:hover{background-position:-550px bottom!important}
.beauty-syndicate{background-position:-150px top!important}
.beauty-syndicate:hover{background-position:-150px bottom!important}
.beauty-email{background-position:-753px top!important}
.beauty-email:hover{background-position:-753px bottom!important}

    <HEAD>
    paste code here
    </HEAD>
  4. Copy this second code and paste after post body tag:
    code:
    <b:if cond='data:blog.pageType == "item"'>
<div align='center' class='beauty-bookmarks'><ul class='socials'>
<li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/GoogleHotTrendsSearch' title='Subscribe to RSS'/></li>

<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='beauty-rightside'/>
   </div></b:if>

    Use Ctrl+F to find this code:
    <div class='post-body'>
    paste code here

    or

    <data:post.body/>
    paste code here
Read full entry... Add Best Social Bookmark Widget to Blogger Template
Category:

Related Posts Widget for Blogger (Blogspot)

Widget Preview

As mentioned in the HOSTUX page that it has a Related Articles Widget that is an alternative to Related Posts, in this post we show you how to add a Related Posts Widget for Blogger template.

In order to add a Related Posts Widget for Blogger, follow the steps below!

  1. Log into your Blogger account and go to Dashboard > Design > Edit HTML.

  2. Click the Expand Widget Templates check box.
  3. Copy and paste this code between HEAD tag:
    code:
    <style>#related-posts {float:left; width : 475px; 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 { font-size : 13px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1A9cwhxKtdKLdSuGRYuZJ8bjkpkl-tHIvIvhoUbGPKxcUOyPQxmEHy2mCyjmgLYFM6J_dAZR4RUPn26QF-Kx1wYraO53d6iAZ0n_uKsL7T-6MMkbwVOuo-FjCUrxbEKnVYG19r0QLF7c/s320/gohotsearch.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #333; } </style> 
<script src='http://chocodot.googlecode.com/files/related_posts.js' type='text/javascript'></script>

    <HEAD>
    paste code here
    </HEAD>
  4. Copy this second code and paste after post body tag:
    code:
    <b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast !=
&quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

    Use Ctrl+F for quick search to find this code:

    <div class='post-body'>
    paste code here

    or

    <data:post.body/>
    paste code here
related post widget blogger

See also How to add a Related Posts with Thumbnails widget into Blogger template.
Read full entry... Related Posts Widget for Blogger (Blogspot)
Category:
Subscribe to: Posts (Atom)