Auto Share Your Blog Posts To Facebook Timeline

While you are a part time blogger, then the biggest problem is time. While we blog, we need to write good articles which needs much time. But still we can manage to do, but after posting on your blog and again on social networks is very big deal. So to make it easy I am going to introduce an application that posts all your blog posts onto your Facebook Timeline and your fan page's timeline. Using this saves most of the time. While you publish your post on your blog, the app publishes a link to the post you have published. And we all know how publishing links on our blog's fan page affects the traffic. So to make our work convenient lets get on to RSS Graffiti.

What is RSS Graffiti?

RSS Graffiti is an app on Facebook, this is a free application that posts all your blog posts to your Facebook Fan Page's timeline and your profile timeline. Not only your blog posts but also your Twitter Updates, YouTube Videos and many other. You can use RSS Graffiti absolutely free without any limitations. This is simple and very effective. 

Why should you use RSS Graffiti?

As I have explained the need of time at the starting, this application simply posts all out updates on our timeline which was a really boring manual work and not only boring but also time taking. So RSS Graffiti saves time. Nothing in this world is free, but RSS Graffiti is. You are free to use this super cool app for free. 

How to use RSS Graffiti?

There is nothing to do in this case. This is an application that does not make your work easy but does not give you work at all. This app is automatic, all the work is done by the app.

How to setup RSS Graffiti?

There is nothing great about setting the app, you may just go to the app page and follow the instructions. 

Read More

Static Follow By Email Pop Out Widget For Blogger

Presenting Static Follow By Email Pop Out Widget. This widget works with jQuery and other scripts. It has a function to slide out/ pop out on click. You will have a Heading, some text and follow by email widget. These all will slide out when you will click on a button. This is simple, you can easily edit the- Heading, Text etc. We will be adding this widget with a simple code. This widget is simple but with the slide out effect your blog gets more space and this will not look normally like your other subscription widgets. So lets get this-

How To Add Static Follow By Email Widget To Blogger?

Just follow the simple steps below-

1. Go to your blog.

2. Jump to "LAYOUT"

3. Add a new "HTML/JAVASCRIPT" gadget.(Anywhere in the corner) 

4. Paste the following code in the "EDITOR"-

<style type="text/css">
/*<![CDATA[*/
    #w2bfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
    .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
    .w2bfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
    .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLnDJDItPekEmtXskhr7j-oM1LWAFeSVrUD69f03YEkDD0bmfYcdO90Ol2aOmjCtLCWvaemdFPxnWZ7BAErxU4ZwnIwVqsdAW2P1P_aw6bItl8oq2Wyuv4XXyyrYqwL12lIm-tAhASWQdp/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
    .w2bfollowButton:hover,.followActive {color: #fff !important;}
    .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
    .followactive {background-color: #333;}
    .w2bfollowForm {padding: 15px;}
    .w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
    .w2bfollowForm p {margin: 0 0 10px;}
    .w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
    .w2bfollowForm form {text-align: center;}
    .w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}
    .w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
    .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
    .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
    .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
    .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
    .w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="w2bfollowSubscribe" style="display:none;">
    <div class="w2bfollowForm">
        <a class="w2bfollowButton" href="#" title="Follow"><span>Follow</span></a>
        <h3>Via Email</h3>
        <p>Get in touch with Blogger Tricks Hut via email.</p>
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrickshut', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
            <input type="hidden" value="BloggerTricksHut" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input type="submit" value="Subscribe" class="emailSubmit"/>
        </form>
        <p class="w2bFollowFooter">
            <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
        </p>
    </div>
</div>

Read More

Pinterest Buttons With Counters For Blogger

The Pinterst now became the social media network of 2012 with more than 10.4 million registered users and 50 million blog posts. Daily Pinterest users have increased by over 145 percent from the beginning of 2012. This is a new networking site but is emerging amongst the existing popular social network giants like - Facebook, Twitter, Google Plus and LinkedIn. So now the task comes grabbing traffic to our blog from Pinterest. As other sites, Pinterest provides a button called "Pin It". These buttons help in increasing the traffic, similar to the buttons like - "Share", "Like" and "Tweet". So lets start our work on adding these buttons to our blog. 

How To Add Pinterest Buttons To Blogger?

1. Go To "BLOGGER" > "TEMPLATE".

2. Backup your template.

3. Click on "EDIT HTML"

4. Click "PROCEED"

5. Check the "EXPAND WIDGET TEMPLATES" box

6. Search for this code :

<data:post.body/> 

Now if you want to add the button, below your post titles then paste the codes provided just before/above the above code(<data:post.body/>). If you wish to add the button below your post then paste the provided codes just below/after the above(<data:post.body/>) code.

Horizontal Count

 <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It Now!</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; 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(&#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>

Vertical count 

<a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It now!</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(&#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>

Today you have learned to add a pinterest button to your blog and how to promote your blog with it. We will be posting more such posts on pinterest and others. Stay tuned to blogger tricks hut. Don't forget to pin this post. 

Read More

PunchTab - Make Your Readers Come Again And Again

This is a company which rewards your readers for visiting your blog, liking your blog's page or tweeting or +1ing about your blog. Users can unlock badges for doing these activities. Users also win points for liking, tweeting, visiting, +1ing and commenting. This makes your readers visit your blog again and again inorder to gain more points and badges. Your readers will have a good competition in earning points. They can redeem their points, whenever they reach a particular stage with some good amount of points. This ofcourse promotes your blog and for promoting your blog, your readers get their   rewards.So lets install Punch Tab on our blogs.

How to install Punch Tab on Blogger?

1. Go to PunchTab and register.
2. Login to your account.
3. You will be taken to your dashboard.
4. Click on achievement program(on the main menu).
5. Choose a platform.(Click on the blogger icon).
6. Choose the position of Badges on your blog.
7. Then click on Install Achievement Program button.
8. Now install its widget on your blog.a
9. After you install the widget, you will see the badges on your blog.
10. Click on the badges banner, and register through facebook.
11. You are ready to earn points.


So today we have learned what is PunchTab and how to install it on your blog.
In future we will go more on it. Till then keep attached to Blogger Tricks Hut. Happy Blogging. Don't forget to subscribe and share.(To earn points :) )

Read More

Slide Out Egg Bookmarking Gadget For Blogger

Presenting a cute egg shaped fixed position on hover slide open bookmarking gadget for your blog. This is a normal bookmarking gadget but is dressed-up in a cute way. This stays at a fixed position on your blog. This contains Facebook, Twitter, Google +, Blogger, LinkedIn, Stumble Upon, Email buttons and the Share This Icon Offers hundreds more bookmarking choices. This widget is created by Paul Crowe. First you must check out the screenshot before you add this cute gadget to your blog. I have a tutorial below specially made for you for adding this widget to your blog. So lets go on to the tutorial

How to add slide out egg bookmarking gadget to blogger?

1. Go to "TEMPLATE" and click on "EDIT HTML".

2. In the "HTML EDITOR" find(CTRL+F) for </head> 

3. Just before/above </head> paste the following code:

<!-- Start Heart Bookmarking Gadget Code From http://bloggertrickshut.blogspot.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Heart Bookmarking Gadget Code From http://bloggertrickshut.blogspot.com/ -->

4. Now find for </body> (Use CTRL+F to find codes)
5. Just before/above </body> paste the following code:

<!-- Start Heart Share Code From http://bloggertrickshut.blogspot.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://bloggertrickshut.blogspot.com/ ">Blogger Widgets</a><!-- End Heart Share Code From http://bloggertrickshut.blogspot.com/ -->

Customizing the position of the gadget/widget!

This is an easy customizable widget. You don't need to customize any big thing in this widget/gadget. Just you need to change the position of the widget. Well, it is optional because if the position fits your blog you may continue without customizing the position. So all just you need is to change the highlighted text in the above code. The code says: bottom: 2% and left:2%. This means the widget will float 2% away from the bottom and left. You can change those percents to change the position of your widget. 

After all, we have added a new cute sharing widget to our blog. I will be posting many other coll and cute bookmarking gadgets and more. Don't forget to subscribe to Blogger Tricks Hut. Happy Blogging. Comments are welcome. 

Read More

Custom 404 Page Designs For Blogger

After the introduction of the option for Custom 404 Page for blogs, now we can easily create a beautiful 404 page. First, the 404 message was displayed in an ugly type. It says "The page you are searching for on "Blogger Tricks Hut" does not exist" or something like that. It was really boring and was looking very ugly. So as Blogger has gifted us an option by which we can now create custom page not found error with images, animations and many more. So today we will be learning how to create a rocking 404 error page, for your blogger blog. This is only for Blogger's New Interface, don't worry every old blogger interface has changed to the new one by default. So lets learn and enjoy.

How  to use custom 404 Pages?

Follow these simple steps:

1. Go to settings > Search Preferences

2. In the Errors and redirection, Edit the Custom Page Not Found option.

3. Now simply copy any design code you liked and paste it there.( Codes are provided below the images)

4. Go to "TEMPLATE" > "EDIT HTML" and paste the following code just below/after <head> tag:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>You've ripped a hole in the fabric of the internet. </title>
</b:if>

You can replace the

You've ripped a hole in the fabric of the internet.

text with any text of your wish.

Codes:

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRMldgvQlNgSSgdrmQaWIQ0N3peFPneyZV2DA4krfbNNu11flaEvGd-FnVsnBbS1thrFR-KB-mEnv4UBzD6KVZ-z2Po0qY5v2m3pYsfE_YFOdDUjLCvILhSjNucCz6zQl-VmTgG1z9MYso/s1600/13.gif')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

 

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn9HoA-MypNp8p0YOurHClxdIYSDnZgZ8JOC-BZ6_RESQcHAowsedDs7xIJnPsTsGbloxs45bhgGN6VrqZNFoNKZy3KGC2K31F5zrrDzz7v5uYkdCqsjdp3W3TOaelmriG6AFyyoHPlmbC/s1600/12.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXKZzvqTK3PLXxS_Fa-C5xyHDTC5MKvajGhO5sO12FLdg7s4t7xjN70Orf9jc5PVMxK1Brm9KI2wSfflt7cvUpQ-Qty9fYpR6SFNMzhTeTG9qjf-rj15cf-XRXJLX_bVgLYsdHcZm9e-O/s1600/20.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEVu0-M1MEF6oPQXDAMpO86fqkS9RpWTK_QifKjCdhPOgLqXvBSOrLe1JOAJSKiJEErgn5VcIGvaD_pssb5gma-bds-Vv47UgyKTynPqJTzJVTiu0UffjpszAepykVNoLlc886tE2DuT8R/s1600/27.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN9_Q6qH3GC2HGlVBAdCHRfwDbCT7Ym2kG_pldIqxoJ0OQnpe0AoL3xDP4SK4dV7DPDyhdYbdyuT9mcLKZEOBSWL_0LKhVczAuvuTlErgfhzrVVyzViVPtGeYAbMxFOnF8FvhZ9Uh6fdj1/s1600/3.PNG')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

So here are some designs for you, to make your 404 page beautiful. Here I have posted only some selected design codes. You can get a wide range from a post here. So today you have designed your 404 error page perfectly. I will be posting more updates and information about blogger and also some animated 404 error page designs. Till then stay tuned to Blogger Tricks Hut by subscribing us. Happy Blogging!

Read More

Customize The Author Profile Widget In Blogger

Now you can easily customize your "Author Profile Gadget" Most of the blogs use the default style author profile and it is the only choice you have? No, you can style your author profile by editing some codes of your template. You can change the fonts, text color, add backgrounds, add borders and many more. We will add some CSS to style this widget we will also add mouse hover effects to this, let's make this possible. Just follow the simple steps and you will have cool author profile widget designed by your self in your style. So let's start working on it.

 

How to customize Author Profile Using CSS?

Just follow these steps and your profile widget will be done!

1. Go to blogger and jump to "TEMPLATES".  

2. Remember to backup your template!

3. Click on "EDIT HTML".

4. Now search for ]]></b:skin> (CTRL+F).

5. Just before/above ]]></b:skin> paste this code:

.profile-img {
  float: left;
  margin: 0 5px 5px 0;
  padding: 4px;
  border:3px solid #289728;
}
.profile-img:hover {
  border:3px dashed #3B3A3B;
}
.profile-data {
  margin:0 10px 20px 10px;
  padding:0;
  font: bold 10pt "ms sans serif", verdana,Arial;
  color:#289728;
  line-height: 1.6em;
  text-align:left;
  text-transform:lowercase;
}
.profile-data:hover {
  color:#3B3A3B; }
.profile-datablock {
  margin:.5em 0 .5em;
}

.profile-datablock:hover {
  background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXjCLuCfBGwNm-elOYNWRWRkSEZZRkUkpMzKmqqkMhKdEdTb7_sAk8NWqHgQmlTpyyu9Crj56WCN9ZJaiwccHXH9yqWR3QgJvO6Uc9gcSnN3Rj_GMirXXaKaOqqR43YMmL0QNOgxf00sw/s320/admin.png) no-repeat bottom right ;
}

.profile-textblock {
  color:#333;
  margin: 0.5em 0;
  line-height: 1.6em;
  padding:5px 0 5px 0;
  border-top:2px solid #289728;
  border-bottom:2px solid #289728; }

.profile-link {
display:none;
}

Customizing the widget!

Just follow the simple steps carefully to get your widget as you like!

1. Customizing the border!  

border:3px solid #289728;

lets explain what stands for what to make you understand what you are doing.

"border: 3px" in this the "3px" is the width of the border. Change the "3px" to any width you wish, like - 4px, 5px etc. remember that customize it as per your needs making, something bigger or smaller may effect the look of this widget!

2. Customizing the border hover effect!

 border:3px dashed #3B3A3B;

This is the border on hover effect. You can change the border width "3px" to any width you want, this is the effect on mouse over so if you keep "3px" is the code in step 1 and change the width to "4px" in step 2, the border width will change from "3px" to "4px" on mouse hover. You may have observed the "dashed" word, this indicates the type of border, in first step we had this as "solid", and in second step if we have this as "dashed", the image border will change from simple plain border to dashed border. And the last and important, change the #3B3A3B to the border color you want to set, you can find color codes on the web!

3. Customizing author name style!

color:#289728;

text-transform:lowercase;

color:#3B3A3B;

these are the styles of the author name on the widget, to customize this just change the following:

• color:#289728; Change #289728 to the color you want!
• color:#3B3A3B; Change #3B3A3B to the color you want!

That's it now you have a customized author profile widget on your blog. Make sure that you have added a author profile widget through "LAYOUT". Happy Blogging!

 

Read More

Flash Animated Label Cloud Widget For Blogger

Presenting the Flash Animated Label Cloud Widget for blogger. This is a fully flash widget with wonderful effects. This is a easy customizable widget and automatically extracts labels from your blog. This has been a very popular plugin at WordPress. Your blog will surely get a good look with this tutorial. So in this post you will learn how to add this super cool widget to blogger blogs and customize it as per your needs. So lets get on to the tutorial!


DEMO

How to add this widget to blogger?

1. Sign into your blogger account.

2. Go to your blog and jump to "LAYOUT".

3. From there add a "HTML/JAVASCRIPT" gadget.

4. In the "HTML COMPOSER" paste the below code:-

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://BLOGGERTRICKSHUT.BLOGSPOT.COM/">BLOGGER TRICKS</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
    blogurl        : "HTTP://BLOGGERTRICKSHUT.BLOGSPOT.COM",
    color          : "000000",
    hoverColor     : "333333",
    backgroundColor: "FFFFFF",
    size           : 15,
    speed          : 100,
    width          : 250,
    height         : 250,
    transparency   : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_new_flash_label_cloud.js"></script>

How to customize this widget? 

As mentioned above this widget is an easy customizable widget, just fellow the simple steps to make this widget suit your blog. Just understand the simple words to be changed!

1. Change our blog url to yours(if you won't do it, labels will be extracted from

    our blog not yours).

2. In the label color- change the code 000000 to the color your want.

3. Change the hover color 333333 to the color you want.

4. Change background color FFFFFF to the color you want.

5. Change size 15 to the text size suiting your blog's sidebar links.

6. Change the height(250) and width(250) to the height and width your

    sidebar suits. 

That's it you have successfully added a super cool label cloud to your blog. Keep blogging. Don't forget to share. Bye!

 

Read More