Tuesday, 1 May 2012

How To Write Post For Wallpaper Blog

wallpaer widget for Blogger
Yesterday I have received a email from an anonymous reader which was asking us to share a trick which provide a way to display multiple images in a row as well as in vertical for wallpaper blog at blogger platform. So this email gives me a idea to write this article. In blogger post editor, we can't add multiple images in rows and vertical if our blog is pointed to wallpapers only. Hence with the help of table you can add images with easiness. Lets see how to use this ?

Write Post In Wallpaper Related Blog:-

Note:-

It is advisable that readers should read this tutorial first before going through this article as this tutorial will explain you to the working of table.

Step 1. Make Modification In Blogger Template First:-

First of all, add a small CSS code in template so that appeared images to be of same size.

  1. Login to Blogger Dashboard.
  2. Go to Design /  Edit HTML.
  3. Click "Expand Widget Templates".
  4. Download the full template before making any changes in it (Learn More).
  5. Search for following piece of code in blogger template.
.post-title
  1. Paste the following code just above .post-title.
.post #mytable tr td img
{width:120px;
height:100px;
}
table blogger

The height and weight of all the images can be changed by changing the red integer values.

Step 2. Use Table In Blogger Post Editor:-

  1. First of all hit New Post in blogger.
  2. Add the following code in Edit HTML tab of post editor. 
<table align="center" border="0" cellpadding="6" id="mytable"> 
<tr>
<td><a href="Image 1 URL "><img src="Image 1 URL "/></a></td>
<td><a href="Image 2 URL "><img src="Image 2 URL "/></a></td>
<td><a href="Image 3 URL "><img src="Image 3 URL "/></a></td>
<td><a href="Image 4 URL "><img src="Image 4 URL "/></a></td>
</tr>
<tr>
<td><a href="Image 5 URL "><img src="Image 5 URL "/></a></td>
<td><a href="Image 6 URL "><img src="Image 6 URL "/></a></td>
<td><a href="Image 7 URL "><img src="Image 7 URL "/></a></td>
<td><a href="Image 8 URL "><img src="Image 8 URL "/></a></td>
</tr>
<tr>
<td><a href="Image 9 URL "><img src="Image 9 URL "/></a></td>
<td><a href="Image 10 URL "><img src="Image 10 URL "/></a></td>
<td><a href="Image 11 URL "><img src="Image 11 URL "/></a></td>
<td><a href="Image 12 URL "><img src="Image 12 URL "/></a></td>
</tr>
</table>
blogger html

This table defines 3 rows with four column as you can see from the above tutorial.
  • To increase or decrease the distance between the images simply change callpadding="6" to any desired numeric value.
  • Replace all pink parts to corresponding URL of the images.
  • Each <tr> defines a table row whereas <td> defines the number of columns within that particular rows. So in the above code it have three <tr> tag means it have 3 rows in a table and each rows have four <td> tag which defines the number of column within that particular row (Learn More).  
I hope readers will find no difficulty in adding wallpapers in rows and columns for wallpaper related blog.
More article from the same author

    No comments:

    Post a Comment