How to Add Icon beside Post Title

How to Add Icon beside Post Title
How to Add Icon beside Post Title

How to Add Icon beside Post Title - In order to enhance the blog appearance, blogger tutorial a month ago has been explained on How to add icon beside Sidebar title, and this posts will describe on how to add icon beside post title automatically on blogger.

Add Icon beside Post Title

For automatically add icon beside posts title is quite easy, by modifying some of your template CSS code. However, there’s something you should do.

Preparing Icon Image

As the first step you should do is to prepare the icon you want to install, you can create yourself or download through free icon provider sites. One of the free icon provider sites is http://www.iconspedia.com
For example, the icon will be installed like the following:

Suggested, the icon size that will be installed is 48×48 pixels or adjust with the font size you used at your template.

Upload the icon to blogger

The second step is to upload the icon to blogger. The icon/ image upload tutorial has been written in How to create Image Gallery using Blogger Post tutorial. If you has uploaded the icon, note the icon address, this step has been described in Create HTML Code to Display Image on Blog tutorial. For example, the icon addres I had is:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT-ZMUeiahOkLBX9Eb40_UCQfv0Dt_4kNksRjqM593mSqrsVQv7l55Eerd_96_wJmGXtq7rFKnaliuI_5e_u6ugNCL0F7U7PgimRm82CA9ck30ZtaSuvJjIFzMpwg_UbYhM-Gtk6Gjaigh/s1600/pen.png 

CSS Post Title Code

Before adding the image address code to your template, you must know the CSS code for the post title first. The CSS code for the post title on blogger typically using heading 3 (h3), because the template code are different each other, so be focus on code which contain h3. Example CSS post title codes:

• h3 { ….. }
• .post h3 { ……. }
• .content h3{ ….. }
• .entry h3 { …. }

For example:

.post h3 { color:#191919; margin:0; text-transform:capitalize; text-align:left; font:normal 26px Times, Tahoma, Verdana; } 

Add the icon code to template code

The last step is to add the icon code you had to the CSS code in used template.
Note: to practice the following tutorial, you are suggested to use a trial blog and use Simple Template. Read about trial blog here at Create Multiple Blog In One Blogger Account.
To make it easier, I use Simple template in this tutorial, that is default blogger template. Here are the steps:

1. Please login to blogger using your ID
2. Click Design
   
3. Click the Edit HTML tab
   
4. Do the back up for yout template first by clicking Download Full Template
5. Find the following code (remember, it just an example by using template called Simple):

   h3.post-title, .comments h4 {   font: $(post.title.font);   margin: .75em 0 0; } 

6. Because the post title code on simple template are fused with comments title code, so separate the code become:

   .comments h4 {   font: $(post.title.font);   margin: .75em 0 0; } h3.post-title {   font: $(post.title.font);   margin: .75em 0 0; } 

7. Add the additional CSS code for the icon and the code will be as follows:

   .comments h4 {   font: $(post.title.font);   margin: .75em 0 0; } h3.post-title {   font: $(post.title.font);   margin: .75em 0 0;   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT-ZMUeiahOkLBX9Eb40_UCQfv0Dt_4kNksRjqM593mSqrsVQv7l55Eerd_96_wJmGXtq7rFKnaliuI_5e_u6ugNCL0F7U7PgimRm82CA9ck30ZtaSuvJjIFzMpwg_UbYhM-Gtk6Gjaigh/s1600/pen.png) no-repeat scroll left center;   padding:10px 0px 5px 42px; } 

8. Click Save Template
9. Finish

Check the result, there's should be an icon beside your post title

In addition, for suitable icon display to the template condition then you can change the padding or margin value.

padding:10px 0px 5px 42px;

Good Luck!! How to Add Icon beside Post Title