ADD BEAUTIFUL/STYLISH /AWESOME LABELS WIDGET IN BLOGGER

In this tutorial you will see how to customize blogger labels with CSS3. The default Label gadget provided by Blogger has some customization options but doesn't provide much control over the Design aspect. We will apply this hack using pure CSS3 .This stylish labels widget really attract your readers.

LABELS WIDGET DEMO

Live Demo

HOW TO CUSTOMIZE BLOGGER LABELS

• First you have to edit some settings on your widget as shown below and then save the widget

• Now click on Add to blogger button shown below

Read more

ADD CSS3 SPINNING SOCIAL SHARING ICONS TO BLOGGER

This tutorial will show you How To Add CSS3 Spinning Social Sharing Icons To Blogger. This widget is based on CSS3 such as -moz-transform which converts spinning effect to social sharing buttons. There are three types of Spinning codes provided, whenever a readers moser over on these buttons rotates in the directions like left side, right side, slight round and surprise them with their spinning effect method. By adding this widget to blogs surely convets readers/visitor to loyal subscriber, let's begin the tutorials.

SPINNING SOCIAL SHARING ICONSDEMO

You will see demo by clicking on widget generator shown below

HOW TO ADD CSS3 SPINNING SOCIAL SHARING ICONS IN BLOGGER

• Click on widget Widget Generator button shown below
• Customize the Settings as you need
• Then click on Generate button then finaly click on Add To Blogger button

Widget Generator

Read more

COOL/AWESOME/BEAUTIFUL/STYLISH JQUERY POPUP FACEBOOK LIKE BOX WITH EMAIL SUBSCRIPTION BOX FOR BLOGGER

In this tutorial i have created a Cute jQuery Popup Facebook Like Box with email subscription box. As soon as new visitors arrive your blog the popup will be showed to your visitors which can help you to increase likes. Now i will show you How to Add Cute/Cool/Awesome jQuery Popup Facebook Like Box with email subscription box in blogger.

POP-UP FACEBOOK LIKE BOX DEMO

Live Demo

HOW TO ADD THIS IN BLOGGER

• First Find Your Facebook Fan Page ID From HERE
• Now Click on Widget Generator button shown below
• Customize the Settings as you need
• Then click on Customize button then finaly click on Add To Blogger button

Widget Generator

Read more

ADD ANOTHER DIFFERENT/MULTICOLORED POPULAR POST WIDGET V3 IN BLOGGER

This tutorial will show you How To Add Different/Multi Colored Popular Post Widget In blogger.This widget is same as the previous one multicolored widget but it look different.

MULTICOLORED POPULARPOST WIDGET PREVIEW

HOW TO ADD DIFFERENT/MULTI COLORED POPULAR POST WIDGET TO BLOGGER

• Go to Blogger Dashboard --> Template --> Edit HTML --> Proceed
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + F and search the code shown below
• Now Find the code shown below using [ctrl+F]

]]></b:skin>

• Now Paste the Code Shown Below just above/before it

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

• Now save your template
•  Now Go to Blogger Dashboard --> Layout --> Add a Gadget --> Popular Posts
• Select "display up to 9 posts" and uncheck image thumbnail and snippet
• Now Save the widget

Read more

ADD FACEBOOK LIKE BOX BELOW EVERY POST IN BLOGGER

Facebook like box is a social plugin that allow page owner to get more like directly from their blog/site with a one click without leaving their site. These Facebook likes are representing the reputation and readership of each and every blog by showing the number of likes of that particular blog. So now we will be adding a like box below every post on blogger so that whenever a visitor views your post he will see that like box and will become your page fan.

HOW TO ADD FACEBOOK LIKE BOX TO BLOGGER POSTS

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Find the code shown below using [ctrl+F]

<data:post.body/>

• Now Paste the Code shown below just below it

<b:if cond='data:blog.pageType == &quot;item&quot;'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flatesthacking&amp;width=580&amp;height=180&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:580px; height:180px;" allowTransparency="true"></iframe></b:if>

• Now replace latesthacking with your facebook username and change width 580 and height 180 according to your template

FACEBOOK LIKE BOX DEMO

Read more

ADD FACEBOOK LIKE AND TWITTER FOLLOW BUTTON BELOW EVERY POST IN BLOGGER

This tutorial will show you How To Add Facebook Like and Twitter Follow Button Below Post In Blogger. This widget will help you in increasing your blog's facebook likes and twitter tweets and this is what your blog's need.

HOW TO ADD FACEBOOK LIKE AND TWITTER FOLLOW BUTTON TO BLOGGER

• Go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Find the code shown below using [ctrl+F]

<data:post.body/>

OR

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

• Now Paste the Code shown below just before/above it

<div style="margin:5px 0px 10px 0px; padding:10px; width:590px;float:none; ">
<div style="float:left; width:272px; border-right:1px solid #ddd;">
<iframe allowtransparency="true" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flatesthacking&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false&amp;height=62" style="border:none; overflow:hidden; width:292px; height:62px;" frameborder="0" scrolling="no"></iframe>
</div>
<div style="margin:15px 15px 0px 0px; padding:0px; float:right; width:260px;">
<iframe title="Twitter Follow Button" style="width: 266px; height: 32px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=latesthack&amp;show_count=true&amp;show_screen_name=true&amp;size=l" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
</div>

• Replace latesthacking with your facebook username and latesthack with your twitter username

FACEBOOK LIKE AND TWITTER FOLLOW BUTTON DEMO

Read more

HOW TO CUSTOMIZE FEEDBURNER BUZZBOOST WIDGET

Feedburner buzzboost widget is used to display recent comments or recents posts of your blog. I have already shared How to add feedburner recent posts widget to blogger,which comes with a default bullet list, and this time i am sharing a simple CSS trick which you can use to decorate/customize your buzzboost widget.

HOW TO CUSTOMIZE FEEDBURNER BUZZBOOST WIDGET WITH CSS

• Go to Blogger Dashboard --> Layout
• Find your Buzzboost widget and add below piece of code just above of the code which is already present.

<style>
.feedburnerFeedBlock ul li {background: #e42b2b;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border: 0 none !important;-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;
}
.feedburnerFeedBlock ul li:hover {
 -webkit-border-top-left-radius:27px;-webkit-border-bottom-right-radius:27px;-moz-border-radius-topleft:27px;-moz-border-radius-bottomright:27px;border-top-left-radius:27px;border-bottom-right-radius:27px;
}
.feedburnerFeedBlock ul li a{
color:#ffffff;
text-decoration:none;
}
#creditfooter{
display:none;
}
</style>

Read more

ADD FLOATING FOLLOW BUTTON LIKE TUMBLR IN BLOGGER

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 Like Tumblr widget.

FLOATING FOLLOW BUTTON DEMO

Live Demo

HOW TO ADD FLOATING FOLLOW BUTTON LIKE TUMBLR IN BLOGGER

• Go to Blogger Dashboard --> Layout --> Add A Gadget
• Select HTML/Javascript and paste the code shown below in it

 <div style="position: fixed; top: 5px; right: 95px;">
<a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=XXXXX" 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>

• Replace XXXXX with your blog ID .

• Now save the  Gadget

That's it !! It's an awesome widget to make your reader's follow you 

Read more

HOW TO INSTALL INTENSEDEBATE COMMENT SYSTEM/COMMENTLUV ON BLOGGER

One of the major drawbacks of blogger platform is that the Commenting System is very poor in terms of functionality as compared to WordPress. IntenseDebate is the premier commenting system which can be used in place of the default Blogger commenting system. Blogger Team improving thecommenting system day by the day with features like Threaded Comments being introduced but still it lacks some features.IntenseDebate is the premier commenting system which enhances and encourages conversation on your blog or website. With IntenseDebate you can give your blog readers the opportunity to better engage your blog’s content and each other. IntenseDebate is one of the featured commenting system and it works on several blogging platforms like Blogger or WordPress. I'm sure many of you might have seen the CommentLuv plugin on Wordpress blogs which allows a blogs readers to comment with the option to include their latest post from their blog at the bottom of the comment. This is a great initiative to readers as they get a link back to their website and thus, actively participate in the discussions. In a way, it is to encourage and also as a reward to commentators who took their time to comment on one's blog. CommentLuv rewards your readers and helps to discover new and interesting posts by automatically adding a dofollow title link in the comments

FEATURES OF INTENSEDEBATE:

IntenseDebate is one of the most popular feature-rich comment system for WordPress, Blogger, Tumblr and many other blogging/CMS platforms. With IntenseDebate,you can do many things than your default comment system.These are some main features of IntenseDebate comments.

• Commentluv
• Comment Threading.
• Reply-By-Email.
• Email Notifications.
• Commenter Profiles.
• Moderation/Blacklisting.
• Reputation Points & Comment Voting.
• Plugins API.
• OpenID.
• Widgets.
• Twitter Connect.
• Facebook Connect.
• RSS Readers & Tracking.

HOW TO INSTALL INTENSEDEBATE COMMENT SYSTEM IN BLOGGER

• Go to Intensedebate and Sign Up or Login If You Already Done
• If you have a new intensedebate account click on Extras Option shown in the menu and Then Select Install IntenseDebate Option
  
  
  OR
  
  You have already intensedebate account, then select Sites option and then select Add blog/site option in the menu shown at the top
• Now enter the URL of your blog and proceed further
• Then Click On Blogger Platform to Continue
• Now you will be asked to upload the template of your blog. To do so you will need  Go to Template tab in your blog , If You Don't Know How to Do This See Screen Shot Below.

• Then a popup will appear then click on Download full template and then save your template and then click on browse button and select your template and then click onUpload File And Continue
• Now copy the entire code and go to Blogger Dashboard --> Design --> Edit HTML
• Backup your Template before making any changes to your blog
• Now  Expand Widget Templates
• Press Ctrl + A and delete all the codes
• Now paste the code which you have copied it from intensedebate and save your template

HOW TO ACTIVATE COMMENTLUV PLUGIN IN INTENSEDEBATE

This is one of the biggest reason why people shift to Intense Debate . It allows installing custom plugins in the Commenting system itself. The most used one is the Comment Luv plugin . Other plugins  like ReTweet button for each comment and PollDaddy polls are also available.

• Now go to Intense debate dashbord and Click on plugins tab shown at left side.
• Scroll down until you find 'CommentLuv' plugin and then Click on Activate.

• Now you've successfully added CommentLuv on your Blogger Blogspot Blog.

Read more