Full Blogging Tutorial and SEO Trick For Your Blog

Home » All posts

How to embed a youtube playlist on your blogger blog

Posted by Unknown

In this post we will see how to create a YouTube video gallery using jQuery. It is an elegant gallery in which we can add 5 videos and for its dimensions, we could put it below the blog header. Actually you can put it anywhere, but it is recommended in that area considering that 765px is the width of the gallery.

To add this video slider to your blog go to Template > Edit HTML and before the </head> tag, add these scripts:

Then add the styles before ]]></b:skin>

/* Video Gallery for Blogger
----------------------------------------------- */
#videoslider {
background:#000; /* Background color */
clear:both;
margin:0 auto;
padding:5px;
width:765px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#videoslider, #videoslider-content, #videoslider-tabs {height:350px;overflow:hidden;}
#videoslider-content {color:#fff;float:left;text-align:center;width:460px;z-index:1;}
.loading-vid {display:block;margin:165px auto 0;}
#videoslider-tabs {float:right;width:300px;margin:0;}
#videoslider-tabs li {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-26RqusJ6wUzHFPgCCvP7ShSDzGFrVW8Tzo07cY_E6m7JEldHByC6mj2espO46_UQYmjpLpSSXIrmaOaBSrQ3c6dTrmyrZM71T_g7EnY2MTmoRHKpT16w_9qyAoAAXNZp0vMB3B97uJT/s1600/tab_backgr.jpeg) repeat-x top left;float:left;height:60px;padding:5px;width:290px;list-style:none;}
#videoslider-tabs li a {padding:0 !important;border:0 !important;}
#videoslider-tabs li.hover {background:#333;}
#videoslider-tabs li.actVid {background:#555;}
#videoslider-tabs li img.thumb-vid {background-color:#fff;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}
#videoslider-tabs li span.vidTit {
display:block;
color:#CD332D; /* Titles color */
font-size:14px; /* Titles font size */
font-weight:bold;
text-decoration:none;
}
#videoslider-tabs li .vidDesc {
display:block;
color:#fff; /* Color of the description */
font-size:12px; /* Font size of the description */
font-weight:bold;
text-decoration:none;
}
#videoslider-tabs a {text-decoration:none;}
#videoslider-tabs li.actVid .vidDesc {color:#fff;}
.ui-widget-content{float:right;}
.tabs-outer {background-image: none !important;}
#videoslider-tabs li a:hover {background: none !important;}

Now in a HTML/Javascript gadget paste the structure of the slider, this is the one you should put under the header:

<script>
var video = [];
video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_1" frameborder="0" allowfullscreen></iframe>';
video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_2" frameborder="0" allowfullscreen></iframe>';
video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_3" frameborder="0" allowfullscreen></iframe>';
video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_4" frameborder="0" allowfullscreen></iframe>';
video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/video_ID_5" frameborder="0" allowfullscreen></iframe>';
</script>
<div id="videoslider">
<div id="videoslider-content"></div>
<ul id="videoslider-tabs">
<li><a href="#vid1"><img src="//i2.ytimg.com/vi/video_ID_1/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid2"><img src="//i2.ytimg.com/vi/video_ID_2/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid3"><img src="//i2.ytimg.com/vi/video_ID_3/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid4"><img src="//i2.ytimg.com/vi/video_ID_4/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

<li><a href="#vid5"><img src="//i2.ytimg.com/vi/video_ID_5/default.jpg" class="thumb-vid" /><span class="vidTit">Video Name</span><span class="vidDesc">Video Description</span></a></li>

</ul>
</div>

Add the IDs of the videos, their names and their description and that's it. The description should be brief so you wont have space problems.
If you do not know how to get the ID of a video, then open the video on YouTube and look at the address bar... the last characters are the ID you need.

Note that the ID of each video should be added two times, one is for displaying the video and one for the tabs thumbnail.

As this gallery works with jQuery we should make sure to not repeat the version of the script if we already have jQuery.

More about → How to embed a youtube playlist on your blogger blog

Making a gadget visible only to the blog administrator

Posted by Unknown

And the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to our blog readers, perhaps a Survey already ended that we want to keep, a counter, or any gadget that while we customize, we don't want anyone else to see until the final result is ready.

The procedure is simple, we just have to add two lines to our gadget that we want to hide.

First thing to do is to go to Template > Edit HTML and then search for the gadget's code we want to hide. It will be easier using the CTRL + F keys and locating the name of the gadget/widget.

For example, in a HTML/Javascript gadget, we will see a code like this:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<span class='item-control blog-admin'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>

All you have to do is add the parts in red and ready. If you close the session go to your blog you'll not be able to view the gadget that you have hidden, but as soon as you sign in you will see that it is visible to you.

Not all gadgets have the same structure like in my example, but it will be easier to guide you, just place the first code in red just after <b:includable id='main'>

And the second red code just before </b:includable>
Note: to look inside the widget's code, click on the sideways arrow next to the widget's id.

And with that the gadget will be hidden for readers except you.

More about → Making a gadget visible only to the blog administrator

Upload images and get the URL of the image

Posted by Unknown

As each day there are lots of new users joining the world of blogging, is necessary to discuss about some basic topics that bring up some recurring questions such as how we could get the URL of an image?

On the Internet there are many both free as well as paid web hosting where we can host images, but since we use Blogger then there is nothing better than using the same hosting service that Google gives us and that is Picasa.

The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the New post button. And preferably from the Edit HTML tab, click on the image icon.

A pop-up window will open, then click on the Choose files button, browse for your image(s), double click or click on Open and then hit Add selected.

When you have uploaded you will see that in the post editor shows the code of the image.

That code is the URL of the image. You'll see two URLs (Web addresses):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnPM_0tVXHi0XoASooHDwckpH1YJK3hxj1U3gQWUBtCJazOoOlSEo-YO2Z34our5rzlB0yoeosYeEQ-rIM9DcXXjAA6qSHlST2JjMBJYOno3GyANl9nnPL7TATPusz6S9MQ6kX42pTl0k/s1600/Bliss-Windows-XP.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvnPM_0tVXHi0XoASooHDwckpH1YJK3hxj1U3gQWUBtCJazOoOlSEo-YO2Z34our5rzlB0yoeosYeEQ-rIM9DcXXjAA6qSHlST2JjMBJYOno3GyANl9nnPL7TATPusz6S9MQ6kX42pTl0k/s320/Bliss-Windows-XP.png" /></a>

The first is the URL of the image that you need to take. It is not necessary to publish this entry where you uploaded the picture, you could as well not publish it, leave it as a draft or delete it, the image will be saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the image to remove). You could also upload image directly from Picasa. Just login to PicasaWeb, select the album where you want to host the image, and click on Add photos.

Select the image from your computer and upload it.

After we have uploaded, click on OK.

There you will see the thumbnail, along with other photos, if there are more.

If you want to get the URL of the image from Picasa then click on the image to open in full size.
With the right mouse button click on the picture and select option depending on the browser you use...

If using Google Chrome, then select Copy Image URL:

If you are using Mozilla Firefox select Copy Image Location:

If you are using Opera select Copy Image URL:

If you are using Safari select Copy Image Address:

If you are using Internet Explorer (I hope not), first select Properties, a window will open, there you will find the Address section from where you can select the URL of the image and copy it:

Having selected any of these options you'll have in the clipboard the URL of the image. Simple isn't it?

Remember that all images you upload on Blogger are stored in your Picasa account, so if you find an image previously uploaded to your blog, go to your Picasa account, select the album containing the name of your blog and there find the picture you need. The procedure to obtain the URL of the image is the same as explained above.

More about → Upload images and get the URL of the image

Possibly the most simple jQuery Slider

Posted by Unknown

Do you have jQuery in your blog and space to insert 10 lines of code? If the answer is yes and you also want to have an automatic slideshow, this is the simplest code I've seen so far.

That code having a succession of simple images placed inside a box with a common general container would give this result:

1. Adding the JavaScript

If you do not have jQuery, then you should add this line just after ]]></b:skin> to load this popular slideshow:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

Once confident that we have the library in our template, we need to add the same line to make the series of images function as a slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

We can save changes to the template because that is all. It is simple but you will see that it works and does what it has to do. Now we just have to put the images where we want to display, in the manner discussed below.

2. Create the slider

After adding the codes above in our template (although you could add it directly into a gadget, on a page or even in an entry as you see here) we can create a viewer as you saw above. We just have to use this HTML structure below to add the images:

<div id="slider">
    <div><img src="IMAGE_URL"/></div>
    <div><img src="IMAGE_URL"/></div>
    <div><img src="IMAGE_URL"/></div>
</div>

I do not know how you see it but it is all you need.

For me this is quite lightweight and efficient, much more than most libraries that are used perhaps too often.

Settings

The last three numbers of the plugin allow us to adjust some things. All are expressed in milliseconds (4000 = 4 seconds)

fadeOut(0): Time for the outgoing image
fadeIn(1000): Time for the next image
('#slider');},4000): Time spent in each image

How it Works

And for the curious who want to learn things...

$('#slider div:gt(0)').hide();
With gt(x) we select all the divs from number x. In this case 0 is the first, so what we do with this line is to hide (hide) all the boxes except the first, which will be the image visible initially.

setInterval(function(){ [what we will do] }, 4000);
We need to reiterate a few things from time to time and we do with setInterval, indicating the delay time between each set.

$('#slider div:first-child').fadeOut(0)
Within each of these intervals we remove (fadeOut) the first box (div:first-child) that is in the relationship of images...

.next('div').fadeIn(1000)
...and we make the following box (next) appearing gradually (fadeIn).

.end().appendTo('#slider');
Finally we have the first image and place it at the end (appendTo) of the "list".

end() resets the count of elements that we move forward with next(). Thus, the first child made earlier to disappear is the one we sent down the stack and not the image that is now visible.

Variants and customization

As you have seen CSS is not necessary for the slider to work, but using it we can change its look, allow the use of images of different sizes, include labels and even improve the transition. Here are some ideas.

DEMO TEXT1

DEMO TEXT2

DEMO TEXT3

We can limit the overall container size and prevent overflow for larger images. And then we will put rounded corners, border and then center them.

#slider {
overflow: hidden;
width: 500px;
height: 300px;
border:3px solid #b8b8b8;
border-radius: 40px;
margin: 0 auto;
padding: 0;
position: relative;
}

If we place the parent boxes of the images absolutely with respect to the general container (for that we put before the relative), these will overlap each other. In this way the fadeOut may give them some time to be "visible" (we changed 0 to 1000) and a smoother transition between images. The mixture of images is produced in the second demo.

In the images, the max-width serves us to always take up the entire width and min-height so that even if they are distorted, there will remain no space below when they are less than 300px.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

And if we add other elements on the images (in this example a text), we'll just label them with a span or paragraph (p) and position them in the CSS in an absolute manner, placing them in the exact place where we want with top/bottom - left/right.

#slider p {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 400px;
height: 24px;
margin:0;
padding: 5px 0;
color: #eee;
background: #990000;
font-size: 22px;
line-height:22px;
text-align:center;
}

The markup in the HTML for this last, includes also a link to the image, so it would be like this:

<div id="slider">
<div><a href="Link_URL1"><img src="Image_URL1" /></a><p>TEXT1</p></div>
<div><a href="Link_URL2"><img src="Image_URL2" /></a><p>TEXT2</p></div>
<div><a href="Link_URL3"><img src="Image_URL3" /></a><p>TEXT3</p></div>
</div>

More about → Possibly the most simple jQuery Slider

Add Comment count to Post Header Titles in Blogger

Posted by Unknown

You noticed the number of comments displayed in comments section inside each posts. It is placed under the post. It is not noticeable to visitors. Do you want to add it to header to inspire your visitors to comment. The visitors only see the comment count when they reach at the end of the post. if the visitor not scroll to footer part , the comment count will not see.
Do you think about displaying comment count on the top of post will be better? Then here we are showing a technique to add comment count with beautiful backgrounds to the header part of the post, not only inside the post but also it will display to homepage.

After adding his trick the comment count will be displayed with post titles , if more comments on the post, it will encourage the users to comment and also helps to jump to comment section.

Here are some tricks related to comments
Recent Comments Widget
Change Comment Style in Blogger
Highlight Author Comments in Blogger
Verified Facebook tick mark for author comments
Add Yahoo smileys to Blogger Threaded Comments
How to change Blogger POST A COMMENT message to Image

How to add Comment count to Post Header

Sign In to Blogger Dashboard
Go to Template -> Edit HTML
Find (Ctrl+F) ]]></b:skin> and copy the below code above it

.comment-count {
float : right;
width : 48px;
height : 48px;
background : url( IMAGE URL );
background-repeat: no-repeat;
font-size : 18px;
position:absolute;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Choose the comment count background

Copy the URL of image you want by right clicking and select Copy image Location or Copy Image URL.
Replace the RED marked portion above with the image URL

Add Comment count code

Find the following code

<h2 class='post-title entry-title' itemprop='name'>

class='post-title entry-title'

Add the following code below it

<b:if cond='data:post.allowComments'>
<a class='comment-count' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

Save Template

Congratulations you have done. Check your blog and get more comments. If you liked this article please like and share this blog.

More about → Add Comment count to Post Header Titles in Blogger

Using LinkedWithIn Widget

It is very simple to add LinkedWithIn Widget
Go to LinkedWithIn website and follow the simple instructions
Give e-mail id, blog url, select platform as Blogger and select number of posts should be displayed.

Add Related Posts Manually to Blogger

Sign In to Blogger Dashboard
Go to Template -> Edit HTML
Find </head>
Copy the below code above </head>

<b:if cond='data:blog.pageType == "item"'> /* remove this */
<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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPR1B2VmsikrE-Yljlulbmt2du8ZxzUtKDMJc8kV56c-qzFdx_Fqwa2mpwbTtseEpXiimj-Uez0pMyt15jYzzNjH_6lCut7fU5ZESG_R6TrQa4tinu_0Int8W4WV-H4eIEtGtd2wQwyi4/s400/noimage.png";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script><a href="http://fe-blogger.blogspot.com" style="font-size:0pt">Blogger Widgets</a>
<script src='http://netoopscodes.googlecode.com/svn/netoops-related-posts-with-thumbnails-blogger.js' type='text/javascript'/>
</b:if> /* remove this */

Customization

RED marked - remove red marked portion to add this Widget to Homepage
Brown - place the URL of the image in quotes to display if there is no image in the post.
maxresults=5 - change the value to change the number of posts to be displayed.
splittercolor="#DDDDDD" - change the color of splitter line between posts. Check here to see color codes selector
relatedpoststitle="Related Posts" - Change the Name of title.

Add to Post Footer

Find <div class='post-footer'> and copy the below code above it

<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/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://fe-blogger.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png'/></a>
</b:if></b:if>

Remove Orange marked to add related posts to homepage too.
Change RED marked to change the number of posts should be displayed

I hope this article will help you. If so please like and share our blog. You can check here more Exciting Widgets.

More about → Related Posts Blogger Widget and LinkedWithIn for Blogger

How to Add Automatic Read More TRICK for Blogger Blogs

Posted by Unknown

How to Add Automatic Read More HACK for Blogger Blogs

Read More button or jump link is used cut the full article into two pieces and First piece of Text and images display in the Homepage. When you create a post may be it includes long snippets and images that are too long, then what should you do? You have to add  or click on Jump link to separate. Here I am going to show you how to Automatically put read more to Blogger posts. In this Automatic read more hack everything is automatic and you need not bother about the too long length of posts.Let us see how to do it..

Features are

You can also limit the length of post
Set the size of Image, height and width separately
Disable Image

Sign In to Blogger Dashboard
Go to Template -> Edit HTML
Find </head>
copy the following code above it

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 400; /* Summary length if no image*/
summary_img = 300; /* Summary length with image*/
img_thumb_height = 200; /*Image Height*/
img_thumb_width = 200; /*Image Width*/
</script>
<script type='text/javascript' src='http://netoopscodes.googlecode.com/svn/branches/Js%20files/auto-readmore-blogger.js' ></script>

If you add CSS codes to style jump link in your blog, then See the Update

Then Find (Ctrl+F) <data:post.body/> and replace it with the following code
If you find more than one <data:post.body/> replace all occurrences.

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more...</a></span><a href="http://fe-blogger.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png"></a>
</b:if>
</b:if>

Save Template.

UPDATE [17.08.2013]

In the above code, only a simple link to the post shows in the homepage. If you want to style that link or did you add css codes to style the jumplink, then add the following code instead of the above.

Then Find (Ctrl+F) <data:post.body/> and replace it with the following code
If you find more than one <data:post.body/> replace all occurrences.

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<div class='jump-link'><a expr:href='data:post.url' expr:title='data:post.title' >Read more...</a></div><a href="http://fe-blogger.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN36t6euPvndc3S9MEgljTJuhwJrG4kjsw2nAe-uQSj3w2nJ_FLWh8EgczpyXgTugIia1l44KL3zZImMLlnMno9m0uIs9nRMHbYkLq7SF1PtrqTIpLJgKkgAKWS3YqkinGRtUy0ikH71s/s1600/1x1juice.png"></a>
</b:if>
</b:if>

Congratulations, You have done the Hack to your Blog. I think you enjoyed this article.

More about → How to Add Automatic Read More TRICK for Blogger Blogs

Awesome Recent Comments Widget for Blogger, Feed Comments

Posted by Unknown

Recent Comments Widget can be used to display the latest Comments in the blog. Comments are the best way to make a good contact with your blog visitors and followers. By default Blogger added commenting System to Blogger blogs. Recent Comments Widget will inspire your blog visitors to post a comment on your Blog. If you don't like to read full about this widget or Are you hurry to add this widget to you blog go to "How to add Recent Comments Widget to Blogger Blog".

There are many changes made to Blogger Commenting System. At earlier time the basic commenting System was used then it changed to Threaded Comments (Others can reply to one comment), it can be change back to basic blogger Commenting System. All Blogger blogs are using Threaded Comments System. Now another type of commenting System was introduced in Blogger Blogs, Google+ commenting System.
The Recent Comments Widget also inspire your blog visitors to post a comment. Your visitors may be interested to see their names in other blogs. If their comment is good ,it will catch other visitors eyes and they also may have wish to do comment.
The Recent Comment Widget shows the Commentators name with Profile link followed by the Post name and followed by their Comment. This Widget can be added to Sidebar or Footer or anywhere which catches the visitors eyes. This Widget was coded using JavaScript and you can also change the style of Widget according to your template.

Wish to see Demo?
Recent Comments Widget

How to Add Recent Comments Widget?

Sign In to Blogger Dashboard
Select Layout -> Click on Add a Gadget
Take HTML/Javascript from the list
Give the Title and Copy the below code to it and Save

<script style=text/javascript src="http://netoopscodes.googlecode.com/svn/branches/Js files/recent_comments_fe-blogger_min.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://fe-blogger.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
<a style="display:none" href=http://fe-blogger.blogspot.com>Recent Comments Widget</a><style type=text/css>
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}

</style>

Change the RED highlighted with your blog name

If you want different Styles for this Widget, Please visit again I will post soon.

Another Way to add Recent Comments Widget

Go to Layout -> Click on Add a Gadget
Select Feed from the list and give the following URL

http://fe-blogger.blogspot.com/feeds/comments/default

Change the RED marked portion with your Blog URL

A Window will appear and shows demo,there are some options, you can select the options for adding comment date, commenter name etc.. Using this method you have only limited options.

Click Save

Congratulations you have done..
I hope this article will help you and you enjoyed this article if so, Please Like and Share .

More about → Awesome Recent Comments Widget for Blogger, Feed Comments

Add Google type Stylish Breadcrumbs to Blogger Blog?

Posted by Unknown

The Breadcrumbs or breadcrumb trail is used as an aid for navigation. The breadcrumbs allows users to keep track of their location and to understand where they are. In Blogger, the breadcrumbs are the way to realize the category of an article/post. I think you had seen this in e-commerce sites like ebay,myntra,yebhi. They used breadcrumbs to identify a product is in which category. Its just like a Home link followed by the category belongs and then the current location/current post.

Demo shows in top of this post Click Here

Sign in to your Blogger Dashboard
Go to Template -> Edit HTML
Step 1: Find (ctrl+F) the following code

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

copy the following code after it

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

Step2: Find the following code

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

copy the following code above it

<b:includable id='breadcrumb' var='posts'>
                                <b:if cond='data:blog.homepageUrl == data:blog.url'>
                            
                     <b:else/>
          <b:if cond='data:blog.pageType == "item"'><a href="http://www.fe-blogger.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><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"'>
                                      
                                      <p class='breadcrumbs'>
                                        <span class='post-labels post-navigation'>
                                          <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 post-navigation'>
                                            <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>
                                               <span>Posts filed under
                                                 <data:blog.pageName/></span>
                                            </b:if>
                                          </span>
                                        </p>
                                      </b:if>
                                    </b:if>
                                </b:if>
                          </b:if>
        </b:includable>

Step 3: Find ]]></b:skin> and Copy the following css code above it

Style 1: Style like this blog used

.breadcrumbs {

margin: 0px 0px 15px 0px;
font-size:95%;

}
.post-navigation > a:after, .post-navigation > a:before {
    border-bottom: 13px solid transparent;
    border-left: 11px solid #B7B7B7;
    border-top: 13px solid transparent;
    content: "";
    display: inline-block;
    left: 100%;
    position: absolute;
    top: -2%;
    z-index: 1;
}
.post-navigation > a:after {
    border-left-color: #F2F2F2;
    left: 99%;
}.post-navigation > a:hover {
    padding-left: 23px;
}
.post-navigation > a {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 1px solid #B7B7B7;
    color: #000000;
    padding: 4px 12px;
    position: relative;
    text-decoration: none;
transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
}
.post-navigation > span {
    padding-left: 14px;
}

Style 2: Google Type

.breadcrumbs a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-position: 100% 0;
    background-repeat: no-repeat;
    border-color: #D9D9D9;
    border-image: none;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    color: #666666;
    display: block;
    float: left;
    font-size: 95%;
    padding: 7px 16px 7px 19px;
    position: relative;
    text-decoration: none;
    z-index: 1;
}
.breadcrumbs a:hover {
    border-bottom-color: #C4C4C4;
    border-top-color: #C4C4C4;
    box-shadow: 0 2px 2px #E8E8E8;
    color: #333333;
}
.breadcrumbs a:first-child, .breadcrumbs a:first-child:hover {
    border-top-left-radius: 5px;
    z-index: 30 !important;
}.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }

Style 3: Wood Type

     .breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }
    .post-navigation > a {
        background: url("http://i.imgur.com/qJ9sJ2N.jpg") no-repeat scroll 0 0 transparent;
        border: 1px solid #C76A29;
        border-radius: 7px 7px 7px 7px;
        color: #FFFFFF;
        padding: 4px 23px;
        position: relative;
        text-decoration: none;
        text-shadow: 1px 1px 2px #000000;
        transition: all 0.2s ease 0s;
    }
    .post-navigation > span {
        padding-left: 14px;

    }

Style 4: Blue Type

.breadcrumbs {
    margin: 0px 0px 15px 0px;
    font-size:95%;
    }.post-navigation > a {
    background: url("http://i.imgur.com/KbrSuUv.jpg") repeat scroll 0 0 transparent;
    border: 1px solid #016DB5;
    border-radius: 8px 8px 8px 8px;
    color: #FFFFFF;
    padding: 4px 26px;
    position: relative;
    text-decoration: none;
    transition: all 0.2s ease 0s;
} .post-navigation > span {
        padding-left: 14px;

    }

I hope this article will help you, if you liked this please spread our Blog.

More about → Add Google type Stylish Breadcrumbs to Blogger Blog?

Pages

How to embed a youtube playlist on your blogger blog

Making a gadget visible only to the blog administrator

Upload images and get the URL of the image

Possibly the most simple jQuery Slider

Settings

How it Works

Variants and customization

Add Comment count to Post Header Titles in Blogger

How to add Comment count to Post Header

Choose the comment count background

Add Comment count code

Related Posts Blogger Widget and LinkedWithIn for Blogger

Using LinkedWithIn Widget

Add Related Posts Manually to Blogger

Customization

Add to Post Footer

How to Add Automatic Read More TRICK for Blogger Blogs

UPDATE [17.08.2013]

Awesome Recent Comments Widget for Blogger, Feed Comments

How to Add Recent Comments Widget?

Another Way to add Recent Comments Widget

Add Google type Stylish Breadcrumbs to Blogger Blog?

Style 1: Style like this blog used

Style 2: Google Type

Style 3: Wood Type

Style 4: Blue Type

Translate

Total Pageviews

Popular Posts

Labels

Blog Archive