Another Cool Email Subscription Box For Blogger

A few days back I have shown you how to add a social and email subscription widget below blogger posts, and now I have another cool email subscription box for your blog. This email subscription box or widget comes along with RSS Feed subscription too so, that it may cope with different viewer's choice. You can see the demonstration of the email subscription widget below in the image.

So if you liked the subscription box, lets show this email subscription box below your every posts in blogger.

Step One: Login to your blogger account and go to Design >> Edit HTML. [In new blogger interface: go to Template >> Edit HTML]

Step Two: Click on Expand widget templates, and then look for the code <data:post.body/>.

Step Three: Paste the following code below <data:post.body/> and click on Save Template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='subscribe-bottom'>
<span style='margin-right:10px;'><a href='http://feeds.feedburner.com/YOUR FEED NAME'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3u2TgqxCzcMJmtwhJ_QK3QKJgISjeR5bdYTF8a1YgQeqaiApXxJbQ5Cobv2SN62h2YTKLgXT6jpzmM3qq4iUdDp5cYaAe5cAR1jafxAYccmWT-9yXn-xdaZUjzynrCP17Vsi3wY0UQws/s1600/subscribe_rss_official.png'/></a>
</span>
<span>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEED NAME&loc=en_US'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYJ8WwM6ER1weVdMl3IXI7h3QmoHQS9hv4QU72-hafSZerYaeiHTdCcjcEzgvHBsQ9xRzqBRzzpXJzS4-44S_T9ySiZ01YrCkcJeo0qlsIzNFStxQC9VkzeLsCwcFdv0wGkupBkCEYckg/s1600/subscribe_email_official.png'/>
</a></span>
</div>
</b:if>

Note: Do not forget to replace  "YOUR FEED NAME" text with your blog's feed name.


After you have saved the template, check out your posts to see that the widget is working properly. If it is not working properly the report here with a comment. Good luck with adding this subscription box to your blogger blog.

Read more »

Show Related Posts Without Thumbnail Below Blogger Posts

Linkwithin widget to show related posts below every blogger posts is quite popular and useful. But however, there are not every posts that has at least one image in it. Thus, showing related posts with thumbnails may not be chosen by most blogger who in fact may choose to show related posts without thumbnails below blogger posts. If you are interested to show your visitors your blogs related posts without any thumbnail, then lets just do it.

Related Posts Without Thumbnail in Blogger

Step one: Go to Template >> Edit HTML. [In old blogger Go to Design >> Edit HTML] And then click on Expand Widget Template.

Step two: Find </head> and just above it paste the code below.

<style>
#related-postz { float: left; width: 100%; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 25px; font-weight: bold; font: 18px Arial,sans-serif; margin-bottom: 10px; }
#related-postz .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
#related-postz .widget h2, #related-posts h2 {
font-size: 0.7em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em; }

#related-postz a { text-decoration : none; }
#related-postz a:hover { text-decoration : underline; }
#related-postz ul { border : medium none; margin : 10px; padding : 0; }
#related-postz ul li {
display : block;
background : url(&quot;http://smallbusiness.chron.com/favicon.ico&quot;) no-repeat 0 0;
padding-left : 21px;
padding-bottom : 1px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
font-size: 0.7em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
} </style>
<script src='http://blogfilez.googlecode.com/files/related.js' type='text/javascript'/>

Step three: Now again, find <data:post.body/> and just below it, paste the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postz'>
<font face='Verdana' size='4'><b>Related Posts:</b></font>
<b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
<div align='right' style='font-size:11px'><a href='http://s-tofus.blogspot.com/2012/01/show-related-posts-without-thumbnail.html'>Related Posts for blogger</a></div></div>
</b:if>

Step four: Now click on Save Template and Enjoy!

Are you happy with Linkwithin related post widget? However, you are welcome to modify this style to a new look. Also, I haven't figured out yet about how to show related posts' with little snippet as it can be shown in wordpress blogs. I will soon feature related posts with snippet in blogger. So Stay tuned and good luck!

Disclaimer: There are many different styles in different blogs' template. So having difficulties to fit this widget in your blog perfectly. But if you are facing any kind of problems, then please leave a comment below. 

Read more »

[How To] Add a Social and Email Subscription Box Below Every Post in Blogger

A subscription box doesn't really help you out to get the highest level of subscribers when it's on the sidebar. Hence, if you have a subscription box below your posts then it may help you to achieve targeted subscribers for your blog. And this tutorial will definitely lead you to add an email subscription box with social subscription support below your every blogger posts.

This is how the subscription box looks like:

How to add a social and email subscription box below every blogger posts?

Step One: Go to Design => Edit Template [In new blogger interface: go to Template => Edit HTML].

Step Two: Click on Expand widget Template  and find /* FOOTER */  .

Step Three: Just above /* FOOTER */  paste the following code. 

.stay-connected {
background: #ffffff;
margin: 10px 0 10px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
#stay-icons {
float: left;
margin: 0 5px 0 0;
padding: 2px;
}
/*end stay connected*/

Step Four: Then Find <data:post.body/> and the paste the following code just below <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='stay-connected'><h2>Stay Connected With Free Updates</h2><table border='0'><tbody>
<tr><td>
<a href='YOUR FEEDBURNER URL' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border='0' src='http://cdn1.iconfinder.com/data/icons/functionsocial/Social_RSS.png'/></a></td><td>
<a href='http://twitter.com/USERNAME' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border='0' src='http://cdn1.iconfinder.com/data/icons/functionsocial/Social_Twitter.png'/></a></td><td>
<a href='FACEBOOK PAGE URL' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border='0' src='http://cdn1.iconfinder.com/data/icons/functionsocial/Social_Facebook.png'/></a></td><td>

<div class='spice-email' style='margin-left:20px;'>
Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open(&apos;FEEDBURNER FEED NAME&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=520,height=520&apos;);return true' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Enter Your Email'/>
<input name='uri' type='hidden' value='FEEDBURNER FEED NAME'/><input name='loc' type='hidden' value='en_US'/>
<input class='spice-emailsubmit' type='submit' value='Submit'/>
</form>
</div></td></tr></tbody></table></div>
</b:if>

Note: You can also paste this code below <div class='post-footer-line post-footer-line-1'> at times to show it below other widget's. [Don't forget to change the RED texts with your blog's information] 

Step Five: Click on Save Template.

You're all done with adding an email subscription box below your blogger posts. If you face any kind of problems then leave a comment below.

Read more »

[How To] Add an Ad Space or Gadget Area Beside Blogger Header

You must have seen that many blogs has an ad space in/beside blogger header. Mostly, all of the blogs use a 468*60 ad space beside the blogger header. In this case, if you want to have an ad space in your blogger header then you have to split your blogger header into to parts [However, it's not going to harm your blog's SEO]. And by then you may wish to use this space as a gadget area if you don't really want to show adsense ads there.

After you've added an ad space you'll have a new gadget area like this one:

How to add an ad space beside blogger header?

• Go to Design => Edit HTML [in new blogger interface go to Template => Edit HTML].
• Then Find the following codes or similar codes. [Press Ctrl+F; then search for it]

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

• Now replace the above codes with the code below. 

#header {
          margin-top:-15px;
          width:370px;
          float:left;
          height: 90px;}
#top-ad {
         width: 470px;
         float: right;
         margin-top: 5px;
         padding: 0;
}

• Again find the following code. 

<div id='header-wrapper'>
<b:section class='header' id="header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAME OF YOUR BLOG WILL BE HERE (Header)' type='Header'>
</b:widget>
</b:section></div>

 Note: You can only find the <div id='header-wrapper'>  code and the rest will be below that code. 

• Finally replace it with the code below and click on Save Template. 

<div id='header-wrapper'>
<div id='header'>
<b:section class='header' id='blog-title' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NAME OF YOUR BLOG WILL BE HERE (Header)' type='Header'/>
</b:section>
</div>

<div id='top-ad'>
<b:section class='top-ad' id='top-ad' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
</div>
</div>

You're all done with adding a gadget area or an ad space in/or beside your blogger header. However, if you are stuck with something or having problems with implementing the process then please don't feel shy to comment.

Read more »

How To: Add Transparent floating Social Share Buttons to Blogger

As it appears that google emphasizes people's choice to rank pages at SERP, the importance of social media buttons for blog pages or posts have drastically changed.  Day after day people have experimented with their social media buttons position, to get the highest possible shares and +1s or any other bookmarks. Following that, floating share buttons or floating social media buttons have became quite effective. Later on, mashable introduces a floating share button widget which is said to be transparent, and people loved that. So, here I have came up with fully transparent floating social share buttons widget. And in this tutorial, I will show you, How To Add Transparent floating Social Media Buttons to Blogger.

Read more »

Styling Blockquotes in Blogger

As like me, I reckon you are hungry to style up your blogger blog. However, I searched a lot about getting a good block-quote style for my blog; finally, I have got what I have desired for. Here in this Tutorial, I will discuss, and show you how to style block-quotes of your blogger blog. Basically, I will show you 3 things.

Read more »

How To Style-Up Texts In Blogger

As many bloggers like to have fancy style texts in their blogger blog, so do I. Today I have found some great tricks to style up texts in blogger; in this tutorial I will also let you know what are the styling effects you can make to your texts. Before we get into the process, let me tell you that, you are free to use these codes wherever you like in your style-sheet of blogger, it may be Header text, menu text, post title, and blah blah blah.

Read more »

How To: Highlight Images in Blogger Posts

Highlighting pictures with drop-down shadow is my way to highlight images. What about yours? Do you highlight your post's images with drop-down shadow? If no, then I assume I can help you to highlight your post images with CSS. As I was searching for an styling trick, and I found one which is about CSS styling of Image-free rounded corners, drop shadows and gradients. I have tried my-self this image-free shadow trick to other parts of my blog and I like how it changes the behavior of in-post images! See one image to see the effect below.

Read more »

How Do I Add Border Around My Blogger Blog?

Firstly, assigning borders to your blogger blog is fairly an easy task to do. Before we get into the process, I want you to know some things about borders. You can change border styles as you like and also border colors too. On the other hand, you definitely can add borders not just around your blog but also around your sidebars or content body, as well.

HTML border styles:

In my examples, I will naturally use solid as default. And the border color will be sort of black. 

Adding Border Around the whole Template:

Simply, go to your blogger's Edit HTML page, and find #wrapper, or #main-wrapper, or something like that which represents to main wrapper of your template. See the code below as an example, which is copied and pasted from my template.

/* wrapper */

#wrapper{width:1060px;padding:10px 0 0 0;

margin:0 auto;

overflow:hidden;

background:#fff;

border: 6px solid #333333;}

Here, 6px is the thickness of the border, solid is the type of  the border, and #333333 is the color of the border. You can increase or decrease the thickness of border, and change the type & color. More precisely, you can change the text solid to ridge, double, groove, as you like and also whatever color you like. 

Tip: To change colors you have to find the specific color's html code. I use GIMP - The GNU Image Manipulation Program, to find html code of any color. There are many other options also. 

Adding Border in Particular:

You can use particular border style (if you wish) for your blogger template. All you'll have to do is: use more specification to your HTML code. We will split up this border: 6px solid #333333; code into as many we need.

border-left: 2px solid #535353;border-right: 2px solid #535353;border-top: 2px solid #535353;border-bottom: 2px solid #535353;

This time I have used four specification for my four sides rather than using one as a whole. Here, you are completely free to organize. You can change every sides color, border types, and thicknesses,  as you'll like it. :)

You can use the same procedure for your post wrapper, or sidebar wrapper too. But don't do anything too fancy that your blog may look to weird. :p

Happy blogging with blogger. :)

Read more »

Blogger Links Open in New Tab (HTML)

It has been an old time heresy for blogger users, because by default blogger blogs' external links opens in the same tab or window where the blog's page exists. So, I reckon this heresy will not exist for further times as I am here to help your blog's link to open in a new tab.

Well, you may guess that I will tell you to edit the HTML of your every anchor texts in your blog post, but trust me, this is not going to happen. All I will tell you to do is just a task of one minute. So to assign your external links open in a new tab (not new window) using JQUERY, follow the steps listed below.

Procedure:

• Log-in to your blogger account; go to Design --> Edit HTML, Or for new blogger interface, go to Template --> Edit HTML.
• Now, press Ctrl+F and find </head>.
• Just before </head>, paste the following code. 

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

$(document).ready(function () {

// ---- External Links ----------------------------------------------------------------------------------------------------

$(&quot;a[href*=&#39;http://&#39;]:not([href*=&#39;&quot;+location.hostname+&quot;&#39;]),[href*=&#39;https://&#39;]:not([href*=&#39;&quot;+location.hostname+&quot;&#39;])&quot;).attr(&quot;target&quot;,&quot;_blank&quot;).attr(&quot;title&quot;,&quot;Opens new window&quot;).addClass(&quot;external&quot;);

});
</script>

• Now click on Save Template. 

You're all done. Just click on any external links in your blogger posts, and it'll open in a new tab. :) However, this HTML code to open links (external) links in a new tab are pasted here from my template directly, so I reckon there's error, but if you find any kind of error just leave a comment because I love comments. :x

Read more »

Add +1, Buzz, Facebook Like, Tweet button to Blogger!

Google +1 (plus one), and buzz button are becoming so important since google+ is on the roll. Google +1 button helps you to recommend a post for your friends and peers, on the other hand, google buzz button helps your posts get indexed quickly, and recommend the post also in Search engine results page (SERP). Facebbok like and tweet buttons also have a very high popularity from past. And most effective social bookmarking site - I reckon, is Delicious. So, I have made a mixture of these +1, buzz, facebook like, tweet, and Save to Del.icio.us, buttons. Also, at last I have attached an add this button to it, so that your post don't miss any of it's potential sharing. ;)

Demo: 

Lets do it:

• Go to Design, then click on Edit HTML page.
• Mark Expand Widget Template.
• Now, find <data:post.body/>.
• Just after the <data:post.body/> , paste the code below; then, click on Save Template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='left'>
<p style='margin:0; border-bottom:1px solid #666666;'><font color='#666666' face='Arial Black' size='5'>Help Me To Spread This Post &#187;&#187;</font></p>
<table border='0' cellpadding='2' cellspacing='10'><tbody>
    <tr>
<td style='padding-top:8px;'>
<!-- Place this tag in your head or just before your close body tag -->
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
  {parsetags: &#39;explicit&#39;}
</script>
<!-- Place this tag where you want the +1 button to render -->
<div class='g-plusone' data-size='tall'/>
<!-- Place this render call where appropriate -->
<script type='text/javascript'>gapi.plusone.go();</script>
</td>
      <td style='padding-top:8px; '>    <a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</td>
      <td style='padding-top:8px;'>   <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
      <td style='padding-top:8px;'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </td>
<td>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js' type='text/javascript'/>
<a class='delicious-button' href='http://delicious.com/save'>
   &lt;!-- {
      url:&quot;<data:post.url/>&quot;
      ,title:&quot;<data:post.title/>&quot;
   
   } --&gt;
   Save on Delicious
</a>
</td>
      <td>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- AddThis Button END -->
</td>
    </tr>
  </tbody></table></div></b:if>

You can change the text: "Help Me To Spread This Post" if you like. Cheers! :)

Read more »