change widget background color in blogger

Widget background color:

You can change background color of your Blogger widgets. By default there is no background color on Gadgets on your Blogger. But you can set any background color. You can customize your blog widgets easily in Blogger.  Not only background color, you can change border color a widget and you can also add background color to widget titles.

How to change widget background and border color in Blogger:

It is easy to change Blogger widget background color and also border color. Two methods are there to change widget background colors. You can change widget background through Template Designer and also you can do it by editing Blogger template code.  In this post I'm going to show you how to change background color of your Blogger widgets.

Follow bellow steps to change widget background and border color in Blogger

Step 1 : go to Blogger Dashboard

Step 2 : click on Template and click on Customise button.

Step 3 : Click on Advanced button

Step 4 : Click on Gadget Background, on right side you can see different background and border colors.

Now choose background and border color by click on colors under Background and Border colors

Step 5 :  Click on Apply to blog

That's it, now go to your Blogger blog and check widget background color.

Read More

Add a Background Image to Gadgets in Blogger Sidebar

Background Image to Blogger Sidebar Gadgets :

You can add same background image to all side bar widgets on your Blogger blog. We already discussed about adding background color to a widget and to your Blogger sidebar. Now I'm going to discuss about adding background image to your Blogger sidebar widgets. You can also add specific background image to a specific widget on your blog.

How to Add a Background Image to All Gadgets in Your Blogger Sidebar:

With simple CSS code we can add background image to all gadgets in your blogger blog. Two methods are there to add this simple code to your Blogger. First method is, adding through Blogger Template Designer. Second method adding directly to your Blogger template code. Her I'm showing you first method.

Follow below steps to Add a  Background Image to Gadgets in Blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Customise button under Customise click on Advanced tab

Step 4 : Click on Add CSS under Advanced options

add below CSS code on CSS box

.sidebar .widget {

background:url('your background image URL')repeat;

}

Step 5 : Click on Apply to blog

Note: To stop image repeatedly replace repeat with no-repeat in above code.

Read More

Add same blogger widget twice on blogger

How to add same Blogger widget twice on Blogger blog:

You can add any Blogger widget twice on your Blogger blog. If you try to add already added gadget one more time on your Blogger blog, then you can see message like already added after clicking on add a gadget. Suppose if you already added follow by email gadget on your Blogger and once again want to add same follow by email gadget on your blog then it shows already added on add a gadget window. Using default method we can't add already added gadgets like pages, follow by email and translate. But we can add same gadget twice on Blogger with simple trick. But if you want to add twice, don't add a gadget without following this method

Follow below steps to add a same widget twice on your blogger blog

Step 1 : Go to Blogger Dashboard.

Step 2 : Click on Layout and click on Add a gadget

Step 3 : Righ click on + sybmol corresponding to a gadget and click on copy link location after                  copying paste that link on address bar and press enter

Step 4 : Now configuration window will open then click on Save

Step 5 : Again paste link on address bar and click on enter and then click on save.(like in step 3&4)

Like this you can Add gadget twice on your Blogger blog easily.

Read More

Hide widget on specific pages in blogger blog

Hiding Blogger widget on a specific page :

By default all widgets installed on your Blogger will appear on every page of your Blogger blog. I.e when you click on Contact Us page of your Blogger blog, your blog sidebar widgets also appear. You can hide widgets from specific pages your Blogger blog. If you don't want to display particular widget/gadget on specific page in your blog , then just hide widget from that page.

How to hide widget/gadget on specific pages in Blogger blog : 

It simple to hide a widget on specific page or posts of your Blogger. With conditional tags we can hide/show widget/gadget on specific page in Blogger blogs. You can easily follow this method. Below I'm showing how to hide translate widget on a specific page of your Blogger blog. You can use this method to hide any widget on your Blogger.

Follow below steps to hide widget on specific pages in your Blogger blog

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search gadget code , suppose if you want to hide translate widget

then 

search below code 

<b:widget id='Translate1' locked='false' title='Translate' type='Translate'>

<b:includable id='main'>

add below code just after  <b:includable id='main'>  line,

<b:if cond='data:blog.url = = "your page url"'>

<style>

#Text2{

display: none;

}

</style>

</b:if>

Note : Don't forget to replace your page url with your page url address

Step 5 : Click on Save template.

Like this you can hide any widget on specific page of your Blogger blog.

Read More

Remove gadget shadow in blogger

How to remove gadget shadow in Blogger :

In some Blogger themes like "awesome Inc", We can see shadow around gadgets, blog posts, pager and footer on Blogger blogs. Blog will looks good after removing shadow from gadget,blog posts and Footer. It is easy to remove that shadow , without adding any CSS code. This post will help you to remove shadow from your Blogger widgets

Follow below steps to remove shadow from gadgets in Blogger blog:

Step1 : Go to Blogger Dashboard

Step2 : Click on Template

Step3 : Click on Edit html

Step4 : Search  .main-inner .widget {

Below above line you can see code like below

-moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

Set above code as comment like below

/*  -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);   */

The shadow around gadgets can also be delete by deleting above 4 lines but it is better to set them as comment. By this method, any time we can get back shadow around gadgets by simply delete comment code i,e /* and */ from above code.

Step 5 :  Click on Save template.

Read More

Add a link to blogger widget titles

How to add a link to widget titles in Blogger:

All the widget titles in Blogger have no hyper links.But we can add link to widget titles in Blogger blogs.This will works good if you add link to follows gadget like Google+ Followers gadget.With this posts we can put link in Google+ Followers widget title.

Follow below steps to add a link to widget titles in Blogger blog

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search below code

<b:widget id='PlusFollowers1' locked='false' title='Google+ Followers' type='PlusFollowers'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>


Replace last line of the above code with below like

<h2 class='title'><a href=" your custom url link"><data:title/></a> </h2>

Put link in the pace of your custom url link in the above code.

Step 5 : Click on Save template.

After adding link to your Google+ Followers gadget title , when you click on title then it will goes to the link added in the above code.

Read More

Add a line between blogger sidebar widgets

How to add a line between sidebar widgets in Blogger :

After removing sidebar widgets border, it is better to add a line between sidebar gadgets.We can separate sidebar widgets with bottom line or image.It will really help for those who removed sidebar widget border and shadow.

Follow below steps to separate sidebar widgets in Blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : click on Edit Html

Step 4 : Search  .main-inner .widget {

add below line after above

border-bottom: 3px solid #000000;


If you want to separate with image add below code instead of the above line
background-image: url(image URL);
background-position: bottom;
background-repeat: no-repeat;

Step 5 : Click on Save template.

Read More

Add background image to blogger sidebar widget titles

How to add background image to Blogger sidebar widget titles:

We can add an image as background to sidebar widget titles in Blogger.We can also add different images to different widget titles in Blogger sidebar.But here I'm telling how to set image as background to Blogger sidebar widget/gadget tiles and how to change width and height of background image.

Follow below steps to add  background image to sidebar widget titles in Blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 :  Search .sidebar .widget h2 {

add below line just below the above line

background: url(your custom image url) ;


note: put image url link in the place of your custom image url in the above line.

if you want to adjust image size use below tags :
height:  px;
width:  px;

Step 5 : Click on Save template.

Read More

Add background image or color to blogger pagelist widget

How to add background image/color to Blogger pagelist widget :

You can add background image or color to pagelist gadget on your Blogger. With background image, pagelist widget looks will improve. It is easy to add any custom background image to Blogger pagelist widget/gadget.

Follow below steps to add background image/color to Blogger pagelist widget

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search .tabs-outer {

To add background image :

add below line before closing tag of above line

background: url(your image url) ; 

To add background color :

add below line 

background: #FF8000;

Step 5 : Click on Save template

Read More

add a widget below attribution widget in blogger

Adding below Attribution widget in Blogger:

Attribution widget is placed in the footer section of a Blogger blog. We can see message like "Powered by Blogger" in Blogger blog footer. That message is added by Attribution widget. By default all the widgets added on your Blogger footer will lies above Attribution widget.

How to add a widget below Attribution widget/gadget in Blogger :

We can't move any footer widgets below to the Attribution widget simply. Because footer widget section is locked. So to allow adding a widget below Attribution widget, first you need to unlock footer widget section.

I already showed you how to customize Attribution widget on your Blogger blog. Now I'm going to show you how to add a widget below attribution widget on your Blogger blog.

Follow below steps to add a widget below Attribution gadget/widget in Blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on tTemplate

Step 3 : Click on Edit HTML

Step 4 : Search below code

<b:section class='foot' id='footer-3' showaddelement='no'>

Replace no with yes in the above code.

Step 5 : Click on Save template.

Read More

Add Related Posts Widget To Blogger with Thumbnails

Today many effective tips and tricks are available to make your blog visitors stay longer on your site/blog. The first tip is write unique and accurate content on your blog. People will come to your blog to know exactly what they want or to know something new. If you write unique and useful content on your blog, visitors will stay longer on your blog.

The next method is add related posts below blog posts in your blog. Once if your blog visitors really like current reading post, then they may also read another posts related to your current post. That's why it is better to add related posts below all blog posts on your blog.  

   

Related posts widget :

Relates posts widget helps in displaying related posts below post on your blog. We can add related posts with thumbnails using related posts widget. After adding related posts with thumbnails will appear below every post and page on your blog. In this post I'm going to explain about adding related posts widget to your Blogger with Thumbnails.

With related posts your blog traffic will increase. Adding related posts to blogs is the best way to encourage the visitors to read another posts similar to the current reading post. So with related posts your blog visitors will remain stay on your blog for longer period of time.

How To Add Related Posts Widget with Thumbnails To your Blogger blog :

Many third party widgets are available to add related posts to your Blogger blog. You can easily add related post widget to Blogger blog using those 3rd party widgets. Below I'm listing some of the top widget to add related posts with thumbnails to your Blogger blog.

Top 3rd party related posts widgets with thumbnails :

• Nrelate
• Linkwithin
• Outbrain
• Zemanta

Here I'm explaining how to add related posts widget with thumbnails to Blogger using Nrelate.

Follow below steps to add related posts widget to Blogger blog using Nrelate.

 Step 1 : Go to Nrelate website

Step 2 : Register account in Nrelate

Step 3 : Log into Nrelate site

Step 4 : Click on Install button

              Choose Blogger platform

              Then It will show

              1. Only on posts
              2. Also homepage
              3. All pages

              Select any option. Next Add a page element Blogger window will open.

Step 5 : Give Title name and click on Add gadget button.

Now you successfully added related posts widget to Blogger using Nrelate. After adding it will take some time to show related posts with thumbnails on your Blogger blog. You can also use  Linkwithin, Outbrain or Zemanta to add related posts widget to your Blogger blog.

Read More

Add Background Color To Footer Widget Titles in Blogger

Background color to footer widget titles : We know how to add a gadget/widgets to Blogger to blog. After adding widget on your blogger blog , widget title will appear with out having any background color. With template customise we can change we can add or change the background color of the whole widget . But we can't add or change only the background color of the widget titles, both in sidebar and footer. In the previous post we discussed about how to add or change the background of the sidebar widget titles. Even if we change the background color of the sidebar widget titles , that change will not effect on the footer widget titles. We have to add the background color to the footer widget titles separately . So we can add separate background colors to both sidebar widget titles and footer widget titles. In this post I'm telling about how to add background color to widget titles in footer on your Blogger blog.

How to add background color to footer widget titles on your Blogger blog : 

With simple customization in your Blogger template code you can add background color to footer widget tiles. With this method we can add the same background color to your all footer widget titles in your Blogger.

Follow below steps to add background color to widget titles in Blogger footer.

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search for .footer-inner .widget h2 {  

Add below line just before closing tag of the above line 

Background: #000000;

I.e : 

.footer-inner .widget h2 {

Background: #000000;

}

Step 5 : Click on Save template.

Now refresh your Blogger blog and see the results. You can change the background color of the widget titles by simply change the color code in the background tag. I hope you can successfully add background color to your footer widget tiles in Blogger blog with this method.

Read More

Add Live Chat Widget to Blogger Blog

Live Chat Widget : We know about live chat on the internet. The best example for the live chat is gtalk. With gtalk we can instantly communicate with our friends. You can add live chat box to Blogger blog that makes the visitors to communicate with Blogger. Blogger not proving the live chat widget to add live chat to Blogger blog. But some other websites providing the live chat widget to Blogger.

How to add live chat widget to Blogger blog:

In this post i'm discussing about adding a live chat widget to Blogger blog. Chatroll providing live chat widget for Blogger blog. With this widget we can simply add live chat box to Blogger blog. Adding the Chatroll live chat widget on Blogger blog is an easy process. First create a free account on Chatroll  and get widget code and next add that widget code on Blogger blog. This is simple process, any way I'm giving step by step process to add live chat widget to your Blogger blog.

Follow below steps to add live chat widget to Blogger blog:

Step 1 : Open Chatroll  website and create an account. by click on Signup for free Button

Step 2 : After loging , click on create a new live event option then it will go to widget settings page. Enter  widget name and click on contimue button.

Step 3 : Select the blogger platform and in the next page widget code will display , just copy that code and click on Continue.

Step 4 :Click on Go to Settings Now and configure your widget save settings.

Step 5 :Go to blogger dashboard and click on layout next add HTML/JavaScript and paste live chat widget code and finally click on save button to save widget.

Now go to your Blogger blog and see the live chat box on your Blogger blog. This is the easy method to add the live chat box to Blogger blog. Also many other sites providing live chat widget to Blogger blog. Mylivechat website is also providing live chat to Blogger blog. Another two ways also there to add live chat widget to blogger blog . They are Olark and Cbox. With these two websites you can add the live chat widgets to Blogger blog.

Read More

Add a Widget/Gadget Above Blog Post in Blogger

Widget Above Blog Post : We can see the some empty space between  blog posts section and the page list gadget in blogger . The area above the blog posts section is the best place to display blog updates and also for the ads. By default blog posts section is locked so we can't add widget just above blog posts in blogger blog.

 How to add widget/gadget above blog post in Blogger :

We can add widget above blog posts. But before adding the widget first we have to unlock the blog posts section. In this post i'm giving the information to add a widget above blog post in blogger. With this method you can simply add a widget above your blogger blog post I.e between page list gadget and blog post. Many bloggers are using this method to add a widget or any script code above blog post in blogger.

Follow below steps to enable a widget above Blogger blog post :

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 :  Search for below code

<b:section class='main' id='main' showaddelement='no'>
            <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

You can see the above two line just below the <div class='column-center-inner'>


Now make some changes in the above two lines like below :
 showaddelement='yes'
locked='false'


Now the final code is  :

 <b:section class='main' id='main' showaddelement='yes'>
            <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'>

Step 5 : Click on Save templates.

Now the blog posts section is unlocked and you can see the add a gadget above blog posts section on your blogger layout.

Adding a widget above blog post in Blogger :

Step 1 : Click on your Blogger layout
Now add a gadget section will appear above blog posts section

Step 2 : Click on add a gadget above blog posts and add any Blogger gadgets

Step 3 : If you want to add any third party script code, click on add a gadget above blog posts section and add Html/JavaScript gadget and paste the third party code in that widget box and click on save.

Step 4 : If you want to move already added gadget on your blogger to that place, then simply drag the gadget on your Blogger layout and drop above the blog posts section

Step 5 : Finally click on Save arrangements.

Like this you can add any gadget above blog post in your Blogger.

Read More