Tags: Widgets

5 Important Blogger Widgets Everyone Must Use

- 10 Comments

Widgets and plugins play a great a role in our blog design and development. Only template is not necessary for a blog, widgets are also part of our blog for making our blog more functional and user friendly. There are hundreds of widgets available on the web such as popular posts widget, email subscription boxes, social sharing widgets, recent posts widget etc. Each widget plays its own role and has its own benefits. But there are some important widgets and i think that without those widgets you can't increase your appearance and traffic. So, below I'm going to share those widgets which are important and everyone must use.

Email Subscription Box/Widgets

Almost every blogger knows the importance of Email Subscription widget. Email subscription boxes are the best way to collect your visitors/readers and provide them your latest updates directly to their inbox. There are many email subscription widgets you can use. That can be implement in header, sidebar and below/above posts to attract more subscribers.
Email Subscription Widgets by Blogolect:
Simple Flat UI Email Subscription Widget for Blogger
Flat UI Email Subscription Box For Blogger
Simple Email Subscription Widget
Simple Email Subscription Form V2 Widget For Blogger
Email Subscription Widget V3 for Blogger
RSS Email Subscription Form Widget For Blogger

Social Subscription Widgets

Social Subscription widgets are one of the best way for increasing your loyal readers. These widgets are important for increasing your social activity. These widgets help people to connect with you on social networks. So, it's important to implement social subscription widget to your blog.
Social Subscription Widgets by Blogolect:
Social Subscription Widget For Blogger
Add Metro Style Social Widget In Blogger
How To Add Social Subscription Widget In Blogger
Social Subscription Widget V2 For Blogger
Email Subscription Widget V3 for Blogger

Social Sharing Widgets

Social media is a critical factor for the success or failure of your blog. You can boost up your visitors with the help of social media. You can make your blog successful by using social networks like Facebook, twitter and Google +. Here comes the concept of social sharing buttons. You might have seen social sharing buttons of different styles on many blogs. These social sharing buttons are very important for a blog. With the help of these buttons your visitors can easily share your great content on their profiles and this will also help you to increase your blog traffic.
Social Sharing Widgets by Blogolect:
Add AddThis Floating Share Buttons to Blogger
How To Add Floating Social Media Sharing Buttons To Blogger
5 Websites for Adding Social Sharing Buttons to your Blog

Search Box

Having a search box on your blog is always recommended. Search Boxes are the most essential element of a blog, allowing your visitors to dig and find contents. Search boxes allow your visitors search for the content that they are looking for. Basically search boxes are just like search engines that searches for the content that you've published on your blog and having a search form on your blog can save readers a bunch of time.
Search Boxes by Blogolect:
Add 9 Beautiful Search Boxes to Blogger
How to Add Google Custom Search Engine to Blogger
Add a Simple Search Box Widget to Blogger 

Related Posts

Displaying related posts is a smart way for keeping your blog visitors around. When someone reads your article and after completing he might leave your blog directly but what if we bring him on another blog post, then related posts widget is the best way. Related posts widget display related posts for the particular user and keeps you visitors around.
Related Posts Widget by Blogolect:
Related Posts Widget with Thumbnails and Summary for Blogger

From Editors Desk

We hope that this collection may have helped you in choosing some important and useful widgets for your blog. Share this collection with your friends and don't forget to subscribe us by email. Enjoy Blogging :)

Tags: Widgets

How to Add Google Custom Search Engine to Blogger

- 41 Comments

Today we're going to discuss about Adding Google Custom Search Engine to Blogger. Most of the blogger templates comes with built-in search boxes and you might have observed that these boxes are incapable of displaying relevant results because their factor of finding results is not good. The reason is that those searching widgets doesn't searches the whole blog(each and every word) they work on the basis of post titles. The best solution is to use Google Custom Search Engines (CSE) that are extremely efficient in digging in to your posts and displaying it to your visitors. If your website has thousands of pages with huge data and you find it difficult to set the perfect navigation then the Custom Search Engines is the best way that will help your visitors to navigate easily just by searching the article that they are looking for. Furthermore you can easily integrate your Google AdSense Ads to your Google custom search box, which will increase your revenue for every click made on the search results. Google Custom Search also provides you an option to customize your search box, even you can change the layout of search results and more. So let's create and install Google Search Boxes for your Blog.

How to Add Google Custom Search Engine to Blogger

First and foremost go to https://www.google.com/cse/ and click Create a custom search engine button. Enter your Blog Address in "Sites to Search" field, pick up a Search engine name and hit the Create button.

Now click on Get Code button, a code will appear copy that code and go to your Blogger Dashboard >> Layout >> Add a Gadget >> Select HTML/JavaScript gadget from the list of gadgets >> Paste that code in the empty widget box and hit the Save button.

You can also customize the look of your search box to customize your search box click Edit Search Engine >> Look and Feel and choose your layout, themes and thumbnails style.

Congratulations: You've successfully added your custom search engine to blogger.

From Editors Desk

We hope this tutorial may have helped you in learning How to Add Google Custom Search Engine to Blogger. Share this post with your friends and don't forget to subscribe us.

Tags: Blogger Tricks / Plugins / Widgets

Add Pinterest Pin It Official Image Hover Button to Blogger

- 7 Comments

If you're a blogger, you might have noticed the "Pin It" buttons that appears on mouseover. Pinning an image is now easier due to these buttons. These hover buttons make it easy for your blog visitors to pin your image to their Pinterest boards.When you move your mouse cursor over an image on a blog, a Pinterest logo pops up with a Pin It text prompting you to “Pin” the image to your Pinterest boards. The person who pressed the Pin It button can now see that image on their dashboard and it also link back to your blog. I find pinterest a great way for generating traffic to my blog and i also recommend you to add this button to your blog. Pinterest has its own official "Pin it" hover button which you can add to your blog/website and today in this tutorial we'll show you that How to Add Pinterest Pin It Official Image Hover Button to Blogger.

How to Add Pinterest Pin It Official Image Hover Button to Blogger

First and foremost log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and use Ctrl+F to search a code and search for the following tag.

</body>

Now copy (Ctrl+C) the below script and paste (Ctrl+V) it just above/before the </body> tag

<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>

Hit the Save Template button and you're done.

From Editors Desk

We hope this tutorial may have helped you in learning How to Add Pinterest Pin It Official Image Hover Button to Blogger. Share this post with your friends and don't forget to subscribe us.

Tags: Widgets

Top 4 Sites to Add Weather Forecast Widgets to your Blog

- 141 Comments

Looking to add a weather forecast widget to your blogger blog? This could be an amazing thing for your visitors. You can use these widgets to display weather information of your city and some of them also update with the user location. Recently one of our visitor asked us about adding weather forecast widget in blogger. You can display live updates of the current conditions from where you’re blogging. So today, here are the top 4 sites to add weather forecast widget to your blog.

1. Accu Weather

Go to Accuweather.com >> Select your city >> Go to the bottom of that page >> Select Widget >> Choose Layout >> Click Get the Code and add it to your Blog.

2. Weather Forecast Map

Weather Forecast Map provides dozens of widgets with their different layouts and styles. Select your City/Country >> Choose a Layout and add it to your Blog

3. Weather.com

Weather.com also provides free widgets for your blog. Enter your City >> Choose a Layout >> Choose your Theme and add it to your blog.

4. Weather Bug

Weather Bug provides 6 different sizes for widgets. All widgets display current temperatures, wind speed as well as links to radars and live cameras.

From Editors Desk

We hope this article helped you in adding a weather forecast widget to your blog. Share your thoughts in the comments and don't forget to share it with your friends.

Tags: Widgets

Add AddThis Floating Share Buttons to Blogger

- 2 Comments

You might have seen social sharing buttons of different styles on many blogs. These social sharing buttons are very important for a blog. With the help of these buttons your visitors can easily share your great content on their profiles and this will also help you to increase your blog traffic. There are many sharing widgets with their different styles available around the web and today we are going to share one of them. We're going to share AddThis social sharing buttons, these buttons not only provide your users a means to share you great content but also monitor and analyze your data. AddThis provides a great and easy sharing experience to your visitors and one more thing, we all know that now a days Flat design is on top, so these sharing widgets are also in Flat design, simple and stylish. So today, in this tutorial we'll show you that Add AddThis Floating Share Buttons to Blogger.

How to Add AddThis Floating Share Buttons to Blogger

Step 1. Go to AddThis.com and Create an Account, after you signup they ask will ask you to add the default JavaScript, add that code just below <head> in your blogger template editor (Blogger Dashboard >> Template >> Edit HTML)
Step 2. Go to AddThis Dashboard >> Tool Gallery, AddThis provides both free and premium buttons, click on the free Sharing Sidebar from the widgets, a popup will open

Step 3. From that popup choose how many buttons you want to show and their background color, now scroll down and you'll see a piece of code

Step 4. Copy that code and Go to your Blogger Dashboard >> Layout >> Add a Gadget >> Scroll down and choose HTML/JavaScript gadget from the list of gadgets
Step 5. Paste that code in the empty widget box
Step 6. Press the Save button
And you're done.

From Editors Desk

We hope that this article helped you in leaning How to Add AddThis Floating Share Buttons to Blogger. If we misses something or you have any problem, then don't hesitate to comment. If you've any problem, let us know in the comments and share this article with your friends.

Tags: Widgets

How to Add Hello Bar to Blogger

- 4 Comments

There are many sticky bars all over the internet and we also have shared some of them. Sticky bars are used to display most important posts of your blog on the top. These sticky bars scrolls with you page and easily grabs you visitors attention. Today I'm here with another great site which provides great service to create a sticky bar easily, this sticky notification bar is known as Hello Bar. There are many features and advantages of this bar. You also don't have to worry if you're a newbie blogger, no coding is required for adding this bar. Some features of this Notification Bar are:

• Easy Installation

• Easily Customizable

• You can update it directly from your Hello Bar dashboard

Below we've explained each and every step for its installation with screenshots.
Recommended For You:
Add Beautiful Notification Bar to Blogger

How to Add Hello Bar to Blogger

Step 1. Go to http://www.hellobar.com
Step 2. Enter you Blog Address in the Address field and click Continue button

Step 3. From the next page Choose Drive Traffic option

Step 4. It'll ask you for your Goal URL which is actually the URL of button that will be in your bar, enter your URL and click Continue

Step 5. On the next page enter your text that you want to show in the Bar Text field and Link Text with your Link Text (Text for Goal URL), choose a color and press the Next button

Step 6. Now they'll ask you to create an account, enter your account Login details and click Create my Account button

Step 7. You've successfully created your bar, from the next page choose I can install code myself option, a code will appear, Copy (Ctrl+C) that code

Step 8. Now Log in to your Blogger Account >> Go to Template >> Edit HTML and Search (CTRL+F) for the following tag

</body>

Step 9. Paste (Ctrl+V) the copied code just above/before it
Step 10. Press the Save Button
And you're done
Congratulations: You've successfully added Hello Bar to you Blogger Blog.

From Editors Desk

We hope that this article helped you in learning How to Add Hello Bar to your Blogger Blog. Share this article with your friends and don't forget to subscribe us.

Tags: Widgets

Beautiful Blog Badge with CSS Effect for Blogger

- 2 Comments

Recently we shared Beautiful Circular Blog Badge with CSS Effect for Blogger with you and today we are going share another badge for your blog. The previous badge was in circular shape but this one is in square shape and it'll definitely fit in your sidebar. When hovered this widget displays your Blog name or whatever you've written. This badge is almost completely based on CSS and works on CSS transitions. This badge is extremely attractive and will force you visitors to hover on it to see what happens on hover. A live demo of this widget can be seen below:
Important Note: Our Facebook page has been suspended, so we request you to join us on our new Fan Page

Blogolect

How to Add this Badge to your Blog

First of all log in to your Blogger Account, select your Blog, go to Layout >> Add a Gadget and select HTML/JavaScript gadget from the list of Gadgets. Copy (Ctrl + C) the below code and Paste (Ctrl + V) it in the empty widget box

<style>
.square{background:#fff;border-radius:4px;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.square h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.square h1 a{color:rgba(189,185,199,0);text-decoration:none}
.square:before,.square:after{border-radius:4px;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.square:after{transform:rotate(45deg)}
.square:hover:before,.square:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.square:hover > h1 a,.square:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="square">
  <h1><a href="Your Link Here">Your Text</a></h1>
</div>

Customization:

• Replace Your Text with your desired text that you want to show on hover and Your Link Here with your link  

Now Press the Save Button
And you're done :)

Tags: Widgets

Beautiful Circular Blog Badge with CSS Effect for Blogger

- No Comments

Today we're going to share a beautiful badge for your blog. This badge is in circular shape and when hovered it goes through a beautiful and colorful CSS Transition and displays your blog name or whatever you've written. This badge is almost completely based on CSS and works on CSS transitions. This badge is extremely attractive and will force you visitors to hover on it to see what happens on hover. We hope that this badge will make your blog more beautiful and user friendly. A live demo of this widget can be seen below:

Blogolect

How to Add this Badge to your Blog

Step 1. Log in to your Blogger Account
Step 2. Select your Blog, go to Layout >> Add a Gadget and select HTML/JavaScript gadget from the list of Gadgets
Step 3. Now Copy (Ctrl + C) the below code and Paste (Ctrl + V) it in the empty widget box

<style>
.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="circle">
  <h1><a href="Your Link Here">Your Text</a></h1>
</div>

Customization:

• Replace Your Text with your desired text that you want to show on hover and Your Link Here with your link  

Step 4. Hit the Save Button
And you're done :)

Tags: Widgets

How to Add Numbered Page Navigation Widget to Blogger

- 2 Comments

Blogger default navigation shows "Newer Posts" and "Older Posts" links in our homepage, this default navigation is not so much attractive and user friendly. In order to make our navigation easy and attractive we use Numbered Page Navigation System. The main advantage of this system is that our visitors can easily navigate to any page without wasting their time. You might have seen many Navigation Systems with their different styles. However the latest templates comes with this Navigation System but some old templates we have to install it. So, we have designed a simple and attractive navigation system for you and in this tutorial we'll show you that How to Add Numbered Page Navigation Widget to Blogger.

How to Add Numbered Page Navigation Widget to Blogger

Step 1. Log in to your Blogger Account
Step 2. Select your Blog and Go to Template >> Edit HTML and Search (Ctrl + F) for the following tag

]]></b:skin>

Step 3. Copy and Paste the following piece of code just above/before it

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;border:4px solid #000;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#666666;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Step 4. Now find (Ctrl + F) this tag

</body>

Step 5. And add the following script just above/before it

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=6;
    var numPages=6;
    var prevText ='◄';
    var nextText ='►';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src='https://googledrive.com/host/0B43vwjPtKakCYW43X0V3LTM0ZGs'/>
</b:if>
</b:if>

Customization:

• var perPage=6; No. of posts to show perPage
• var numPages=6; No. of pages to show in Navigation
• var prevText ='◄'; Text to show for Previous Page button
• var nextText ='►'; Text to show for Next Page button

Step 6. Press the Save Template button
And you're done

From Editors Desk

We hope that this article helped you in adding a Numbered Page Navigation System to your blog. Share it with your friends and don't forget to subscribe us.

Tags: Widgets

How to Add Flag Counter widget to your Blogger Blog

- 57 Comments

You might have seen visitors count with country flags on many blogs. Flag counter widget displays visitors count with their country flags/names. Bloggers use flag counter widget on their blogs to show that from where they're getting most of their traffic and to show their pageviews. If you are a blog/website owner and you're looking to show a visitors/flag counter on your blog, then you're at right place. Today in this article we are going to learn How to Add Flag Counter widget to your Blogger Blog.

How to Add Flag Counter widget to your Blogger Blog

First of all go to this page. You'll see a plenty of options on that page for customization.
Customization:
1- Select Top Countries to display the visitors of top countries. Select Flag Map to diplay a map.
2- Select maximum number of flags to show
3- Choose its background color
4- Select the number of columns and text color
5- Choose its border color and make other necessary customization
Check your widget in preview section, if widget is perfect in preview section, click "Get your Flag Counter"

It'll ask you to register, register your flag counter or click on Skip.
On the next page you'll see two codes, the first one for websites and the second one for forums. Copy the code for websites.

Now log in to your Blogger Account. Go to Layout >> Edit HTML >> Scroll down and select HTML/JavaScript gadget from the list of gadgets and paste the code in the HTML/JavaScript widget box. Finally click on Save button and you're done!

Final Words

We hope this article helped you in learning How to Add Flag Counter widget to your Blogger Blog. Share this article with your friends and don't forget to subscribe us!

Tags: Widgets

Simple Flat UI Email Subscription Widget for Blogger

- 7 Comments

Almost every blogger knows the importance of Email Subscription widget. Email subscription boxes are the best way to collect your visitors/readers and provide them your latest updates directly to their inbox. Bloggers are trying different methods to increase their email subscribers list and one of the best method is to add an Email Subscription Box to your sidebar or anywhere on your blog. We've also shared some of them. Just recently, we've created another Email Subscription widget and on the basis of its design we named it Simple Flat UI Email Subscription Box and it will definitely attract your visitors. This widget has a header, two fields one for the name and the other for email with beautiful icons and hover effects and at the end a beautiful Sign Up button.

Simple Flat UI Email Subscription Widget fot Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Layout and click on Add a Gadget
Step 3. A popup will open scroll down and select HTML/JavaScript gadget from the list of gadgets
Step 4. Now copy the below cod and paste it in the empty widget box
Note:
Our codes can be used for both commercial and personal purposes. Blogger are requested to link back to www.blogolect.blogspot.com if they wish to share this widget with their readers or on their blogs.

<style type='text/css'>
     #blogolect_Subscriber_name{
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiquS6Hvjsz7kN6mgHhxdsEf7h2GXJETOtamGiHPtiUKv0CRDEIcoMYxrSGvvg-U76OHy_PGjiVuUVH-ppJotCSIqkVksdbjuBnOsRCGt860HRbKuw9ex8C9E1LW7oxsKL4Qx0lSMagwmQ/s1600/name+icon.png) no-repeat center right;}
     #blogolect_Subscriber_email{
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMbS3QZ8tHjGu-tbdja3Ea7k-w8TItpema-CCytK8AkmYoEUt401UUmWmtohtMp07OOMtznh2xiSn9zCrX6HMscVya-P9wRC_6uEJpTPkSVnLb6f2GYu0v1QK2AQya2mFugjhJEAb9KoI/s1600/email+icon.png) no-repeat center right;}
     #bgt-emailsubs {
      width: 300px;
      height: 265px;
      border: 2px solid #ddd;
      border-radius: 5px 5px 1px 1px;
     }
     #bgt-emailsubs .header {
     background: none ;
     color: #a3a3a3;
     font-size: 28px;
     line-height: 36px;
     padding: 15px 25px;
     font-weight: 700;
     font-family: open sans;
     text-align: center;

     }
   #bgt-emailsubs p {
    font-family: open sans;
    line-height: 26px;
    font-size: 13px;
    color:#333;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #bgt-emailsubs .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #bgt-emailsubs .emailsub .button {
    background: #2aa4cf;
    color: #ddd!important;
    font-weight: bold;
    margin-right: 5%;
    width: 100%;
    border:none;
    outline: none;
    border-bottom: 3px solid #99E4FE;
    transition:background .3s linear;
    cursor:pointer;
   }
   #bgt-emailsubs .emailsub input {
    color: #333;
    width: 92%;
    padding: 10px;
    margin-top: 10px;
    font-family: open sans;
    font-size: 15px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #bgt-emailsubs .emailsub input:focus {
    outline: none;
    box-shadow: 0 0 3px 1px #2aa4cf;
   }
   #bgt-emailsubs .emailsub .button:hover{
background: #1D7290;
   }

     </style>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='bgt-emailsubs'>
            <div class='header'>
            Subscribe Now!
            </div>   
            <div class='emailsub'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogolect', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
          <input class="name" id="blogolect_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Name" /><br />
<input class="email" id="blogolect_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';"  type="text" value="Enter Email Address" /><br />
            <input type="hidden" value="blogolect" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
                        <input value="I AM IN !" class="button" type="submit" />

            </form>
            </div>

Replace blogolect with your Feedburner username
Step 5. Click on Save Button
And you're done!

From Editors Desk

Our codes can be used for both commercial and personal purposes. Blogger are requested to link back to www.blogolect.blogspot.com if they wish to share this widget with their readers or on their blogs. Share this widget with your friends and don't forget to subscribe us.

Tags: Widgets

How to Add Google Plus badge to Blogger

- 1 Comment

Google Plus provides its official badge to promote your brand/yourself on your blog/website. You can easily interact with your readers and friends by implementing a Google Plus badge to your blog. Google provides two different types of badges. The first one is of Portrait style which shows your profile picture, cover photo, name, a short description and follow button and the second one is Landscape which shows your name/brand name, profile picture and follow button. So, today in this tutorial we are going to share that How to Add Google Plus badge to Blogger.

How to Create Google Plus badge to Blogger

Step 1. Log in to your Google account and go to this page
Step 2. Select your account/page for which you want to create a badge
Step 3. Choose its features, select a layout i.e landscape/portrait, set its widget and make other necessary customizations

Step 4. Now copy the code from the box on the right side

How to Add Google Plus badge to Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Layout >> Add a Gadget

Step 3. A popup window will open containing gadgets, scroll down and select HTML/JavaScript gadget from the list of gadgets
Step 4. Paste the copied code in the empty box
Step 5. Hit the Save button
And you're done.

From Editors desk

We hope this article helped you in learning How to Add Google Plus badge to Blogger. Share this article with your friends and don't forget to subscribe us. Take Care!

Tags: Widgets

Add Stylish Random Posts Widget to Blogger with Image Thumbnails and Summary

- 12 Comments

Random Posts widget shows random posts from you blog. Your visitors don't have time to go through all the posts that are published on your blog. Adding this random posts widget to your blog will show random posts from your blog and will help your visitors to surf more on your blog. It comes with new posts every time when the page is refreshed. This widget will also make your visitors to get more interested in your blog. Today, in this article we are going to share a Stylish random posts widget for Blogger with image thumbnails and summary.

Stylish Random Posts Widget for Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Layout >> Click on Add a Gadget

Step 3. A popup window will open containing widgets, scroll down and select HTML/JavaScript widget from the list of widgets
Step 4. Copy the below code and paste it in the Empty widget box

<style>
#random-posts img{border-radius: 10px;float:left;margin-right:5px;
width:75px;height:75px;background-color: #F5F5F5;padding: 3px;transition: all 0.2s linear 0s;}
#random-posts img:hover{opacity: 0.6;}
ul#random-posts {list-style-type: none;padding: 0px;}
#random-posts a {font-size: 12px;text-transform:uppercase; padding: 0px auto 5px;}
#random-posts a:hover {text-decoration: none;}
.rp-snippet {font-size: 11px;background: none; padding: 5px; margin-right: 8px;}
#random-posts span {}
#random-posts li {margin-bottom: 10px;border-bottom: 1px solid #EEEEEE; padding: 4px;}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=8;
var rdp_snippet_length=120;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrOU5UDIL5Gg8ry8TMROg8HNhNta3BpCULvk2UNlEot4bOi9XZj7Dmf1TRWSEarC9ciKpbnqOfiozS0Z0yNIeEEN8BDjz1NlapW7H0jy8XGRw5QL9Be2yUm3DP0EE5NAR9h5CDEJBTh8/s1600/default.jpg"}}};document.write('<li>');document.write('<a href="'+rdp_posturl+'" rel="nofollow"><img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/></a>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span><div  class="rp-info">'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</div></span>'};document.write('<br/><div class="rp-snippet">'+rdp_snippet+'</div><div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Customization:

• To change the size of thumbnails replace both 75px with your dimensions for height and widget

• Replace 8 with the number of posts you want to show

• Replace 120 with the number of characters you want to show in summary

• To hide the comments count and date change yes to no

Step 5. Hit the Save Button
And you're done

From Editors Desk

Share this article with your friends and don't forget to subscribe us. Take Care!

Tags: Widgets

How to Add Twitter Follow button to Blogger

- 3 Comments

Twitter is one of the best ways to connect with your visitors and share with them that what you are going to do next i.e upcoming event or what you are going to publish on your blog etc. So, make it easy for your visitors to follow you on twitter by adding a follow button and let them connect with you. Twitter follow button lets you visitors to follow your on twitter by just one click without leaving you blog. Let us proceed to the tutorial:

Creating Twitter Follow button for Blogger

Step 1. Go to this page
Step 2. You'll see 4 different type of buttons i.e Share a Link, Follow, Hashtag and Mention
Step 3. To add a Twitter follow button select Follow button

Step 4. Options for the follow button will appear, enter your twitter username in the User box

Step 5. Customize its look and click on the code and copy from the right side as shown below

How to Add Twitter Follow button to Blogger

Step 1. Log in to your Blogger Account
Step 2. Go to Layout >> Add a Gadget

Step 3. A popup window will open containing widgets, scroll down and select HTML/JavaScript gadget from the list of gadgets
Step 4. Paste the code in the empty box
Step 5. Click on Save Button
And you're done!

Tags: Twitter / Widgets

How to Add a Twitter Feeds Widget in Blogger

- 1 Comment

Twitter is an online social networking service that enables us to interact with each other. And for bloggers twitter is the best way to interact with their visitors. Like other social networks, twitter also plays an important role in building our audience. So, today we are going going to share How to Add a Twitter Feeds Widget in Blogger. This widget shows your tweets, follow button, their dates and a tweet box. Using this widget you visitors will know more about you and your latest tweets live on your blog. Follow the steps below to add this widget to your blog

How to Add a Twitter Feeds Widget in Blogger

Log in to your Twitter Account and go to this page. You'll see plenty of options there for the customization of height, link color and theme of the widget. Customize the widget in your own way and hit the 'Create Widget' button.

A code will appear under the widget preview.

Now to add User Timeline Feeds widget to your blog, copy the widget code, Log in to your Blogger Account. Go to Layout >> Add a Gadget >> select HTML/JavaScript from the list of gadgets and paste that code in the HTML/JavaScript widget box. Now hit the Save button.
Congratulations: You've successfully added Twitter User Timeline Feeds widget to your blog.
Twitter also provides 4 different types of widgets including user timeline widget and you can add them too by the same steps.

From Editors Desk

We hope that this article helped you in learning How to Add a Twitter Feeds Widget in Blogger. Share it with your friends and don't forget to subscribe us.

Tags: Widgets

Add a Facebook Popup Like Box to Blogger

- 2 Comments

A Facebook Like Box is a great plugin for developing your Facebook community. Facebook like box allow you visitors to join you on Facebook without leaving the page. After joining the person will receive all the updates from your page in his/her feed. Whatever, Facebook like box plays an important role in building your blog's audience and your social activity. The widget we're going to share with you today is an amazing widget, when someone visits you blog while loading the page, page gets dark background and this widget appears in order to ask your visitor to like your page. This widget has a beautiful look and a smart design. And on the top right corner there is a close button for closing the widget.

How to Add Facebook Popup Like Box to Blogger

Step 1. Log in to your Blogger Dashboard

Step 2. Go to Template >> Edit HTML >> and Search (Ctrl + F) for the following tag

</body>

Step 3.  Now Copy the below code and Paste it Just Before/Above the </body> tag

    <style type='text/css'>
    #bgtfbpopup {
    position:fixed !important;
    position:absolute;
    top:-1000px;
    left:50%;
    margin:0px 0px 0px -182px;
    width:300px;
    height:auto;
    padding:16px;
    background:#FEFEFE;font:normal Dosis, Georgia, Serif;
    color:#111;
    border:2px solid #333;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    }
    #bgtfbpopup a.bgtclose {
    position:absolute;
    top:-10px;
    right:-10px;
    background:#fff;
    font:bold 16px Arial, Sans-Serif;
    text-decoration:none;
    line-height:22px;
    width:22px;
    text-align:center;
    color:#000000;
    border:2px solid #333;
    -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    box-shadow:0px 1px 2px rgba(0,0,0,0.4);
    -webkit-border-radius:22px;
    -moz-border-radius:22px;
    border-radius:25px;
    cursor:pointer;
    }
    </style>
     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(window).bind(&quot;load&quot;, function() {
    $(&#39;#bgtfbpopup&#39;).animate({top:&quot;150px&quot;}, 1000);
    $(&#39;a.bgtclose&#39;).click(function() {
    $(this).parent().fadeOut();
    return false;
    });
    });
    </script>
    <div id='bgtfbpopup'>
   
    <center>
    <b>Don&#39;t Forget To Join US On Facebook</b></center>
    <center>
    <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogolect&amp;width=300&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=196282097100252' style='border:none; overflow:hidden; width:300px; height:258px;'/>
    </center>
   
    <a class='bgtclose' href='#'>&#215;</a>
    <center style='float:right; margin-right:10px;'>
    <span style='font-size:xx-small; color:#000; text-decoration:none;'></span>
    <a href="http://www.blogolect.blogspot.com.com" rel="dofollow" target="_blank" title="blogger"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizAICHt7N-6v-gFDKilU0UqBX0_OfhNlwRz0X_qIqOOX1mZ6ABZKJszVfFvAfadQM57-3T2gex7vQltk1ItKBtn4clQDqJb4GMTnGZ4jxZNYtmovYk4Ps5dEefVoS64hq-4EBGOqP2rGQ/s1600/bgt-blank.gif" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href='http://blogolect.blogspot.com/2014/02/add-facebook-popup-like-box-to-blogger.html' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Provided by Blogolect</a></center>
    </div>

• Replace blogolect with your Facebook Fan Page Username

Step 4. Hit the Save Template Button

And you're done...

Tags: Widgets

How to Add Facebook Activity Feed Plugin to Blogger

- 8 Comments

Recently, we've shared How to Add Facebook Like Box to Blogger and today we have one another Facebook Plugin which is Facebook Activity Feed Plugin for Blogger. This widget appears on the sidebar of your blog and shows the recent stories recommended by your readers. Thus this widget builds your social engagement, attracts your visitors and will enhance your blog's readership. The biggest advantage of this widget is that it shows all the recommended posts on your blog. So, lets come to the point and learn How to Add Facebook Activity Feed Plugin to Blogger.

How to Add Facebook Activity Feed Plugin to Blogger

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML >> and Search for the following tag

<body>

Step 3. Now Copy the below code and paste it just below/after <body> tag

     <div id='fb-root'/>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Step 4. Hit the Save Template Button
Step 5. Now Go to Layout >> Add a Gadget >> Scroll down and select HTML/JavaScript from the list of gadgets
Step 6. Copy the below code and Paste it in the empty box (HTML/JavaScript widget box)

<div class="fb-activity" data-site="http://www.blogolect.blogspot.com" data-width="300" data-height="450" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>

Customization:

• Replace http://www.blogolect.blogspot.com with your blog/website URL
• Default height and widget is 300 and 450. You can change them according to your blog's layout.

Step 7. Hit the Save button
And you're done...

Tags: Widgets

How to Add Facebook Like/Fan Box to Blogger

- No Comments

A Facebook Like/Fan Box is one of the best plugins that are important for your blog. Facebook Like Box allows your visitors to get your updates/notifications in an easy and convenient way. This box allow your visitors to join your community with ease of a single click. After subscribing, the person will receive all the recent updates on their feeds. Whatever, Facebook like box plays an important role in building your blog's audience. So, today we are going to learn that How to Add Facebook Like/Fan Box to Blogger. How it looks? Have a look at the image below.

How to Add Facebook Like/Fan Box to Blogger

Step 1. Visit this Page: https://developers.facebook.com/docs/plugins/like-box-for-pages
Step 2. Find out your Facebook Page URL by visiting your page
Step 3. Copy your Facebook Page URL and paste it in the Facebook Page URL field as shown below

Step 4. Customize its look, and click on Get Code button
Step 5. A popup will open, select IFRAME option from the popup
Step 6. Copy the iframe code as shown below

Step 7. Now Go to Blogger Dashboard >> Layout >> Add a Gadget

Step 8. Select HTML/JavaScript from the list of gadgets

Step 9. Paste the code in the empty box
Step 10. Click on Save button
And you're done! Tadaahhhh