Partially Fixing Disqus Comments To Not Get Penalized By Google

This post is for those of you which have a blog and run Disqus comment system on it.

Firstly, let me tell you the exact story: I haven't noticed this before, but if you look at the source code of a post (post, not main page) of probably all blogs using Disqus (except Web Upd8 and Mashable), and search for some words in the post, you will see them displayed twice: once in the actual post and once in a div with the "disqus_post_message" id, which is not visible on the actual page because it's hidden. This basically means all your posts text exists twice on your blog which is of course not very good in terms of SEO. Even worse, the "disqus_post_message" has the style "display:none", which Google interprets as trying to hide content.

If you take a look at Mashable, this does not occur because they use a very advanced customization of Disqus, with the comments text being actually displayed in the source code of their pages, not only in an embeddable window like on the rest of the blogs (having the comments show up on the actual page and not in an embedded window is very good from the search engines point of view).

How I partially fixed it

I don't know how to make the comments show up on the actual post page, but what I've managed to do - and I'm actually still testing to see if there is something wrong with this - is to remove the disqus_post_message div and with it, the double text that it creates in the pages source code. Please note that I've done this for a blog on the Blogger platform, and I don't know if/how this applies to other blogging platforms.

What I did was to search for this in my blog template (before doing this, I strongly suggest you make a backup to your template):

<div id='disqus_post_message' style='display:none;'><data:post.body/></div>

and completely remove it. Below this line, there is some javascript which looks like this:

<script type='text/javascript'>
var disqus_url = '<data:post.url/>';
var disqus_title = document.getElementById('disqus_post_title').innerHTML;
var disqus_message = document.getElementById('disqus_post_message').innerHTML;
</script>

From which I've removed this part:

var disqus_message = document.getElementById('disqus_post_message').innerHTML;

After removing these, I've also seen improvements in the page load speed.

A final note: I've also deleted this div:

<div id='disqus_post_title' style='display:none;'><data:post.title/></div>

Which makes the post title be displayed once again for Disqus, but hidden ("display:none"). Some might need this for displayed some Disqus widgets on their blogs, but I don't so I also removed this. Hopefully, everything will run smoothly without it.

That's about it. Hopefully this will help some bloggers out there :)

Blogger Finally Allows Users To Create Pages

Blogger users were only able to create posts, not pages. That's until today, because Blogger in Draft finally allows Blogger users to create pages.

To create a page for your Blogger Blog, log in to Blogger in Draft, go to Posting > Edit Pages > New Page. After creating your page, when you click the "Publish" button, you'll have an option to create a widget to display a link for this page, or you can link it manually:

For more info, visit the official post on Blogger in Draft.

Fix Post Duplicates In Related Posts Widgets For Blogger

I haven't posted about Blogger in a while, but there was a certain bug in almost all the "related posts" widgets for Blogger I know, and today I finally decided to fix it for Web Upd8 and hopefully, this will also help other Blogger blogs out there.

I use this related posts widget and like most related posts widgets for Blogger, sometimes the post on which an user is currently on, is also displayed in the "related posts". This is because of the parameters in the URL (such as "?medium=" or "#disqus", etc. - basically any parameter or in-page jump link) which make it look like a different URL for the widget, thus displaying the post in the related posts section, even when the user is already on that post.

I used "replace" in javascript to fix this - which I though looks a lot like "grep" and "sed" in Linux, but it seems it's not exactly like that and I had to do a bit of hardcoding for it to work, replacing the parameters twice in the URL. I hardly know any JavaScript so don't judge me for the way I managed to fix this =).

Here is the fix. My widget has this statement:

if(a.href!=location.href)

which should have fixed the bug I am talking about, but actually it doesn't (it only fixes it for example for the Digg iframe, Stumbleupon, etc.).

So to fix it, I replaced the above piece of code with:

if(a.href!=top.location.href.replace(/\?.*/,'').replace(/\#.*/,''))

In case the above code doesn't let you save the template (you get an error), use THIS code instead.

Like I said, I hardly know any Javascript, so I replaced the parameters twice. The above code replaces "?" and "#" and anything after those parameters, with nothing, thus giving us a stripped url.

This way, the parameters (from Google Reader, etc.) and jump links such as the Disqus comments links do not interfere with the related posts widget anymore.

Limitations: make sure your posts urls don't have any "?" or "#" characters (like http://myblog.blogspot.com/my?post.html), although I think Blogger doesn't allow that anyway.

Backupify: Free, Unlimited Accounts Until January 31, 2010

Backupify backs up all your online accounts (Gmail, Twitter, Facebook, Flickr, Google Docs, Zoho, Photobucket, Wordpress, Blogger and so on) to the cloud, normally for a nominal fee, but until January 31, 2010, all Backupify accounts will be free with unlimited storage.

After this period, the service will be paid again, but anyone signing up for an accout until January 31 will have an forever-unlimited free account.

[via lifehacker]

Top (Popular) Posts Widget For Your Blog (Easy To Set Up, Works on Both Wordpress and Blogger)

FoxRecord provides an easy to set up "Top Posts" widget for your blog. All you have to do is copy/paste the code in a html widget. If you use a Blogger (blogspot.com) blog, it's even easier to set up: just click the "Add to Blogger" button.

The widget displays the most popular posts on your blog, based on the number of pageviews.

HOW TO: Use Blogger With A Custom Domain - Proper Redirect

You probably know that you can use Blogger (*.blogspot.com) with your own domain. We use that for Web Upd8. Well, there is one issue with this which needs a little tweaking: you can either have http://myblog.com or http://www.myblog.com (the myblog.com domain is used just as an example) domain for your Blogger blog, not both because Blogger does not support multiple domains.

On the Blogger Custom Domain help page, it is stated to use 5 CNAME records to be able to have http://myblog.com redirect to http://www.myblog.com. But that info is not correct and it won't work. So here is what I did to properly redirect http://myblog.com to http://www.myblog.com (in our case: http://webupd8.org to http://www.webupd8.org) using a 301 (Permanent) redirect.

I used Godaddy to register the domain name, but any other service will do. Log in to the service from which you bought your domain, select your domain and you should have an option called "Forwarding" (or something similar). Use this to redirect your naked domain (without WWW) to the domain using WWW, for example: redirect myblog.com to www.wmyblog.com. Make sure you select "Forward only" and under the dropdown, select "I am permanently forwarding my domain" - this is how the option is displayed for Godaddy, for other services make sure you select "permanent redirect" or "301 redirect" (anything similar will do):

Now you must enter all the data Google provides for using a custom domain with Blogger. You can find all the info HERE.

If following the procedure above (but firstly allow it up to 48 hours to see if it really did not work) you get a 404 Page Not Found error, you can also try the tweak below.

After you set up everything, go to your domain name control panel and under Total DNS/MX, remove any "A HOST" you may have and create a new one for "@" (without the quotes) and point it to the following IP:

64.202.189.170

(don't forget to also create the CNAME for "www" (without the quotes) to point to ghs.google.com and remove any other "www" CNAME, as stated in the Blogger help). Here's how it should look:

That's it. You can see this is working by going to both http://webupd8.org and http://www.webupd8.org - both will point to http://www.webupd8.org.

Coming soon: how to use Google Apps for Domains and using Gmail for your name@myblog.com email address.

Google Related Links For Blogs

Google Related links (which I discovered via Techie-Buzz) is a new, invite-only service from Google which can display related links and searches into your blog posts.

"Related Links is a tool to help webmasters increase page views on their sites. Given a page on your site, Related Links can choose the most related pages from your site and show them in a gadget. You can embed this gadget in your page to help your users reach other pages easily. Related Links also suggests searches that users can run within your site to find even more related pages."

Don't let the "invite only" thingy scare you, I sent an email, requesting for an invite, and about 1 minute later I received a response and my account has been activated so the guys taking care of this are really fast (thanks, guys!). To request an invite, simply send an email to relatedlinks@google.com with your Gmail address, website domains and approximate pageviews per day.

The widget can be fully customized: width, colors, fonts, rather or not you want to display searches or just related links (posts), the number of related links, text to exclude from the titles (for instance I excluded the "~ Web Upd8" part at the end of the titles) and the most interesting part: you are able to see statistics for the widget: the number of times it has been displayed and the number of clicks.

But obvious, the most interesting part is under the hood, as the links displayed should be based on Google's own algorithm.

You can already see the widget implemented into Web Upd8 posts, but if you want to try a real live demo where you can enter your own links and post titles, visit the Google Related Links demo page.

Blogger users: to implement the code into your template: simply paste the code in a widget. If you want to insert it into your template, use something to convert the code, such as the Blogger Adsense code converter.

Update: removed the widget from Web Upd8, due to some bugs such as bad character encoding in posts titles, using short snippets (cannot be fixed, it just uses the text snippets Google uses) and the fact that the links could only be opened in a new window.

Integrating Facebook Share Button Into Blogger Blogs

Facebook recently updated it's Share Button, which now includes a share count and analytics. The button is fairly easy to integrate, as long as you don't specify the base URL (meaning that it will not work for the main page of a blog - it will only submit the blog URL, not a post URL), or you manually enter the URL.

Configuring the Facebook Share button for Blogger blogs is a bit tricky but achievable. Read on.

The first thing you need to do is decide over what format you want to use for the button. You can find info on this, on the Facebook Wiki. After you decide on this, remember the 'type=', as that will define the type of Facebook share button.

Then, to implement the button into your Blogger template, go to Layout > Edit HTML and use the following code for inserting the button (of course, in the template you need to go to where you want the Facebook Share button to show up):

<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>

You may change the:

type='button_count'

code, with the style you picked for your button (I explained in the beginning of the post).

Of course, if you want to align the button to the right, etc, it will need some styling using CSS, but you need to take care of that for yourself.

You can see a live preview of the button, right here on Web Upd8. Test it on a post page and on the main page (it's different).

For more info on this, head over to BloggerPlugins.

Font Face And Size Widget For Blogger

This font face and size widget is mainly for Blogger blogs but should work on any website actually.

How Font Face And Size Widget works

Put it in your blog sidebar and the user can then change the font size and font face (Times New Roman, Tahoma, Trebuchet Ms, Verdana, Book Antiqua, Bookman Old Style, Comic Sans Ms, Arial and entury Gothic).

You can view it in action on my test blog (although usually, widgets don't stay too much on that blog so it will probably only be available for a few days).

Implementing Font Face And Size Widget in Blogger

Go to your Layout > Page Elements and click on "Add a Gadget" where you want to add it, then select a HTML / JavaScript widget and paste this inside your new widget:

[via technology world]

Embed Code Into Your Blog Posts With Snipt

Snipt is a website for sharing pieces of code. What I like about it is the possibility to add that code to your blog, bringing syntax highlighting (and themes - preview them HERE) to your posts, without adding a plugin.


This is very useful if you don't want to add a useless script to all your pages if you only use some code occasionally. The script is also great for Blogger blogs, since you can't install plug-ins on blogspot.com.

Here is a sample of how Snipt looks like embedded into a post:

To embed such a code into your website, go to Snipt, paste your code and click on the embed button, then copy & paste that code to your post.

Also, Snipt Box allows you to easily retrieve code that you snip. It uses your twitter info to create a ‘Snipt Box’ just for you.

Use Netvibes To Add A Highly Customizable Recent Posts Widget To Your Blog

Netvibes offers a widget which can consist on a RSS feed or multiple feeds, you can add to your blog. You can chose between many styles, if the widget should have images or not, etc. Take a look at the images below:

And here is the live widget. You can customize the number of posts to be displayed and also the user can simply click "next" to see older posts.

To create a "recent posts" Netvibes widget for your blog, go to this page, and click on "Create or submit", then click "Create Widget".

Once you are finished with customizing your widget, click on "Share" and you'll be provided with a code you can insert into your website:

[via techie-buzz]

Blogger: Submit Your COMPLETE Sitemap To Google, Bing And Yahoo

As always, if you are using a Blogger (blogspot.com) blog, you must do things a bit differently than others do. That's why a trick is needed to submit your complete sitemap (not just the normal RSS feed which only includes your latest 10 posts).

The trick I am talking about is more or less known, but Amit @ digital inspiration created a page where all you have to do is insert your blog address and you can instantly submit your whole Blogger sitemap to Bing and Yahoo and you also receive some custom RSS feed links for submitting to Google Webmaster Tools. Read on for a step-by-step how-to.

1. Go to Amit's Blogger Sitemap Generator page and enter your blog URL (including the trailing slash at the end, like so: http://www.webupd8.org/ - notice the last slash).

2. For Google, you will be given some links. Here are mine:

atom.xml?redirect=false&start-index=1&max-results=500
atom.xml?redirect=false&start-index=501&max-results=500
atom.xml?redirect=false&start-index=1001&max-results=500
atom.xml?redirect=false&start-index=1501&max-results=500

How to use them? Go to Google Webmaster Tools (if you haven't verified your website yet, check the help menu on the left side of Google Webmaster Tools), click on your website name, then: Site Configuration > Sitemaps and click the Submit Sitemap button, and submit all the links you received using Amit's Blogger Sitemap Generator (at step 1):

3. For Bing and Yahoo, all you have to do is click the links provided by the Blogger Sitemap Generator:

That's it. Happy blogging :)

Highly Customizable Related Posts with Thumbnails for Blogger

Related Posts with Thumbnails for Blogger is a widget very similar to LinkWithin script but very customizable:

• maximum number of related posts - you can choose how many related posts to be displayed
• title of the widget - you can change the "Related posts" title to whatever you like
• JavaScript hosted on Google Code website so it loads very fast
• change colors and everything else by using CSS

For more info and instructions on how to add this widget to your Blogger template, see the article on BloggerPlugins.

Individual Post Views Counter For Blogger - Using Your Own Web Host

Some time ago, we published a way to have individual post views displayed in each of your Blogger post. The problem is: there is no hosting plan to handle all the post views for all Web Upd8 readers which have installed this Blogger hack, so the only way around this would be for you to install the script on your own server / web host.

I know of two PHP scripts which can do this, so I will handle each one in this post. Read on!

A. The original individual post views hit counter using an image.

1. Download PNG Counter from HERE.

2. After downloading, extract the archive and open: config.inc.php with a text editor such as Notepad or Gedit (in Linux) and modify this:

$CFG['db']       = false; 

from false to true.

Then modify what's in the double quotes ("") for these fields:

$CFG['dbhost']   = "10.10.10.10:3306";
$CFG['dbuser']   = "username";
$CFG['dbpasswd'] = "password";
$CFG['dbname']   = "database";

with the appropriate values for your hosting. Also, make sure you create a database in your control panel provided by your hosting service.

Also, at the bottom of the file, you'll have:

$CFG['pages'] = array(
'demo'
);

Remove the 'demo' from this array (including the single quotes).

After modifying all this, save the file.

3. Upload all the files to your server.

4. Use the same instructions for inserting the code to your Blogger blog as described HERE but make sure to replace the www.mortgagemeter.net part with the one to your domain / hosting.

You can choose from lots of different images. Just type in http://YOUR_HOST.com/demo.php (presuming you uploaded the counter files directly into your hosting root folder) and see examples of different types of images you can use in your blog posts.

Here is a demo with different digits for the counter, but your uploaded script will have a lot more different digits.

That's it.

B. Using the post views text counter created by Anuj (Open-Source script)

Thanks to Anuj, it's Blogger post views text counter for individual Blogger posts is available to everyone. He had the same issue with the server so you must also install it to your own server. Here's how:

1. Download the script from HERE.

2. Go to your hosting control panel and create a new database, let's call it 'bloggercounter'. Then, go to your PHPMYADMIN page (look for a link in your hosting control panel), select your 'bloggercounter' database in the left, click on the SQL tab and paste this:

CREATE TABLE `bloggercounter`.`counter` (

`SN` BIGINT NOT NULL AUTO_INCREMENT ,

`name` VARCHAR( 1000 ) NOT NULL ,

`hit` BIGINT NOT NULL DEFAULT '1',

PRIMARY KEY ( `SN` )

) ENGINE = MYISAM

(paste it exactly as it appears above, don't change anything), and select Go:

3. Open the counter.php file you extracted from the archive downloaded at step 1, with a text editor, and edit these lines:

$username = "YOUR-USERNAME"; // Enter Your Username and Password Here
$password = 'YOUR-PASSWORD'; // Enter Your Username and Password Here
$database = 'YOUR-COUNTER-DATABASE';  //Enter Your Database Name Here
$table = "YOUR-COUNTER-TABLE"; //Enter Your Counter Table Name Here

The fields have comments so you should know what to enter there. Just make sure that for the database you enter: bloggercounter (like we set the database in step 2) and for the table, enter counter (also like we set it up on step 2).

4. Optional: you can restricts the script so only your blog will be able to use the counter, so that it doesn't destroy your bandwidth quota and don't get huge mysql usage. To do this on top of the counter.php file you have this:

<?php

Exactly under it, paste the following code:

$ip = $_SERVER['REMOTE_ADDR'];
$hostname = gethostbyaddr($_SERVER['REMOTE_ADDR']);

if (strpos($hostname, 'allowd.example.com') === false || $ip !== '192.168.0.1') {
die('Access denied');

Replace allowd.example.com with your blog address and optionally, also enter the ip. This will only allow the script to run for your blog.

5. Upload the script to your server, and insert the following code in your Blogger template (exactly where you want the post views counter to show up):

<script src="http://YOUR_ADDRESS/counter.php" type="text/javascript"></script>

Replacing YOUR_ADDRESS with the address where you uploaded the counter.php file. For more info, visit Anuj's blog.

Blogger Enables Profile Pictures In Comments

Blogger released today a new feature which was much anticipated: to display profile images next to the comments that your visitors write. Unfortunately, it does not have a Gravatar support and users must upload their photos to Blogger.

From the comment preview, click "Add photo" to upload a photo to your Blogger profile. The next time you comment on a Blogger blog, your profile photo will be displayed next to your comment.

To enable or disable profile images in your blog's comments, go to Settings > Comments.

[via blogger buzz]

Create a HTML Twitter Widget For Your Blog Using JavaScript and CSS

(this is just a screenshot, see a live demo link at the end of the post)

1. The CSS (if you use Blogger, you need to place this before the ]]></b:skin> tag in your template / for other platforms, place this code inside your main .css file):

#twitter_div_ws {font-family:Arial, Helvetica, sans-serif; font-size: 13px; border: 1px solid #CCCCCC; padding: 5px; width:300px; background-color:#FFF; margin: 0 auto;}
ul#twitter_update_list_ws {padding:0; margin:0; list-style: none; display:block;}
ul#twitter_update_list_ws li {list-style: none; min-height:50px; border-top: 1px solid #CCCCCC; padding:5px 0px;}
ul#twitter_update_list_ws li span {font-style: italic; display: block;}
ul#twitter_update_list_ws .timeago {display:inline-block;}
ul#twitter_update_list_ws .timeago a {font-size:10px; color: #999999; text-decoration: none;}
#twitter_div_ws b a {font-weight: bold; text-decoration: none; text-transform:uppercase}
#twitter_info_ws {border-bottom: 5px solid #CCCCCC; padding-bottom:10px;font-size: 10px;}
#twitter_info_ws b {font-size: 15px; line-height:30px;}
#twitter_info_ws img {padding: 0 5px 0 0; width: 50px; border:0px;}

2. The JavaScript (place it above your tag inside your template):

<script type="text/javascript">
function relative_time(time_value) {
var time_lt1min = 'less than 1 min ago';
var time_1min = '1 min ago';
var time_mins = '%1 mins ago';
var time_1hour = '1 hour ago';
var time_hours = '%1 hours ago';
var time_1day = '1 day ago';
var time_days = '%1 days ago';

var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);

if (delta < 60) {
return time_lt1min;
} else if(delta < 120) {
return time_1min;
} else if(delta < (60*60)) {
return time_mins.replace('%1', (parseInt(delta / 60)).toString());
} else if(delta < (120*60)) {
return time_1hour;
} else if(delta < (24*60*60)) {
return time_hours.replace('%1', (parseInt(delta / 3600)).toString());
} else if(delta < (48*60*60)) {
return time_1day;
} else {
return time_days.replace('%1', (parseInt(delta / 86400)).toString());
}
}

function twitterCallback1(twitters) {
var statusHTML = [];
var statusHTMLI = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;

var FollowersCount = twitters[i].user.followers_count;
var FriendsCount = twitters[i].user.friends_count;
var ProfileImageUrl = twitters[i].user.profile_image_url;
var StatusesCount = twitters[i].user.statuses_count;

pic = twitters[i].user.profile_image_url;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return '<a href="'+url+'">'+url+'</a>';
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
});
if (i==0){
statusHTMLI.push('<a href="http://www.twitter.com/'+username+'"><img align="left" src='+ProfileImageUrl+'></a><b>Tweet Us at <a href="http://www.twitter.com/'+username+'">'+username+'</b></a><br/>Followers: '+FollowersCount+' | Following: '+FriendsCount+' | Tweets: '+StatusesCount+'');
}
statusHTML.push('<li><div class="timeago"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a></div><span>'+status+'</span></li>');
}
document.getElementById('twitter_info_ws').innerHTML = statusHTMLI.join('');
document.getElementById('twitter_update_list_ws').innerHTML = statusHTML.join('');
}
</script>

3. The HTML (place it where you want the widget to be displayed):

<div id="twitter_div_ws">
<div id="twitter_info_ws"></div>
<ul id="twitter_update_list_ws">
<li>loading…</li>
</ul>
</div>

4. Second JavaScript code (place it right after the above HTML code (presented in step 3):

<script src="http://twitter.com/status/user_timeline/YOUR_TWITTER_USERNAME.json?count=5&callback=twitterCallback1" type="text/javascript"></script>

In this code, replace YOUR_TWITTER_USERNAME with... your Twitter username :)


Credits: Wittysparks | Live Demo.

New "Latest Posts" Widget For Blogger

Blogger Buzz announced today a new widget from Widgetbox that you can add to your Blogger blog, but not the usual way, by going to your dashboard, but directly from Widgetbox website.

Features:

1. The easiest way to build a widget from your blog

2. Colorful, interactive, and engaging

3. Easy to add to Blogger and sites across the web

4. As you update your blog, the widget automatically updates with the latest posts, headlines, and images

5. Helps you reach new readers and drive traffic back to your blog

And actually, you can see such a widget live, embedded below:



Please note that the widget comes in two versions: basic (free) and pro (paid).

"Read More" Button For The Old Blogger Post Editor

As you know, Blogger has finally added the "Read More" functionality for the main page of Blogger Blogs which works just like on Wordpress: by inserting the <!-- more --> tag where you want the "Read more" text to be displayed (if it doesn't work for your template, read here on how to fix it). But the "Insert Read More" button is only available to either the new Blogger post editor which I hate or to Blogger in Draft. So I looked up for a solution to insert this tag through the old Blogger post editor and didn't find any, so I built one myself, through a simple Greasemonkey script.

The script is called "Blogger Insert Read More Button For The Old Editor" and it uses just a few lines of code which add a "Insert 'More'" button at the bottom of your old post editor, which simply inserts the <!-- more --> tag:

To use it, you will be needing Firefox + Greasemonkey.

How To Implement (Fix) The New, Default "Read More" For Your Custom Blogger Template

Like I told you yesterday, Blogger has finally implemented (it took them 10 years) the "Read more" - post summaries on the main page - by default. But if you have a custom Blogger template, this won't be activated for you as there is some code missing from your template and this needs to be fixed manually. If you have an older Blogger hack for achieving this "Read More", don't worry, you can keep the old Blogger hack and still use the new one.

Here is what you need to do to activate (fix) this new Blogger feature for your custom template:

Go to your Blogger Dasboard > Layout > Edit HTML and check the "Expand Widget Templates" box. Then search for something like:

  <p><data:post.body/></p>

Exactly under it, paste the following code:

    <b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>

Here is how it looks in an original blogger template (non-customized) so you can see where exactly you need to implement the code above:

    <div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>

So you can post it either directly under data:post.body, or under the div wrapping data:post.body, do as you wish :)

You can then customize the text for the "Read more", by going to Layout > and on the "Blog Posts" widget, click on "Edit" and you'll then find the option to change this text.

If you want to style this 'read more', like making it show up to the right instead of left, change it's color or add an image, you can do this with CSS. I will give you the CSS code for my 'read more' which you can use to modify to fit your own blog. So to implement the CSS for this, go to your blog template and paste the following code above the ]]></b:skin> tag:

.jump-link {
display : block;
background : url(http://www.netupd8.com/w8img/5dlzs8.jpg) no-repeat right top;
padding-right : 20px;
text-align : right;
clear : both;
}
.jump-link a {
text-decoration : underline;
font-weight : bold;
}
.jump-link a:hover {
color : #ff0000;
font-weight : bold;
text-decoration : underline;
text-shadow: 2px 2px 2px #BFBFBF;
}

You can see this in action right here, on Web Upd8. I've styled it exactly as the old hack so it looks exactly the same, but if you go to the main page and hoover over the "Read More!" link for this post, you'll notice the URL has a #more at the end, while if hoovering the "Read More!" link on any older post from our blog, this #more won't show up, because those posts use the old, unofficial hack!


Important! When publishing posts using this new, default Blogger method, don't put the

"Read More" Comes To Blogger By Default

One of the most asked for feature in Blogger has always been the "Read more" post splitter - to show just a snippet of your post on your blog's index page. Bloggers have been trying to implement this in lots of different ways (we actually covered quite a few) but now Blogger has finally got this by default (without tweaking the template).

There are a couple of ways to insert a "Read more" jump to your posts. If you use the new post editor (available on Blogger in Draft, or by enabling it via the Settings tab), you'll notice the "Insert jump break" icon in the editor's toolbar. Click this icon and the "jump break" will be inserted into your blog post at your cursor's position.

If you don't use the new post editor, you can still insert a jump break in Edit HTML mode by adding !-- more --> where you want to position the jump break.

You can also edit this "Read more" tex by going to Layout > Edit and edit the Blog Posts widget.

P.s.: we're still using a template hack for the "read more", here, on WebUpd8 and probably won't switch because we got really fond of this nifty Blogger trick :)

Update: Please note that if you are using a custom Blogger template, you need to manually enter the new code so you can use this. We wrote how to fix this, here.

[via blogger buzz]