1- On your Blogger Dashboard, go to "Edit Layout" and then "Edit HTML" section.
Remember: Before doing any changes to your blog, always backup your template by clicking the "Download Full Template" link.
2- Now, find the following code...
#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}
Info: Actually this code is defining the appearance of your sidebar.
3- Add some more style definitions in the above code and your code will become like this...
#sidebar-wrapper {
width: 220px;
float: $endSide;
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-image:url('URL of uploaded image here');
background-repeat: repeat;
background-attachment: scroll;
background-position: right top;}
}
As you can see that the green code is representing newly added text and the red code is to be replaced by the image URL.
4- Don't change any setting in the above code except URL of uploaded image here which will be replaced by the uploaded image.
5- After adding your own image, first see the preview and then save the template if you're happy.
Tip: You can get free professional patterns at http://www.dinpattern.com/
Tip: When I was writing this tutorial, I downloaded this
pattern from here. It's size was 42x36 and it weighed only 1.50 kb. You can also try it, the URL is https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJX0k_uWNbyXNMX1rua60j0Rrwd784Jc_w1pIU-RUk1bpcZxQaR8SkHDAb_lt6AUKkIQLVfIlnDYBtE0nVdmWrKRhli_9HQxpmw4LmnwPGLU5WMPnnchc5heG3WEZJP42rZ9tSHfR-iyM/6- I hope this tutorial was helpful and have a look around, there are many other great tutorials to customize your blog.
No comments:
Post a Comment