Showing posts with label Blogger Post. Show all posts

Sunday, 3 June 2012

Tips To Write A Killing Blog Post

I was repeatedly absent on my blog as my final semester exams was going on. But now I am free to share some fantastic tricks on this blog. In order to write a killing Blog post there are two aspect one is designing of post and another SEO of post. We will discuss both of these terms here as it increase your search engine ranking. Previously I had share a article 4 Basic Tricks For New Blogger, you can apply these tricks to blog to get instant traffic on the Blog. So lets start the tutorial.

How To Write A Killing Blog Post:-

Work With Images:-

Don't forget to include images in post body as it describes most of your content. Some people may find difficulty in reading text on the blog but if you include targeted images to your content they get a comprehensive idea regarding your Blog post.
One point should also be kept in mind that the default name of images like Images00123.png, Photo23.jpeg should be change with suitable keyword and use of alt tag may be good practice to impress the Search Engines. The complete article to change the image name or to include alt tag can be read from here.

Proper Use Of Important HTML Tags:-

Make a habit to repeatedly use of important HTML tags as these tags impress Search Engines and increase your blog ranking. A complete list of tags are gives below.

/* Code By http://internetricks4u.blogspot.in */

<Abbr> Tag
<abbr title="World Health Organization">WHO</abbr>

<Acronym> Tag
<acronym title="World Health Organization">WHO</acronym>

<B> Tag
<b>This is Blogging World</b>

<Em> Tag
<em>Emphasized text</em>

<I> Tag
<i>This is italic text</i> 

<U> Tag
<u>A Underline text</u>

<h1> tag should be used once in a content with less than 70 character or less than 10 words. Don't use <h4>, <h5>,<h6> tag in content.
If your blog is related to programming then use of <pre> tag may be the good option for you. You can choose large number of syntax highlighter from here.

Don't Forget Outbound linking:-

It is a very good strategy to drive traffic on the blog if you link your content to some another related content at appropriate position of your blog. And it also effect your page ranking in search engine.

More Article From the Same Author

Monday, 21 May 2012

Customise Blogger Lists With CSS

If the look of your Blog doesn't provide a good impression to your readers by its design then make sure the basic things like header, sidebar and post content should be properly customised. Today I will tell you to change the basic structure of lists as blogger's default template doesn't have customised lists. But with the help of this article you can easily change the overall look of lists whether it is ordered or unordered. We use simple CSS Styling property in this article. So lets Move to the tutorial.

Demo

How To Modify List in Blogger-

Types Of Lists In Blogger-

I think everybody knows what is list ? Lists are generally of type one is ordered list and another is unordered list. Blogger post editor have both of them.

The default appearance of both the lists is not according to the taste of readers as shown in figure.

Login to Blogger Dashboard.
Go to Design / Edit HTML.
Click "Expand Widget Templates".
Download the full template before making any changes in it (Learn More).

How To Modify Unordered List In Blogger:

Find following piece of code in blogger template.

]]></b:skin>

To modify the circle of unordered list, which is at starting point, paste any one of the following code just above the ]]></b:skin>.

/* Code On http://internetricks4u.blogspot.com/

/* To change circle with rectangle */
.post ul li 
  {
  list-style-type:square;
  }

/* Code On http://internetricks4u.blogspot.com/

/* To change circle with with hollow circle */
.post ul li 
  {
  list-style-type:circle;
  }

To change the bullet of unordered list with the image just paste the following code above ]]></b:skin>.

/*Code On http://internetricks4u.blogspot.com/ */

.post ul
{
list-style-type:none;
 
}
 
.post ul li
{
background-image:url('Image Url');
background-repeat:no-repeat;
background-position:0px 7px; 
padding-left:25px;
}

Note:- Make Following Modification

Replace Image Url with the URL of the image.
If image and text of list not coincide on a horizontal line then adjust the value of 7px.
The dimension of image used should not be greater than 16 * 16.

How To Modify Ordered List

Ordered list are much easier to customise in relative to unordered list. In ordered list, you can only customise the arranging order of list which is pretty easier.

Have you seen the result ? We can start ordered list with large number of arranging pattern.The corresponding CSS code is given below.

/*Code On http://internetricks4u.blogspot.com/ */
.post ol
 {

   list-style-type:upper-roman|upper-latin|lower-roman|lower-latin|lower-greek|lower-alpha;

 }

For Example: If you are interested to use upper roman then the corresponding code will be.

/*Code On http://internetricks4u.blogspot.com/ */
.post ol
 {

   list-style-type:upper-roman;

 }

Friday, 4 May 2012

How To Increase Blog Traffic By Facebook Like Button

Now a days Facebook holds number one position in social media network. It has more than 900 million active users. Most of the Blog receives huge amount of traffic daily through it. You can also receives good amount of traffic through it. You can promote your blog in Facebook by adopting so many ways but here we will only discuss about like button. As previously I had shared a article to add Facebook like button in comment form. But now Today I will tell you to place Facebook like button at different sections of blog.

How To Add Facebook Like Button:-

How To Add Facebook Like Button Below The Post:-

If you don't have Facebook like page then learn to create it first from here.

Login to Blogger Dashboard.
Go to Design / Edit HTML.
Click "Expand Widget Templates"
Download the full template before making any changes in it(More info).
Search for following piece of code in template.

<data:post.body/>

Paste the following code just below it.

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggingtrick&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=segoe+ui&amp;height=80&amp;appId=200572536701215" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Finally Save the Template.

Note:-Modification In Facebook like Page Coding:-

Change bloggertrick with your Facebook like page name. As my Facebook URL is www.facebook.com/bloggertrick.

How To Add Facebook like Button Above the Post:-

If you are interested to add Facebook like button just above the Post but below the post title then place the code in Step 6 just above the <data:post.body/>.

How To Add Facebook Like Button Above the Post Title:-

Find following Piece of code in template.

<div class='post hentry'>

And place the code in Step 6 just below it.

How to Add Facebook Like Button Above the Comment Form

I have already written a article about this you can see it from here.

If any reader find difficulty in this tutorials then they may directly contact me by dropping comment below.
More article from the same author

Tuesday, 1 May 2012

How To Write Post For Wallpaper Blog

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.

Login to Blogger Dashboard.
Go to Design / Edit HTML.
Click "Expand Widget Templates".
Download the full template before making any changes in it (Learn More).
Search for following piece of code in blogger template.

.post-title

Paste the following code just above .post-title.

.post #mytable tr td img
{width:120px;
height:100px;
}

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:-

First of all hit New Post in blogger.
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>

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