How To Add Categories Section To Blogger Blog

Blogger Blog does not support categories but has only comes with labels, In this tutorial  i will show you how to manually create categories in Blogger blog. Category is a very important section of any blog or website, because with the help of categories people can easily find what they are looking for. Now we would manually create category section in blogger from labels, This tutorial is aimed at beginner bloggers, Let me explain how to add category section in blogger blog.

» Awesome Facebook Like Box with Hover Effect for Blogger (No Coading Needed)

The first and easiest way to create categories section in Blogger is to rename the section of labels widget as categories. Of-course this is not the appropriate solution for a blog in which there are huge number of labels. An easy way round this problem is create a separate categories section.

• Adding categories section to a Blogger blog involves following steps :

1. First of all you have to decide how you want to group your articles, according to the labels applied, and what group heading you want to give to each grouping of articles.

2. Navigate individual page of the label for first category which you want to use by clicking on the label in side bar. Copy URL address of this page. For example the URL address of the label of Blogger Widget on my site is :

http://things-guide.blogspot.in/search/label/Blogger%20Widget

3. Now go to Dashboard > Layout > Add a Gadget > Link List

5. Enter "Categories" as the title

6. In the Configure Link List dialog box, paste the link of the label you've copied from the address bar to  Site URL

7. Enter the name of your Category

7. Click on Add Link to add the link to your new categories list.

8. For every label you wish to put into the Categories Section copy the link and add it to the Configure Links List. By the end you will end up with two or more categories in your list

9. Use the arrow keys to each link to move them according to your choice where you want to place them.

• Limit the number of posts :

You can also Limit the Number of Posts Displayed in the Categories Section. For this you will need to adjust the URL's of each label as follows :

From :

http://yoursite.blogspot.com/search/label/CategoryName

To :

http://yoursite.blogspot.com/search/label/CategoryName?max-results=max number of posts to display

Change the value of max results to number of posts you want to display, for example max-results=20

I hope this Tutorial of manually adding categories using the Link List widget into blogger blog would of great importance to you.

» Awesome Facebook Like Box with Hover Effect for Blogger (No Coading Needed)

How to Add Facebook Like Box into Blogger Blog

Facebook fan Page are a great way to promote your blog or website and facebook like box is widely used social plugin from Facebook developers. This facebook like box will help your visitor to become regular reader just by clicking like button. So that this box will increase number of your facebook fans. To get this widget follow below procedure,

Updated - 2 New Awesome Style of Facebook Like Box For blogger or Website

• Simple fecebook like box

Let me explain how to add simple facebook like box.

1. Login To Blogger Account.
2. Click Layout > Add A Gadget.
3. Select HTML / Javascript > Paste The Following Code In content Box.

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/ThingsGuide/281417998619583&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:292px; height:258px;" >

Replace my facebook page URL  with your page URL, Change Width And Height According To Your Template.

4. Now save and you are done.

• Floating facebook like box for Blogger

Now I came up with new tutorial for adding floating like box to blogger.

• Adding Jquery Plugin

1. Go To Dashboard > Template > Edit HTML

2. Search for </head> teg in your template and just below it paste the following JQuery code (You can ignore this step if Jquery Link is already added in your template)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

• Adding Widget Code

1. Go to Layout > Add A Gadget

2. Select HTML/Javascript

3. Paste the following code inside it,

<script type="text/javascript">
 //<!--
 $(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
 //-->
 </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC4Iw2mNf9Gzeb_rhDYg5xNCPTBnuzj2-xfVfnGdf17hABLn7N1iASHIgdpfWj8z8cA0-X145DUxF8scNjZ3EyQ-Djhgjqhp7HVSQUP5PIrycYD8eYEDCSXaFjQ4eGdH7LNBvSXxCSpoGw/s1600/FloatingFB.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 300px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: #808080;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style><div class="w2bslikebox" style=""><div>
 <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fpages/ThingsGuide/281417998619583&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=292" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 292px; width: 245px;background:#fff;"></iframe><span><a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" href="http://www.jobsmag.in" target="_blank"> JM</a></span> </div> </div>

4. Replace pages/ThingsGuide/281417998619583 with your Facebook fan page URL.
5. Now save your template and you are all done!

Visit your Blogs to see it floating at the right side of your webpage.

Updated - 2 New Awesome Style of Facebook Like Box For blogger or Website

How to Remove or Customize Blogger Attribution Widget

If you are using a template by Blogger Template Designer, All of them have an attribution at the bottom of the blog. by default, Blogger templates include attribution gadget at the bottom of each template. The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may noticed that gadget is locked and you are able to modify only the "Copyright" statement from the widget.

Most of  the blogger dislike it and ask are they allowed to remove this from their template? The answer is yes you are allowed! Follow my instructions below if you wish to remove or customize blogger attribution widget.

Steps :
Important Notice : Always Back Up Your Templates before Making Any Changes On it.
1. Go to Design > Edit HTML
2. Expand your Widget Template.
3. Click Ctrl+F for the browser Find bar to pop up.
4. Search for the code below in your template.

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

5. Now change the locked value 'true' to 'false' in the line of code.

<b:widget id='Attribution1' locked='false' title='' type='Attribution'>

6. Now find the code similar below,

<b:section class='foot' id='footer-3' showaddelement='no'>

7. Now change attribute value showaddelement no to yes as below,

<b:section class='foot' id='footer-3' showaddelement='yes'>

8. Save your template.
9. Go back and navigate to Layout tab.
10. Find Attribution element bottom of your page.

11. Click on Edit

12.  Now click on Remove button.

Now Attribution element has been removed. You can add another element using bottom Add a Gadget link to add custom attribution.

Enjoy...waiting for your comments.