Spiga

Add an Image Beside Post Title

Don’t you want your blog look beauty? Maybe you can add several accessories. One of them is adding a small image beside post title, for example : please take a look the image below :
image-title_03
How to adding a small image at the post title? here is the steps.

 

 

Step #1
You must have a small image image, for example like this :
mypencil 

Step #2
Upload your small image to image hosting. For example : you can upload your image to blogger, Yahoo geocities, Google pages, or another free image hosting. If you has been uploading your image, please get the image code. for example : I'm has been upload an image to Blogger and the image code is :


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg


So that the picture can appear at your blog, you must create the code like this :

 

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg"/>

And the image will appear like this :
mypencil


Step #3
Add the image code to your template code. Here are the steps to add image code to your blog.


Or, do you still using old (classic) template? Never mind, bellow is the steps adding image code to classic template :

 

  1. Login to blogger with your ID.
  2. At the dashboard page, click Template.
  3. Click Edit HTML.
  4. Back up your template code (important!).
  5. Find this code :

  6. <BlogItemTitle$>
  7. Replace your image code beside above code :
  8. <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg"/> &nbsp; <BlogItemTitle$>

  9.  

  10. Click Save Settings button.
  11. Done. Now your every post title will appear with your small image.


This is for new blogger template (beta template) :

 

  1. Login to Blogger with your ID.
  2. At the dashboard page, click Layout.
  3. Click Edit HTML.
  4. Back Up your template code (important!).
  5. Please mark the little box beside Expand Widget Template. Wait for a moment

  6. expand-widget
  7. Go to your template code, and find the code like this :

  8. <a expr:href='data:post.url'><data:post.title/></a>
  9. Add your image code like this :
  10. <a expr:href='data:post.url'> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvllqAsakfWdUI1-ktBLNllwDgwjfiQSpXoZRsfxSjdP5zVSKMRgGrOGa4UyBsKO6AYf987rAaKQyjb-sv86EOE40eBlzAlyf7z6LJEySwYvYp6wE2KB_eULyiLphiuuEH19FxJnjv4M/s400/mypencil.jpg"/> &#160; <data:post.title/></a>

  11. Click SAVE TEMPLATE button.
  12. Done. Now your every post title will appear with your small image.

All right brothers, see you at my next tutorial.

Related Posts by Categories



0 comments:

Post a Comment

Add to: Mr. Wong Add to: Webnews Add to: Icio Add to: Oneview Add to: Yigg Add to: Linkarena Add to: Digg Add to: Del.icoi.us Add to: Reddit Add to: Simpy Add to: StumbleUpon Add to: Slashdot Add to: Netscape Add to: Furl Add to: Yahoo Add to: Blogmarks Add to: Diigo Add to: Technorati Add to: Newsvine Add to: Blinkbits Add to: Ma.Gnolia Add to: Smarking Add to: Netvouz Add to: Folkd Add to: Spurl Add to: Google Add to: Blinklist Information