In this post i will tell you how you can add a image only to your blog sidebar and make it look awesome. You should have a image which can cover the entire sidebar background, as you can search from Photobucket or Google image search.
You can also add images to :-
Add backgroung image behind your blogger posts.
Add background image to your blog.
ADD BACKGROUND IMAGE TO YOUR BLOG SIDEBAR
2). Select Layout and Edit HTML.
#side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
4). Copy and Paste the following code directly below the code you have searched.
You can also add images to :-
Add backgroung image behind your blogger posts.
Add background image to your blog.
ADD BACKGROUND IMAGE TO YOUR BLOG SIDEBAR
1). Open your blog and go to Dashboard.
3). Find the following piece of code in your blog HTML code. HOW TO FIND CODE IN YOUR BLOG HTML CODE
#sidebar-wrapper {
If it is not available find this :-
#side-wrapper {
If it is not available find this :-
#side-wrapper {
The code will look like this :-
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
NOTE :- Before making any changes you should backup your blog template code. HOW TO BACKUP YOUR BLOG TEMPLATE
background:url(PUT IMAGE URL HERE) repeat top right;
/* background-attachment: fixed; */
/* background-attachment: fixed; */
NOTE :- Replace the 'PUT IMAGE URL HERE' with the link/address of the image you want to add to your blog.
The code will look like this :-
#side-wrapper {
background:url(http://i941.photobucket.com/albums/ad259/pcleaks.blogspot.com/bloggerbackground.jpg) repeat top right;
/* background-attachment: fixed; */
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
background:url(http://i941.photobucket.com/albums/ad259/pcleaks.blogspot.com/bloggerbackground.jpg) repeat top right;
/* background-attachment: fixed; */
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
5).Save your template and have a look to your blog, it will look amazing.
If you got a good experience than leave comments and Email Me for any assistance.
No comments:
Post a Comment