Add icon/picture beside Labels and Links list in Blogger Sidebar

Many of you have asked about adding image icon beside the labels, links lists that appear in sidebar of the blog. By adding this you can make your blog look more elegant.

First you have to select the image/icon that you want to add. There are tons of them on Google. Keep in mind that the image should be smaller than 15x15 px.

Now go to LAYOUT >> EDIT HTML and look for

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Replace above complete code with following code

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:10px 0 0;
}
.sidebar ul li {
background:url("http://i415.photobucket.com/albums/pp238/Sujeet/arrow.png") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:2px;
text-indent:7px;
line-height:1.3em;
}

Save the template.

Customization

Replace image icon code with your own.
text-indent - change the distance between text and icon

Read More

How to Customize Blogger Footer columns

You can customize your 3 column footer easily.  You can change the fonts, link colors, background color, style, borders headings etc.

ADDING BORDERS

To add the border just alter the CSS style as follows

#footer-columns {
border-top:1px dotted #a1a1a1;
clear:both;
margin:0 auto;
}

ADDING A BACKGROUND

#footer-columns {
background:#c2c2c2;
clear:both;
margin:0 auto;
}

CHANGING THE HEADINGS
In your template look for #footer-columns {
You will get following similar code

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}

 Now add following code just BELOW of above code as follows

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}

#footer-columns h2 {
margin:5px 0 5px;
font-family:arial;
font-size:13px;
font-weight:normal;
line-height: 1.4em;
text-transform:none;
letter-spacing:.1em;
color:#000000;
}

CHANGING THE TEXT COLOR 

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
color:#000000;
}

Read More

Magazine Basic Blogger template

Template author: PBTemplates
Designer: FThemes

Features

* 2 column template
* Elegant design
* Left sidebar
* Drop Down Navigational menu bar
* Gravatar on Comments activated
* Auto read more hack
* Social networking icons
* Numbered page navigation hack

Read More

3 Tablets from Lenovo

Lenovo IdeaPad K1 Tablet

Lenovo IdeaPad K1 Tablet is powered with
1GHz NVIDIA Tegra T20 chip,
1GB DDR2 RAM,
Android 3.1
10.1″ screen.

It is available in four colors: Black, Red, White, Grey

+ Lenovo IdeaPad K1 Tablet specs, review and price

Lenovo IdeaPad A1

Lenovo IdeaPad A1 Tablet is powered with 
ARM Cortex-A8 1.0 GHz single-core processor
512 MB RAM,
Android OS 2.3
7″ screen.
Up to 16 GB storage

It is available in four colors: Black, White, Pink, Blue

+ Lenovo IdeaPad A1 Tablet specs, review and price

Lenovo ThinkPad Tablet -- business tablet

Lenovo ThinkPad Tablet is powered with 
1GHz NVIDIA Tegra 2 dual core CPU
1GB RAM,
Android 3.1
10.1″ screen.
16GB/32GB/64GB SSD storage

It is available in Black color

+ Lenovo ThinkPad Tablet specs, review and price

Read More

PrintDesign Blogger template

Template author: PBTemplates
Designer: FThemes

Features

* 2 column template
* Elegant design
* Right sidebar
* Drop down Navigational menu bar
* New look Featured content slider
* Gravatar on Comments activated
* Auto read more hack
* Tabbed Sidebar widget
* Add Replay to comments feature
* 3 columned footer

Read More

GamesZone Blogger template

Template author: PBTemplates
Designer: FThemes

Features

* 2 column template
* Elegant design
* Right sidebar
* Drop Down Navigational menu bar
* New look Featured content slider
* Gravatar on Comments activated
* Auto read more hack
* Social networking icons
* Tabbed Sidebar widget
* Add Replay to comments feature
* Facebook, Tweeter, RSS icons
* 3 columned footer

Read More

How to create 3 columned footer with different style?

In our previous post we have learned to create 3 columns of footer. Now we have come with another CSS style and it is easily customizable.


Installation

Step 1 (Adding CSS style)
Go to your Edit HTML page and look for ]]></b:skin>

And add following code just ABOVE
]]></b:skin>

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}

Step 2 
Now look for
<b:section class='footer' id='footer'/>


And place following code ABOVE it

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Finally Save the template.

Read More