Beautiful Blogger Widgets

How to Keep Your Blog Grows When You Are Too Busy?

2012-10-25T00:30:00.000-07:00

As a blogger, you like writing to share your knowledge and experience. Simultaneously, You also are a webmaster and you always want your blog has high ranking and becomes popular. When your blog has some success: good ranking, high traffic and many loyal readers, you must always keep updating blog post. Because if you don’t post new update, your readers will go away and you will be lost a lot of traffic. So what to do when you are too busy and have no time to update blog content? How to keep your blog grows and don’t lost anything?

Don’t starve your blog for a long time!

Publishing one post per week is reasonable. Maintaining blog publishing frequency is an important factor. If you are running too busy, you can take of post scheduling feature and try to publish minimum one post a week.

Checking comments regularly

You shouldn’t not care of your blog for a long time. If you do that, your blog will turn into “dead blog” and you lost everything. Spending atleast 15 minutes per day to check blog comments and reply if you can. It is best to always carry phone with the ability to access the web or laptop to read comments and manage your blog.

Accepting Guest Posts

This idea can use only if your blog has high traffic and page rank. A lot of bloggers do guest posting daily to increase relationship with others, drive traffic and build high quality backlinks. You can hire an editor and let him edit guest posts, or you can probably take out half n hr a day to edit and publish/schedule guest posts.

Come back

Planning to come back is important. If you have goal to become a blogger you must have time to write post. Content is KING and without content, your blog is nothing. When you are not busy, it is the time to write more, regain your traffic and ranking. You can leave comments on all friend’s blog to notify them you are come back or you can host a contest to attract readers. The idea is people might have started forgetting about you, when you are doing a come back, make sure to let other feel your presence in social media.

Do let us know what tip do you use to manage and grow your blog when you are running busy?

Thanks to Pumama for this great post who blogs at TechSharing.

Article Source : ShoutMeLoud

I'm Not Sick, Just Busy

2012-10-24T17:18:00.002-07:00

I am terribly sorry, but I am quite busy right now and don't have the time. So, I can't post any interesting things right now. My hands are really full with assignments, research works, and quizzes. But I promise before the week ends, I might be able to share with you my insights.

Somebody commented that they hoped I was okay, because they missed my posts. That totally made my day.

God bless you my readers! =)

Adding SCM Music Player To Run Audio On Your Blog

2012-09-21T23:37:00.002-07:00

Putting music on Blog is not something very commendable, but there are models that players may be worth by being discreet, easy to customize and will not begin playing automatically. SCM Music Player is a great model that can be incorporated both in Blogger, Tumblr or WordPress.org, running audio from any tab, including links to YouTube videos, creating playlists customized and unique to your blog.

How To Add SCM Music Player To Your Blog?

Step 1: Get SCM Music Player Code

1. Go to http://scmplayer.net/.
2. Choose Skin
3. Edit Playlist
4. Configure Settings
5. Select Done to proceed.

Step 2: Add SCM Music Player Code To Blogger

1. Go to Blogger Dashboard > Layout > Add HTML/Javascript.
2. Paste SCM Music Player Code into the Html/Javascript box.
3. Save it.

Have a nice day. Do not forget to share and comment. =)

Don't forget to subscribe our rss feed.

How To Add About Author Box Below Each Post In Blogger

2012-09-15T16:08:00.002-07:00

An author box is a small box, appearing at the bottom of a blog post, that contains descriptive information about the author. An author box can include information such as the author's name, a short biography about the author and a small thumbnail picture of the author. You can add an author box to the post footer in your Blogger blog by editing the blog's template HTML code.

How To Add About Author Box Below Each Post In Blogger?

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Check the box “Expand Widget Templates”
3. Search for (ctrl + f) this code :

]]></b:skin>

4. Copy the below script and paste it after ]]></b:skin> tag.

/* Author Box by Beautiful Blogger Widgets  */
.author-box {
background: #fff;
margin: 10px 0 40px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px#888;
box-shadow: 0 0 5px 5px #888;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 2px;
border: 1px solid #E6E6E6;
}

5. Next, find (Ctrl + F) below tag:

<data:post.body/>

6. Replace it with this code

<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p style="display:none;">Author Box by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p>
<div class='author-box'>
<p><img alt='' class='avatar avatar-70 photo' height='70' src='http://1.bp.blogspot.com/-yDs_EkqtvPA/UEtmSVCSLwI/AAAAAAAAAxo/Fhv9_UFZvb4/s1600/blogger.png' width='70'/><b>About the Author</b><br/>
<div style='text-align: justify; font-family: verdana; color: #000;'>
Lorem ipsum brute utinam nominati vel ut, te vis liber aliquid. Te vis vide dolores erroribus. Debitis dolorem eu pro, semper mollis dissentiunt nam at. Regione molestie dissentiet sit te. Has cetero indoctum posidonium et, dissentiunt deterruisset pro an.<br/>
</div>
</p>
</div>
</b:if>

Note: Replace the image link and the text with your own text.

7. Save your template.

Hope you liked this article. Thanks for reading. Now, visit your blogs and see it appearing only on post pages and not the homepage.

Create A Simple Spoiler Or Show-Hide Effect

2012-08-30T20:38:00.000-07:00

Spoilers are snippets of information which you may wish to hide from viewers. This effect is also known as a spoiler or a peek-a-boo. It uses a small inline Javascript. You can use this code anywhere, be it in the sidebar or in your blog post, as long as you can add the spoiler code to it.

This code will add a button, clicking it will expand the content, showing the hidden part. See it in action, click the button now.

Your Title :

How To Create A Simple Spoiler Or Show-Hide Effect?

Just copy and paste the code below, then replace the words "YOUR HIDDEN CONTENT HERE".

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">Your Title : <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;background: #f5f5f5 none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(127, 69, 0); line-height: 1.5em;"><div style="display:none;">YOUR HIDDEN CONTENT HERE<br /></div></div></div>

Customization:

You can replace “Show/Hide” text with your own.
If you want to have multiple spoilers on a single page, make sure you give each of them a unique ID.

Add Print Friendly Button to Blogger

2012-08-08T15:28:00.002-07:00

Although I might like to see the whole world go paperless, I also know that my blog posts are often printed by readers to give to their colleagues who might not be as tech-savvy as they are. If you are one of those people who has printed a blog post to give to your colleagues, thank you. I appreciate your willingness to share. Today, I made it easier to print blog posts by installing the Print Friendly widget below each blog post.

What is PrintFriendly?

It is simple web application which makes makes printing on the web better. Print Friendly offers a free widget that you can add to your Blogger or Wordpress blog. With the widget installed, visitors can print an ad-free, sidebar-free version of any blog post. Printing with Print Friendly should save you paper and ink. Clicking the Print Friendly button also gives you the option to download a PDF of each blog post.

How to Add Print Friendly Button to Blogger?

Step 1: Get PrintFriendly Button Code

1. Go to PrintFriendly.com/button.
2. Select Blogger/Blogspot.
3. Choose your button style, and copy and paste the PrintFriendly code snippet.

Step 2: Add Print Friendly Button To Blogger

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Click Check Box Expand Widget Templates (don't miss!).
3. Search for (Ctrl + F) <div class="post-footer"> in your template.
3. Paste PrintFriendly Button Code after/below it.

<b:if cond='data:blog.pageType == "item"'><a expr:href='data:post.url + "?pfstyle=wp"' style="margin-right:1em; color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a><b:else/><b:if cond='data:blog.pageType == "archive"'><a expr:href='data:post.url + "?pfstyle=wp"' style=" margin-right:1em; color:#6D9F00; text-decoration:none;" class="printfriendly" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a><b:else/><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" style=" color:#6D9F00; text-decoration:none;" class="printfriendly" onclick="window.print(); return false;" title="Printer Friendly and PDF"><img style="border:none;" src="http://cdn.printfriendly.com/button-print-grnw20.png" alt="Print Friendly and PDF"/></a></b:if></b:if>

4. Save your template.

You also can use this image tutorial to Add Print Friendly to Blogger or Blogspot.

Add 3D Social Buttons With Rotate Spin Effect To Blogger

2012-08-03T15:58:00.003-07:00

Today, I am back with beautiful 3D Social Buttons With Rotate Spin Effect For Blogger Blogs. You can see live demo on my Beautiful Blogger Widgets. These buttons created with the help of useful CSS trick. With CSS rotate when you place your cursor over each icon they spin 360 degrees, they spin back 360 when the cursor is removed.

You will see hover effect on these buttons.These buttons are related to your RSS feed, Email RSS, Facebook, Twitter, Google+, Pinterest and Feedburner reader count.

Thanks to Paul Crowe for making this beautiful widget. Please ask via comments if you are facing any problem.

Live Demo 3D Social Buttons With Rotate Spin

How To Add 3D Social Buttons With Rotate Spin Effect To Blogger?

1. Go to Blogger Dashboard > Layout.
2. Click 'Add A Gadget' > HTML Javascript.
3. Copy and paste below code in HTML Javascript Gadget.

<style>
#social a:hover {
background-color: transparent;opacity:0.7;
}
#social 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;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<center>
<div id="social"><a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div>
<br/>
<a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="Beautiful Blogger Widgets" src="http://feeds.feedburner.com/~fc/beautifulbloggerwidgets?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
</center>

Note: Replace the following sections with your social profiles and feed URLs.

YOUR-FEED-URL-HERE
YOUR-EMAIL-RSS-URL-HERE
YOUR-FACEBOOK-PAGE-URL-HERE
YOUR-TWITTER-URL-HERE
YOUR-GOOGLE-PLUS-URL-HERE
YOUR-PINTEREST-URL-HERE
YOUR-FEEDBURNER-URL-HERE

4. Save it.

That's it you have a very cool subscribe section on your blog. Thanks for reading it.

Add Floating Follow and Dashboard Button Like Tumblr In Blogger

2012-08-01T21:14:00.002-07:00

Have you seen Tumblr Follow Button?. Did you ever think of the same widget on your blogger blog. Well, this time we will create a follow button that similar like Tumblr. Tumblr is the one platform for into blogging. If you look under the blog service Tumblr is at the top right corner there is always a follow and dashboard button.

This lets your visitors to follow your blog quickly and in a different manner. Usually this works as a Google Friend Connect but instead of the Default Friend Connect Widget. We will add this Floating Follow and Dashboard Button Like Tumblr widget.

How To Add Floating Follow and Dashboard Button Like Tumblr In Blogger?

1. Go to Blogger Dashboard > Layout.
2. Click on Add a Gadget > HTML/JavaScript.
3. Copy and paste the following code:

<div style="position: fixed; top: 5px; right: 95px;">
<a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=4486246453830750897" target="_blank" rel="nofollow" title="Follow" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png" border="0" /></a>
</div>
<div style="display:scroll; position:fixed; top:5px; right:5px;">
<a class="linkopacity" href="http://www.blogger.com/home" target="_blank" rel="nofollow" title="Dashboard" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-N61PPu_1haE/TtOSBZgZikI/AAAAAAAAHvc/vIEC_dYpIVo/dashboard.png" /></a>
</div>

Note: change 4486246453830750897 with your Blog ID.

4. Save the widget and you're done. That's it.

Hope you like it my new tutorial you can subscribe to my RSS Feeds to receive new updates about Beautiful Blogger Widgets.

How to Add Different Meta Tags to Different Blog Posts in Blogger

2012-08-01T01:37:00.002-07:00

Adding Different Meta Description Tags to each and every post will make your Blogger blog stand out in the Search Engine Result Pages (SERPs). In WordPress there are quite a few plugins available that will automatically add meta descriptions to each and every post by extracting some information from the post. Unfortunately, this easy solution is not available for Blogger blogs. But there is a neat hack that allows you to add different meta tags to different Blogger posts. Bad news: You will have to do it manually.

So, what is the use of adding different meta descriptions to different Blogger Posts?

It is very good for SEO (Search Engine Optimisation) . Actually, why we are adding meta tags is to tell search engines what that page is all about... but, using same meta tags to all of your blog posts lessens the search engine rankings and traffic little bit.

But, if you add different unique meta tags to different Blog posts, it makes the search engines to know more about your individual blog posts and make them crawl and index your pages better and it also improves your Search engine rankings for sure.

How to Add Different Meta Tags to Different Blog Posts in Blogger?

1. Go to Blogger Dasboard > Template > Edit HTML.
2. Find (Ctrl + F) the following code (it should be near the top of the HTML of your template):

<b:include data='blog' name='all-head-content'/>

3. Add this code just below that line

<b:if cond='data:blog.url == "http://beautifulbloggerwidgets.blogspot.com/"'>
<meta content='DESCRIPTION' name='description'/><meta content='KEYWORDS' name='keywords'/>
</b:if>

Now we have added meta tags to the homepage.

Next, you want to add meta description for your blogger post:

4. Add below code after the code on step 3.

<b:if cond='data:blog.url == "Blog Post or Label URL"'>
<meta content='YOUR META DESCRIPTION' name='description'/>
<meta content='YOUR META KEYWORDS' name='keywords'/>
</b:if>

Now, what you have to do is pasting the above code below the home page meta tags and changing the link, description and keywords.

So, the final code now looks something like this:

<b:if cond='data:blog.url == "http://beautifulbloggerwidgets.blogspot.com/"'>
<meta content='DESCRIPTION' name='description'/><meta content='KEYWORDS' name='keywords'/>
</b:if>
<b:if cond='data:blog.url == "Blog Post or Label URL"'>
<meta content='YOUR META DESCRIPTION' name='description'/>
<meta content='YOUR META KEYWORDS' name='keywords'/>
</b:if>

Just like the above procedure, you can add different meta tags to as many blog posts as you can.

Try it out and share your experiences!

Add Google +1 Button To Blogger

2012-07-26T18:43:00.001-07:00

Google plus has now launched the brand new google plus button. It is an alternative to facebook like and twitter follow button. If you find something useful on the web and you recommend that thing, then you hit the +1 button, and it helps your friends and contacts to find usefull stuff on the web easily. This tutorials will guide you to add plus one button on your blog.

Try to checkout below video to know more about the +1 button.

How To Add Google +1 Button To Blogger?

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Back up your template.
3. Tick the Expand Widget Templates checkbox.
4. Find (Ctrl + F) the </head> tag, and paste below code right above it:

<!-- Google +1 Script Start -->
<b:if cond='data:post.isFirstPost'>
<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>
</b:if>
<!-- Google +1 Script End -->

5. Next, search for (Ctrl + F) <data:post.body/> and paste the following +1 button code immediately under it:

<!-- Google +1 Button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<p></p>
<div style='float:left;padding:10px;'>
<g:plusone expr:href="data:post.url" size="standard" annotation="bubble"></g:plusone>
</div>
</b:if>
<!-- Google +1 Button End -->

Configure button:
You can configure the button by changing the attributes of the g:plusone tag in the code (in step 5).

Select the size of button by replacing the value of size attribute with a value from the table below.
You can remove the count by changing the value of annotation attribute to none.

Button size (with count)	Value
	`small`
	`medium`
	`standard`
	`tall`

Button repositioning:
The steps above positioned the button on bottom left of each post. You can change the position if you wish:

Position it on top of post

Place the button code before <data:post.body/>, instead of after.

Position it on the right

Change the float in the code from left to right.

I wish you all like it and please leave your comments if you need any help.

How To Change the Text Selection Color In Blogger

2012-07-20T17:19:00.002-07:00

Have you noticed that when you select some sentence or a single word in a website what color appears? Yes, it’s blue, because by default it set as blue color. You can simply change this color by using CSS code.

We will see how to change the default text selection color to something you wish it to be. Sounds cool? Let's give it a try.

How To Change the Text Selection Color In Blogger?

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Back up your template.
3. Check the Expand Widget Templates checkbox.
4. Now search (CTRL+F) for the code tag below:

]]></b:skin>

And add the below code just before/above it:

/*------- Text Selection Color Style Start BeautifulBloggerWidgets --------*/
::-moz-selection  {
Background: #9E0ADC;
color: white;
}
::selection   {
background: #9E0ADC;
color: white;
}
/*------- Text Selection Color Style End BeautifulBloggerWidgets --------*/

Note:
You can choose a color using the Color Code Generator.

5. Once you have entered your preferred color code, save your template, and see the magic!

Hope you enjoyed doing this trick for your blog. Thanks for reading. We will learn more such things in the future.

Add Pinterest Pin It Button With Counter To Blogger

2012-07-18T16:14:00.002-07:00

In case you are unfamiliar, Pinterest is an online pinboard that allows users to share images they find over the web -by “pinning” them on their boards. The pinned image is linked to the original webpage or blog post location, giving users the chance to visit the source directly.

A Pin It button is what Like button is to Facebook or Tweet button is to Twitter, as it allows users to share your posts without having to leave your blog. It also displays how many times a blog post has been shared.

Now let's see how to add this Printerest Pin It button to blogger.

How To Add Pinterest Pin It Button With Counter To Blogger?

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Back up your template.
3. Check the Expand Widget Templates checkbox.
4. Search (Ctrl + F) for the following code tag in your HTML.

<data:post.body/>

Note:
There are two instances of the tag present in your template. Locate the the first (from top) one.

5. Copy and paste the following code immediately below/after it:

<!-- Pinterest Button Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div> 
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script>  
</b:if> 
<!-- Pinterest Button End -->

6. Save.

Button configuration:

You can customize the layout of Pin It button & counter by changing the value of count-layout attribute in step 5. Refer to the table below for the available types and their settings.

Button type	count-layout value	`margin-left` (in line 5) value
	`vertical`	`-46px`
	`horizontal`	`-93px`
	`none`	`-46px`

Button repositioning:

The steps above positioned the button on bottom left of each post. You can change the position if you wish:

Position it on top of post

Place the button code before <data:post.body/>, instead of after.

Position it on the right

Change the float in the code from left to right.

I wish you all like it and please leave your comments if you need any help.

Add Twitter Tweet Button To Blogger

2012-07-16T02:27:00.000-07:00

Twitter is one of the largest social media company in the world and they has released their official share buttons with counter. In this tutorial we will discuss on how to add this Tweet Button to Blogger. This button is an official button created by twitter developers and does not belong to a third party. As opposed to the retweet button this button loads quickly and does not disturb the load time of your website.

How To Add Twitter Tweet Button To Blogger?

Now let’s install the button:

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Back up your template.
3. Tick the Expand Widget Templates.
4. Search (Ctrl + F) for following line of code in your HTML:

<data:post.body/>

5. Paste the below code immediately below/after that line:

<!-- Twitter Tweet Button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='YourTwitterUsername' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>
<!-- Twitter Tweet Button End -->

6. Save it.

Button configuration:

Choose the type of button and follow recommendation by changing the value of the respective attributes in the code step 5.

Button type	Attribute	Value
	data-count	`vertical`
		`horizontal`
		`none`
Follow recommendation 1	data-via	YourTwitterUsername
Follow recommendation 2	data-related	Second Twitter username

Button repositioning:

The steps above positioned the button on bottom left of each post. You can change the position if you wish:

Position it on top of post

Place the button code before <data:post.body/>, instead of after.

Position it on the right

Change the float in the code from left to right.

I wish you all like it and please leave your comments if you need any help. Do not forget to subscribe our RSS.

Add Facebook Like Button To Blogger

2012-07-14T19:24:00.000-07:00

As we all know facebook is one of the largest social media company in the word.If your blog have any fan page then it will help you a lot in increasing traffic on your blog. The Facebook like button is probably the most important and the most used social button on the world wide web today. With its recent upgrade (Facebook sort of merged it with the share to Facebook button, so liking a web page or content you just found would automatically be posted/shared on your Facebook wall, instead of just the normal you liked this __ link wall status), it became a more powerful tool for sharing content. So why not add it to your blogger blogs. It’s simple. Here’s how:

How To Add Facebook Like Button To Blogger?

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Tick the Expand Widget Templates check box on top right of the HTML window.
3. Find (Ctrl + F) the following code in your HTML.

<data:post.body/>

4. Copy and paste the Facebook button code immediately below (after) it:

<!-- Facebook Like Button Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:5px 5px 5px 0;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:440px; height:35px;'/>
</div>
</b:if>
<!-- Facebook Like Button End -->

5. Save it.

Configure button:

Choose the type of button and set the appropriate width and height by changing the values of query parameters in the above code.

Like button type	Query	Value	Width & Height
	layout	`standard`	W: 450px H: 35px (80px w photos)
		`button_count`	W: 90px H: 20px
		`box_count`	W:55px H: 65px
	colorscheme	`dark`	n.a.
	action	`recommend`	n.a.

Button repositioning:
The steps above positioned the button on bottom left of each post. You can change the position if you wish:

Position it on top of post

Place the button code before <data:post.body/>, instead of after.

Position it on the right

Change the float in the code from left to right.

I wish you all like it and please leave your comments if you need any help.

Add Beautiful Social Sharing Widget Below Blogger Posts

2012-07-12T10:19:00.000-07:00

Social networking is very helpful for bloggers in these days. Because with the help of social sharing they can get get more visitors. Today, I will guide "How To Add Beautiful Social Sharing Widget Just Below Blogger Posts". You can add three different social buttons with different background for each button just below of blogger posts.

This buttons contain Twitter tweet buton, Facebook like button as well as Google +1 button. Just follow the steps given below. I hope you like this tutorial.

How To Add Beautiful Social Sharing Widget Below Of Blogger Posts To Blogger?

1. Go to Blogger Dashboard > Template.
2. Backup your Template before making any changes to your blog
3. Click on Edit HTML
4. Tick Expand Widget Templates.
5. Search (Ctrl + F) the code below:

<div class='post-footer-line post-footer-line-1'/>

6. Copy and paste the below code just below/after the above code:

<b:if cond='data:blog.pageType == "item"'>
<style>
.promote_post_bg {
    height: 103px;
    background: url(http://2.bp.blogspot.com/-Nq-msISGJ2w/T_XXNbKwE3I/AAAAAAAAB1g/cfD9cj-Vd44/s1600/sharing-widget.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;
}
 
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;
}
 
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;
}
 
.promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
    <div class='promote_post_bg'>
        <div class='promote_twitter'>
            <a class='twitter-share-button' data-via='' href='https://twitter.com/share'>Tweet</a>
            <script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
            </script>
        </div>
        <div class='promote_facebook'>
       <fb:like expr:href="data:post.canonicalUrl" layout='button_count' send='false'
                show_faces='false' font="verdana" action="like" colorscheme="light"></fb:like>
            <div>
                <b:if cond='data:post.isFirstPost'>
                    <script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                    </script>
                </b:if>
                            </div>
        </div>
        <div class='promote_google'>
            <g:plusone annotation="none" 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>
        </div>
    </div>
<p style="display:none;">Beautiful Social Sharing Widget Below Of Blogger Posts by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p>
</b:if>

7. Now save your template and you are done.

I hope you like this post. Happy Blogging :)

How To Add Multi-Colored Popular Posts Widget For Blogger

2012-07-07T05:31:00.001-07:00

In Blogger, there have popular post widget.It showing the most viewed posts on the blog in the last 7 days, last month or of all time. It also has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets.

Here in this tutorial, you will see how to add the Multi-Colored Popular Posts widget in the Blogger. Remember to follow the procedure step by step carefully so that you will not face any problem and backup Your template before proceeding.

How To Add Multi-Colored Popular Posts Widget To Blogger?

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Tick the Expand Widget Template check box.
3. Find (Ctrl + F) for below code in your template.

/* Variable definitions
   ====================

4. Copy and paste below code just below/after above code.

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
</Group>

5. Now find (Ctrl + F) for ]]></b:skin> tag and add below code just above it:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

6. Next, search (Ctrl + F) for the following code or similar to this

<b:section-contents id='sidebar-right-1'>

7. Paste the following code below it:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
</b:widget>

8. Save your template.

Widget Settings:

Go to Blogger Dashboard > Layout.
Click on the EDIT link of Popular Posts widget.
Select "display up to 5 posts".
Save the widget.

Customise Widgets:

Go to Template > Customise (Template Designer)
Advanced > Popular Posts Background
Now customize the widget as you wish and save your template.

If you are enjoying reading this blog, please like & subscribe for more tutorials.
For any questions or suggestions, leave a comment below.

Do You Like This Story Widget For Blogger

2012-07-06T16:52:00.000-07:00

After sharing many widgets/gadgets today I am going to share an awesome widget/gadget which is nowadays very popular. Do you like this story is a beautiful widget for blogger. It is very helpful to increase your number of subscribers. You can put it at the end of every post. It contains subscription form with twitter and facebook links. It catches the attention of your visitors. Hope all of you like this.

How To Add Do You Like This Story Widget To Blogger?

1. Go to Blogger Dashboard > Template > Edit Html.
2. Check Expand Widgets Box.
3. Search/Find (Ctrl + F) For <data:post.body/> tag
4. Paste below code after/below <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style> 
form.emailform{ 
margin:20px 0 0; 
display:block; 
clear:both; 
} 
.b2wtext{ 
background:url(http://3.bp.blogspot.com/-SoB4RN7Bchk/TZ1ouay9q0I/AAAAAAAAAlE/dkyZEzF2HIw/s28/w2b-mail.png) no-repeat scroll 4px center transparent; 
padding:7px 15px 7px 35px; 
color:#666; 
font-weight:bold; 
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; 
} 
.b2wbutton{ 
color:#666; 
font-weight:bold; 
text-decoration:none; 
padding:6px 15px; 
border:1px solid #D3D3D3; 
cursor: pointer; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
-goog-ms-border-radius: 4px; 
border-radius: 4px; 
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=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 ); 
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); 
}
#doulike-outer { 
-moz-border-radius: 10px 10px 10px 10px; 
-webkit-border-radius: 10px 10px 10px 10px; 
-goog-ms-border-radius: 10px 10px 10px 10px; 
border-radius: 10px; 
background: none repeat scroll 0 0 transparent; 
border: 1px solid #D3D3D3; 
padding: 8px; 
-moz-transition: all 0.3s ease-out; 
-o-transition: all 0.3s ease-out; 
-webkit-transition: all 0.3s ease-out; 
-ms-transition: all 0.3s ease-out; 
transition: all 0.3s ease-out; 
width:480px; 
} 
#doulike-outer:hover{ 
background: none repeat scroll 0 0 #FFF; 
-moz-box-shadow: 1px 1px 2px #CCC inset; 
-webkit-box-shadow: 1px 1px 2px #CCC inset; 
box-shadow: 1px 1px 2px #CCC inset; 
} 
#doulike-outer td{ 
padding:3px 0; 
} 
</style>
<div id='doulike-outer'> 
<div id='doulike'> 
<table width='100%'> 
<tbody> 
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana; color:#FF683F;'>Do you Like this Story..?</span> 
<tr> 
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>
</td>
</tr>
<tr>
<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p> 
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=beautifulbloggerwidgets&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'> 
<input name='uri' type='hidden' value='beautifulbloggerwidgets'/> 
<input name='loc' type='hidden' value='en_US'/> 
<input class='b2wtext' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input alt='' class='b2wbutton' title='' type='submit' value='Submit'/> 
</form> 
</td>

<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Follow us!</p> 
<a href='http://feeds.feedburner.com/beautifulbloggerwidgets' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaXDrh48I/AAAAAAAAAVM/zLmcNtCgi9Y/s40/w2bRSS .png'/></a>
<a href='http://twitter.com/twtusername' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaUf7v0CI/AAAAAAAAAU8/7vfe8Iw3ohc/s40/w2bTwitter.png'/></a>
<a href='http://www.facebook.com/fbusername' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://1.bp.blogspot.com/_nDNgmK8FIyI/TUJaWNBkZnI/AAAAAAAAAVE/nZ0byXaqur8/s40/w2bFaceBook.png'/></a> 
</td>
</tr>
</tbody></table></div></div>
<p style="display:none;">Do you Like This Story Widget For Blogger by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p>
</b:if>

Note:

To change the colour of the "Do you like this story..?" text then simply change #FF683F with a color of your choice.
Replace beautifulbloggerwidgets with your Feedburner username.
Replace fbusername with your Facebook username.
Replace twtusername with your Twitter username.

5. Save your template.

Visit any of your post to see it being displayed just perfectly. This gadget is compatible with all major browsers. I hope you find it helpful.

Happy Blogging =)

Welcome Image "Click To Enter" For Blogger

2012-07-03T00:16:00.000-07:00

Blogs don't have a "home page", main page or "landing page" in the same way that regular web-sites do. But there may be blogs/websites where you want a welcome message or a particular post to appear first whenever someone visits your blog.

Today, I want to share how to make a picture as welcome image. This picture will act as a welcome page/landing page. You can refer this post: Add An Entry Or A Welcome Page To Blogger

How To Add Welcome Image "Click To Enter" To Blogger?

1. Go To Blogger Dashboard > Template > Edit Html.
2. Find (Ctrl + F) </head> tag
3. Copy and paste below code just before/above </head> tag.

<!-- Add jQuery library -->
<script type="text/javascript" src="https://b2wlab.googlecode.com/svn/trunk/fancyBox/lib/jquery-1.7.2.min.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="https://b2wlab.googlecode.com/svn/trunk/fancyBox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="https://b2wlab.googlecode.com/svn/trunk/fancyBox/source/jquery.fancybox.css?v=2.0.6" media="screen" />

<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="https://b2wlab.googlecode.com/svn/trunk/fancyBox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
<script type="text/javascript" src="https://b2wlab.googlecode.com/svn/trunk/fancyBox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>

Note:

If you have previously added jQuery to your blog you can remove this line in the code.

<!-- Add jQuery library -->
<script type="text/javascript" src="https://b2wlab.googlecode.com/svn/trunk/fancyBox/lib/jquery-1.7.2.min.js"></script>

4. Save it.
5. Proceed to Layout.
6. Choose "Add a Gadget".
7. Select HTML/JavaScript.
8. Copy and paste below code inside it:

<a class="b2wimg-a" id="b2wimg" rel="group" href="URL OF IMAGE"></a>

<script type="text/javascript">
 jQuery(document).ready(function() {
  $("#b2wimg").trigger('click');
  });

 $(".b2wimg-a").fancybox({
  closeClick : true,
  closeBtn  : false,
    
   helpers: {
    overlay : {
     opacity : 1.0
    }
   }
  });
</script>

9. Save it and reload your blog.

Note:

Change URL OF IMAGE with your image link.
To change overlay opacity find opacity : 1.0 and change it below 1.
Use this tutorial to show the widget on certain pages.

You can use the images below:

http://4.bp.blogspot.com/-GzXo90yxEEo/Tsc94ZxnJEI/AAAAAAAAACM/LVdDbPrQCmI/s1600/freebieswelcomenoteblue.png

http://1.bp.blogspot.com/-gcvF-ypI8H4/Tsc97ehmlII/AAAAAAAAACU/_ki-rNyKDJA/s1600/freebieswelcomenotepink.png

http://3.bp.blogspot.com/-c4lMfHgPhCA/Tsc9-EVXxpI/AAAAAAAAACc/exoUd_U8PcY/s1600/freebieswelcomenotepurple.png

http://1.bp.blogspot.com/-Fa1_q0tU5qs/TlEJ1Fpu5-I/AAAAAAAACEU/s3INHZ3Zxt8/s400/Welcome+Note+2.png

http://i.imgur.com/VC5pj.png

Picture Credits:

Nurhafizah
Farah Shahirah

Add Cool Social Media Sharing Touch Me Widget For Blogger

2012-06-28T16:15:00.000-07:00

This cool widget calls "Touch Me". Its named such due to its appealing look that forces a visitor to roll hover the cursor over the icons and hit follow! :) This gadget is neatly structured using buttons from popular services like Google Plus, Facebook, Twitter and RSS.

This widget should be working like the picture above or you can see it at demo page.

DEMO HERE

How To Add Cool Social Media Sharing Touch Me Widget To Blogger?

1. Go To Blogger Dashboard > Layout.
2. Choose "Add a Gadget".
3. Select HTML/JavaScript.
4. Copy and paste below code inside it:

<style> 
/*--------B2W Touch Me Sharing Widget ------*/ 
.touchme a { 
display:block; 
height:50px; 
width:50px; 
padding:0 4px; 
float:left; 
background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; 
-webkit-transition: ease-in 0.2s all;    
-moz-transition: ease-in 0.2s all;    
-o-transition: ease-in 0.2s all;    
-ms-transition: ease-in 0.2s all;    
transition: ease-in 0.2s all; 
cursor:pointer;
}

.touchme a.googleplus { 
background-position: 0px -58px;
} 
.touchme a.googleplus:hover { 
background-position: 0px 0px; 
}

.touchme a.twitter { 
background-position: 0px -290px;
} 
.touchme a.twitter:hover { 
background-position: 0px -232px;
} 
.touchme a.facebook { 
background-position: 0px -406px;
} 
.touchme a.facebook:hover { 
background-position: 0px -348px;
}

.touchme a.rss { 
background-position: 0px -174px;
} 
.touchme a.rss:hover { 
background-position: 0px -116px;
}

</style>
<p style="display:none;">Cool Social Media Sharing Touch Me Widget by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p>
<div class='touchme'>
<!--RSS--> 
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> 
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='nofollow' target='_blank'></a>
<!--Facebook--> 
<a class='facebook' href="YOUR FACEBOOK LINK" rel='nofollow' target='_blank'></a>
<!-- Twitter --> 
<a class='twitter' href="YOUR TWITTER LINK" rel='nofollow' target='_blank' ></a>
</div>

Note:

Replace YOUR RSS LINK with your Feed burner link.
Replace YOUR GOOGLE PROFILE LINK with your Google+ URL
Replace YOUR FACEBOOK LINK with your Facebook URL
Replace YOUR TWITTER LINK with your Twitter Profile URL

5. Save it and you are done.

Thanks to MyBloggerTricks for this code.

Have a nice day. Do not forget to share and comment. =)

How To Reduce Page Loading Time in Blogger By Adding JQuery Lazy Load Plugin

2012-06-19T02:55:00.001-07:00

This post will explain to you how to add JQuery Lazy Load Plugin to your blogger blog or any other website easily. If you have a blog or website containing many images, this tricks will be very helpful to you. It can reduce the page loading time of your site. You can see more details about this JQuery Lazy Load Plugin.

Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

How To Reduce Page Loading Time in Blogger By Adding JQuery Lazy Load Plugin?

1. Go to your Blogger Dashboard > Template > Edit HTML.

2. Search (Ctrl + F) for </head> tag.

3. Copy below code and paste it just before/above the </head> tag.

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://beautifulbloggerwidgets.googlecode.com/files/lazyload-min.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;http://beautifulbloggerwidgets.googlecode.com/files/grey.gif&quot;,threshold : 200});
});
</script>

4. Now save your template and you are done. Refresh your site to see the result.

Stop Your Articles From Being Stolen/Copied With Simple CSS

2012-06-17T07:05:00.000-07:00

You can't prevent others from stealing your copyrighted content off your web site because the very fact that it can be viewed in a browser enables others to steal it. Just imagine that you are working hard in creating articles and someone just copy and paste your content on their website without adding any credit link, then how would you feel?

However, there are steps you can take to stop this scam. You just have to put a little snippet of CSS code in your template which will prevent users to copy text from your articles and I hope this small trick will surely help you to prevent your articles from republishing/redistributing on other websites.

How To Stop Your Articles From Being Stolen/Copied With Simple CSS?

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Find (Ctrl + F) below code in your template:

]]></b:skin>

3. Copy and paste below code just above/before it.

.post-body {
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}

4. Save your template.

That's all. Hope you all like it.
Follow my blog to get more tips and tricks.. :)

Auto Read More With Thumbnail For Blogger

2012-06-14T08:22:00.000-07:00

Expandable post or popularly known as "Read More" is a feature that make your blog shows only a part of your posts on index pages i.e. home, labels and archive pages. At the end of each preview there will be a link to the post page, usually attached to the phrase "Read More".

Auto read more functions automatically shorten your post and create a thumbnail of an image which is present in the post. It also helps to load page faster. It also shows and image thumbnails which helps to attract the readers. I have also added the auto read more to my blog. Automatic read more for blogger with thumbnail posts can be done by inputting some code into your blog templates.

How To Add Auto Read More With Thumbnail To Blogger?

1. Go to Blogger Dashboard > Template > Edit HTML.
2. Check "Expand Widget Templates".
3. Find (Ctrl + F) </head> tag
4. Copy and paste below code just before/above </head> tag.

<!-- B2W Auto Read More Script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- B2W Auto Read More Script End -->

Note: You can customize the read more by changing the values of the variables below:

thumbnail_mode – set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
summary_img – specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
summary_noimg – specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).

5. Now find (Ctrl + F) <data:post.body/> and replace it with below code.

<!-- B2W Auto Read More Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- B2W Auto Read More End -->

Note: You can change the words "Read More >>" with your own by changing it in the code.

6. Now save it.

That's it, enjoy! If it doesn't works for you then mention it in comments. I'll glad to help you.

Add Social Media Sharing Buttons Below Post Title

2012-06-11T15:59:00.000-07:00

Social Networking Sites Like Facebook, Twitter, Google Plus, Digg are the great traffic source for every blog. So we need to thing more about social media. You have seen it on many blogs they used sharing buttons below each post title. Here i am designed popular buttons for your blog. Its easy and simple. Just follows these simple steps.

How To Add Social Media Sharing Buttons Below Post Title?

1. Go to Blogger > Template > Edit Html.
2. Back up your Template.
3. Expand Widget Templates.
4. Search for <div class='post-header-line-1'/>
5. Paste the following code just below it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='padding:4px;'>
<table border='0'><tbody><tr>

<td>
<div style='margin-right:5px;'>
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</td>


<td>
<div style='margin-right:5px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; margin-left:0px; width:100px; height:20px;'/>
</div>
</td>


<td>
<div style='margin-right:5px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</td>


<td>
<div style='margin-right:5px;'>
<a expr:href="&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
</div>
</td>


<td>
<div style='margin-right:5px;'>
<script type="text/javascript">

(function() {

var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

s.type = 'text/javascript';

s.async = true;

s.src = 'http://widgets.digg.com/buttons.js';

s1.parentNode.insertBefore(s, s1);

})();

</script>
<a class='DiggThisButton  DiggCompact' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title'></a>
</div>
</td>

</tr></tbody></table>
</div>
</b:if>

6. Save your template.

Hope you liked this article. Thanks for reading. Now, visit your blogs and see it appearing only on post pages and not the homepage.

Cool CSS3 Drop Down Menu For Blogger

2012-06-10T09:54:00.000-07:00

Adding beautiful drop down menu helps to increase the beauty of your blog. By adding the drop down menu your readers or visitors can easily navigate through your blog.This amazing menu is designed by Catlin Rosu. It is really cool and professional widget for your blog which will really change the appearance of your blog and make it trendy and attractive. It is very easily integrated in your blog.

This widget is simple, supercool and the main part is that it doesn’t needs any jQuery or JavaScript. It uses no images at all and loads extremely fast.

How To Add Cool CSS3 Drop Down Menu To Blogger?

You just need to copy and paste the code.Now lets see how to add this drop down menu to blogger.

1. Go To Blogger Dashboard > Layout
2. Click on "Add a Gadget"
3. Choose HTML/Javascript widget
4. Paste the following code inside it:

<style>
/*------ CSS3 Drop Down Menu By B2W (beautifulbloggerwidgets.blogspot.com)---------*/
#b2w-menu, #b2w-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#b2w-menu {
width: 100%;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#b2w-menu:before,
#b2w-menu:after {
content: "";
display: table;
}
#b2w-menu:after {
clear: both;
}
#b2w-menu {
zoom:1;
}
#b2w-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#b2w-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#b2w-menu li:hover > a {
color: #fafafa;
}
*html #b2w-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#b2w-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#b2w-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#b2w-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#b2w-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#b2w-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#b2w-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#b2w-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#b2w-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#b2w-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#b2w-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#b2w-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#b2w-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#b2w-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="b2w-menu"> 
<li><a href="#">Home</a></li> 
<li> 
<a href="#">Categories</a> 
<ul> 
<li><a href="#">CSS</a></li> 
<li><a href="#">Graphic design</a></li> 
<li><a href="#">Development tools</a></li> 
<li><a href="#">Web design</a></li> 
</ul> 
</li> 
<li><a href="#">Work</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
<li><a href="http://beautifulbloggerwidgets.blogspot.com/">Create This »</a></li> 
</ul>

5. Save it and Done!

For any further help please feel free to post your queries in the comment box below.

Don't forget to subscribe our rss feed.

Beautiful Blogger Widgets

How to Keep Your Blog Grows When You Are Too Busy?

I'm Not Sick, Just Busy

Adding SCM Music Player To Run Audio On Your Blog

How To Add About Author Box Below Each Post In Blogger

Create A Simple Spoiler Or Show-Hide Effect

Add Print Friendly Button to Blogger

Add 3D Social Buttons With Rotate Spin Effect To Blogger

Add Floating Follow and Dashboard Button Like Tumblr In Blogger

How to Add Different Meta Tags to Different Blog Posts in Blogger

Add Google +1 Button To Blogger

How To Change the Text Selection Color In Blogger

Add Pinterest Pin It Button With Counter To Blogger

Add Twitter Tweet Button To Blogger

Add Facebook Like Button To Blogger

Add Beautiful Social Sharing Widget Below Blogger Posts

How To Add Multi-Colored Popular Posts Widget For Blogger

Do You Like This Story Widget For Blogger

Welcome Image "Click To Enter" For Blogger

Add Cool Social Media Sharing Touch Me Widget For Blogger

How To Reduce Page Loading Time in Blogger By Adding JQuery Lazy Load Plugin

Stop Your Articles From Being Stolen/Copied With Simple CSS

Auto Read More With Thumbnail For Blogger

Related Posts Widget For Blogger With Thumbnails

Add Social Media Sharing Buttons Below Post Title

Cool CSS3 Drop Down Menu For Blogger