Regards,
Yoga.Email ThisBlogThis!Share to TwitterShare to Facebook
Instead of having an image occupy the entire Header section, some might want to have a small image beside the Blog Title and Description, either on the left or on the right of the Header. Blogger has a simple feature which allows you to upload an image to the Header. However, as we had explained in our article Background Image for Blogger Header (New), this image appears as a backdrop to the Blog Title and moves with the Title. To have the image on one side, we suggest two methods which you can try.
Using Blogger Header Image Upload
Let's say we have a small picture (150px by 150px) that we want to put on the left of our Blog Header. Use an image editing software to create a new blank canvas of 760px (width) by 150px (height). Check the Header width of your template. Normally it is found under #header
We had in our earlier article showed you how to add Images or Icons to Sidebar Links. Many readers are also interested to add images next to the Blog Post Titles. You can have a small picture to automatically appear in every Post Title. This guide will explain how this can be done.
The image we are talking about has to be small, perhaps about 20px in width. But for the purposes of this guide, we shall also use a bigger image double that size, to let you see the difference.
First, we have to create that image. If you have an existing photo or picture, you can use an image editor like Google's Picasa to crop or resize it to a small image size. After that, upload it onto a free image server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Copy down the IMAGE URL.
Example 1
In this first example, we use an image of 20px by 20px. Login to Dashboard and go to Template -
In some templates, the text links are underlined. This distinguishes the hyperlinks from the normal text. If you don't like that, you can remove the underlines. You can also modify the template to have underlines only in the main posts and not in the sidebar or vice-versa. This tutorial will show you how it can be done.
As explained in our article Links – Hover and Rollover Effects, when you are at Template -
If you are new to Blogger software, once your Blog is up and running, you will see some strange icons. One is a picture of a pencil at the Post Footer and another is a screwdriver and wrench icon at the bottom right corner of every widget. Is there a way to disable them? Why are they there in the first place? Don't they look unsightly in the Blog design?
Allay your fears. However unsightly they may seem, nobody else can see them other than the author of the Blog and only when logged into the Blogger account. Once you are logged out, clear the browser cache or refresh the page and the icons will disappear.
Remove Pencil icons
These icons are there to assist the authors. The pencil icon at the end of the Posts are the links to enable easy quick editing of the Posts.
When typing a Blog Post, the font colors can be changed using the tool provided in the rich-text Post Editor. Unfortunately, there is no icon or tool to add highlighting to the text. However, as we shall discuss, it is possible to add highlights to the text and choose a color to appear behind a word or lines of text. This tutorial will also explain how to enclose the text within a box with a colored background.
Text Highlighting
Create the post as you normally would using the “Compose” mode. If there are some words that you want to highlight, switch to the “Edit HTML” mode and insert the following tags before and after the TEXT TO BE HIGHLIGHTED. Here are some examples of common color highlights and codes to be inserted:-
1. Yellow highlight
There are times when you want to insert plain text into your Blog Post or template. This may be a piece of HTML code or JavaScript that you would like readers to copy, such as the “Link to Our Site” code in the sidebar. It could also be the Terms of a Legal Agreement that users can view. As we shall be discussing in our article on creating forms in Blogs, the text box can also be used in feedback forms for users to input feedback and comments.
The HTML code of the text box makes use of the