Helper Blogger

How To Publish WordPress Posts From Microsoft Word 2013‏?

2014-02-23T15:51:00.000+05:00

WordPress is a very powerful publishing platform, and a very popular one too since more than 45% of blogs are hosted on WordPress. Its major selling point has to be its powerful functionality coupled with an intuitive and user-friend user interface. But if I were to pick out one flaw in WordPress, it would have to be the droll post editor combined with a slow UI that makes editing and saving posts a headache. But what if you could write your blog posts into a powerful word processing software such as Microsoft Word? As it turns out, you can! In this post, we'll show you how to create and publish a blog post directly from MS Word 2013!

One of the biggest problems bloggers face is the lack word-processing capabilities in most (in fact, all) publishing platforms. Platforms like Blogger, WordPress etc provide a spell checker at most, but nothing that would check punctuation, grammar, and sentence coherence. This is where MS Word comes in, because it it excellent in doing those things. And the new line of MS Office 2013 products are quite smart as well, and they continue to amaze me. So what better word processor to use than MS Word 2013?

Publishing a post from MS Word

Step 1: Create new Blog Post

First of all, open MS Word 2013, and create a new Blog Post from the document templates given in the File >> New section.

Now, click on the Create button on the window that appears next.

Step 2: Select a platform

You will now see a windows that says Register a Blog Account. Click on the Register Nowbutton, and then select the Blog platform. For the purpose of this tutorial, we're going with WordPress, but feel free to go with another platform if needed.

Click on the Next button to proceed.

Step 3: Register new account

Now, enter the WordPress blog URL you want to post to, and enter your login credentials (username and password).

If login is successful, you should see the following message.

Step 4: Create and publish!

Now, you will see a word editor. Write your blog post in it, and then click on the Publish button on the top left under the Blog Post tab. This should publish the post on your blog. If you'd rather save it as draft first, then pull the drop-down menu, and click on Publish as Draft.

Once it has saved, you should see your blog post in your blog post editor.

Simple, right?

It is. And a great way to keep your spellings and grammar in check too. I often use this method of posting, and I would encourage you to do the same as well. And if you run into any problems, be sure to ask a question in the comments section below. Cheers :)

What Is The Best Way To Mobile Optimize Your Site?

2014-02-21T19:49:00.000+05:00

The concept of searching for content online using mobile devices is steadily on the rise, primarily due to the vast plethora of mobile devices and tablets now readily available in the market. They really seem to be advancing the cause, and more and more people are buying and using them. So how are these evolving trends changing things, and how does it effect you as a website owner? Previously, we have looked at various ways to optimize your sites for mobile devices. And there are more than one way to handle this problem. So what solution is the best for delivering content to mobile devices?

There are more than one ways to serve mobile content to your users, and they fall broadly into three basic categories; Responsive Web Design (obvious!), dynamic content serving, and creating the mobile version of a site.

Responsive Web Design

Probably the most popular mobile optimization technique used today. Responsive Web Design (RWD) involves designing content that automatically resizes and rearranges itself to fit the screen size and resolution of any mobile device. Since the content itself is redirecting, there's no need to create custom redirects to other mobile pages, or changing the on-page content itself.

For the user, this means a smooth user journey, and for a content manager, it means content only needs to be updated once. From a developer viewpoint, RWD may require rebuilding your site framework with flexible templates, grids, style sheets and JavaScript but with very rewarding results. Personally, this is my favourite mobile optimization technique, and one of the easiest there is.

Dynamic content serving

This technique is somewhat similar to RWD, but very different at the same time. While RWD detects screen size and resizes the content, dynamic content serving detects the user-agent at the server-end, and then presents a custom page on the same URL. The custom page is dynamically generated.

Although this technique is hard to implement and requires a lot more maintenance, it is the most powerful method for serving mobile content to users, and experts recommend it for experienced webmasters.

Separate Mobile Site

The final implementation you might want to consider is creating a separate mobile site, where smartphone users will be directed to a mobile-optimized version of your site. This implementation allows you fully customise your content for a mobile audience, since it’s often an independently hosted solution. Similar to creating dynamic serving content, this means you need to make separate updates for content or styling pieces to ensure a smooth user experience.

Facebook is a perfect example of this solution. You have Facebook desktop version, and then you have Facebook mobile version. If Facebook had just used RWD to deliver mobile content, then low-end devices would have a lot of trouble keeping up with all the Facebook features such as Apps, Games, Chat, Instant notifications, and more. But with dynamic content serving and separate mobile site, Facebook has made sure that mobile users don't access features not suited/compatible for them.

That was all about methods to implement mobile optimization. So tell us, what do you think is the best method for delivering mobile content?

Move your blog from LiveJournal To Blogger

2012-11-20T22:31:00.001+05:00

LiveJournal is a great free resource for people who want to keep a log or a diary of sorts of theirs online, or share their life experiences with their friends and family. It allows people to make posts, and then cross-post and share on their social media profiles. Hence, these journals have all the markings of a blog. But for people who started off with LiveJournal, but aren't satisfied with the limited options it has, Blogger is a great option for them. Blogger is so much more than what LiveJournal is. So if you're not satisfied with LiveJournal, you can just move your blog from LiveJournal over to Blogger and get much more functionality.

We recently published a post about transferring your blog from WordPress to Blogger. And we shall continue this series with this LiveJournal to Blogger conversion. Our dear readers have been demanding a post on conversion from Blogger to WordPress, so we will be doing that soon. Stay tuned :)

And now, back to the topic at hand.In this post, we will walk you through the conversion. We are assuming that you already have a LiveJournal account, with some content published on it, which you want to transfer.

Transferring from LiveJournal to Blogger

First of all, visit this link (liveJournal2Blogger), and log into your LiveJournal account using the form given on the page. Unlike WordPress, LiveJournal doesn't provide you with an option to export your content. So you need a third-party app to do it for you. And this app does just that for you.

You will be prompted to save a file on your computer. This is your LiveJournal in a Blogger-friendly exported format. We will use this to import data into Blogger, so keep it ready at hand.

Importing data into Blogger

Now you have the exported file, all you need to do is import this file into Blogger. Log into, or sign up for a Blogger account, From there, either Create a new blog, or click on an existing blog where you want to publish your LiveJournal content.

Once you're logged into a blog's dashboard, Click on the Settings at the bottom of the left side-bar. From the options that pop out, click on Others. Then, on the right, you'll see an option to Import Blog.

Now, all you need to do is browse to the file you downloaded, and upload it here. Follow the simple instructions, and you have a set of posts from your LiveJournal account ready to be published!

As with the WordPress to Blogger, this conversion has a limitation of file sizes for up to 1 MB. But LiveJournal blogs are pretty small, so you shouldn't have much of a problem exporting your posts and comments. That's all there is to the conversion. You might also like to know about Blogger2WordPress.

Creating Customized HTML Text Area Boxes

2012-09-05T21:38:00.002+05:00

Its really important to keep everything as attractive as possible while writing posts. Text Area boxes are a useful method of showing long bunch of text or code on your blog. Just last month I wrote two posts 25 Vertical Navigation Menus and 30 Horizontal Navigation Menus where I have used a lot of coding and all those coding were displayed inside fully customized text areas that made the post looked clean and neat. Text boxes are good only if there length and height is well controlled and today with this tutorial we will learn several ways of styling our default text areas.

Kindly see a demo first,

Live Demo

Before

After

How to Customize the Text Area Box?

To do this follow the steps below,

Go to Blogger > Layout > Edit HTML
Search for </b:skin>
And just above it paste the code below,

.hb-textarea {
padding:0;
margin:0;
background: #fff;
width:400px;
height:40px;
color:#666;
font:12px arial;
border:1px dotted #289728; }
.hb-textarea:hover {
color:#289728;
border:2px solid #666;
}

4. Finally save your template!

How to show the Stylized Text Area Effect inside Blogger Posts?

To display this customized text area you only need to add the following code in the Edit HTML section of your Blogger Editor,

<textarea class="hb-textarea" readonly="readonly">WRITE-TEXT-HERE</textarea>

Simply replace WRITE-TEXT-HERE with your text that you want to appear inside a box.

How to Customize The CSS of The Text Box?

If you wish to change the font, color or in short the entire look of the text box then you just need to edit the following areas in the CSS code above,
background: #fff; –> This Changes background color of the text area
width:400px; –> This changes width size of box
height:40px; -> This changes box height
color:#666; -> This changes font color inside text box
font:12px arial; –> This changes font size and font family respectively
border:1px dotted #289728; } –> This changes the border size, style (i.e dotted, solid, dashed) and color. Editing it will change the look of the border/outline across the text
.hb-textarea:hover {
color:#289728; –> This changes font color on mouse hover
border:2px solid #666; -> This changes border size, style and color on mouse hover
Now Simply edit the above codes as guided and create a perfectly suiting Text box for your beloved blogs. I hope it will be as interesting for most of you as it seems :> Do not hesitate to ask for any help if needed!

Professional Templates for Bloggers

2012-09-05T21:13:00.000+05:00

Subscribe Now 3D Images Widget Fully Customized

2012-08-27T00:10:00.000+05:00

Hello friends today I want to share a cool widget with you. This widget is already published on NetinfozBlog but my widget is fully customized. The main important feature of this widget is it's cool background with email subscription option.You know these 3D images are provided by Paul Crowe of spiceupyourblog.com. But I had customized them with a cute and light look. So why are you waiting get this cool widget ? Get this now !

I am providing three styles here. The three styles are :

Luster effect
Shiny Black
Wooden Style

HTML Codes For Each Styles

Preview :

TIME TO ADD THIS IN BLOGGER

1. Login to your blogger account.

2. Design -> Add a gadget -> And Select HTML/Javascript widget

3. Paste the below code in it and click save.

For example, If I want to use the shiny black, I will paste its style code and the code which I had provided under the heading codes.

Luster effect

HTML CODE

#TNTsub{
width:244px;
padding:70px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBh_HWqwi87IjFugOfbh9A8VZ0qxKIyAdmLcq52kk92Jtlz9pntZWMm2JeQnCtWRmNoCB4Fon4RxOhbZ5EJfde7YZRUhUVjuyt-HzQ89tkd6E8sfvU10epwaX6yUBMbwOlzaSseR-R34/s1600/HP-Laptop-Luster.png)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#TNT_socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#TNT_socialicons img:hover {
-moz-transform: rotate(420deg);
-webkit-transform: rotate(420deg);
-o-transform: rotate(420deg);
-ms-transform: rotate(420deg);
transform: rotate(420deg);
}
TNTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.TNTtextbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdU2us3mqdnHhSlZBG8px4BkmBI19kKmQIpi5lVlP7xDB4IsOxtqzu22Tn1bAnuQ0gpztaSzWohTeFxHVPjJ1fcFnCyc1HeV7P2toZ43myv1g_1OOEZ_SsksDlZinQKh0PfLkNaJrrSGnB/s800/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:145px;
height:20px;
}
.TNTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:3px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>

Shiny Black

HTML CODE

#TNTsub{
width:280px;
padding:70px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2kfm5YaCBVzF6Pq-M831lINJv4xuBIME5lTSgso8_fQHYAg-i43hVIgXNJEH1Et85zbJ4GVYj74bPGTkDa_bPECclFruuj1ilogiMrLgaFAJ5zIEcezIB_ewWTIGn5UCwm6djcnbJ0_s/s1600/ws_Black_Floor_1440x900.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#TNT_socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#TNT_socialicons img:hover {
-moz-transform: rotate(420deg);
-webkit-transform: rotate(420deg);
-o-transform: rotate(420deg);
-ms-transform: rotate(420deg);
transform: rotate(420deg);
}
TNTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.TNTtextbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdU2us3mqdnHhSlZBG8px4BkmBI19kKmQIpi5lVlP7xDB4IsOxtqzu22Tn1bAnuQ0gpztaSzWohTeFxHVPjJ1fcFnCyc1HeV7P2toZ43myv1g_1OOEZ_SsksDlZinQKh0PfLkNaJrrSGnB/s800/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:145px;
height:20px;
}
.TNTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:3px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

Wooden Style

HTML CODE

#TNTsub{
width:280px;
padding:70px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOUnrsVIikMSJ6bVR4qxKnBXraY_qlOsTR5IWcQqgxQa6f-BGq-T5PHc8Xx5MdgfQh1cHRNE8ZqITkch8bqTvLbLvdZMmrIHMpOWOkXB51SyfjZf58klQHhx1FNOont-CfKg9jwtcJjfU/s1600/4498648030_2e488d4256.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#TNT_socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#TNT_socialicons img:hover {
-moz-transform: rotate(420deg);
-webkit-transform: rotate(420deg);
-o-transform: rotate(420deg);
-ms-transform: rotate(420deg);
transform: rotate(420deg);
}
TNTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.TNTtextbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdU2us3mqdnHhSlZBG8px4BkmBI19kKmQIpi5lVlP7xDB4IsOxtqzu22Tn1bAnuQ0gpztaSzWohTeFxHVPjJ1fcFnCyc1HeV7P2toZ43myv1g_1OOEZ_SsksDlZinQKh0PfLkNaJrrSGnB/s800/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:230px;
height:20px;
}
.TNTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:10px 20px;
border:4px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

CODE

In the above codes, I had provided just the style codes and what you have to do is :

Copy and Paste Any Style code in the widget column and below that paste the code provided after this line.

<div id="TNTsub">
<center><p id="TNT_socialicons">
<a href="YOUR RSS FEED URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQpt8IDUfb_iZjx0ZI1_3LEUIvsh9_YGpmqj6RBdQtxLZ0GP0qbiWbMJL0fhwrl-O5fvEvX_GjPayBjQ6PzVSRCKmci_MaMebUIHo60i4E7IQiaz5VcqK1Ht24IUKpiCaT6YvNV-k0sOnS/s1600/RSS-48x48.png " /></a>
<a href="YOUR GOOGLE PLUS URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBDxH9cRCNwtkb7bApadqASb7gAU6QAclcI5VG1CMQzp5zmpauQqaBqM4UAjWfVqIn4spatQ4TiIh3QGPZJBBpM6wgDcYH3ScQalIoK4ojkLbJawGFgVd2ahVvghR0wVnz_OPt3SQ6Bxs/s1600/TNT.png " /></a>
<a href="YOUR TWITTER URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJxkeIwjHIpPk0fM6QSovWQwVYY1L75PxQIW-nSdmMWml9tnSucGBR5Eqw3wj1aqFdb6m0jy-RYc37HG0yg5ZI2k215arw9K8Xm3i39WkM_bXCmvDsS-7WbzReBStFaFSpZcCM4MhJfU/s1600/TNT.png " /></a>
<a href="YOUR FACEBOOK URL HERE">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidrSuiQQyicSoHKe-JaEvWyCblxOdxf2EnDgWR1WO6GPmfjtF_cKWkEbrbQ3unpWQJ30zsf14ZHldLcMy5TSvh2mx4NCtq2xnyJWeYyfV9NYF6NrpIW8iDWNjOUsuIW4hqF_muEMfJlXg/s1600/TNT.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Enter your Email Below To Get Quality Updates Directly Into Your Inbox FREE !!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID HERE', 'popupwindow', 'scrollbars=yes,width=550,height=550');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR FEEDBURNER URL HERE'/>
<center><input name='loc' type='hidden' value='en_US'/>
<input class='TNTtextbox' name='email' onblur='if (this.value == "") {this.value = "Enter your Email";}' onfocus='if (this.value == "Enter your Email") {this.value = ""}' type='text' value='Enter your Email'/>
<input alt='' class='TNTbutton' title='' type='submit' value='Submit'/>
</form><center>
<p style='float:upper right; color:#000; font-size:10px;'><a href="http://www.tricksandteach.blogspot.com" target="_blank"> Widget By </a></p>
</div>

YOUR RSS FEED URL HERE - Replace this with your RSS feed URL.
YOUR GOOGLE PLUS URL HERE - - Replace this with your Google+ URL
YOUR TWITTER URL HERE - Replace this with your twitter URL.
YOUR FACEBOOK URL HERE - Replace this with your Facebook URL
YOUR FEEDBURNER ID HERE - Replace this with your feed-burner id.
YOUR FEEDBURNER URL HERE - Replace this with your feed URL.

I think you all had liked my post and thanks for reading my post.

Spinning Social Icons With CSS3 For Blogger

2012-08-25T20:12:00.000+05:00

We always try to make something different which will attract our readers/visitors quickly.In today's tutorial we will play with some simple CSS3 properties such as -moz-transform and create a simple social widget with CSS3 spinning effect.This widget will surely help you to increase number of social subscribers also it will attract your readers and grabs visitors attention quickly.On mouse hover they spins(rotates) some degrees and when mouse hovers out on it they return to their original position,this effect is caused by the CSS3 property which I have mentioned above.Now lets go to the tutorial and see how to add them into blogger blog.

How To Add Spinning Icons With CSS3 To Blogger?

I am giving 3 style of this widget,choose any of them and follow below steps to add it to your blog.

Choose any style below
Copy the code
Replace my usernames with yours
Go to Blogger Dashboard > Layout
Click on Add a Gadget
Select HTML/JavaScript
Paste your code and save it.

Live Demo

<style>p#hb_socialicons img {
/* Spinning Social Icons Widget By HelperBloggers */
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

p#hb_socialicons img:hover {
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

/* Spinning Social Icons Widget By HelperBloggers */
</style>

<center><p id="hb_socialicons">
    <a href="http://www.facebook.com/pages/Helper-Bloggers/166050840164778">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFYqg8EcJQfm90Wg21QOgIwmQbPcg7hbHJM2b3klAauSyVLcw4Nysqqc0Xxs3VawQRSVhxHpzztJ7cIgqIDvvXFaceDcdxruTlrGR_XFmVvgaSizrkm8lOtL0RqxFXeUqrgXipF18Ngyw/s1600/helperblogger.com-facebook.png" /></a>
    <a href="http://www.twitter.com/helperbloggers/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-7Ib2i7jDbehoTURffL5BtmuEVscVf2PcQrceE0OJnWGjRA8dc29xAAE5EhQfsKl1w6D9NLJ3PB4VTXVDrIB8DJdsNLKk2tSCnL8JZ5V7la2gmQxOrQ5YV-iT_IYmcsFrMnlGrkJ14gg/s1600/helperblogger.com-twitter.png" /></a>
    <a href="https://plus.google.com/u/0/106851621955005208707">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfZh9b49WWvDTe1HyMiqBl3JEi6kw77SKXjwbWIHop9hmSwM1rqdMWsKAiqFp38759dGfLA7Z1f5BGAqtNGHl73S4BaxMKk0c9Pt2fP-Cztib2o5S8Mpt1GSjvYyYWiJfvI1u_OZU5HTY/s1600/helperblogger.com-google_plus.png" /></a>
    <a href="http://www.feeds.feedburner.com/helperbloggers/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnAFfLnlyBr5DuyqtKQjeERcHInOXmd_Z3qPcygwriPxUocIyCuyQCb0CGcXtycLrbX87KY4ICIF3zFoZk4pjjVu_GgV6mf4b25RXaXKN3nk_aS236VZBWnP74cUN7Dm2zALwrVHj9Gi8/s1600/helperblogger.com-rss.png" /></a>
    <a href="http://www.youtube.com/101rashid/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_vF9xIZtqpNViKw2lM33xwUwthoYil7A98SP6ETTlNcWQ0KSSBwjy1Q9ezWaV5yIzOfxbVgDQui7fC4hO1FRSOGreXfVKmbuOkIelufgSfMcnLVoSM_1Klm29Hv5L2zdIJprnfXF5G7o/s1600/helperblogger.com-youtube.png" /></a>
</p></center>

Now replace highlighted lines with your social profile URL.

Finally save your widget and you are done :)

Custom Add To Circles Widget For Blogger

2012-08-25T02:23:00.000+05:00

Till we was using the Add to Circles Widget which was created by widgetsplus.com but now days we are noticing that the widget is not working also their site down because of upgrade process.There is a widget by blogger but doesn't include your profile picture.Then what to do? How can we add a Add to Circles Widget which will contain a profile pic. along with add to circle badge? Here I have a solution with this custom Add to Circles Widget.I have created a custom Add to Circles Widget by using some simple HTML and CSS properties and added a add to circles badget by using the badge your users can directly follow you on Google + through your blog.Now lets see how to add it to blogger ?

How To Add Custom Add To Circles Widget To Blogger?

For easy installation I am providing a widget generator for this widget.Follow the simple instructions to use the widget generator.

You must log in into your blogger account first
Customize the fields as you wish

<center><div style="border:1px solid #999;width:220px;font-family:sans-serif;color:#666;"><div style="background: #999;padding:2px;height:30px;font-size:16px;color:#fff;"><center style=" margin-top: 5px;">Add Me On Google +</center></div><center style="margin-top:5px;"><div style="font-weight:bold;padding:5px;">Rashid Shah
</div><a href="https://profiles.google.com/106465314277386711723"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhj86cCDQEDwWXuia72dlViRZ-9Alap9DQel3PNTM4tS5_VgbO-w7L1HrUkpf7k-ZxT9RUBad5dvSgWm5gkIj-f-In0-pchhP3wykPSUrOx9eXew86zNjwYAs2hk67Y4Znq5DtoNvEkvZR/s200/400923_322654207766064_873823819_n.jpg" alt="Rashid Shah on Google Plus" border="0" height="140" width="140" /></a>

<div style="font-size:80%;">Blogger Seo </div>
<script type="text/javascript">window.___gcfg={lang: 'en'};(function(){var po=document.createElement("script");po.type="text/javascript";po.async=true;po.src="https://apis.google.com/js/plusone.js";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(po, s);})();</script><g:plus href="https://plus.google.com/106465314277386711723" rel="author" width="210" height="69"></g:plus></center></div></center>

Replace With Your Name: Rashid Shah

Replace With Your Profile Url: https://profiles.google.com/106465314277386711723

Replace With Your Pic Url: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhj86cCDQEDwWXuia72dlViRZ-9Alap9DQel3PNTM4tS5_VgbO-w7L1HrUkpf7k-ZxT9RUBad5dvSgWm5gkIj-f-In0-pchhP3wykPSUrOx9eXew86zNjwYAs2hk67Y4Znq5DtoNvEkvZR/s200/400923_322654207766064_873823819_n.jpg

Replace With Your Short Description: Blogger Seo

Replace With Your Profile Url: https://plus.google.com/106465314277386711723

Finally save your widget and you are done.

Hope you have liked this simple widget :)

Customize Labels Cloud in Blogger

2012-08-18T22:11:00.000+05:00

Back in the year 2008 when Blogger.com was moving through several update phases, third party developers would often take the golden opportunity of creating widgets for BlogSpot blogs but as soon as Google rolled out massive changes to their online services, several official widgets popped out which load fast and perform well because the scripts are served by Blogger servers. Page List and label cloud/list enabled designers to create dynamic menus. Since the stylesheet was made accessible. therefore we all got a chance to play with these widgets and transform them completely in look and appearance. We shared tutorials first time on how to create dynamic menus with page list and an automatic menu with label list and today we would share a simple stylesheet that will transform the labels cloud into organized small blocks that rotate on mouse over. I must ensure you that the styles are perfectly compatible in all major browsers including IE8+.

DEMO: Look at the label cloud on the sidebar of this blog

This is how labels look in cloud display:

This is how it will look after you apply the new style.

How it works?

Each label link is nested inside a span tag followed by a class named label-size. If the font-size is not specified the widget changes font-size of each label according to its post-count. Therefore showing big and
small clouds. Introducing custom styles would over-ride the exiting styles thus changing the entire look.

Turn Random Cloud display into Blocks

The code below can be customized in several ways to create exciting label designs. You can also add background images to them.
Follow these easy steps:

Go to Blogger > Settings> Layouts
Click add a gadget and choose Labels
Inside the settings make sure to choose the cloud display. You may set other options as per your requirement. See the screenshot below as example

Please choose to display at most 25 labels. Too much labels on homepage look awkward. Showcase your best categories only.

        4.    Now save the widget and go to settings > Template
       5.     Backup your template
       6.     Click Edit html > Proceed and search for this

]]></b:skin>

7. Just above it paste the following CSS code:

/*-----Custom Labels Cloud widget by http://helperbloggers.blogspot.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}

8. Save your template
9. All done!
Visit your blogs and see the labels completely transformed to small neatly crafted rectangular boxes. If in case you want the label boxes to be of random sizes depending on the post-count then simply delete font-size:10px; from the above code.

Google Flag Translate Widget For Blogger/Blogspot

2012-08-18T02:27:00.000+05:00

2 days ago while watching my stats I got some results from translate.google.com. Someone was reading my tutorials by translating in Chinese .That's why I added this widget to my blog.Here I gave a widget form so that you can directly add it on your blog.This widget contains flags of more than 32 languages. With hover title effect, When you hover your mouse on any flag then it will shows a title of that language.Live demo On Our Blog.....

How To Add Google Flag Translator To Blogger ?

Now let's see how to add this awesome widget to blogger.

Just press the Add To Blogger Button below and this will takes to you Add Widget section.
Change title as you wish.
Hit the Add Widget button.
Drag and drop the widget as you wish

Now save it and refresh your blog.....

Social Bookmarking Widget With Tooltips For Blogger

2012-08-18T01:54:00.000+05:00

Social bookmarking widget is need of every blogger thats why you see such gadgets almost on every blog.Social bookmarking widgets helps you to boost traffic on your blog.Today I am sharing an amazing social bookmarking widget which comes with beautiful animated tooltips,when any user hovers on the social icons the tooltip comes out also it applies a opacity effect to these social icons,this effect increase beauty of this widget.Credit for this widget goes to Shareaholic.Now lets see hoe to add it to your blog,also see the demo at the bottom of this post.

How To Add This Widget To Blogger?

I have created a blogger widget generator form for this widget.Follow below simple steps to add this widget to your blog.

You must login to your blogger account first.
Click on below Add to Blogger button
Now you will redirect to blogger add widget page
Choose your blog and add click on Add Widget button
Drag the widget at the bottom of your page layout
Finally click on Save Arrangements button and you are done.

Live Demo

Create Floating Bar For Pinterest & Other Sharing Buttons

2012-08-17T21:46:00.000+05:00

This is one of the few social sharing widgets that took a lot of my time in designing it. You have seen the trend of floating sharing count buttons on popular blogs. The traditional icons are now replaced with auto incremented counter buttons that are updated in seconds. We created different versions of this bar applying both Jquery effects and CSS3 styles but this widget is different because it contains custom twitter, pinterest and an Email button. Services like Addthis and Sharethis are both doing a great job but they still need to work on some of their plugin integration conflicts. Pinterest pin it buttons are causing great trouble and it badly fails in fetching the correct thumbnail image. In most cases it does not even select a image thus making the entire pinning concept tasteless. We however redesigned the widget provided by shareThis to create a new one by correcting all flaws. This sharing bar would float to the left of your blog posts and would float as the visitor scrolls up or down. This widget contains counters of important social networking sites that has the potential to bring you traffic by circulating your content to a wider audience. We have tested the widget on major browsers like IE7+, Firefox, Chrome etc. and found it working just fine with no compatibility issues or design conflicts.

Developers and bloggers are requested to link back to this post if in case they wish to share our code with their readers. Lets get to work now!
Did you check the previous version? Floating Sharing Counters

How it works?

We have integrated both Addthis and ShareThis service in it. In order to customize the twitter button and others we took the Sharethis default code and customize it to change the button image, bubble size and count text. The widget that we initially developed looks extremely attractive compared to this one. You can see the first designed draft version in the screenshot below:

You can observe that both Twitter, Google Plus, Pinterest and Stumbleupon are displayed with custom shapes, same sizes and different count colors. I spent a lot of time trying to make all buttons of the same size by using a common image linked by a sprite but the only problem with this plugin is that the counts wont show the official numbers registered at Twitter, Google and pinterest servers but they will show increments registered at ShareThis. If you add this sharing bar to your blog, you will see zero on all counters unless someone clicks them and circulates your content.

To correct this issue I had to unfortunately dropped the idea of sharing the above designed version and share this tutorial widget instead. However the widget on our blog still contains the twitter button which wont display official count but that of ShareThis. If you would like to replace it with the official big size twitter count box then you can surely do this by customizing the code shared below.

Adding Floating Bar To Blogger

The steps are kept extremely easy to apply. All you need is to copy and paste the long chunk of code we developed and tested all day. Follow these friendly steps:

Go to Blogger > Template
Backup your template
Click Edit HTML
Click Proceed
Then Click Expand Widget Templates
Search for

<b:includable id="post" var="post">

7. Just below it paste the following code:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.hb_social_floating{
position:fixed; bottom:10%; margin-left:-60px; float:left;
width:60px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.hb_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.hb_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.hb_social_floating .st_fblike_vcount{
margin-left:5px;
}
.hb_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.hb_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjHM3R5Vw7WXRgqD2LMM4B4-VUWy6PbZl4IaSzDNyoffrSTTMTuZKSU3FZM6PcRRvaVqtU45xzHReat7xvQpInKT4ISvbttosNCErwIjSl4nGb4HeBHyzJBnTScjRKb4SKi6J5EZfeu2GB/s400/gc_social_sprite.gif') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjHM3R5Vw7WXRgqD2LMM4B4-VUWy6PbZl4IaSzDNyoffrSTTMTuZKSU3FZM6PcRRvaVqtU45xzHReat7xvQpInKT4ISvbttosNCErwIjSl4nGb4HeBHyzJBnTScjRKb4SKi6J5EZfeu2GB/s400/gc_social_sprite.gif') !important;
}
.hb_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.hb_social_floating .stButton_gradient{
border:none !important;
}
.hb_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.hb_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}

.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}

.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.hb_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>

<div class='hb_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='helperbloggers'/>
<div style='margin:5px 0 0px 0;'>
<center>
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: "Helper Bloggers",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://helperbloggers.blogspot.com/2012/08/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Get This</a></p>
</div>
</b:if></b:if>

Just replace helperbloggers with your twitter username.
8. Save your template and you are all done!

Add Facebook Recommendations Bar To Blogger

2012-08-16T22:36:00.000+05:00

Finally the plugin I had been waiting for since 22nd September 2011. In order to engage readers more and let your visitors spend more time on your website Facebook has finally launched the "Recommendations Bar" in beta version. It's designed to display additional recommended articles right after readers have finished reading an article or spent some time on your blog. It will collapse on page load and expand once a reader has reached a specific location on your blog or finished reading the post. Only those articles are displayed that are previously liked or shared on Facebook. The number of likes are displayed under each article along with page title and a thumbnail. It also contains a like button and previously contained an Add to Timeline button that has been removed now. Unlike Facebook Recommendations box which offered related stories but with lack of user friendly interface and engagement, Facebook bar will force readers to stay longer on your site leading to increased pageviews, page impressions and thus traffic. It's a smart alternative to Recommended Post Slides widgets that we previously published.
If you are a Wordpress user you may follow this tutorial:

See the demo live on our blog towards the bottom-right corner. Don't forget to press the like button to let your friends know that you visited this page :)

Install it on Blogger

It can be installed easily on both BlogSpot blogs and Wordpress but with a little patience. We have kept the installation extremely easy and ignored unnecessary steps like installation of Open Graph Meta Tags. We would install necessary codes to keep the structure clean and make the widget work just fine. The code we are sharing is optimized and will display your blog titles and featured images correctly and with a lot of control attributes. Follow these easy steps: Step1: Create a Facebook Application For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like. Log into Facebook Apps Click on Create New App button towards Top-rightcreate new app In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.

Step1: Create a Facebook Application
For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like.

Log into Facebook Apps
Click on Create New App button towards Top-right
In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.

4. Enter the captcha security code. Click Submit
5. You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.

6. You will see two strings of alpha-numerical characters. One is App ID and the other is App secret. Just copy the App ID code and keep it save in a notepad. We will need it later.

Congrats App finally created! Lets proceed to step2.
Step2: Add "Recommendations Bar" To Your Blog
Follow these steps to add the bar to Blogger:

Go to Blogger > Template
Backup your template
Click Edit HTML > Proceed
Search For this :

<html

Replace it with this code:

<html xmlns:fb='http://ogp.me/ns/fb#'

This will make the plugin compatible in older versions of internet explorer also. Since blogger templates are coded in XML therefore inserting this XML namespace will enhance the plugin performance and compatibility.
5. Next search for <body> and just below this tag paste the following code:
Note: If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then please search for <body instead. Make sure to paste the code below the entire body tag.

<div id='fb-root'/>
<script>
//Facebook Recommendation bar by http://helperbloggers.blogspot.com
//<![CDATA[

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=Your App Id Here";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='Your Blog Url Here' trigger='40%'/></div>
</b:if></b:if>

You are almost done. Make these changes:

Replace Your App Id Here with your 15 digit App Id that you saved in step1.
Replace Your Blog Url Here with your blog link

6. Save your template and you are all done!
Visit your blog and scroll down about 50% of your page and wait for 10 seconds for the plugin to expand. Enjoy the new way of free pageviews juice! :)

Optional Steps

Below are optional customization and control options. You can skip them if you want

max_age: will decide the age limit of articles. Sometimes you don't want to display too old articles so you can set it to display up to 1-180 days old posts. But if you don't want to take age into account then let it be 0 as default.
num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3
read_time: As soon as the user reaches a specified location, the plugin would expand and before expanding it will take some time. I have kept it equal to 10 seconds, you can increase it to 30 or more as you wish.
side: You can decide the location of plugin. By default it shows up towards the bottom right corner of your page. You set it to float to left
trigger: On page load the plugin collapses and as soon as it reaches a specified location it expands. You can choose that location in three ways i.e. onvisible, X% or manual. I prefer locating the trigger point by percentage for better pageviews. The widget will expand as soon as the user scroll downs 40% of your page. You can increase or decrease this value. If you wish that the plugin must expand as soon as the reader reaches the end of your article then instead of pasting the code between the purple lines paste it just below data:post.body tag and use the value onvisible instead of 40%.
The widget will display only on post pages and not on homepage or static pages. To display it on all pages, then simply delete the purple bolded lines.

Troubleshooting : Since Most templates are not well structured and require installation of meta tags to tell Facebook to fetch correct page titles, thumbnails and blog title. To do this simply paste the following code just below <head> tag inside your template

<meta content='article' property='og:type'/>

<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

<meta expr:content='data:blog.title' property='og:site_name'/>

<meta expr:content='data:blog.pageName' property='og:title'/>

<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Save your template and now see the plugin if it correctly shows page titles both on your blog and Facebook.

Breadcrumbs Navigation Widget For Blogger

2012-08-15T16:55:00.000+05:00

Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title.There is also option for showing the multiple labels in this navigation i.e. if any post have more than one label then it will show all of them.The original breadcrumbs idea is given by the HOCTRO and Aneesh of bloggerplugins futher worked on it.

Add Breadcrumbs Navigation To Blogger

Go to Blogger Dashboard > Template
As always download a copy of your template
Click on Edit HTML
Hit Proceed
Now find below code,

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

just above it copy and paste below code,

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

Now find below code (if you find two occurrences of this, then locate the second one)

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

just above it paste below code,

<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"'>

<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"'>

<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 the code in line number 16 and 18.

Now find below code,

]]></b:skin>

add below CSS code just above it,

.breadcrumbs {
background: #F7F7F7;
float: left;
border: 1px solid #E6E6E6;
width: 575px;
font-size: 11px;
margin: 10px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}

Now save your changes and you are done.

Stay Connected Gadget With All Subscription Options For Blogger

2012-08-15T02:44:00.000+05:00

Social Sharing and Subscribing plays very important role in increasing traffic on the blog which gaves more earnings to the author of that blog.Keeping that thing in mind I am creating social subscription widgets and today I have created another one cool social subscription gadget for my readers.This widget is similar to mashable style widget but I made some changes to give it more impressive look.This widget contains following things -

Facebook Like Button
Google +1 Button
Twitter Follow Button
Pinterest Follow Button
Email Subscription Form and
Social Icons

See the demo of gadget :

How To Add This Gadget On Your Blog?

I have kept the installation so easy you have to just copy and paste the code.Follow below steps carefully.

First go to Blogger Dashboard > Layout
Click on "Add a Gadget" link.
Select HTML/Javascript widget.
Now paste below code after replacing my usernames with yours and save it.

<style>
#socialnetworking {
border: 1px solid #ebebeb;
width: 280px;
}

.fb-likebox {
padding: 10px 10px 0 10px;
border-bottom: 1px solid #ebebeb;
}

.googleplus {
background: #eef9fd;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}

.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
margin: 9px 70px;
width: 280px;
}

#widgetbox {
background: #EBEBEB;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;
}

#widgetbox .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration: none;
}

.g-plusone {
float: left;
}

.twitter {
background: #eef9fd;
border-top: 1px solid #fff;
padding: 10px;
}

.fb {
background: #eef9fd;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}

.fb span {
color: #000;
font-size: 11px;
position: absolute;
margin: -12px 100px;
width: 280px;
}

.pterest {
background: #EFF5FB;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
border-top: 1px solid #ddd;
}

#email-news-subscribe .email-box {
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-image: initial;
height: 35px;
background: #EFF8FB;
width: 260px;
}

#email-news-subscribe .email-box input.email {
background: #FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;
}

#email-news-subscribe .email-box input.email:focus {
color: #333
}

#email-news-subscribe .email-box input.subscribe {
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Arial","Helvetica",sans-serif;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cc7c00;
color: white;
text-shadow: #d08d00 1px 1px 0;
padding: 7px 14px;
margin-left: 3px;
font-weight: bold;
font-size: 12px;
cursor: pointer;
border-image: initial;
}

#email-news-subscribe .email-box input.subscribe:hover {
background: #ff9b00;
background-image: -moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline: 0;
-moz-box-shadow: 0 0 3px #999;
-webkit-box-shadow: 0 0 3px #999;
box-shadow: 0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cc7c00;
color: #FFFFFF;
text-shadow: #d08d00 1px 1px 0
}
</style>

<div id="socialnetworking">

<div class="fb-likebox">

<center>
<a style="margin-right: 10px;" rel="me" href="http://profiles.google.com/106851621955005208707" target="_blank">
<img src="http://2.bp.blogspot.com/-TtecU81mxEA/TrHxZowPn9I/AAAAAAAABI8/UGSwDMYkt-c/s1600/Button G.png" /></a>
<a style="margin-right: 10px;" href="https://www.facebook.com/pages/Helper-Bloggers/166050840164778" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsX6gubHBhoH4JCG0TALaBO1SgSERdMqeRCAq5VMVfj4FnYDmkm-uw5As8a5uyinFjY6lm75t-_1gsSCOBE4lF_CPWMBdVWP3mWaKEKefXKodokQDZg7LSR8MKmU6KUSWJZ5Thhh8xjL1n/s320/1oaxc4.jpg.png" /></a>
<a style="margin-right: 10px;" href="http://feeds2.feedburner.com/helperbloggers" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF3J3Z3BicwtswYL8qQn7hyjv2xtZS9t5llhaP20NfJbYR1kqCnENcO6EUmOpGJ0ZSJ2rjtYkaheCcYfUaTRnnaJ156IzYZW78EaBwMVdGBuEmexNl0A7paxOzd_RGoOK-juFFvXgoHa0N/s1600/2d7itk9.jpg.png" /></a>
<a style="margin-right: 10px;" href="http://feedburner.google.com/fb/a/mailverify?uri=helperbloggers&loc=en_US" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQH6mQELa9BW7Rzn2QLVzT-6Tlt9YuAvg31fbTMfxRKZL29kE_89hhI0jnpERqntkbaCq22h1T8-x1Q5ZhC2lZOLfvFsf5f31NqeC4ut2C7o-8o0MBy0qkA8yX1DNFq8KkRhPAcNvcdKj/s320/j5krgl.jpg.png" /></a>
<a style="margin-right: 10px;" href="http://twitter.com/#!/helperbloggers" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-oQp3261hwGyvYBiCIB1dc_EspZw50xR2f8VcPMmHnBHK1XsIGflG9wUjJ66cwQV32wRUAjWB20wgQQ8P72dzOlnMcJxYH7TdN74DPffvG7-d8r999KC2GvoVe2N7-BRF97StAmk9kHt3/s1600/3312cmr.jpg.png" /></a>
</center>
</div>
<div class="googleplus">
<span><font><font>Recommend Us On Google </font></font></span>


<g:plusone size="medium"></g:plusone>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script type="text/javascript">
gapi.plusone.render
(
'plusone-div',
{
"size": "medium",
"count": "true"
}
);
</script>
</div>
<div class="fb">

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2F166050840164778&&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true">
</iframe>
<span>Like Us On Facebook</span>
</div>
<div class="twitter">

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&id=twitter-widget-0&lang=en&screen_name=helperbloggers&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button">
</iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="pterest">
<a href="http://pinterest.com/helperbloggers/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest"/></a>
</div>
<div id="email-news-subscribe">

<div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=helperbloggers', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 140px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="hidden" value="hblogger" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="subscribe" name="commit" type="submit" value="Subscribe"/>
</form>
</div>
</div>
<div id="widgetbox" style="background: #FBEFEF;border-top: 1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://helperbloggers.blogspot.com/2012/08/stay-connected-gadget-with-all_15.html" target="_blank">Get This »</a></span>
</div>

</div>

Replace

Prees Ctrl F And Find Below ID

   - Your Google+ Profile/Page ID:106851621955005208707

   - Your Facebook Page Url:https://www.facebook.com/pages/Helper-Bloggers/166050840164778

   - This 2 Time Your Feedburner Username:helperbloggers

   - This 2 Time Your Twitter Username:helperbloggers

   - Your Pinterest Username:helperbloggers

Now save your all changes and you are done.

Note - You are most welcome to share this gadget with your readers but you have to attach a link to this tutorial.Gadget users are requested to not remove the credits links.Its really destroy my efforts which I have put on this gadget.

Happy Blogging....

Floating Google +1, Facebook, Twitter Buttons For Blogger

2012-08-14T03:32:00.003+05:00

UPDATE:- To add a floating widget to the left of all your posts like in this blog then please read: Floating Counters Next To Posts

Finally the Sliding Counters! Till now we learned and created many floating social share buttons but those button widgets in fact do not slide when the user scrolls the page up or down. The only thing I needed was a well constructed JavaScript code that could make the widget to float up and down synchronously with the webpage movement. Thanks to Jtricks' Floating Menu code, we finally managed to bloggerize the floating effect and this widget is all ready to be added to your beautiful blogger blogs. Kindly view the demo first,

Adding Floating Social share Counters to Blogger

Go To Blogger > Design
Choose a HTML/JavaScript widget
Paste the following code inside it,

<style>
/*-------Helper Blogger Floating Counters------------*/
#floatdiv {
    position:absolute;
    width:94px;
    height:229px;
    top:0;
    left:0;
        z-index:100
}

#hbsidebar {
        border:1px solid #ddd;
        padding-left:5px;
    position:relative;
    height:220px;
    width:55px;
    margin:0 0 0 5px;
}
</style>


<div id="floatdiv">
<div id="hbsidebar">
    <table cellpadding="1px" cellspacing="0">
<tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
    </td>
    </tr>
<tr>
    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
<tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="helperbloggers">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
<tr>
    <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;">
<a style="color:#ddd;" href="http://helperbloggers.blogspot.com/2012/08/floating-google-1-facebook-twitter.html" target="_blank">Get This</a></p>
</td>
    </tr>
</table>
</div>
</div>
<script type="text/javascript">
// JavaScript Document

   <!--
/* Script by: www.jtricks.com
* Version: 20071017
* Latest version:
* www.jtricks.com/javascript/navigation/floating.html
*/
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
    targetX: 0,
    targetY: 300,
    hasInner: typeof(window.innerWidth) == 'number',
    hasElement: typeof(document.documentElement) == 'object'
        && typeof(document.documentElement.clientWidth) == 'number',
    menu:
        document.getElementById
        ? document.getElementById(floatingMenuId)
        : document.all
          ? document.all[floatingMenuId]
          : document.layers[floatingMenuId]
};
floatingMenu.move = function ()
{
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
floatingMenu.computeShifts = function ()
{
    var de = document.documentElement;
    floatingMenu.shiftX = 
        floatingMenu.hasInner 
        ? pageXOffset 
        : floatingMenu.hasElement 
          ? de.scrollLeft 
          : document.body.scrollLeft; 
    if (floatingMenu.targetX < 0)
    {
        floatingMenu.shiftX +=
            floatingMenu.hasElement
            ? de.clientWidth
            : document.body.clientWidth;
    }
    floatingMenu.shiftY =
        floatingMenu.hasInner
        ? pageYOffset
        : floatingMenu.hasElement
          ? de.scrollTop
          : document.body.scrollTop;
    if (floatingMenu.targetY < 0)
    {
        if (floatingMenu.hasElement && floatingMenu.hasInner)
        {
            // Handle Opera 8 problems
            floatingMenu.shiftY +=
                de.clientHeight > window.innerHeight
                ? window.innerHeight
                : de.clientHeight
        }
        else
        {
            floatingMenu.shiftY +=
                floatingMenu.hasElement
                ? de.clientHeight
                : document.body.clientHeight;
        }
    }
}
floatingMenu.calculateCornerX = function()
{
    if (floatingMenu.targetX != 'center')
        return floatingMenu.shiftX + floatingMenu.targetX;
    var width = parseInt(floatingMenu.menu.offsetWidth);
    var cornerX =
        floatingMenu.hasElement
        ? (floatingMenu.hasInner
           ? pageXOffset
           : document.documentElement.scrollLeft) +
          (document.documentElement.clientWidth - width)/2
        : document.body.scrollLeft +
          (document.body.clientWidth - width)/2;
    return cornerX;
};
floatingMenu.calculateCornerY = function()
{
    if (floatingMenu.targetY != 'center')
        return floatingMenu.shiftY + floatingMenu.targetY;
    var height = parseInt(floatingMenu.menu.offsetHeight);
    // Handle Opera 8 problems
    var clientHeight =
        floatingMenu.hasElement && floatingMenu.hasInner
        && document.documentElement.clientHeight
            > window.innerHeight
        ? window.innerHeight
        : document.documentElement.clientHeight
    var cornerY =
        floatingMenu.hasElement
        ? (floatingMenu.hasInner 
           ? pageYOffset
           : document.documentElement.scrollTop) +
          (clientHeight - height)/2
        : document.body.scrollTop +
          (document.body.clientHeight - height)/2;
    return cornerY;
};
floatingMenu.doFloat = function()
{
    // Check if reference to menu was lost due
    // to ajax manipuations
    if (!floatingMenu.menu)
    {
        menu = document.getElementById
            ? document.getElementById(floatingMenuId)
            : document.all
              ? document.all[floatingMenuId]
              : document.layers[floatingMenuId];
        initSecondary();
    }
    var stepX, stepY;
    floatingMenu.computeShifts();
    var cornerX = floatingMenu.calculateCornerX();
    var stepX = (cornerX - floatingMenu.nextX) * .07;
    if (Math.abs(stepX) < .5)
    {
        stepX = cornerX - floatingMenu.nextX;
    }
    var cornerY = floatingMenu.calculateCornerY();
    var stepY = (cornerY - floatingMenu.nextY) * .07;
    if (Math.abs(stepY) < .5)
    {
        stepY = cornerY - floatingMenu.nextY;
    }
    if (Math.abs(stepX) > 0 ||
        Math.abs(stepY) > 0)
    {
        floatingMenu.nextX += stepX;
        floatingMenu.nextY += stepY;
        floatingMenu.move();
    }
    setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function(element, listener, handler)
{
    if(typeof element[listener] != 'function' ||
       typeof element[listener + '_num'] == 'undefined')
    {
        element[listener + '_num'] = 0;
        if (typeof element[listener] == 'function')
        {
            element[listener + 0] = element[listener];
            element[listener + '_num']++;
        }
        element[listener] = function(e)
        {
            var r = true;
            e = (e) ? e : window.event;
            for(var i = element[listener + '_num'] -1; i >= 0; i--)
            {
                if(element[listener + i](e) == false)
                    r = false;
            }
            return r;
        }
    }
    //if handler is not already stored, assign it
    for(var i = 0; i < element[listener + '_num']; i++)
        if(element[listener + i] == handler)
            return;
    element[listener + element[listener + '_num']] = handler;
    element[listener + '_num']++;
};
floatingMenu.init = function()
{
    floatingMenu.initSecondary();
    floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function()
{
    floatingMenu.computeShifts();
    floatingMenu.nextX = floatingMenu.calculateCornerX();
    floatingMenu.nextY = floatingMenu.calculateCornerY();
    floatingMenu.move();
}
if (document.layers)
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else
{
    floatingMenu.init();
    floatingMenu.addEvent(window, 'onload',
        floatingMenu.initSecondary);
}
//-->
</script>

Make these changes:

Replace helperbloggers with your Twitter username

4. Save your widget and you are almost done!

PS: If you have already added the Google +1 Button somewhere in your blog then you may skip step5.

5. Now Go To Blogger > Design > Edit HTML and search for this,

</head>

Just above it paste the following code,

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script>

6. Save your template and say Bingo!

The Professional "My Blog Blogger Template

2012-08-10T01:23:00.001+05:00

I always share the things which I know or which I have.Before some days ago I changed my template then many readers ask me to give them my older template.Therefore I kept the word and redesigned my older template.I have added every single or every common thing which you want.After working 9 hours in 3 days on the coding of this template I managed to design a template which I want.I am sure that this template will become the turning point of your blogging careers and revenue.I hope you will surely like this template.Take a full preview on the template.

List Of All Feature

H B

Here is a full list of template features :

2 Coloum
Right Sidebar
3 Column Footer Section.
Multi Level Drop Down Menu
2 Menus
Page Navigation
Supports All Major Browsers
In-Built Related Posts
~~Redirect script (i.e if you are using blogspot then your every visitor will redirect to blogspot.com)~~
Clean and Impressive Design
Full SEO Optimized
Author Comments Highlighted
Auto Read More With Thumbnail and Read More Button
Used H2 Tags as Post Titles. more info......
Add a Gadget Link For Header Banner
Meta Tags Added
Meta Tags For Every Post
Comment Bubble.
Added Hover Effect To List Bullets
Neat CSS Arrangement
Comment Bubble
Navbar Removed
Google Chrome Frame Added
jQuery Latest Version Ready !
Link Nuding Effect To Sidebar Links

Some Screenshot's Of Template

H B

Comment Form

Drop Down Menu

BlockQuote

Highlighted Author Comments

Page Navigation

Page Layout

Add Facebook Comments form to Blogger Blogs

2012-08-09T18:46:00.001+05:00

Facebook have successfully released many of the resources and plugins for bloggers. In the whole plugins of Facebook, LIKE and Share were the most inspired one. Now they have released Facebook comment form for bloggers on which I am going to give the tutorial today. Facebook comment form helps the bloggers in getting most comments and more social media exposure. This Facebook comment plugin looks simple, cool and it allows users to comment on your blog by logging into Facebook, Yahoo, AOL and Hotmail. This plugin by them is really an awesome resource for bloggers, so what are you waiting for???!!. lets move on with the tutorial.

How To Add Facebook Comments form to Blogger

Creating An App in Facebook

1. Go to Facebook developers page to create a new app.

2. Create an new app with your blog details as shown below.

3. Note down your Facebook app id which will be shown like this.

JavaScript SDK for Facebook comment box

4. Now go to your blogger dashboard --> template --> Edit Html (Tick expand widget template option).

5. search(Ctrl+F) for <html and replace it with the following code.

<html xmlns:fb='http://www.facebook.com/2008/fbml'

6. Find For <body> tag and add the following code just after it.

<div id='fb-root'/>
<br />
<script>

window.fbAsyncInit = function() {

FB.init({

appId : 'YOUR_APP_ID',

status : true, // check login status

cookie : true, // enable cookies to allow the server to

access the session

xfbml : true // parse XFBML

});

};

(function() {

var e = document.createElement('script');

e.src = document.location.protocol + '//connect

.facebook.net/en_US/all.js';

e.async = true;

document.getElementById('fb-root').

appendChild(e);

}());

</script>

Note:: Replace YOUR_APP_ID with your app id you just noted down.

Facebook Open graph tags

7. Now search for </head> and add these open graph meta tags just above it.

<meta expr:content='data:blog.pageTitle' property='og:title'/><br />
<br />
<meta expr:content='data:blog.url' property='og:url'/><br />
<br />
<meta content='Helper Bloggers ' property='og:site_name'/><br />
<br />
<meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/><br />
<br />
<meta content='YOUR_APP_ID ' property='fb:app_id'/><br />
<br />
<meta content='http://www.facebook.com/bloggertricksdotbiz' property='fb:admins'/><br />
<br />
<meta content='article' property='og:type'/>

Note::

Replace Blogger Tricks with your blog name.

Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.

Replace YOUR_APP_ID with your app id.

Replace http://www.facebook.com/bloggertricksdotbiz with your Facebook page url.

Facebook Comment box widget code

8. Now search for this code.

<b:includable id='comment-form' var='post'>

Add the following code just below it.

<b:includable id='comment-form' var='post'><br />
<br />
Add the following code just below it.<br />
<br />
<b:if cond='data:blog.pageType == "item"'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div>
<fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='500'/></div>
</div>
</b:if>

Note::

You can change the width of widget by replacing 500 with your desired width.
As you all know you can change the color scheme to light or dark.

9. Save your Template.

That's It pals. . .

Slide Out Floating Share Buttons For Blogger

2012-08-09T18:36:00.000+05:00

Today I am sharing an amazing slide out social sharing widget,when any user hovers on this widget it slide out with some social networking button such as twitter,facebook,print,email and add this button which contains share option for almost all social sharing sites.This widget floats to below right corner of the page and scrolls along with page which allow a real time sharing option for your visitors,this widget is created by addthis and bloggerized by us.Now lets go to the tutorial and see how to add this widget to blogger blog.

Live Widget Demo

How To Add This Widget To Blogger?

The installation of this widget is damn easy,you can add this widget in two steps.

Go to Blogger Dashboard > Template
Click On Edit HTML
Hit Proceed button
Find For Below Code,

</head>

add below code just above it,

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

Now find for below code

</body>

add below code just before/above it,

<!-- helperbloggers.blogspot.com slideout widget : BEGIN -->
<div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style">
    <a class="addthis_button_more">Share</a>
    <ul>
        <li><a class="addthis_button_preferred_1"></a></li>

        <li><a class="addthis_button_preferred_2"></a></li>
        <li><a class="addthis_button_preferred_3"></a></li>
        <li><a class="addthis_button_preferred_4"></a></li>

    </ul>
</div>
<!-- helperbloggers.blogspot.com slideout widget : END -->

Finally save your widget and you are done :)

jQuery Pop Up For Mashable Style Widget (V2)

2012-08-09T18:23:00.003+05:00

Mashable style widgets are great widgets which comes with all subscription options such as facebook like button,Twitter follow button,Google +1 button and email subscription form and saves space of your blog,that's why I am also using this gadget on my blog.We already shared two versions of Mashable style widets (Version 1 | Version 2).Now we have added a jQuery Popup of Mashable style widget V-2.In this gadget we have used jQuery colorbox.See Live Demo of gadget then you will understand how the popup looks actual.Now without waiting any more lets go to the tutorial.

Live Demo

How To Add This JQuery Popup To Blogger?

Installation of this jQuery popup is so easy.You just have to copy and paste the codes.Follow below instructions :
Go to Blogger Dashboard > Design > Page/Edit Layout.(If you are using new User Interface then go to Dashboard > Layout)
Now click on "Add a Gadget" Then select "HTML/JavaScript"
Paste below code after replacing my Username's/ID's with yours and save it.

<link rel="stylesheet" href="http://code.helperblogger.com/colorbox-css-code-helperblogger.css"/><br />
<style>
/*-----------------------------------------------------------------------------------*/
/* Mashable Style Widget Popup By Helper Blogger @helperbloggers.blogspot.com
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
height:380px;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #F66303;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style><br />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script> <br />
<script src="http://code.helperblogger.com/jquery.colorbox.js"></script> <br />
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script><br />
 <br />
<br />
<br />
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<style>
/* Social Widget */
#HB-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
height:380px;
}
.fb-likebox {
background: #fff;
padding: 10px 13px 0 10px;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-bottom: 1px solid #D8E6EB;
margin:0px;
height:70px;
}
.googleplus {
background: #F5FCFE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #ebebeb;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 70px;}
.g-plusone { float: left;}
.gplus {
background: #fff;
padding: 0px;
border: 0px solid #C7DBE2;
margin-bottom:-13px;}

.twitter {
background: #EEF9FD;
padding: 10px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:37px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 270px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow ul li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5TyCtO-5lPP9BGXNz0F8-pt91Y2491Ngjob4Ne9qqbQf6XDWwo6K0tNehZXWqmKCODb_nS35scAo4V-56k05U3OTpe8R60oAeaep5MvnNJsq0BPXHUgSwq2yhPmjtN-dyiQrTTclp1So/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-twitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWCzOlgB1dRUcgz93lRKmSc5Mq5BXkpR1YhC3BwyQtqkikgnluhLTliLpQVTdVhNT19mNCDypKf8LMkb_lme2RNI-KvkdLKzM6pVcyidPS_8nqmfNOg-9BWRzsF8DX98v4sTieAn0gdak/s400/twitter%2527.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyjBn_fywTkNGBosqp8Wnhj45SdOcbaQWU6w67IuIaSTzlxM6BvwclKkxs_y1f-1lnL8Yj4jEvAVIWHf8mRIZBE_5d4ph8ZhApVvpjnUeBpJES5OtvP1qe62Wfd9lNvyst4VNvLa4tYxc/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}

</style><br />
<br />
<br />
 <div style="margin-bottom:10px;">
<div id="HB-mashable-bar" >
<br />
<div class="gplus">
<link href="https://plus.google.com/u/0/106465314277386711723/" rel="publisher" /><br />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script><br />
 <g:plus href="https://plus.google.com/u/0/106465314277386711723/" width="300" height="131" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox">
 <div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><div class="fb-like-box" data-href="http://www.facebook.com/helperbloggers" data-width="292" data-show-faces="false" data-stream="false" data-header="false">
</div>
</div>
<div class="googleplus">
 <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium">
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter">
 <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=en&link_color=&screen_name=helperblogger&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div id="email-news-subscribe">
 <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=helperbloggers', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" /> <br />
<input type="hidden" value="helperbloggers" name="uri" /> <br />
<input type="hidden" name="loc" value="en_US" /> <br />
<input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form>
</div>
</div>
<div id="other-social-bar">
 <ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/helperbloggers" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/helperbloggers target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/106527290580119996124 target="_blank">Google Plus</a> </li>
</ul>
</div>
<div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://helperbloggers.blogspot.com/2012/08/jquery-pop-up-for-mashable-style-widget.html" target="_blank" >Get This »</a></span></div>
</div>
 <br />
</div>
</div>
</div>

Customizations

Color Codes Information -

- Cookie Refresh Time:

I have set the cookie refresh time to the 7 days that means this popup will appear only once in 7 days to that specific visitor.If you want to appear the popup daily then just replace the value 7 with 1.But note if you set the value to low then it can irritate your daily readers.

- Your Google+ Page Id:

Replace the highlighted ID with your Google+ ID.If you don't know how to find your Google+ ID then click here.

- Your Facebook Page URL:

Replace the highlighted URL with your Facebook fan page URL.

- Your Twitter Username:

Replace helperblogger with your Twitter username.

- Your Feedburner Username:

Replace Highlighted hblogger username with your Feedburner username.

Now save your changes and you are done...

Note - If you want to share this gadget with your friends then kindly link back to this article.Gadget users are requested to don't remove credit links.

Customize Blogger Labels With CSS3

2012-08-09T03:31:00.000+05:00

Previously I shared bricks/box style labels for blogger and many of you found it great so that today I am sharing another beautiful CSS3 labels style for blogger.This label hack can be easily applied to your labels by just adding some CSS code in to your blog.This labels and created by Stylifyyourblog and I have reshared them on Helper Blogger,Now lets see how to apply this label hack.

How To Apply This Label Hack?

Important - Before applying this label hack set your label style to Cloud.

You can also apply this hack by using below one click installer.

apply this hack manually by adding below CSS code just above/before ]]></b:skin> tag in your template,

.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}

.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}

.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}

#Label1 {
    height: 210px;
}

.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

Finally save your template and you are done.

If you are getting any problem then feel free to ask it to me :)

Add CSS3 Bricks/Box Style Labels To Blogger

2012-08-09T03:19:00.001+05:00

In this tutorial we will see how to customize blogger labels with CSS3 and make them bricks or box style.We will apply this hack with using of pure CSS3 and will replace some existing code with new code in your template.These css3 bricks/box labels really attract readers.I am also using these bricks/box style label on this blog,you can see demo at right sidebar of this blog.Now lets see how to apply this hack.

How To Customize Blogger Labels With CSS3?

First we have to edit some settings of our label widget.Save your label widget settings as I have set in below image.

Now go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Hit Proceed button
Check Expand Widget Templates checkbox
Find below code in your template

]]></b:skin>

add below CSS code just above it,

/*CSS3 Bricks Style Labels By http://www.helperblogger.com/ */
#textwidget {
    color: #666;
    font-size: 0.925em;
    font-style: italic;
    line-height: 1.6em
}

a.tag {
    color: #777;
    font: 9px verdana;
    text-transform: uppercase;
    transition: border-color .218s;
    background: #f4f4f4;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
    border: solid 1px #ccc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    margin: 0 4px 4px 0;
    padding: 3px 5px;
    text-decoration: none
}

a.tag:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}

a.tag:active {
    color: #000;
    border-color: #444
}

.slides {
    font-size: 85%;
    line-height: 130%;
    overflow: hidden;
    padding: 0;
    margin: 30px 0 10px;
    border-bottom: 1px solid #000
}
/*CSS3 Bricks Style Labels By http://www.helperblogger.com/ */

Now find below code,

<b:widget id='Label1' locked='false'

find it until

</b:widget>

replace code from <b:widget id='Label1' locked='false'.........
to
</b:widget> with below code,

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
    <b:includable id='main'>
        <b:if cond='data:title'>
            <h2>
                <data:title/>

            </h2>
        </b:if>
        <div class='textwidget'>
            <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 class='tag' 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/>
                    <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 class='tag' 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>

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

Now take a preview and save your template.

Hope you have liked it :)

Another Set Of Beautiful And Fresh Search Boxes For Blogger

2012-08-09T03:07:00.002+05:00

Yesterday we shared a beautiful set of search boxes for blogger and as promised here I am sharing another beautiful set of search boxes for blogger.This search boxes are designed by designed by Design3Edge and we have bloggerzied them to works perfectly with blogger blog.As previous search boxes you can also add this search boxes in one step.See preview of search boxes below in search boxes,now lets see how to add them into blogger blog?

How To Add This Search Boxes To Blogger Blog

First choose any search box below
Copy the code of that search box
Go to Blogger Dashboard > Layout
Click Add a Gadget
Select HTML/JavaScript
Paste code and save it
Drag it to the top of your siderbar,if you are good blogger :)

Search Box Style 1

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGxqIcw-CbcpChdc47vP4c8o8M7fOAsNoDwdYlYw7aI5iEXyx_bOJmCi711YHi7MH-OdPL47YEgIijkZE6jmIQwWdGgvQROwgS8UoXa-21jpamYEbWSVL_MfjkH73mD2VYPZg0ecRjvc/s1600/helperblogger.com-green.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">

    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Search Box Style 2

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitHp8E4r_7ac2E0MyLJ_MuboV6h6zsSAqH70fSwOfpP9TZD39NZlha2btHZ7ug7pabwCeknM_9J810pOJYLj0t-Mp9lNpTNjckCFIhhZftpwjU3Ki8YYgGKGI2losI5vsmjiyQAEj1vuE/s1600/helperblogger.com-blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>

</div>

Search Box Style 3

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSzB8gUy4zs3CENykCHkPNCG0i0uEylFkt_U2rMzyibrjIjz_XkDOb76Vae1sT3XyHgFU82i6Scn4EPBPZ42ICLnpUL2uo1RDQI7B3PZNO_qZ5scVp0fNqcqtwiAjwA7tski29GFTTi6E/s1600/helperblogger.com-orange.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />

        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Search Box Style 4

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGCPi_JWvcNJS-NyWeycGyH_6nQ-rBBrgiRApncEneB0z0P-LiDTsXvJYoWnSJs5kp3dolJjMp7Y3UWSKJogBivBCWkgJXXILFB7lcfh5DJm7hP_mSdjsgBp3TYGObiu0DFyiiCo6CK2A/s1600/helperblogger.com-purple.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">

    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

Search Box Style 5

<style type="text/css">
#helperblogger-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEhYRrfi-lsmoGlzi4cjkjNSLxSE5weJtjInuJc7AAiGUGvWjDCBQMOAwDAouIVp1FKW_Tw-azReZ-lCYcB9Z1XVCxyI3nzz-L3MsRUFg9UooZJS2JSnbwK0e2Mh7yO7KYD3Nz9q773E/s1600/helperblogger.com-red.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
 
form#helperblogger-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
 
form#helperblogger-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
 
form#helperblogger-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="helperblogger-searchbox">
    <form id="helperblogger-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>

</div>

Finally save your search box and you are done.

Add "Link To This Post" Widget Below Every Blogger Post

2012-08-09T02:48:00.000+05:00

Click On Image To Enlarge

Link to this post widget is another best way to increase page views and traffic on your blog.This widget contains two text areas,in first it contains a URL of that respective post and the second text area contains a HTML code which includes title and URL of your post.Another great feature of this widget is it updates automatically i.e. you dont have to update it as you post a new article on your blog.Also the installation this widget is so easy you just have have add a little code in your blog and you are done.Now lets see how to add it.You can see the demo at bottom of this post.

How To Add This Widget To Blogger?

Go to Blogger Dashboard > Template
Download a copy of it
Click on Edit HTML
Hit Proceed
Check Expand Widget Templates Checkbox
Find below code in your template,

<data:post.body/>

paste below code right under it,

Note - If you can't find or add this widget by using <data:post.body/> then find <div class='post-footer-line post-footer-line-1'/> or <div class='post-footer'> and add below code just above it.

<b:if cond='data:blog.pageType == "item"'>
<p style='color: #7AA1C3;font-weight: bold;'>If you Like This Article,Then kindly linkback to this article by copying one of the codes below.</p>

<p style='color: #CF152A;font-weight: bold;'>URL Of Post:
</p><textarea cols='60' id='url' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'><data:post.url/></textarea><br/>
<br/><p style='color: #CF152A;font-weight: bold;'>Paste This HTML Code On Your Page:</p>
<textarea cols='60' id='HTML-code' onclick='this.focus();this.select()' readonly='readonly' rows='2' style='border:2px solid #666;background:#fff; height: 2.6em; width: 98%;' title='Click to highlight'>&lt;a href=&quot;<data:post.url/>&quot;&gt;<data:post.title/>&lt;/a&gt;</textarea>

<div style='text-align: right;font-size: x-small;'>
<a href='http://helperbloggers.blogspot.com/2012/08/add-link-to-this-post-widget-below.html' target='_blank'><span style="color: #838383;">LinkBack Widget</span></a></div></b:if>

Now save your template and visit any post page you will watch it.

Fixed Position Scrolling Sticky Bar

2012-08-09T02:26:00.002+05:00

Now days concept scrolling bar or sticky bar has becomes very popular because of their attention grabbing capacity,they quickly catches any ones attention on them that's why I am also using a sticky bar(hellobar) on my blog.Today I am gonna to share a cool scrolling sticky bar which contains many subscription/sharing options such as twitter tweet button,google +1 button,facebook like button,email subscription form also it contains a random post button which will redirect you to another(any random) post.This sticky will sticks to upper part of page and only visible when scroll down.Now lets get started and see how to add this sticky bar to blogger blog.To add to sticky bar I will recommend you to use old blogger user interface because as per widget author it throws an unexpected error,you can switch back to old blogger interface by clicking on the Settings Wheel icon at top right of your new blogger dashboard.

Click On Image To Enlarge

How To Add Scrolling Sticky Bar To Blogger?

Step 1 : Adding The HTML

Go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Hit Proceed
Find for below code,

<body>

Note - If you are using default blogger templates then search for <body tag.Watch video below for exact information.

add below code just below of above code,

<div id='HB-Bar-Container'>
<div id='HB-Bar-Content'>
<ul id='HB-Bar-Left'>
<li class='Home'> <a href='http://helperbloggers.blogspot.com/'>Home</a> </li>
<li class='Share'> <div id='share-top'>

<ul>
<li> <a class='twitter-share-button' data-count='horizontal' href='http://twitter.com/share'>Tweet</a> </li>
<li> <g:plusone size='medium'></g:plusone> </li>

<li> <div class='fb-like' data-font='verdana' data-layout='button_count' data-send='false' data-show-faces='false'>
</div></li></ul>
<div style='clear:both;'></div></div></li>
</ul>
<ul id='HB-Bar-Right'>

<li class='Subscribe'> <div class='HB-email'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=HBlogger&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px;text-align:center;' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='HBlogger'/><input name='loc' type='hidden' value='en_US'/> <input class='HB-emailsubmit' type='submit' value='Subscribe'/> </form>

<a href="http://helperbloggers.blogspot.com/" title="Blogger Widgets" ><img src="http://img1.blogblog.com/img/blank.gif" /></a> </div></li>
<li class='btt'> <a href='#top' title='Back to top'>Slide to Top &#8593;</a> </li>
</ul></div></div>

Line No. 4 : Replace http://helperbloggers.blogspot.com/ with your blog URL.
Line No. 16,16 : Replace HBlogger with your feedburner username.

Step 2 : Adding The Scripts

Now find for below code,

</body>

add below code just before/above it,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script> 
<script>
//<![CDATA[
var b = $("#HB-Bar-Container");var c = b.css("top");$(window).scroll(function (){if ($(this).scrollTop() > 50){b.stop().animate({top: "0px"}, 0)}else{b.stop().animate({top: "-100px"}, 0)}});
//]]>

</script> 
<script>
$(document).ready(function(){// fade in .btt
$(function () {$(window).scroll(function (){});// scroll body to 0px on click 
$('.btt a').click(function () {$('body,html').animate({scrollTop: 0}, 350);return false;});});});
</script>   
<script>(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";fjs.parentNode.insertBefore(js, fjs)}(document, 'script', 'facebook-jssdk'));</script>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Step 3 : Adding The Bar Styles

Now find for

]]></b:skin>

add below code just above it,

#HB-Bar-Container {
background-color:#f6f6f6;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));
}

 #HB-Bar-Container , #HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit {
 box-shadow: 0 5px 5px -5px #999;
 -webkit-box-shadow: 0 5px 5px -5px #999;
 -moz-box-shadow: 0 5px 5px -5px #999;
 }

 #HB-Bar-Container{
margin: 0px 116px;
 top:-100px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
 text-align:center;
 border-bottom: 1px solid #aaa;
 z-index:999;
padding:4px;
 height:33px;
  position:fixed;
  vertical-align: baseline;
  }

#HB-Bar-Container *{
padding:0;
}

#HB-Bar-Container a {
text-decoration:none;
}

#HB-Bar-Content{
width:1024px;
margin:0 auto;
}

#HB-Bar-Content li{
list-style:none;
float:left;
}

#HB-Bar-Left{
float:left;
width:45%;
}

#HB-Bar-Right{
float:right;
width55%;
}

#HB-Bar-Left li{
margin-right:1%;
margin-top:-7px;
}

#HB-Bar-Right li{
margin-top:-7px;
}

#HB-Bar-Left .Home a, #HB-Bar-Right .btt a,.HB-emailsubmit{
font-size:9pt;
font-family:cambria;
font-weight:Bold;
text-transform:uppercase;
color:#fff;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
letter-spacing: 1px;
padding:6px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}

#HB-Bar-Left .Home a:active, #HB-Bar-Right .btt a:active,.HB-emailsubmit:active{
position: relative;
top: 1px;
box-shadow:none;
}

#HB-Bar-Left .Home a{
background:#143eb4;
}

#HB-Bar-Left .Home a:hover{
background:#1556fa;
}

#HB-Bar-Right .Subscribe{
margin-top:-14px;
}



#HB-Bar-Right .btt a{
background:#00810b;
margin-left:3px;
}

#HB-Bar-Right .btt a:hover{
background:#06b421;
}

.HB-emailsubmit{
background:#ce1527;
cursor:pointer;
border:none;
height:26px;
width:90px;
}
.HB-emailsubmit:hover{
background: #f02a37;
}
.textarea{
border:1px solid #aaaaaa;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
resize:none;
font-size:8pt;
font-family:verdana;
width:170px;
height:25px;
color:#000000;
}

#share-top{
background: #f9f9f9;
border:1px solid #dddddd;
line-height: 1;
margin: -4px 0 0 60px;
padding: 10px 0 2px 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}

#share-top li {
display: block;
margin-right: 0;
}

#facebook-widget,#google-widget,#twitter-widget {display:none; }
@media only screen and (min-width : 768px) and (max-width : 1050px),only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#HB-Bar-Container{
display:none;
}
}

Finally save your template and visit your blog.

Helper Blogger

How To Publish WordPress Posts From Microsoft Word 2013‏?

Publishing a post from MS Word

What Is The Best Way To Mobile Optimize Your Site?

Responsive Web Design

Dynamic content serving

Separate Mobile Site

Move your blog from LiveJournal To Blogger

Creating Customized HTML Text Area Boxes

Professional Templates for Bloggers

Subscribe Now 3D Images Widget Fully Customized

Spinning Social Icons With CSS3 For Blogger

Custom Add To Circles Widget For Blogger

Customize Labels Cloud in Blogger

Google Flag Translate Widget For Blogger/Blogspot

Social Bookmarking Widget With Tooltips For Blogger

Create Floating Bar For Pinterest & Other Sharing Buttons

Add Facebook Recommendations Bar To Blogger

Breadcrumbs Navigation Widget For Blogger

Stay Connected Gadget With All Subscription Options For Blogger

Replace

Prees Ctrl F And Find Below ID

Floating Google +1, Facebook, Twitter Buttons For Blogger

Adding Floating Social share Counters to Blogger

The Professional "My Blog Blogger Template

List Of All Feature

H B

Some Screenshot's Of Template

H B

Comment Form

Drop Down Menu

BlockQuote

Highlighted Author Comments

Related Posts Widget

Page Navigation

Page Layout

Add Facebook Comments form to Blogger Blogs

How To Add Facebook Comments form to Blogger

Creating An App in Facebook

Facebook Comment box widget code

Slide Out Floating Share Buttons For Blogger

How To Add This Widget To Blogger?

jQuery Pop Up For Mashable Style Widget (V2)

Live Demo

Customize Blogger Labels With CSS3

How To Apply This Label Hack?

Add CSS3 Bricks/Box Style Labels To Blogger

How To Customize Blogger Labels With CSS3?

Another Set Of Beautiful And Fresh Search Boxes For Blogger

How To Add This Search Boxes To Blogger Blog

Search Box Style 1

Search Box Style 2

Search Box Style 3

Search Box Style 4

Search Box Style 5

Add "Link To This Post" Widget Below Every Blogger Post

How To Add This Widget To Blogger?

Fixed Position Scrolling Sticky Bar

How To Add Scrolling Sticky Bar To Blogger?

Step 1 : Adding The HTML

Step 2 : Adding The Scripts

Step 3 : Adding The Bar Styles