Label Cloud Widget For Blogger / Blogspot

A tag cloud or label cloud for blogger is a visual depiction of all labels used on your blog.You can see a demo of the Label cloud for blogger(blogger label cloud) here on my site. This Tag Cloud Widget was originally developed by phydeaux3. This is a modded version of phydeaux’s Cloud. This is much better than the Blogger’s Default Label Cloud. First of all Go to Your blogger Layout > Page Elements page and add a Labels Widget there..You can Do that using the Add a Page Element Option on that page.image After Adding the Label Widget Go to Layout > Edit Html (Do not expand the widget templates for the sake of easy explanation) You will find some code similar to Now Replace that with
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<div id='labelCloud'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 30;
var maxColor = [35,130,196];
var minFontSize = 13;
var minColor = [35,130,195];

<b:if cond='data:showFreqNumbers'>
var lcShowCount = true;
<b:else/>
var lcShowCount = false;
</b:if>

// Don’t change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}
var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;
a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
span.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(&#39; &#39;);
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>
</p>
<noscript>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
<br/>Powered By:<small><a href='http://www.bloggerplugins.org'>Blogger Gadgets</a></small>
<br/><small><a href='http://www.bloggerplugins.org/2008/06/label-cloud-widget-for-blogger-blogspot.html'>Label Cloud for Blogger</a></small>
</noscript>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Source: http://www.bloggerplugins.org/2008/06/label-cloud-widget-for-blogger-blogspot.html

Star Ratings on Blogger

Blogger has added a Star Ratings  Feature for us. It helps the visitors to rate your blog posts using 5 stars :).  If you want to see a preview of how this looks, then go to this post page and try rating this post. I you are interested in implementing the ratings feature on your blog, then read on and follow these simple steps.

 

How to Enable The Star Ratings  Feature?

image

 

  1. Login to Your Blogger in Draft Dashboard at http://draft.blogger.com (May not be available in your regular dashboard)
  2. Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Show Star Ratings” Optionimage
  3. You can Drag and Drop the “Star Ratings” and place it where you want.image
  4. Now if everything went right, then you should be able to see the Star Ratings Feature on your Blog. If not then read on. :)
  5. If it didn’t appear then don’t worry, That is because you are having a modded template. Just Go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates”  Option and locate
    <p class='post-footer-line post-footer-line-3'>


    Or if that is not there then find



    <div class='post-footer-line post-footer-line-3'>


    Or if that is not there then find



    <data:post.body/>


    and place the  following code  just below any of these lines[whichever is present in your template].



    <span class='star-ratings'>
    <b:if cond='data:top.showStars'>
    <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
    </b:if>
    </span>


    and Save the template




Source: http://www.bloggerplugins.org/2008/07/star-ratings-on-blogger.html

Yahoo Search Widget Blogger / Blogspot

I have mostly seen google search boxes on most blogs.So i thought of implementing a cute looking yahoo search box widget for blogs.The yahoo search widget can search either your blog alone or the entire web.This is just a simple search widget which will nicely fit into your blogger sidebar..

This search box has the yahoo branding logo inserted within the search box.By default the search widget will search your blog.The user can opt to search the entire web if he wants..
Your blog must be properly indexed by yahoo for this to work efficiently..
The To install the widget you may use the widget installer below..


Note:-If you are reading this in a feed reader the widget installer may not be displayed properly..So just visit the original post to get it installed..

Source: http://www.bloggerplugins.org/2008/07/yahoo-search-widget-blogger-blogspot.html

Increase Width of Blogger Comment Form

Blogger’s Embedded Comment Form comes in a fixed pixel size. So it might look bad in templates which have a wider post area. so how can we make it look better? – Just adjust the Comment form and increase its width.

So here is what the Transition will look like :)

 

smaller-blogger-comment-form

would change to

increase-width-of-blogger-comment-form

 

How To Increase the Width of the Comment Form?

1.Go to Blogger Dashboard > Layout > Edit HTML and opt to expand the Widget Templates.

2. Now look for the code which looks like

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

3.To increase the width just change the 100% with the actual pixel size which you need. For example try changing 100% to 560px ,save the template and see the effect. Adjust the pixel size properly till you get the required width for your blogger comment form :)


Source: http://www.bloggerplugins.org/2008/07/increase-width-of-blogger-comment-form.html

Reactions on Blogger

Blogger has added a reactions Feature for us. It helps the visitors to react to your blog posts in an interesting way. Blogger has got a default set of reactions(funny, interesting, cool). You can edit them and add your own. If you want to see a preview of how this looks, then go to this post page and mark your reactions :) I you are interested in implementing the reactions feature on your blog, then read on and follow these simple steps.

 

How to Enable The reactions Feature?

image

 

  1. Login to Your Blogger Dashboard
  2. Go to Design > Page Elements and Click on the Edit Button near the Blog Posts Gadget and check the “Reactions” Optionimage
  3. If you want to edit the Reactions, then click on the Edit link near to the reactions.image
  4. You can Drag and Drop the “Reactions” and place it where you want.image
  5. Now if everything went right, then you should be able to see the Reactions Feature on your Blog. If not then read on. :)
  6. If it didn’t appear then don’t worry, That is because you are having a modded template. Just Go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates”  Option and locate
    <p class='post-footer-line post-footer-line-3'>


    Or if that is not there then find



    <div class='post-footer-line post-footer-line-3'>


    Or if that is not there then find



    <data:post.body/>


    and place the  following code  just below any of these lines[whichever is present in your template].



    <span class='reaction-buttons'>
    <b:if cond='data:top.showReactions'>
    <table border='0' cellpadding='0' cellspacing='0' width='100%'>
    <tr>
    <td class='reactions-label-cell' nowrap='nowrap' valign='top' width='1%'>
    <span class='reactions-label'>
    <data:top.reactionsLabel/></span></td>
    <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
    </tr></table>
    </b:if>
    </span>


    and Save the template




Source: http://www.bloggerplugins.org/2008/08/reactions-on-blogger.html

Print your Blogger Posts by adding a Print Button

print-your-blog-posts

A “Print this Post” button would be much useful on blog posts(especially on tutorial and recipe blogs). Before adding the Print this button to your blog, you have to make your blog Printer Friendly. You can do this by adding some CSS to your blogger template. You can decide which parts of your blog page should be printed and which parts shouldn’t be. For example it would be better if your blog’s header , sidebars and comments don't appear in the prints. We can achieve this adding some printer specific CSS. If you want you can check out how this page will look when printed, Click File Menu of your Browser and Click Print Preview. You will notice that the header, footer, sidebars comments and other unimportant text wont appear in the print. I have hidden them all using CSS. Here are the steps to implement the same on your blog.

Making your Blog Printer Friendly

1. Login to your blogger account and go to Layout > Edit HTML and look for

</head>


2.Just above this line, we will insert our CSS  which will define how the page should be printed, and what all shouldn’t be printed on it.(you can further modify it according to your needs.you can decide which selectors should be displayed and which shouldn't)



<style type="text/css" media="print">
#header-wrapper,#header,.header, #sidebar-wrapper,.sidebar, #footer-wrapper,#footer,.date-header,.comment-link,.comment-footer,#comments,#blog-pager,.feed-links, #backlinks-container, #navbar-iframe,.dontprint {display: none;}
.post,#content-wrapper,#main-wrapper,#main{width:100%}</style>


3.Save the template and view your blog. Now from the File menu of your Browser Click on the Print Preview



4.Adjust the CSS(hide more selectors) until all unwanted elements are hidden on the Print Preview Page.



5.Now your Blog is Printer Friendly.



Adding The Print This Link



1. Go to Layout > Edit HTML and Click the Check box to expand the Widget templates.



2.Look for



<data:post.body/>

and below that paste the following code



<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<span style='background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDcQ3-e6OcbXWOI3amJhQ4RbEpUn-Lh6AerV8cenGvgbTyj7W4_rIl_fQcs1P44y6Js3po9myKmv_f7ViWHvHrzLpJXKK2I2pYz8_WevN66epnHwOVhYo2miF9aIRR8316bLAWWaCf0kE/s1600/print-this.png) left no-repeat; padding-left: 25px;display:inline;'><a href='javascript:window.print()' rel="nofollow" >Print this post</a></span>
</b:if>


This will add a Print This link below your post(on the post page).



Bugs :(


1. The complete page is not getting printed.It prints the first page only and truncates the rest.

Solution : - If your template uses the CSS properties float and overflow, then this problem might arise. A method to fix this is to reset the float and overflow styles of the selectors to the default values none and visible respectively(reset the selector styles in the printer css)


You can try printing this Tutorial using the Print this link below :)


Print this post
Source: http://www.bloggerplugins.org/2008/12/print-your-blogger-posts-print-button.html

Top Authors Widget For Blogger / Blogspot

Blogger allows multiple users to contribute to a single blog.So some of your blogs may have multiple authors.This widget is for all those blogs which have multiple blog authors.The top authors widget displays the list of top authors together with the number of posts each of the top authors has made.This statistics is based on the latest 5000 posts on the blog.


  • How to Install the Authors Widget For Blogger ?



  • Now you should have a working Top Authors widget on your blogger blog!This widget will encourage your blog team authors to write more and more..




    Add Top Authors Widget


    Source: http://www.bloggerplugins.org/2009/04/top-authors-widget-for-blogger-blogspot.html

    How to setup a FTP blog on blogger


    Many of you might have heard of the blogger's ftp publishing feature. There is another feature called custom domain with blog hosted on google servers (we will discuss about this in some later post).
    Blogger FTP Publishing with your domain: This lets you to publish blogger posts on your own domain(like yourdomainname.com) instead of the default blogspost domain(yourblog.blogspot.com). This requires you to have a domain name and good web hosting. The blogger post pages,home page and other pages will be published as html files on your hosting account.So this requires you to buy a domain name and a hosting account.

    Custom domain with hosting on google servers:This also lets you to publish posts onto your own domain name.But unlike the FTP publishing method,this doesn't require a web hosting account. You just need to buy a domain name and point the cname records to google.Google will host the files on their servers and you can just manage your blog just like any other .blogspot blogs

    Before we get into the details of setting up an FTP blogger blog lets first check out its advantages.

    1)Easy Site Back Up: If you use FTP publishing all of your blogger pages will be stored as html files on your server.So it will be easy to backup these files frequently.

    2)Published posts will never be lost. Google bans some blogs for some reasons.If the blog is an FTP published one it can never be lost.. It can be restored from backups..

    3)Everything is on your server.So you can use .htaccess rewrite rules and many other stuff.. I will soon try setting up an FTP blogger blog and let you know more about it..

    The main disadvantage of the FTP blogs are
    1)It can use only the blogger classic layout
    2)It cant have the easy to install "Blogger widgets or gadgets"

    Steps to setup a FTP Blogger Blog
    1)Buy a domain from some good domain provider.I do suggest name.com and godaddy.com
    2)Buy a good web hosting account.I personally suggest Host Gator as it is highly reliable

    If you sign up on HostGator use the coupon code GREEN to get a 25% discount.
    3)Now change the nameservers of your domain name to that of your hosting account.It would be something like ns134.hostagator.com or so
    4)Now switch your blogger blog to a Classic Template.You can do that by going to the Layout Tab
    5)Now to change to Ftp publishing goto the Settings Tab and choose Publishing
    6)Click on FTP (publishing on your ISP server) or SFTP (secure publishing on your ISP)

    7)Now fill in your FTP details
    8)Fill the FTP path as /public_html/ if you wish to install the blog on the main domain. If you want to install it to yourdomain.com/blog then give the path as /public_html/blog/
    9)Now when you hit save Settings, you are almost done.Now you just need to opt for Republish Now to get your blog published via FTP.


    Source: http://www.bloggerplugins.org/2009/05/hot-to-setup-ftp-blog-on-blogger.html

    Shutting Down Do Follow

    I am shutting down the Do Follow movement due to excessive spammy comments on blogs.. Nowadays new webmasters are becoming so spammy that they hire guys to comment on DO FOLLOW blogs. I have been receiving a lot of these now a days.. and so it was almost impossible to reply to genuine comments.
    I keep on moderating the comments but it is a tedious task considering the number of spam comments i am getting..

    Sorry to the genuine commentators.. From now on i will try to reply to your comments as soon as i can.
    Source: http://www.bloggerplugins.org/2009/06/shutting-down-do-follow.html

    Breadcrumb for Blogger

    Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It gives users a way to keep track of their location within programs or documents. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale.

    The trails like Home » Label » Post Name are the breadcrumbs.

    Here is a screenshot of a Breadcrumb Trail

    Breadcrumb for Blogger

    Now that you know what a breadcrumb is , let us get into the details of adding the same to your Blogger Blog.

    1. Go to Template > Edit HTML and  check the check box which says Expand the Widget Templates.

    2. Now in the Template, Find

    <b:include data='top' name='status-message'/>

    and immediately above that, paste this line of code

    <b:include data='posts' name='breadcrumb'/>

    3. Now find

    <b:includable id='main' var='top'>

    If you find two occurrences of this, then locate the second one(locate the only one otherwise) and immediately above that paste this code snippet

    <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType == "static_page"'>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
    <b:else/>
    <b:if cond='data:blog.pageType == "item"'>
    <!-- breadcrumb for the post page -->
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.labels'>
    <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
    <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast == "true"'>
    » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
    </b:if>
    </b:loop>
    » <span><data:post.title/></span>
    </div>
    <b:else/>
    <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
    </b:if>
    </b:loop>
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
    <!-- breadcrumb for the label archive page and search pages.. -->
    <div class='breadcrumbs'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
    </div>
    <b:else/>
    <b:if cond='data:blog.pageType == "index"'>
    <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == ""'>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
    <b:else/>
    <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
    </b:if>
    </div>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:if>
    </b:includable>

    This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove those 2 green lines of code.


    4. Save the Template


    5. If you want to make the breadcrumb smaller then go to Template Designer > Advanced > Add CSS and add the following Snippet there and Apply the changes

    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }

    Now you should have a working breadcrumb navigation on your system. The original breadcrumb idea is based on Hoctro's Code from HOCTRO  breadcrumb hack. It has been modified to accommodate Search Pages, Label Pages and Archives.The post breadcrumb uses RDF breadcrumb Markup to assist you in displaying breadcrumbs in Google Search Results.


    Source: http://www.bloggerplugins.org/2009/06/breadcrumb-for-blogger-blogspot.html

    How to setup custom domain for your blogger blog?

    What is a Custom Domain ?

    When you register your blogspot blog, you will get a new blog with some URL like http://yourblogname.blogspot.com . This blog will be hosted on Google’s servers and you can make posts on your blog by logging in at Blogger.Com. Now Custom domain means that we will be using our own domain name instead of having the .blogspot.com extension. That is our blog URL will look something like http://www.yourblogname.com When you use a custom domain, your blog will still be hosted on Google’s servers and you can continue making posts from Blogger.Com as you usually do.So the only thing that changes is the blog’s URL

    How much does this Cost?

    For using a custom domain you should buy your own domain name. The price of the domain name will vary depending on the domain extension that you choose. But normally most of us will prefer to buy domains which ends with a .COM .COM, .ORG , .NET domains will cost something under 10 US Dollars. So you just need to spend 10 dollars and you can have your blog running at the new domain which you buy.

    Where to Buy the domain from?

    There are many domain registration websites.  You can directly buy your domain from any of them. But if you are a little lazy, then you can buy the domain directly from Blogger.Com .Actually Blogger is not a Domain Registrar and they buy domains for you from third party sites. So i always prefer to buy from other domain registration sites.

    How to buy the domain and setup my blog with the new domain?

    If you want to setup your custom domain by buying the domain from Blogger.Com, then you just check out this Video tutorial from the Official Blogger Help Team.

     

    You can add Google apps like Gmail and Docs on your domain very easily.Actually blogger will do everything for you.

    By the way i wont advice you to buy domains from blogger. I would prefer to buy domains from Name.Com or Godaddy.Com

    1. Instructions For Setting Up Blogger Custom Domain on Name.Com

    2. Instructions For Setting Up Blogger Custom Domain on Godaddy.Com

    It just costs something less than 10$.. Isn't it worth a try? Hurry up guys get your own custom domained blogs and let me know if this tutorial was useful for you.. :)


    Source: http://www.bloggerplugins.org/2009/06/how-to-setup-custom-domain-for-your.html

    Adsense Below the post title in Blogger

    Your blog earnings depend mainly on your blog's traffic and on your ad placement. One important place to place the ads is below the Post title. It will give more importance to the ads and there is more possibility to get clicks. This is in accordance with the Google Adsense TOS

    I am personally using the same hack on this blog. You can see adsense ads below the post title on all my  pages.Ok now let us get into the details of how to set it up.

    First of all login to your adsense account and generate ad code of optimum size..
    Now copy that adsense code into the following box and parse it(you may not see the parser if you are reading my feed)

    Copy off the parsed code..
    Now login to your blogger account.
    Go to Layout > Edit Html and expand the widget templates.
    Find this piece of code
    <data:post.body/>

    Now add the following code just above that line.
    <!-- BloggerPlugins.ORG Adsense Above Posts start -->
    <b:if cond='data:post.isFirstPost'>
    Put your parsed adsense code here
    <br/>
    </b:if>
    <!-- BloggerPlugins.ORG Adsense Above Posts End -->


    From now on you should have adsense below the post title. On pages with multiple posts(eg: home page, label page etc) , the adsense ads will show up only on the first post(i.e  below the post title of the first post). It wont show up on the other posts on the same page.So you are abiding by the Adsense TOS.
    Source: http://www.bloggerplugins.org/2009/06/adsense-below-post-title-in-blogger.html

    Back To Top / Scroll To Top Widget For Blogger / Blogspot

    You might have seen a Scroll to Top or Back To Top button on many sites and blogs.You can see a similar button here on my blog.

    Ok what is the advantage of using a scroll to top or back to top widget?
    When you add the scroll to top widget you will get a button on the right corner and when a user clicks on it he can get back to the top of the blog.






  • How to Install the Back to Top Widget for Blogger









  • I hope this will improve your blog's navigation interface.This will provide them with an easy way to get back to your blog's top.




    Note:
    If you are reading this in a feed reader, the widget installer maynot work.In that case visit the atual post
    Source: http://www.bloggerplugins.org/2009/06/back-to-top-scroll-to-top-widget-for.html

    Automatic Post Summaries for Blogger with Thumbnails

    Wordpress users might have seen the Wordpress excerpt thing, which displays a summary of your post. Now we have something similar for blogger.Actually i should say it is really amazing..This hack will automatically create post summaries with thumbnails.. you needn't need to add any extra code in every BlogSpot that you make..These summaries will be displayed on all pages other than the post page..Here in my blog i am using a modified version of the same which displays summaries on pages other than the post page and homepage.Check out some of my labels to see the hack in action..

    First of all, this hack was developed by Blogger Sphera . I will try to explain his hack to you guys..

    First of all Edit your blogger template

    Find this code


    </head>

    and replace it with

    <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:blog.pageType != "static_page"'>
    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 230;
    summary_img = 140;
    img_thumb_height = 100;
    img_thumb_width = 100;
    </script>
    <script src='http://bloggergadgets.googlecode.com/files/excerpt_min.js' type='text/javascript'/>
    </b:if>
    </b:if>
    </head>

    Off course you can edit these parameters..


    Now Find



    <data:post.body/>

    Replace it with





    And you are done.. now you should have the post summaries on your homepage,search results,archive and label pages..



    Update: 29/03/2012 : If this Script is not working on your blog anymore, please change http://blogergadgets.googlecode.com/files/excerpt.js  to http://bloggergadgets.googlecode.com/files/excerpt_min.js. Sorry for the trouble :-)


    Source: http://www.bloggerplugins.org/2009/06/automatic-post-summaries-for-blogger.html

    Creating a Separate Archive Page or Labels Page for blogger

    Many bloggers dont prefer to display the blog archive and the labels on each and every page of their site. They may wish to create a separate page for the Blog Archives. I have made one such implementation of a blog archive here . You can also check out my label cloud page .

    So i think you guys understood what i am trying to explain.



    Ok lets get into the details of doing this. Blogger allows little bit of programming.Those who have coded using C or any simple programming language might surely have used the conditional if statements. The same thing is there for the blogger template also.learn about these conditional tags over here and come back..

    So how are we going to do this..First we will make a blank post with an appropriate title.In this case i have made a post with title "Label Cloud" .Also make sure that you have disabled comments on this post .You can do that from the Post Options in your Post Editor. When making the post set the post date to a little earlier date so that this post wont reflect in your feed.(You can do that in the post options in your post editor).Now we have created a page where we want to display our blog label cloud. Note that url. We will need it

    Now we are going to make a new label gadget.For this goto Blogger > Template > Page Elements and add a Label gadget.Drag it just below the blog post gadget.

    Ok now we will get a label gadget on every page of our blog.(If you want you can convert the label widget into a cloud)Now we want to hide the blogpost widget on this particular label page.For this we use conditional tags..
    I placed the following code just below ]]></b:skin>





    <b:if cond='data:blog.canonicalUrl == &quot;http://www.bloggerplugins.org/2005/06/label-cloud_06.html&quot;'>

    <style>

    .post{display:none;}

    .comments-block{display:none;}

    .comment-form{display:none;}

    .comment-footer{display:none;}

    .blog-pager{display:none;}

    .feed-links{display:none;}

    .comments{display:none;}

    </style>

    </b:if>





    Now the Blog Post widget will be hidden in the Label Cloud Post Page.The label cloud appears on every blog page.Now we have to make it invisible on other pages(pages other than the cloud page).To make a widget invisible we have to wrap conditional tags within the main b:includable of the widget.Other B;includables needn't be wrapped as they are called from the main includable(This can be compared to main function and other functions in C. If the main function is disabled,the program wont work.Similarly if the main includable is disabled,then the widget will be hidden).The general structure of a any widget looks like

    <b:widget id='something' locked='false' title='something' type='something'>

    <b:includable id='main'>

    ----

    ----

    ----

    </b:includable>

    Other includables //Not Present in Label Widget
    </b:widget>



    Now we have to impose the conditions within the widget which will make the structure to




    <b:widget id='something' locked='false' title='something' type='something'>

    <b:includable id='main'>

    <b:if cond='data:blog.canonicalUrl == &quot;http://www.bloggerplugins.org/2005/06/label-cloud_06.html&quot;'>

    ----

    ----

    ----

    </b:if>

    </b:includable>

    Other includables //Not Present in Label Widget
    </b:widget>



    Similarly we can create a separate archive page also..
    Remember that the Archive widget has more than one b:includables..You just need to hide the main includable..
    .

    Note:In this tutorial you will have to modify the URLS properly.I have used my blog urls for explanation.This method doesn't cause problems with rearranging of Widgets in the Page Elements Tab.


    Permalink:Creating a Separate Archive Page or Labels Page for blogger
    Source: http://www.bloggerplugins.org/2009/06/creating-separate-archive-page-or.html
     
    Play : Agame | Y8 Games | Y3 Games
    Copyright © 2011. Blogger Tips And Tricks 2012 - All Rights Reserved

    Proudly powered by Blogger