Widget Archives - Best 2 Know

Tag: Widget

How to Add Breadcrumb for blogger blog

All of us might have seen breadcrumbs on most wordpress blog.
So why not implement a breadcrumb for the blogger blogs.. For those who don’t know what a breadcrumb is,here is a little defenition from wikipedia.

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.

So Now lets get Started :

Login to your blogger dashboard
Go to Layouts and then Edit HTML
Then I would Sugguest you download the whole template first then Continue Editing.
Then Tick the Expand widget Template.
Now find for this Code :
<b:include data='top' name='status-message'/>
<b:include data='top' name='status-message'/>

Now Replace it with the below code :

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

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

Now Replace the above code with below code :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Now Find ]]></b:skin> and replace it with the below code :
.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3; } ]]></b:skin>
.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3; } ]]></b:skin>

Now you should have a working breadcrumb navigation on your system.

Highlight Author Comment in Blogspot

This trick is to give a Highlight Author Comment . This will make the blogs owner and authors comments looks different from the visitors comments. It’s very useful and interesting blogger hack tips. You can see the example in my blog. Here is what to do to make a “Highlight Author Comment” effect in Blogspot.

Login to blogger, then choose “Design –> Edit HTML”. Don’t forget to backup your template first.
Check the “Expand Widget Templates” box.

Copy this script and put it before ]]></b:skin> or copy to your CSS area.

.comment-body-author {
background: #E6E6E6;<span style="color: red;"> /* Background color*/</span>
color: #000; <span style="color: red;">/* Text color*/</span>
border-top: 1px dotted #223344;
border-bottom: 1px dotted #223344;
border-left: 1px dotted #223344;
border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; <span style="color: red;">/* Position*/</span>
}

Then Find this Code
<dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </dd>
<dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </dd>

Then Replace the above code with the below code

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>

Then Preview and Save your Template.

Attribution : New Blogger Widget

As Now a days blogger is upgrading with all new stuffs . for the bloggers who use blogger. always while using blogger many people want their site to look professional . So they don’t put the word “by powered by blogger” because blogger is simple and some people feels ashamed while using because of it cheapness and Simple stuff. Like not have much powerful control like wordpress platform. So to get rid of all this problems and to increase bloggers rating or to bring it more in-front blogger made a new widget which is not yet launched officially . Its Name is “Attribution” the widget puts an simple text of powered by Blogger . This Widget can also be used to write our copy rights or disclaimer without going in the Edit HTML page.

Screen shots :

1. The Main Preview (The Preview of the widget appeared in the template):

2. Page Layout (widget appeared in Page Layout) :

3. Widget Page (The page when we click on the Edit Link of the Widget) :

How I found this widget ?
It was just a little coincident that we met each other. I was converting a new blogger template to share with all of you. After creating the blog i went to page layout and then pick template section. after picking an Minima template. I returned back to page layout page and then i found it their.

Dont Worry friends the template which i m converting is completed and i will share it with you tomorrow

Add/Remove page/Post View Counter Widget For Blogger

Most of you are always thinking of a way to track that how many times is your posts or articles on your blog are viewed. Blogger a major free blog hosting provider does not have a individual post views counter widget like other blogging platforms, wordpress have. This is new improved version must work smoothly for all blogger blogs.

Features Added

New code makes Faster loading
Post views shown as image rather than text
You can show counter on Homepage too.
No ads at all. Advert Free.

How To install individual Page views counter widget for Blogger ??
Step#1 Log into your Blogger dashboard. Go to layout and than click on edit/html
Now check on expand widget content , than find the bellow code

<div class=’post-header-line-1′>

and paste the bellow code after the above line

<b:if cond=’data:blog.pageType == "item"’><img height=’16’ src=’http://forums.bit-tech.net/images-light/misc/stats.gif’ width=’16’/><img alt=’counter’ expr:src=’"http://demo.bloggerwidgets.cz.cc/counter.php?page=" + data:post.id + "&digit=4"’/> Views<b:else/><img height=’16’ src=’http://forums.bit-tech.net/images-light/misc/stats.gif’ width=’16’/><img alt=’counter’ expr:src=’"http://demo.bloggerwidgets.cz.cc/counter2.php?page=" + data:post.id + "&digit=4"’/> Views</b:if>

Save your template and your new individual post views counter widget is ready

You might also like this Widget for blogger or Related post widget

Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.
So you are tempted to add this widget then follow this steps:

Login in to your Blogger Account.
From Dashboard Click on Layout and the Click on Edit HTML.
Then Check the “Expand Widget Templates“.
Find </head> .

Then Before </head> Paste the following 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: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>
<script src='http://best2know.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Now Find
<div class=’post-footer-line post-footer-line-1′>.

Now immediately below that line add this code.

<!-- 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&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<br/>
<a href="http://www.best2know.info/2010/04/you-might-like-this-widget-for-blogger.html" target="_blank"><b>Grab This Widget</b></a>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

[Re:FIXED]

You can adjust the maximum number of related posts being displayed by editing this line in the code.
var maxresults=5;
To edit the title of the widget you can change this line of code.var relatedpoststitle=”Related Posts”;
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”;
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

If you fall into troubles implementing this,don’t panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

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 5 and step 7.

that is lines

<!– remove –><b:if cond=’data:blog.pageType == "item"’>

and

<!– remove –></b:if>

After listening to the comments by all of our visitors this code has been updated.