In many blogs you will see the sidebar titles decorated with different types of fonts. These are actually images since special fonts may not be found on viewer machines causing a blank to appear if they were used.
1. CREATE IMAGE
First you have to source images or create them in a free image editor like Irfanview. You can also search for free clipart in Google.
2. UPLOAD IMAGE
Then upload the images to a free host and copy it's link.
3. MODIFY TEMPLATE
To put them in your blog login at Blogger.com and click on Layout link on Dashboard. The Page Elements tab will open. Click on Edit Html subtab of Layout tab at top. The Edit Html subtab will open with the Template Code box. Scroll down in the Template Code box to this code :
/* Sidebar Content
----------------------------------------------- */
Paste the 'background' line as shown in below code :
.sidebar h2 {
margin: 0em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
background:url("LINK_OF_IMAGE") no-repeat top right;
font-size: 100%;
color: $sidebarTitleTextColor;
}
Replace 'LINK_OF_IMAGE' with the actual link of your image which you have uploaded to the free hosting. Preview and save template.
To position the image use 'top right', 'top left' etc. in the code line. See the image of the magnifying glass in the sidebar titles of this blog.
Happy Blogging!
10 comments:
Sorry for writing this here, but I would like to know how may I write something in my comments place, like you do above this, under 'Lleave your comment'.
I would love if someone could give me a hand, because i don't know almost nothing about HTML nor CSS.
Greetings!
Good Blog
Huasito del flow,
Have a look at :
How to Create Add Your Comment Link.
I would like to put a different image for the title of each widget on the sidebar. How do I do that?
Torismom,
In your template look for the widget ID in code line looking like this :
<b:widget id='Image1' locked='false' title='' type='Image'/>
Above is the code for widget Image1. Then put this code in CSS part of template as shown in above post :
#Image1 h2 {
background:url("LINK_OF_IMAGE") no-repeat top right;
}
Repeat with other widgets.
nice blog
it really helped me understanding blogging effectively
Hi i am new to blogging worl.Can you please tell me how can i make use of the two sides of the blog.
Pavithra Kodical,
You can add third column to blog.
Thanks for the information. I'm still trying to figure all of this out, and your posts are a great help!
Hiya Vin
I'm using classic template fro my blogger as I have added a lot of html code. Will this background (I think css) code work when not using new templates?
Thanks, John http://englishidiotabroad.blogspot.com/
John,
The CSS code is the same in Classic and Layout Templates.
You just have to locate the div for your sidebat titles and add a background parameter to it in which you specify the link of your picture.
CLICK HERE TO LEAVE A COMMENT.
Skip to top of post.