Blogger widgets: Some useful widgets for Blogspot users

Blogger is one of the most famous platforms to build and create free blogs. Blogger is a product of Google to give new bloggers a chance to test their skills on a free platform. They offer a free and superb hosting plan with great speed and high bandwidth.

Any blog hosted on Blogger will have a .blogspot in the end of its domain(before .com). 

Best Blogger widgets

Well, we all know that how awesome Blogger is but many of us have always complained about its limitations.

Worpress users have so many plugins from which they can optimize their blogs to make it SEO friendly and the best thing about WordPress is that its structure is already optimized for SEO whereas Blogger users have to do everything on their own.

If you want to know that how you can make your Blogspot blog SEO friendly then read this.

WordPress users can install different colourful gadgets on their blogs according to their need because they have so many plugins for this purpose.

For example if they want to install a Subscribe Us pop-up form on their blogs then they can do it easily by installing a few plugins such as  Mailmunch but if a Blogger user wants to do the same then he has to mess up with all those hard codings such as HTML5, CSS etc.

By the way if you want to install Subscribe us pop-up form on your Blogspot blog then read this

By considering all these facts I decided to make a post about some awesome Blogger widgets which can make your Blogspot Blog a PRO Blog. I hope you will love to install them on your Template.

All in One Subscription

All in one subscription is one of my favourite widgets when it comes to Blogger. By using this gadget you can ask your readers to follow you on GPlus, Twitter, Facebook or they can subscribe your newsletter.

All in one subscription widget

This super gadget is probably the best option when it comes to subscription gadgets.

You can install it on your Blog easily by following these simple steps.

First Go to: Yoursite–>Layout–>Add a Gadget–>Now choose HTML/Javascript

html

 

Now enter this code in the content area:

<style>#w2b-mashable{width:300px;margin:auto;padding:0;}
.w2b-facebook {background:#ffffff;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.w2b-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.w2b-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.w2b-twitter a.twitter-follow-button {display: block;}
.w2b-twitter iframe {margin: 9px 11px;}
.w2b-emailbox {background-color: #e3edf4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.w2b-emailbox input.emailu:focus {color: #333;}
.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.w2b-emailbox input.submitu:hover {text-decoration: none;}
.w2bDefault {border: 1px solid #cc7c00;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.w2bDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
</style>
 <div id="w2b-mashable">
 <div class="w2b-facebook">
 <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Farticles.teller.9&amp;width&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
 </div>
 <div class="w2b-gplusone">
 <script type="text/javascript">/*<![CDATA[*/
 (function() {
 var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
 po.src = "https://apis.google.com/js/plusone.js";
 var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
 })();/*]]>*/
 </script>
 <div class="g-plusone" data-size="medium" data-href="https://www.articlesteller.com/"></div>
 <span>Recommend on Google</span>
 </div>
 <div class="w2b-twitter">
 <a href="https://twitter.com/articlesteller" class="twitter-follow-button" data-show-count="true">Follow @Articlesteller</a>
 <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
 </div>
 <div class="w2b-emailbox">
 <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=articlesteller', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
 <table width="100%">
 <tr>
 <td>
 <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
 </td>
 <td width="64px">
 <input class="submitu w2bDefault" type="submit" value="Subscribe"/>
 </td>
 </tr>
 </table>
 <input name="uri" type="hidden" value="articlesteller"/>
 <input name="loc" type="hidden" value="en_US"/>
 </form>
 </div>
 </div>

This widget is powered by GeekBlogging.

Things to do after installing the code

Now when you have installed the code in your Blogger layout the next thing will be to change all the  social network addresses with your original addresses and IDs. And do not forget to change “articlesteller from everywhere with your original Feedburner ID or social media profile IDs.

If you have done everything right then congrats you have just installed “All in one Subscription form” into your Blog.

A good Looking author box

One another great addition in our widgets inventory will be a author box to give our blog a more professional look.

So now we will try to install an author box in our brand new blogspot blog.

authorbox

To install this great looking author box you first need to mess up with your templates HTML code.

Just visit Yoursite–>Templates–>Edit Html and then search for this line:

<div class=’post-footer-line post-footer-line-1′>

Once you have found it the next thing you will need to do is to introduce a new code in your template just below the above code.

The coding will be a little long but you can just copy and paste it

<div class="author-box"> <img class="avatar avatar-70 photo" src="https://www.articlesteller.com/wp-content/uploads/2015/05/aa.jpg" alt="" width="70" height="70" /><b>About the Author</b> <div style="text-align: justify; font-family: verdana; color: #000000;">Write Something About yourself <center> <a style="text-decoration: none; font-size: 70%;" href=" Your Blog link ">Your Blog Name</a></center></div> <strong>Follow me on</strong> <a href="http://facebook.com/Articlesteller"><img style="width: 16px; height: 17px;" src="https://www.articlesteller.com/wp-content/uploads/2015/05/fb_icon.png" alt="" /></a><a href="http://twitter.com/HusnainMz"> <img style="width: 16px; height: 17px;" src="https://www.articlesteller.com/wp-content/uploads/2015/05/download.png" alt="Mountain View" /></a><a href="https://plus.google.com/+HusnainMeerzadehh/posts"><img style="width: 16px; height: 17px;" src="https://www.articlesteller.com/wp-content/uploads/2015/05/google-plus-icon.png" alt="" /></a></div>

Now search for </b:skin> tag and before it, copy and paste this CSS:

.author-box {
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 4px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
 
.author-box img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}

Things to do after installing the code

You can replace  these random phrases with the phrases you want in your author box. Just find this phrase “Write Something About yourself” and replace the whole paragraph with our self-description.

A smart dropdown menu

One of the major laps Blogger’s creators did was that they did not added a dropdown menu in Blogger. But we can still install a dropdown menu by using some codes. There are so many dropdown menus present on internet which you can download easily. Each menu has different style and colours.

First you need to visit your template’s HTML code page then find </header> and just below it paste this code:

</pre>
<ul id="nav" class="wc-megamenu">
	<li class="wcnavlist"><a class="wclink" href="#">Home</a></li>
	<li class="wcnavlist"><span class="wclink">Categories</span>
<ul>
	<li>
<ul>
	<li><a href="#">Blogger</a></li>
	<li><a href="#">Widgets</a></li>
	<li><a href="#">Plugins</a></li>
	<li><a href="#">Templates</a></li>
	<li><a href="#">Wordpress</a></li>
	<li><a href="#">Wp plugins</a></li>
	<li><a href="#">Wp Themes</a></li>
	<li><a href="#">SEO</a></li>
	<li><a href="#">Traffic</a></li>
	<li><a href="#">CSS</a></li>
</ul>
</li>
	<li>
<ul>
	<li><a href="#"> JavaScript </a></li>
	<li><a href="#"> HTML5 </a></li>
	<li><a href="#"> Jquery </a></li>
	<li><a href="#"> Responsive </a></li>
	<li><a href="#"> Web design </a></li>
	<li><a href="#"> Blogging Tips </a></li>
	<li><a href="#"> Facebook </a></li>
	<li><a href="#"> Twitter </a></li>
	<li><a href="#"> Make money </a></li>
	<li><a href="#"> Adsense </a></li>
</ul>
</li>
	<li>
<ul>
	<li><a href="#"> Services </a></li>
	<li><a href="#"> Contact us </a></li>
	<li><a href="#"> About us </a></li>
	<li><a href="#"> Disclaimer</a></li>
	<li><a href="#"> Privacy Policy </a></li>
	<li><a href="#"> Terms of use </a></li>
	<li><a href="#"> Item 7 </a></li>
	<li><a href="#"> Item 8 </a></li>
	<li><a href="#"> Item 9 </a></li>
	<li><a href="#"> Item 10 </a></li>
</ul>
</li>
</ul>
</li>
	<li class="wcnavlist"><a class="wclink" href="#">Guest Post</a></li>
	<li class="wcnavlist"><a class="wclink" href="#">Contact Us</a></li>
	<li class="wcnavlist"><a class="wclink" href="#">Services</a></li>
	<li class="wcnavlist"><a class="wclink" href="#">Privacy Policy</a></li>
</ul>
<pre></pre>
<pre>

Now open your blog to find out that what effects this new coding has made.

I will also like to share some other dropdown menu with you.
Just visit this page and you will find some great dropdowns for your blogspot blog.

Facebook Likebox

We all have social engagements in our lives. As a human we love to meet and share our stories with others. For this purpose many companies have introduced their social media websites where people can meet with others.

As a Blogger you will love to link your fans on your social media page where they can follow you and your blog. For this you first need to make your facebook page and then you have to ask your readers to like it.

Obviously, you can not reach out every single reader at your own legs. You have to install something in your blog which will automatically ask every single visitor to like your page.

For this we will install a simple Facebook Likebox from where your fans can like your page by just clicking on like button. Its also a good way to show your fan following strength.

First visit your Blog and then move to layout section and then click on Add a new gadget button.

Now choose HTML/Javascript gadget and paste the following code in the content area:

</pre>
<pre class="code"><iframe src="//www.facebook.com/plugins/likebox.php?href=<span style=" width="300" height="150"><strong>paste your facebook page url here</strong>&height=258&show_faces=true&colorscheme=light&stream=false&border_color&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe></pre>
<pre>

Just replace this line “paste your facebook page url here” with your original facebook page’s URL Now Enjoy!

Social Media icons

You will also like to add some social media icons in your Blog. Since we do not have the availability of this option in Blogger we will use some codes to enjoy this feature.

For this move to your Blog’s layout section again from your dashboard — then click on Add a gadget button and now select HTML/Javascript.

Now paste this code in the content area:

<style>
.fb {
background:rgba(87,104,176,35);
width:50px;
height:50px;
transition:width 1s;
overflow:hidden;
font-size: 20px;
box-shadow: 2px 4px 1px grey;
border-radius: 51px 50px 50px 50px;
}

.fb:hover {
width:150px;
}

.tw {
background:rgba(14,174,284,1);
width:50px;
height:50px;
transition:width 1s;
overflow:hidden;
font-size: 20px;
box-shadow: 2px 4px 1px grey;
border-radius: 51px 50px 50px 50px;
}

.tw:hover {
width:150px;
}

.gp {
background:rgba(202,58,48,4);
width:50px;
height:50px;
transition:width 1s;
overflow:hidden;
font-size: 20px;
box-shadow: 2px 4px 1px grey;
border-radius: 51px 50px 50px 50px;
}

.gp:hover {
width:150px;
}

.pt {
background:rgba(192,24,16,1);
width:50px;
height:50px;
transition:width 1s;
overflow:hidden;
font-size: 20px;
box-shadow: 2px 4px 1px grey;
border-radius: 51px 50px 50px 50px;
}

.pt:hover {
width:150px;
border-radius: 51px 50px 50px 50px;
}
.fbtxt {
 margin-left: 50px;
 margin-top: 11px;
 color: white;

}

.image img {
height: 50px;
width: 50px;
float:left;
transition: transform 2s, width 2s, height 2s;
}

.image img:hover {
transform: rotate(360deg);
-webkit-transform:rotate(360deg); 
width:62px;
 
-webkit-animation:example 2s infinite linear; /* Chrome, Safari, Opera */
 animation:example 2s infinite linear
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
 from {transform:rotate(0deg);}
 to {transform:rotate(360deg);}
}

/* Standard syntax */
@keyframes example {
 from {transform:rotate(0deg);}
 to {transform:rotate(360deg);}
}
</style>

<div class='fb'><a href="####" target='blank' class='image'><img src="http://2.bp.blogspot.com/-ACIRMV7s8ZA/VTUZCKsA2bI/AAAAAAAAAVQ/_q-Npc9JzGk/s320/facebook-icon-circle.png" width="360" height="200" alt="" /></a><div class='fbtxt'>Facebook</div></div>

<div class='tw'><a href="####" target='blank' class='image'><img src="http://4.bp.blogspot.com/-992FVJlk_Lw/VTUaSodA9KI/AAAAAAAAAVc/TgFiXW9ikvw/s1600/twitter.png" width="360" height="200" alt="" /></a><div class='fbtxt'>Twitter</div></div>

<div class='gp'><a href="####" target='blank' class='image'><img src="http://1.bp.blogspot.com/-PcLuA6aPJaM/VTUekWSs1TI/AAAAAAAAAVo/4HrbZpnQKD0/s1600/google-plus-icon.png" width="360" height="200" alt="" /></a><div class='fbtxt'>Google+</div></div>

<div class='pt'><a href="####" target='blank' class='image'><img src="http://4.bp.blogspot.com/-iNxIZbbw7vQ/VTUgst3z8vI/AAAAAAAAAV8/BPWCSrvDbJ0/s1600/pinterest-icon1.png" width="360" height="200" alt="" /></a><div class='fbtxt'>Pinterest</div></div>
</pre>
<pre>

Just replaces hashes(####)with your own social network addresses.

Popular Post widget

One more thing which a Pro blog most have is a Popular Post widget from where your readers can know that what posts are trending on your blog.

To install this good looking and attracting widget we will go to the template section and then we will click on Edit HTML button.

Now find ]]></b:skin> in your template’s code and post this code below it:

.popular-posts ul{padding-left:0px;}
    .popular-posts ul li {background: #FFF  no-repeat scroll 5px 10px;
    list-style-type: none;
    margin:0 0 5px 0px;
    padding:5px 5px 5px 20px !important;
    border: 1px solid #dcdcdc;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    }

    .popular-posts ul li:hover {

    background:#FF8040;

    }

.popular-posts ul li a
{
text-decoration:none;
font:14px Georgia, verdana;
color:#222222;
}
    .popular-posts ul li a:hover {
    text-decoration:none;
    color:#fff;
    }

You can install many other popular post widgets too by searching on Google.

6 Comments

  1. Kamlesh Sharma February 23, 2015
  2. Amrita February 23, 2015
    • Husnain February 23, 2015
  3. gulnaz April 24, 2016
  4. rai July 23, 2016
  5. muzammil February 25, 2019

Leave a Reply