Reduce Space Between Gadgets In Blogger blog

How to Reduce Space Between Gadgets(widgets) In Blogger blog:

By default large space is there between gadgets(widgets) in blogger blogs.We can decrease or increase the space between gadgets(widgets) in blogs.This posts will help you to reduce space with out adding any CSS code to blogger, just simply change(decrease) margin values in blogger template.

follow the below simple steps to Reduce Space Between Gadgets(widgets) In Blogger blog

step 1 : go to blogger dashboard

step 2 : click on template

step 3 : click on edit HTML and tick expand widget templates box

step 4 : search below code

.main-inner .widget {
  background-color: $(widget.background.color);
  border: 1px solid $(widget.border.color);
  padding: 0 $(widget.padding.side) 15px;
  margin: 20px -16px;


Decrease values in margin attribute
like
margin: 10px -10px;

If you want decrease more space give small values in margin attribute.

step 5 : click on save template.

Read More

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

Remove Blogger Attribution Gadget- powered by blogger

Blogger Attribution Widget:

You can see "Powered by Blogger" message on your Blogger blog footer. This message can be added by Attribution widget. Blogger Attribute gadget/widget appears at the bottom of the Blogger blog footer. We can edit and remove the attribute gadget/widget in Blogger. You can also customize Blogger Attribution widget as you like. In this post I'm going to show you how to remove/hide Blogger attribution widget. Later I will show you how to customize your Blogger attribution widget.

 

How To Remove Blogger Attribution Gadget/Widget :

By default Blogger attribution was locked, so we can't remove that widget.So to remove attribution widget , we have to unlock that widget first and then remove. In this post i'm explaining how to unlock unlock attribution widget and remove attribution widget on your blogger blog.

Follow below steps to remove Blogger attribution gadget/widget

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Template

Step 3 : Click on Edit HTML

Step 4 : Search below tag

              <b:widget id='Attribution1' locked='true' title='' type='Attribution'>

               And change locked='true' to locked='false'

               And then click on Save template

Step 5 : Then go to Layout, click on edit corresponding to attribution widget and click on remove to remove gadget.

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 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