Bloggers - Meet Millions of Bloggers
Showing posts with label TUTORIALS. Show all posts
Showing posts with label TUTORIALS. Show all posts

Add The Comment Icon Beside The Comment Link

Hey, i find a great way to make blogger/blogspot comment link more attractive. You can add bubble icon beside the comment. You can also add different icon, but I think bubble icon is best for comment link.
Comment Icon Beside The Comment Link
Let’s see the instruction to do this for your blogger blog.

Step 1: Login your blogger blog account.

Step 2: From blogger dashboard, go Design and then Edit HTML

Step 3: Now search the following code by using [Ctrl + F]

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

Step 4: Now replace the above code by the following code

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a><img src='http://i39.tinypic.com/33z5njo.jpg' style='border:0px'/>
</b:if>
</b:if>
</span>

Step 5: Save your changes. Thanks all.

Make Auto Redirect Your Old Site To New Site

Suppose http://example.co.cc/ was your old website. But now you register a TK domain is http://example.tk/ and replace old to new. At that moment what should you do?
Yes, Some people will make a notice board on home page of old site by HTML. Now a days it is easier for us by using javascript. I give both HTML and Javascript.
Make Auto Redirect Your Old Site To New Site
Old style:
 
<html>
<head>
<title>We have moved</title>
</head>
<body>
<h1>We have moved</h1>
<p>please go to <a href=”http://www.example.tk“>www.example.tk</a> or <a href=”http://www.example.tk“>click here </a></p>
</body>
</html>

Make Auto Redirect Your Old Site To New Site
New style:
 
<html>
<head>
<title>redirect</title>
<body onload=”window.location.href=’http://www.example.tk‘”>
</body>
</html>
 
NOTE: Replace your URL to the red color.

How To Add "E-mail ME" Code In Your Blog



Contact me or e-mail me is one of the most important tool for a website to communicate with the visitors. But, it is not good to show your e-mail address because of spammers. So, by adding a text link or image link you can easily hide your e-mail address and if visitor wants to contact they can easily contact you by clicking that link or image.
 
 
You can use Text Link or Image e-mail me option. Follow the following instruction to add one of these.

Text Link: Add the following html code in your blog

<a href=”mailto:xxx@yahoo.com“>Email Me</a>
Change xxx@yahoo.com to your email address.
Preview: Email me 

Image Link: Add the following html code in your blog


 
<a href=”mailto:xxx@yahoo.com“><img src=”http://i219.photobucket.com/albums/cc286/7kranthiswaroop/thenvelope.gif” alt=”Email me” width=”120″ height=”57″ border=”0″ /></a>
 
Change xxx@yahoo.com to your email address.

Preview:
Email me
I hope you will enjoy this. If you have any question then just tell me. I will answer as soon as possible.

How To Make A Blogger Blog Dofollow

How To Make A Blogger Blog DofollowBacklinks are very important for a website or blog. It like votes for your website. Huge backlinks means high page rank and high traffic. You can get backlinks in different ways. One of the most favourite ways is commenting on other sites. But condition is you have to comment on dofollow blogs. Unfortunately all blogger blog are nofollow by default. So you have to make them dofollow to provide the opertunity of others to get backlinks form your site.
Nofollow is a HTML tag added to the link anchor code, and will change the normal code as:
<a href=”yoursiteurl” rel=”nofollow”>anchor text</a>

How to make a blogger blog dofollow

Follow the following instruction to make a dofollow blog
1. Firstly you have to allow “Anyone – includes Anonymous Users” comments. To do this go “Settings>Comment” .
Then enable “Anyone – includes Anonymous Users” like the following picture.

Make+Blogger+Blog+Dofollow+Step2

2. Now, go “Design>Edit HTML” and click “Expand Widget Templates

3. Then by pressing F3 search the following two lines
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<a expr:href='data:backlink.url' rel='nofollow'>
4. Remove rel=’nofollow’ portion from the above codes

5. Now save your changes

That’s it. I hope you will enjoy this. If you have any question about ”How to Make a Blogger Blog Dofollow” then feel free to post here in comment.

How To Place AdSense Ads Below Title In Blogger Blog

The only quick and possible way for every blogger is to earn money from adsense. Google AdSense is offering free ads for bloggers to make quick money. But, ads placementis the key thing for huge earning. Ads below title are the most popular and effective ways to show ads.


Let’s see how to show ads below title in blogger blog.

1. LogIn your blogger account

2. From Dashboard go “Design” > “Edit HTML” and then click “Expand Widget Templates
 
3. Now Convert your adsense ads code by using “AdSense Code Converter
 
4.By clicking F3, search the following code

<div class='post-body entry-content'>
 
5. Just before above code line paste the converted adsense code
How to show ads on blog posts only
If you want’s to show ads on blog posts only then paste your code with additional two line as follow

<b:if cond='data:blog.pageType == "item"'>

Your AdSense Code Here
 
</b:if>
 
I hope you will enjoy this

How To Use Custom Fonts On Blogger Blog

Google has launched a new service called Google Web Fonts. By this site you can change your blogger blog font. It’s totally free to use for everyone. To do this follow the following steps.


Blog+font
Login your blogger blog account. From the “Deshboard” click “Design > Edit HTML” and then follow the following process.

1. Firstly go Google Font Directory to select your font. Now, click “Use This Font” and they will give a code like this.

<link href='http://fonts.googleapis.com/css?family=Georgia' rel='stylesheet' type='text/css'/>
 
(Note: Use Georgia or Change with your desire font)

2. Copy the code and paste it just below

<head>
 
3. Save your template. You have successfully added the font on your blog.
If you wants to use this font for your “Post Title” then use the following code.
.post-title {font-family: ‘Font Name’;}
If you wants to use this font for your “Post body” then use the following code.
.post-body {font-family: ‘Font Name’;}
 
4. Save your template and see your fonts in action!!!

How to add HTML codes in Blogger Posts

Recently, a reader of my blog wants to know how to add HTML code into blogger posts. This is really an important issue for Blogger blog beginners. Because blogger did not accept the HTML code directly into the post. Even I had this question when I started my blog initially. And when I tried to follow different ways on my blog, I faced a lot of difficulties with coding. But nowadays, I am using HTML code into my blog using customization. Let me say immediately how you can apply this trick on your blog.

If you wants to show HTML code without any customization in your blog then just use this site: SimpleCode. This method is too easy to use and it shows code in a very simple way.

HTML+Code+View+Using+SimpleCode

If you wants to add in a stylish way then it need to customize. To do this just follow the following instructions.

1. From Dashboard go Design >> Edit HTML

2. By using F3 or “CTRL+F” search the following code line
 
]]></b:skin>
 
3. Now, just before the above code paste the following codes

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #FFFFFF;
font-weight : normal;
margin : 0;
padding : 0;
}
 
 
4. Save your change.

Now, for every time when you wants to add HTML codes into your post, just put HTML codes between
 
<div class="codeview"> and </div>

Example:

<div class="codeview"> ]]></b:skin> </div>
 
Red portion indicate HTML codes. Thats it. I hope you will enjoy this customization.

How To Add Adsense Revenue Sharing Feature On Your Blogger Blogs

How To Add Adsense Revenue Sharing Feature On Your Blogger BlogsAre you a Blogger blog fan and do not wants to switch on WordPress. And, still wants to create a multiple authors blog with revenue sharing program to attract them to write on your blog? But, don’t know how to do this. Because, blogger have multi-authors interface but doesn’t have any option to create revenue sharing blog. Then, don’t worry. Here is a tutorial to setup revenue sharing system on blogger blog.
Just check out following steps-



Step 1: Login your blogger blog account. And from “Dashboard” go Design > Edit HTML. Then, click on “Expand Widget Templates”.

Step 2: Now, search the following code line by pressing F3

<data:post.body/>
 
Step 3: Replace the above code line with the following codes

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "Author1"'>

PASTE THE ADSENSE CODE FOR AUTHOR 1

</b:if>
<b:if cond='data:post.author == "Author2"'>

PASTE THE ADSENSE CODE FOR AUTHOR 2

</b:if>
<b:if cond='data:post.author == "Author3"'>

PASTE THE ADSENSE CODE FOR AUTHOR 3

</b:if>
</b:if>
Change “Author 1″, “Author 2″, “Author 3″, …. …. with your authors name. And place their adsense code on “Paste the adsense code for author X” portion.

Step 4: Now, save your changes. Keep in mind, you have to do same for every authors including you.
As you can notice, the above codes is only for 3 authors. To add a new author, just copy the following part and paste it again.

<b:if cond='data:post.author == "Author Name"'>

PASTE THE ADSENSE CODE Here

</b:if>
 
That’s all. Best of luck. I hope you will like this. But, my personal experience says its really difficult to maintain when you have many authors. What’s you opinion to run Adsense revenue sharing system on blogger blog.

How To Add Feedburner Recent Posts Widget On Blogger

How To Add Feedburner Recent Posts Widget On BloggerYou must have seen a recent post widget on sidebar almost every blogs. This widget helps to reduce bounce rate by increasing page views. You will find JavaScript to add this widget on your blog. Blogger also provide recent post widget.

I hope you also might have seen Feedburner recent post widget on some blogs. This widget looks more professional. This have another advantage, it takes very little time to load then the conventional recent post widget. If you use Feedburner recent post widget then, 50% of the load time will be shared by FeedBurner.

Here is a tutorial that describes how you can add a Feedburner recent post widget on your blogger blog.

Step 1: Sign In your Feedburner account. If you didn’t have an account, then create a new one. After login in your account click on the “Publicize” as shown below-

How To Add Feedburner Recent Posts Widget On Blogger

Step 2: Then you will find “BuzzBoost” on the sidebar at the left. Click on it.

How To Add Feedburner Recent Posts Widget On Blogger

Step 3: You will find a form with different options. Just fill the form.

How To Add Feedburner Recent Posts Widget On Blogger

Step 4: Then choose your blogging platform. And then copy the codes.

How To Add Feedburner Recent Posts Widget On Blogger
Step 5: After that login your blogger account. From “Dashboard” go “Design” and then “Page Element”.

Step 6: Click “Add a widget” and choose “HTML/JavaScript”. And paste copied codes on it and save.


That’s it. I hope you will like this. Now let me know, whether you liked this Feedburner recent post Widgetor not?

Related Posts Plugin for WordPress, Blogger...