Add Cool Subscription Widget to Blogger Blogs

Subscribers or readers of a blog actually represents the image of the blog. Adding a Subscription widget can help you build the number of readers and followers of your blog. In this step by step tutorial I'll show you how to add the Pro Subscription widget (that i am currently using) to your blogs.

How to add the Subscription widget

1. Go to Design >Layout
2. Add a Gadget
3. Select HTML/JavaScript and add the following code to the box.

<a href="http://feeds.feedburner.com/HowBlogWorks" imageanchor="1" 
style="margin-left: .5em; margin-right: 1em; float: center;">
<img border="0" height="40" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoosXe48CS6Fql8EwK4RFHsJ-1WecA5a0aqJ8MWeR48ZRY2gglO3V09YKgVI506kBdC2C8HvdJ4ryarQyFhpwjd6UFVTWjBQaeSFx0jjpwSex60IcygVoBj068nEGCImsdvRNQDYbO_hPY/s1600/Untitled-5.png" width="290" /></a>
<style> 
.mbtips-email{ 
background:Fff no-repeat 0px 12px ; 
width:270px;
float:center;
font-size:1.4em;
font-weight:bold;
margin:2px 20px 0px 35px;
color:#686B6C;
}
.mbtips-emailsubmit{ 
background:#0084CE;
cursor:pointer;  
color:#fff; 
border:none;
padding:3px;
margin:0 0 0px 0;
text-shadow:0 -1px 1px rgba(0,0,0,0.25); 
-moz-border-radius:2px; 
-webkit-border-radius:2px; 
border-radius:2px; 
font:12px sans-serif;
} 
.mbtips-emailsubmit:hover{ 
background:#E98313; 
} 
.textarea{ 
padding:2px; 
margin:0px 2px 0px 2px; 
background:#f9f9f9; 
border:1px solid #ccc; 
resize:none; 
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;   
width:170px; 
color:#666;}
</style>
<style class="text/css">
.center 
{
text-align:center;
font-weight:bold;
margin:10px;
}
</style>
<div class="center">
Submit your Email Address to Get Free Updates</div>
<div class="mbtips-email">
<form action="http://feedburner.google.com/fb/a/mailverify" 
id="feedform" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=HowBlogWorks',
 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<input gtbfieldid="3" class="textarea" name="email" onblur="if 
(this.value == "") {this.value = "Enter email address here";}" 
onfocus="if (this.value == "Enter email address here") 
{this.value = "";}" value="Enter email address here..." type="text" /> 
<input type="hidden" value="HowBlogWorks" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input class="mbtips-emailsubmit" value="Submit" type="submit" />
</form> 
</div>
<style class="text/css">
table
{
border-bottom: 1px solid #E6E6E6;
float: center;
width: 300px;
margin:0 10px;
}
</style>
<div class="table">
<table>
<tr>
<td><a href="http://www.facebook.com/pages/How-Blog-Works/257143917656746" 
imageanchor="1" TARGET="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhGQ0E0GEIMGgRznAGj1KkmntUeJzm8cGZmUCqibIH_K-bZu0xTuJ6Q1K4r8gDDPad-cqW4MAaI0rDyiX6amg4ZpwkbK5UdCvzonAJ-R1_Dai6mOcJUpGUdlGFn3Ap_sGzpE2mY-OScb9C/s1600/facebook-buttons-59-68.png" /></a></td><td>
<a href="http://twitter.com/howblogworks" imageanchor="1" TARGET="_blank">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgzOUK5Naa6fwQkPS4A80AGYG2WnPvqWZ_V5AX9gWZkM9W3ngW2Mx3fM1oN-9V_uRMoadzezwqD_R3AQQ2ainNRkkJnRlbZV7GP6WB1PURHp6aiWMKLyD5f7pzL0F96gS1Aw8-hTx-j6fn/s1600/Twitter-Buttons-70-10-.png" /></a></td>
<td><a href="http://feeds.feedburner.com/HowBlogWorks" imageanchor="1" TARGET="_blank">
<img border="0" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4kwav_0D3vyIdRIxj_Jds7xiCYEkyohpc5Kh2gxDVj4tviC15YSLmMU6gztrcrFfhBGAkiyQ-MR1SoCYXGa9rYDQLtxLPMKaiVBVlCZa9KYtBzAB-_RyQoF1wOPE8YxVK1wXpAIXrXi6E/s1600/subscribe-rss.png" />
</a></td></tr></table></div>
<style class="text/css">
.grablink
{
link-color:#0084CE;
text-size:8px;
text-align:right;
text-weight:italic;
}
</style>
<div class="grablink">
<a href="http://www.howblogworks.com/2011/10/add-cool-subscription-widget-to-blogger.html">Grab this Widget</a>
</div>

   4.      Save and you are done, you should be able to see Pro Subscription Widget now.

Adjust the Widget

Follow the steps below to adjust your widget.

• Replace http://feeds.feedburner.com/HowBlogWorks with your Feedburner url.
• Replace uri=HowBlogWorks with uri="your feed value"
• Replace value="HowBlogWorks" with value="your feed value"
• Replace http://www.facebook.com/pages/How-Blog-Works/257143917656746 with your Facebook fan page url.
• If you don't have a fan page yet then create a facebook Fanpage now.
• Replace http://twitter.com/howblogworks with your Twitter Page.
• Replace http://feeds.feedburner.com/HowBlogWorks with your Feed Url.

Customize your Widget

There are some basic customization you can make.

• If you want to change the email Submit button, then change #0084CE with your own color value
• If you don't want the pointer when you hover your mouse over the button then remove cursor:pointer;
• When you hover mouse over the Submit button , the color of the button changes to#E98313, If you want to change that , then simply replace that with your own color value.
• If you want to change the Text "Submit your Email Address to Get Free Updates" with Words you like.

Read Full Post ...

Add a Categories Section to a Blogger Blog (Blogspot Blog)

Blogspot blogs at Blogger.com have no categories only labels. This Blogger tutorial will show you how to manually create categories in Blogger from your existing labels so that all the articles listed under a particular label will be displayed.

While this way to add categories to Blogger is not an ideal solution it will mean that you can display a logical grouping of your most popular articles under the one heading.

This article is aimed at new bloggers and beginner bloggers although it is suitable for all Blogger bloggers (Blogspot bloggers). No changes to the template are required to add these categories to your Blogger blog (Blogspot blog).

How to Create Categories from Labels in Blogger
One easy way to create a categories section in Blogger is to simply rename the title of the labels widget as categories. This solution does not work for me because on this blog I have a huge number of labels and I don't want to show this widget at the top of my sidebar.

An easy way round this problem is create a separate categories section. If you look at the sidebar of this blog you will notice that I have several major categories at the top so that a new visitor will find what they are looking for quickly under these broad headings.

To add a categories section to a Blogger blog (Blogspot blog) follow these simple steps:

1. 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. For the first category navigate to the individual page of the label you wish to use by clicking on the label in your sidebar. Copy the URL address of this page from the address bar in your browser (right click and select copy). For example the URL address of the label of Blogger Tutorials on this site is:

---

http://howblogworks.blogspot.com/search/label/Blogger%20Tutorials

---

3. From the Blogger Dashboard go to Design > Page Elements

4. Click Add a Gadget in the sidebar and select Links List

5. In the Configure Link List dialog box that appears paste the link to your label into the New Site URL box

6. Enter the name of your label or some alternative text if you wish into the New Site Name text box.

7. Enter Categories as the title

8. Choose between sort alphabetically, reverse alphabetically or don't sort

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

10. Click on Save

11. 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

12. Use the up and down arrows for each link to shuffle them around until you find the desired order

Limit the Number of Posts Displayed in the Categories Section
To put a limitation on the number of posts displayed in the new categories section 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

---

So for the category Blogger Tutorials on this site for example I would enter the following to have only 25 posts displayed:

---

http://howblogworks.blogspot.com/search/label/blogger%20Tutorials?max-results=25

---

This Blogger tutorial has shown you how to manually add a categories section to the sidebar of your Blogger Blog (Blogspot blog) using the Link List widget.

Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template

Read Full Post ...

How to Add Missing Quick Edit Wrench to Blogger

In this Blogger tutorial (Blogspot tutorial) I show you how to add a quick edit wrench to Blogger if it is missing from a Blogger gadget. Check here to find a solution for a missing quick edit pencil not showing in Blogger

The quick edit feature allows you to edit a Blogger gadget directly from the blog itself rather than having to go through the Design > Page Elements screens and then finding the actual widget itself before you can edit it.

Heaps of times I have downloaded custom Blogger templates only to find that there are lots of omissions compared to a default Blogger template. If you are using a custom Blogger template with the quick edit feature missing here is a step by step guide to insert the missing quick edit feature into your Blogger template

The quick edit can be missing from anywhere in your Blogger template. I have chosen to use the sidebar for this tutorial but the solution works wherever the quick edit feature has been removed or never inserted in the first place.

Tutorial Difficulty rating: Easy
Time: Less than 5 minutes
Suitable for all levels of Blogger expertise

How to Add the Quick Edit Wrench to a Blogger Gadget

1. Login to Blogger
   
2. Go to Design > Edit HTML
   
3. Check the Expand Widget Templates box
   
4. Using CTRL + F buttons together bring up the search box
   
5. Enter the following search term
   
   

   ---

   </b:includable>
   

   ---

   
   
6. Scroll through your Blogger template. You will see that every instance of </b:includable> is highlighted in yellow.
   
7. Once you come to the sidebar widgets which is the most likely place for the quick edit to be missing from look for something like the following (this will vary from template to template). This is the start of the first sidebar if you had a template with a two column sidebar
   
   <b:section class='sidebar' id='sidebar1' preferred='yes'>
   
8. Now look at the picture below. You can see that this is the code for a Javascript/HTML widget as shown in red
   
   
   
9. Just identify the widget that has the missing quick edit feature and add the following line of code immediately before the </b:includable>
   
   

   ---

   <b:include name='quickedit'/>
   

   ---

   
   
   
10. Use the Preview button to check your changes before committing to them
    
11. Don't forget to click on Save Template

In this Blogger tutorial (Blogspot tutorial) you have learned how to fix a missing quick edit button often missing from custom Blogger templates. No matter where the quick edit button has been omitted (sidebar, footer, header etc) it can be added in to a Blogger template very easily so that a Blogger gadget can be edited without having to go through the Blogger design screen.


Related Articles
List of How Blog Works Tutorials for Blogger Blogs
How to Show a Quick Edit Gadget Wrench in Blogger (Blogspot)
How to Fix a Missing Embedded Comment Form in Blogger
How to Fix Common Problems in Blogger

Read Full Post ...