Sunday, May 19, 2013

Add Small Image Besides Your Post Title

Want to add small image to your blog post title???


Want to add image


Today’s tutorial is about adding a little picture/icon beside the title of each post in your blog.Be sure that this addition will make your posts more attractive and better than before. This addition is one of the most additions that you might found in the biggest popular websites.
You can add your personal picture or a little image quoted from your header image.
 For example it will look like this:


image to title



  • Go To Blogger » Design » Edit HTML.Don't forget to make a backup to your template.
  • Now search for the following tag .post h3  you can search for this tag also: .post h2 look CAREFULLY and you will see a code just like the following:


                         .post h3 {
                          color: #7C2345;
                          font-size: 20px;
                          font-family: Arial, sans-serif;;
                          font-weight: normal;
                          margin: 0px;
                          padding: 0px 10px 0 47px;
                          }


  • Now replace it with the following code:



                        .post h3 {
                         background:url(PUT HERE THE IMAGE LINK) no-repeat top left;
                         color: #981232;
                         font-size: 20px;
                         font-family: Arial, sans-serif; 
                         font-weight: normal; height:45px;
                         margin: 0px;
                         padding: 0px 10px 0 47px;
                         line-height:1.1em;
                         }

  • Replace the green text with your image link. Make your avatar size to be 40px by 40px .Design your own avatar with white background and colored border.
  • Change this Color #981232 with the one that your title would like to appear.


After all save HTML.

And This is it, congratulations with the new addition. If you have any problem in any step, just put it in comment.



2 comments:

Dhaval Lad said...

If I have a multiple authors blog, can I insert different images for each user?

Dhaval Lad said...

Yeah.You can do it

Post a Comment

 
;

Get Latest News realted to Technology Amazing Technology |