Add 4 in 1 Social Subscribe widget for blogger using widget generator

If you don't have a space for your social subscribing widgets then don't worry.Here I have a solution with this problem.Hide and show them out with smooth jQuery slide out hover effect.his 4 in 1 slide out widget contains a floating facebook like box,your recent tweets,Google +1 button and feedburner email subscription form means all in one :).Here I am providing a widget generator so that you don't need to edit any code,just change my username with yours hit the generate button and finally add the widget.This script for this widget is created by Nitin and we developed the widget generator.

How To Install This Widget To Blogger?

Step :- 1

Ignore This Step If you have already Ajax 1.4.2 jQuery plugin in your template

• Go to Blogger>>Design>>Edit HTML
• CTRL + F To Find </head>
• Copy and Paste Below Code Just Above  </head> 

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

Step : -2

• Replace my usernames with yours
• Click On “Generate” Button
• Click On “Preview” button, if you want to show you customized settings..
• Finally Click On “Add To Blogger” Button

Animated Flash Label Cloud Widget Generator For Blogger

Flash Animated Label Cloud Widget(Blogumus) for blogger was awesome widget to show blogger labels in alternatively. This widget is Designed for Word Press, and Now it is available for Blogger.I a have created an widget generator so that it is easy for you to add.



Live Demo

How to add This Widget

Note:- Back Up Your Template before Going to do this for safety
 

• Login to Blogger account
• Goto Design section > Edit HTML
• Search Bellow Tag (press Ctrl + F to search)
  

  <b:section class='sidebar' id='sidebar' preferred='yes'>

•  Add Generated Widget Code Just after it

OR

•  Search Below Code

</b:section>

• Add Generated Widget Code before it
• Now save your template And check your blog 
• Use our Hex Color Code generator to get Hex codes of the color you want.

Widget Generator

Reposition Navigation Buttons in Blogger!

The navigation buttons or links that are displayed at the bottom of each comment section in BlogSpot blogs enable visitors to switch between new and old posts or move from one post page to another ordered by date and time. These buttons become less of use when number of comments increase too much. Normally readers do not even observe the navigation deep down and this results in loss of precious pageviews. I have always emphasized that value pageviews more than unique visitors because it is indeed pageviews that turns into revenue generating page impressions both for AdSense or any other Ad Network.  You might have seen the More, Next and Previous button showing inside the top black sticky bar on MBT homepage and post pages. It is really not possible to shift a Post data item to any other widget section in blogger. Doing such results in "Data variable not found in dictionary" error or similar.

We played a work around and used Cascading stylesheet Position properties to allocate fixed positions to these buttons anywhere on the page. This is again a unique addition to Blogger Customization and being implemented for the first time. The tutorial today will not only help you change the position of navigation links but will also teach you to install a custom sticky bar just like the one we are using on our blog. We are pretty sure you will find today's tutorial really easy yet delicious!
PS: Tested with Chrome, Firefox, IE9 & Safari.

STEP1: Adding the sticky bar

First comes first. I have already shared a detailed tutorial on adding a stickybar to blogger. Please first install a stickybar on your blogs and then try step#2 of today's tutorial.

• Read: Create a StickyBar!

STEP2:

Now comes the interesting part. What we will do here is simply shifting your current Newer, Older & Home buttons to the top left of the stickybar and replace them with more fancy buttons like the one we are using.  Follow these steps:
  1.   Go To Blogger > Template
  2.   Backup your template
  3.   Click Edit HTML and then check "Expand Widget Templates"
  4.   Search for the following CSS classes and delete them all: You will find three such classes or more starting with either #blog-pager or .blog-pager

#blog-pager {
------
}

#blog-pager-newer-link {
----
---
--
}
#blog-pager-older-link {
-----
---

--
}

   5.   Now after you have deleted them, add the following code in their place:

#blog-pager {
text-align:center;
}
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-320px;
top:0px;
margin-top:5px;
}
#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-290px;
top:0px;
margin-top:5px;
}
#blog-pager-more-link {
position:fixed;
z-index:9999;
margin-left:-20px;
top:0px;
margin-top:5px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#blog-pager-newer-link {
position:fixed;
z-index:9999;
margin-left:-627px;
top:0px;
}
#blog-pager-older-link {
position:fixed;
z-index:9999;
margin-left:-597px;
top:0px;
}
}

What we did in step4 and step5 was simply replacing your old code with the new one.
    6.   Next search for the following chunk of code:
Note: You are only concerned with finding the two highlighted codes. The code inside them may look different for your template so just finding these two highlighted tags and then follow step7.

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Previous'>&#171; Prev</a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Next'>Next &#187;</a>
      </span>
    </b:if>
<span id='home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</span>
    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>
  </div>
  <div class='clear'/>
</b:includable>

     7.  Replace the code inside them with the following code as shown below:

<b:includable id='nextprev'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
   <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-more-link'>
      <a class='blog-pager-more-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsY6wAc8I-iIDcDxd7y4bjcwnCl3sILOk0vpnriWIUu3W74h6C6yzGEVqz4_oYLxe2Od5VejHL4Mi1S-SBf6hb9h8piKqRVrtGMLVyO9ea0VTc1gx2uh25V0RVVY9eBS4qklN_Ev7nPoYW/s400/more.png'/></a>
      </span>
      </b:if>
</b:if>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixlmhfO-frsao6A-vQCvHbz6ZhHR3qR7dYvUdd4zlV0ayYSdc_lqqn4MOKk6OSmAmKAWLD7f6rs_gNlLpw9dQIjg2BAoy8vZ8M0pkh3k-QOq4esLJifC86GrWbz4E7lMHK0dSjYYamuiEr/s400/Previous.png'/></a>
      </span>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJvify05FpZypLXiXWAN6ufa4Wt2hpIJijq8TRGGaxXYZvIMTMnegVkT6Y7h4aGfxe_-XAJouHQ1XeA3ptYom8bIeJ8GReVbSPqjhmuBLQWgfJARW0E8fVOvVUoXEhubA4UYFy5GfLR3Q_/s400/Next.png'/></a>
      </span>
      <b:else/>
 
    </b:if>
  </div>
  <div class='clear'/> </b:if>
</b:includable>

It was that easy!
   8. All done! Visit your Blog to see it functioning just fine. :)

How it works?

Previous will display newer posts
Next will display Older posts
 More will display on homepage alone.

• Button More is responsible for displaying the next set of previously published posts. It will show a bunch of posts depending on the number of posts you allowed to be displayed on homepage.
• The other two buttons will help the visitor to navigate between next and previous page. If the visitor is on your newly published post then the Previous button will not show up and Next will show alone.

Everything is operated using conditional statements provided by XHTML 1.0.

How to Create a Stickybar with "Close Button"?

The Stickybar or fixed Bar that we released was warmly welcomed. What we all have been searching for was a Close Button or Cancel button that would hide the bar display. May be not every visitor enjoys viewing that fixed bar at the top, so they deserve to be provided with an option to view or hide the bar. While viewing one of the Wordpress Blogs I found this button next to their updates bar. I managed somehow to fetch the script half broken. Making it work with blogger template was difficult because blogspot templates are programmed via XML and the rules of XML are really harsh when it comes to Character case. Debugging the script was difficult but Alhamdulillah the hard work paid off. You can see it Live just to the right of my Stickybar at the top. I am excited to share it with you all. Lets get to work!

Create a Sticky Bar With Close Button in  Blogger

Follow these easy steps:

     1.   Go To Blogger > Design > Edit HTML

     2.   Backup your template

     3.   Search for this

]]></b:skin>

    4.   Just above it paste the following CSS code,

#mbt_bar{
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAiO5JnqXUX4le1vnbZmDPX824GwdFtouDafrbksnO51OgFauvr39zFGxeTFYn9NCyNvyJtcTC4uSc0zvLGs6D2fj7N0yFStxvztQuXYJps9g8IDgGDTjXWAylcXlwcs0a7bUtKC1BiIo/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#mbt_bar a{
text-decoration:underline;
color:#E2E504;
}
#mbt_bar a:hover{
text-decoration:none;
}
#mbt_bar p {margin:0; list-style:none;}
#mbt_bar img {vertical-align: middle;
      margin-right: 6px;}

    5.    Next search for </head>   and paste the following Javascript code just above it

<script type='text/javascript'>
//<![CDATA[
var mbt_arr = new Array();
var mbt_clear = new Array();
function mbtFloat(mbt) {
mbt_arr[mbt_arr.length] = this;
var mbtpointer = eval(mbt_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.mbtsrc = document.all? document.all[mbt] : document.getElementById(mbt);
this.mbtsrc.height = this.mbtsrc.offsetHeight;
this.mbtheight = this.cmode.clientHeight;
this.mbtoffset = mbtGetOffsetY(mbt_arr[mbtpointer]);
var mbtbar = 'mbt_clear['+mbtpointer+'] = setInterval("mbtFloatInit(mbt_arr['+mbtpointer+'])",1);';
mbtbar = mbtbar;
eval(mbtbar);
}
function mbtGetOffsetY(mbt) {
var mtaTotOffset = parseInt(mbt.mbtsrc.offsetTop);
var parentOffset = mbt.mbtsrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return mbtTotOffset;
}
function mbtFloatInit(mbt) {
mbt.pagetop = mbt.cmode.scrollTop;
mbt.mbtsrc.style.top = mbt.pagetop - mbt.mbtoffset + "px";
}
function closeTopAds() {
document.getElementById("mbt_bar").style.visibility = "hidden";
}
//]]>
</script>

   6.     Finally search for <body>  and just below it paste the following HTML code

<div id='mbt_bar'> WRITE YOUR TEXT HERE <span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPT0OS6Im7Ekh0rJ_zlciOTQcer3x0ES5KZHjiBV_jPk3dxuY9BeHmsIZvmKKsdBWRyByxu7v1MgFy6GQLONTetQeSNWYw9CAiC5WD5div8DwTedt6b4kTjsd7TbudPqwXH0HpzqunLjs/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div>
<br/><br/>

    To write an announcement, update news or notice to readers, just replace the yellow highlighted text with your message. If you wish to change the Close button image then simply replace the bolded black link with your button's link.
    7.     Save your template
    8.     You are all done!
Visit your blog to see it fixed to the top just beautifully with a close button waiting to be clicked!

How it works?

The close button when clicked triggers the function closeTopAds();  which then searches for function definition. The function is defined such that it sets visibility of bar to hidden. That's how the bar hides once the button is clicked and reappears only upon page refresh. Indeed a pretty neat way to make a user friendly bar.

How To Submit Blogger Sitemap To Google Webmaster

Google is the most popular search engine and number of webpages indexed by Google is uncountable. To make Google find, index and rank your site you need to submit your sitemap of your site to Google Webmaster Tools. Google Webmaster is a good SEO tool to use. You could also keep track of your sites statistics with the help of Google Webmaster Tools. As a new blogger you may not know how to submit your blogger sitemap to Google Webmaster Tools. Here I am to help you.

Steps To Submit Blogger Sitemap To Google Webmaster:-

1) Go to http://www.google.com/webmasters/

2) Sign in to Webmaster Tools with your gmail id and password

3) You can see now a thumbnail and a link of your site. Click on the anyone of them to go to Dashboard of Webmaster Tools.

4) Click on Sitemaps

5) Click on ADD/TEST SITEMAP

Use Sitemap Generator Tool to generate your sitemap

Copy and paste the url of your sitemap in the space provided.

6) Click on Submit Sitemap and refresh the page

Your webpages are submitted and waiting to be indexed.

When you login to your Google Webmaster days later, you should be able to see the indexed pages and statistics of your blogger.