Add A Comment Bubble Just Next To Blogger Post Titles

If you want to show the number of comments just next to your blog post tiles then comment-bubble is a best way to show number of comments to that particular post in a small bubble icon.This little bubble will also increase the number of comments on your blog,because by clicking on the bubble your readers can directly access the comment-form of that post.Also you can add this in two easiest ways,just follow below steps carefully and you will easily add this to your blog.

 

How To Add Comment Bubble Just Next To Post Title?

1. Go to Blogger Dashboard > Template
2. Take a backup of your template
3. Click On Edit HTML
4. Hit Proceed
5. Check Expand Widget Templates chechbox.
6. Find below code in your template

]]></b:skin>

add below code just above it

.comment-bubble {
    float: right;
    width: 48px;
    height: 48px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJqDVhpKpjlE7WXqm-9i_ctNW7Fr3WfbtcoVHil4OJDz6dw6WFayEqJl7E6lCnlIqFM-VlbfMiUjbljHVwnQllKmuNCxqUCGuaomZark2K_4K14JpbfGyPQ-knMzOQ8AGoVvnqCnrS3LEh/s1600/helperblogger.com-commentbubble.png) no-repeat;
    font-size: 18px;
    float: right;
    margin-top: -15px;
    margin-right: 2px;
    text-align: center;
    position: float;
    text-align: center;
}

Now find for below code in your template

<b:if cond='data:post.link'>

replace it with below piece of code,

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

Now take a preview of your template,if you want to adjust the position of comment bubble then you can change the above CSS values as you need.When you feel that everything is ok then save your template.You can also replace the bubble with your own bubble,just replace the URL of bubble with your own bubble URL.

Add Image Just Next To Blogger Post Titles

In this post we are sharing a cool hack which will add an your own image,favicon or whatever you choose just next to your blog's post titles.You can also add your own profile pic. it will give more personal touch to your blog.To apply this hack you just have to delete and put some code in your template.If you want to see live preview of the hack,then see the image below,

 

Now lets see how to apply this hack,

How To Add Image Just Next To Blogger Post Titles?

I have tried my best to keep this tutorial easy as easy as possible.For better understanding I am dividing this tutorial in three parts,but you just have to follow any one post because it depends upon the tag which you are using as post title.

• Part 1: Finding the tag which you are using as Post Title
• Part 2: For those who are using H3 tag as a Post Title
• Part 2: For those who are using H2 tag as a Post Title

Part 1: Finding the tag which you are using as Post Title

1. First go to Blogger Dashboard > Template
2. Download a copy of your template
3. Click Edit HTML
4. Hit Proceed
5. Check Expand Widget Template checkbox
6. Find below code in your template

1	<h3 class='post-title entry-title'>

Now if you found above code in your template then you are using H3 tag as a post title.Now only follow second part of this tutorial

If you can't find above code then find for this one

1	<h2 class='post-title entry-title'>

If you found above code in your template then you are using H2 tag as a post title.Now only follow third part of this tutorial.

Part 2: For those who are using H3 tag as a Post Title

1. First go to Blogger Dashboard > Template
2. Click Edit HTML
3. Hit Proceed
4. Check Expand Widget Template checkbox
5. Find below piece of code in your template

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<b:includable id='post' var='post'>   <div class='post hentry'>     <a expr:name='data:post.id'/>     <b:if cond='data:post.title'>       <h3 class='post-title entry-title'>       <b:if cond='data:post.link'>         <a expr:href='data:post.link'><data:post.title/></a>       <b:else/>         <b:if cond='data:post.url'>           <b:if cond='data:blog.url != data:post.url'>             <a expr:href='data:post.url'><data:post.title/></a>           <b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h3>     </b:if>

replace it with below code, (be careful while deleting,only replace above exact code)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<b:includable id='post' var='post'>   <div class='post hentry'>     <a expr:name='data:post.id'/>     <b:if cond='data:post.title'>     <table><tr>      <td class='ssybyposttitle'>       <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKLcPTGM_GucEpZgGsEpUO4d3qAxrwXMrmNDpZdCmbksBH-9k7yHGOU6EDgjztDGxoCMNt9hRqQPl4NJdgn0RVBBFzua3bTHXr2LXQZqWqPtaIXabyk8TJk6RzYG8g8YyaF6esTb7nkg0/s1600/helperblogger-pencil.png'/></td>      <td><h3 class='post-title entry-title'>       <b:if cond='data:post.link'>         <a expr:href='data:post.link'><data:post.title/></a>       <b:else/>         <b:if cond='data:post.url'>           <b:if cond='data:blog.url != data:post.url'>             <a expr:href='data:post.url'><data:post.title/></a>           <b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h3>      </td>     </tr></table>      <style>        h3.post-title {        margin: 0px !important;        }      </style>     </b:if>

Now replace the image URL in above highlighted line with your own image URL (image should be less than 64X64 pixels)

Part 3: For those who are using H2 tag as a Post Title

1. First go to Blogger Dashboard > Template
2. Click Edit HTML
3. Hit Proceed
4. Check Expand Widget Template checkbox
5. Find below piece of code in your template

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<b:includable id='post' var='post'>   <div class='post hentry'>     <a expr:name='data:post.id'/>     <b:if cond='data:post.title'>       <h2 class='post-title entry-title'>       <b:if cond='data:post.link'>         <a expr:href='data:post.link'><data:post.title/></a>       <b:else/>         <b:if cond='data:post.url'>           <b:if cond='data:blog.url != data:post.url'>             <a expr:href='data:post.url'><data:post.title/></a>           <b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h2>     </b:if>

replace it with below piece of code,

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<b:includable id='post' var='post'>   <div class='post hentry'>     <a expr:name='data:post.id'/>     <b:if cond='data:post.title'>     <table><tr>      <td class='ssybyposttitle'>       <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKLcPTGM_GucEpZgGsEpUO4d3qAxrwXMrmNDpZdCmbksBH-9k7yHGOU6EDgjztDGxoCMNt9hRqQPl4NJdgn0RVBBFzua3bTHXr2LXQZqWqPtaIXabyk8TJk6RzYG8g8YyaF6esTb7nkg0/s1600/helperblogger-pencil.png'/></td>      <td><h2 class='post-title entry-title'>       <b:if cond='data:post.link'>         <a expr:href='data:post.link'><data:post.title/></a>       <b:else/>         <b:if cond='data:post.url'>           <b:if cond='data:blog.url != data:post.url'>             <a expr:href='data:post.url'><data:post.title/></a>           <b:else/>             <data:post.title/>           </b:if>         <b:else/>           <data:post.title/>         </b:if>       </b:if>       </h2>      </td>     </tr></table>      <style>        h2.post-title {        margin: 0px !important;        }      </style>     </b:if>

Now replace the image URL in above highlighted line with your own image URL (image should be less than 64X64 pixels)

How to Create a Horizontal Dropdown Menu with HTML, CSS and jQuery

Menus play an essential part on the web. They allow users to find their bearings and help them navigate your website. When designing menus, usability is the key.

Beginners often struggle with the basics. In this tutorial I'm going to show you how to create a simple, usable and functional horizontal menu with HTML and CSS. I will also dive a little bit into jQuery to add animations to your menu.

Basics

Let's start with the basic HTML structure of the menu:

1 2 3 4 5 6 7

<ul id="coolMenu"> <li><a href="#">Lorem</a></li> <li><a href="#">Mauricii</a></li> <li><a href="#">Periher</a></li> <li><a href="#">Tyrio</a></li> <li><a href="#">Quicumque</a></li> </ul>

A menu consists of an unordered list, and each list item contains a link with the text. Don’t create unnecessary divs. You don’t need any.
To add a sub menu simply nest another unordered list inside the item that's going to have the sub menu, like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<ul id="coolMenu">     <li><a href="#">Lorem</a></li>     <li><a href="#">Mauricii</a></li>     <li>         <a href="#">Periher</a>         <ul>             <li><a href="#">Hellenico</a></li>             <li><a href="#">Genere</a></li>             <li><a href="#">Indulgentia</a></li>         </ul>     </li>     <li><a href="#">Tyrio</a></li>     <li><a href="#">Quicumque</a></li> </ul>

As you can see, creating the structure is very simple. This is how it should look in your browser at this stage:

There are multiple ways to set up the CSS for a horizontal menu. After many years I found that this is the quickest and cleanest way to do it:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

#coolMenu, #coolMenu ul {     list-style: none; } #coolMenu {     float: left; } #coolMenu > li {     float: left; } #coolMenu li a { display: block;     height: 2em;     line-height: 2em;     padding: 0 1.5em;     text-decoration: none; } #coolMenu ul {     position: absolute;     display: none; z-index: 999; } #coolMenu ul li a {     width: 80px; } #coolMenu li:hover ul {     display: block; }

• I decided to float the whole menu to contain it but you can use overflow hidden or even set a fixed width for the same purpose.
• It is important to float the list elements rather than the links.
• The links should be displayed as blocks, otherwise, they won’t behave as expected.
• Absolute position the submenu and hide it to remove it from the regular flow and make it invisible. Also, set a high z-index to prevent the submenu from showing behind other elements.
• Set a height for the link elements and the line-height equal to the height to center the text vertically. By specifying a fixed height instead of just using padding you avoid flickering problems with jQuery animations later on.
• Even though it’s not necessary to set a fixed width for the submenu items, it’s always a good practice. It allows you to style them more consistently later on.
• Notice that the hover state is set on the list element and not the link.

With all this set, the menu should be already working. Try opening it in your browser and hovering over the third option to show the sub menu.

Improving Usability

This step will cover how to style the menu with some basic CSS to make it more accessible.

1   /* Main menu 2   -------------------------*/ 3   #coolMenu { 4   font-family: Arial; 5   font-size: 12px; 6   background: #2f8be8; 7      } 8      #coolMenu > li > a { 9   color: #fff; 10  font-weight: bold; 11    } 12    #coolMenu > li:hover > a { 13    background: #f09d28; 14    color: #000; 15    } 16    /* 17    Submenu 18    ------------------------------------------*/ 19    #coolMenu ul { 20    }   21    #coolMenu ul li a { 22    } 23    #coolMenu ul li:hover a { 24     background: #ffc97c; 25     }

Keep in mind this is very basic, and is meant to be just an example. You can style this however you want. The important thing to remember here is, as I mentioned before that the hover states, are styled in the list items and not the links.
This is how the menu looks so far:

Adding Animations

This final step is not necessary but it’ll help you add animations to your menu with simple jQuery. The first thing you need to do, of course, is to call the latest jQuery plugin on your website:

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Now, let’s add a "noJS" class to the submenu to be able to unhook the hover css state in jQuery. This will also ensure that the menu will still work when javascript is disabled.

1 2 3 4 5 6 7 8

<li>     <a href="#">Periher</a>     <ul class="noJS">         <li><a href="#">Hellenico</a></li>         <li><a href="#">Genere</a></li>         <li><a href="#">Indulgentia</a></li>     </ul>  </li>

You also need to add the class to the sub menu CSS hover state:

1 #coolMenu li:hover ul.noJS { 2 display: block; 3 }

Now that everything is set let’s add some magic:

1 2 3 4 5 6

$(function(){ $('#coolMenu').find('> li').hover(function(){         $(this).find('ul')         .removeClass('noJS')         .stop(true, true).slideToggle('fast');     }); });

The code is pretty explanatory. The script finds the immediate children list items and adds a hover function. Inside the function it removes the "noJS" class since we’re using JavaScript, and then it tells the menu to slide down on hover and to slide up on un-hover. This is achieved with the slideToggle function. The stop function prevents the animation from repeating itself if we hover multiple times.

How To Create A Facebook LIke Box

How To Create Facebook Like Box On Blogger. Until now, Facebook still be the first social media networking on the world. So if we optimize our facebook network (Fan page) we can earn more visitor to our site. But how to optimize our facebook network? I think put a like box on our site is a great way, more followers you have more visitor you get.

And now i will share a tutorial how to create facebook likebox on blogger

1.  go to the facebook developers page

2. And now fill the form  

Fill it with your facebook page url, if you doesnt have it you can create it first. Click here to create facebook page

The like box width


The like box height


The like box color


Do you want to show face of your page followers?

The likebox border color


Do you want to show the latest post of your site?


Show the "find us on facebook" text on the top of like box

3. After fill the form now click the 'get code' button 


4. After copy that code the html code to your site.

 

How To Add The HTML Code to Blogger

1. Login to blogger

2. Go to layout page

3. Click add a gadget

4. Choose HTML/Javascript

5. And then paste the html code from facebook

6. Save it

Follow By E Mail Gedget

Today in early time, blogger released an important gadget, “Follow by Email”, this gadget allow your readers to subscribe to your blogs updates by e-mail and get the latest updates and posts delivered to their Inbox.
What is this gadget features

The New Gadget Features.

Simple to add and use with only few clicks.

Delivering your blog’s posts and updated to your readers mail inbox.

Detailed stats about your number of subscribers and daily views.

How To Add It.

Just log into your blogger dashboard >>> design >>>and in page elements click Add A Gadget, and you will find the new “Follow by Email” gadget listed at the top of the gadgets page.when you click on “Follow by Email” link, you’ll see a new window like the above image,

Give it your prefered title, and leave the Feedburner as it is. then click Save,

and you can enjoy your new gadget,

Add An Animated Search Capsule To Blogger

Hey there guys, I guess this is my first 'how to' guide for bloggers which should be easy to follow and implement. You might have seen the Twenty Eleven theme released by Wordpress during it's third iteration release. You might also have noticed a sweet sliding search box which animatedly expands on being clicked upon and contracts back when moused out. Therefore we can design a similar but more gorgeous search box and add it quite easily to blogspot oriented blogs. 

1. We're gonna design a not so complicated input field in an elliptical shape which retracts a bit and expands on being focused upon while on being blurred it widens just a little bit and comes back to its original state. You can check out how it works in this blog's sidebar.

2. Don't worry, there's no actual designing involved using Photoshop but we shall achieve this using HTML, CSS3 and jQuery only. Let's start with the basic HTML markup.

<form method="get" action="/search" id="search"> <input name="q" type="text" size="40" class="search1" value="Search..." /> </form>

We've added a simple input box with no button because you'll expect the searcher to hit enter and get their results. Note that we've also declared a class named search1 to which we'll later add CSS.

#search input[type="text"] { background: url(http://1.bp.blogspot.com/-hJ8G7WLl1U8/T2xgdl1jK9I/AAAAAAAAAIQ/WBsH0YmWTVE/s1600/search-white.png) no-repeat 10px 6px #fcfcfc; border: 1px solid #d1d1d1; font-size: 14px; color: #bebebe; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; outline: none; }

• There's a small magnifying glass icon depicting the search action with a light grey background.
• A thin border to add a slight contrast.
• Note that we've specified a width of 150px which shall vary on focus & blur.
• Now, the CSS3 part includes a border radius of 25px (-moz and -webkit suffixes are for Firefox and Chrome respectively).
• And a subtle text shadow of just 0.1 opacity.
• Plus a slight box shadow to add some flair.
• Lastly, removing the ugly yellow/blue outline on focusing the search input.

And now for the jQuery magic. For the ones now knowing, jQuery is a Javascript library which includes inbuilt classes and functions which we can directly call with the hellp of CSS selectors to avoid writing raw vanilla JavaScript.

If you don't have the jQuery library linked to your blog, you need to copy the above link before </head>  and include the below code.

$(document).ready(function(){ $('.search1').focus(function(){ $(this).stop().animate({width:'140px'}).animate({width:'200px'}, 200); }); $('.search1').blur(function(){ $(this).stop().animate({width:'210px'}).animate({width:'150px'}, 200); }); });

The above jQuery code is quite self explanatory, when the search box is focused (clicked in) it goes in and out and on being blurred (clicked out) it goes a little bit out and comes back to its normal state. You need to add this code exactly above </head>.

And we're done, the good news is you don't need to add the HTML and CSS3 in your template directly. In the 'layout', go to the sidebar and 'add a widget'. Now select the HTML/JAVASCRIPT widget and paste the below final code. Save it and voilla.

<style type="text/css"> #search input[type="text"] { background: url(http://1.bp.blogspot.com/-hJ8G7WLl1U8/T2xgdl1jK9I/AAAAAAAAAIQ/WBsH0YmWTVE/s1600/search-white.png) no-repeat 10px 6px #fcfcfc; border: 1px solid #d1d1d1; font-family: 'Ropa Sans', sans-serif; font-size: 14px; color: #bebebe; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; outline: none; } </style> <form method="get" action="/search" id="search"> <input name="q" type="text" size="40" class="search1" value="Search..." /> </form> 

Alright, I hope you've successfully incorporated the search capsule in your blog. However, if you face any problems, shoot your queries in the comments.