“HTTP protection – detecting violations of the HTTP protocol and a locally defined usage policy.”

-modsecurity.org

All you have to do is, ask the customer support representative to disable / Whitelist this rule. Hostgator support were happy to do this.

If you know how to do it manually (dedicated server) and want to share your experience, please comment. Would appreciate that.

Yes, you heard it right, not for WordPress but for blogger. I’m calling it “SEO Blogger”.

This is something I’ve been working for a little while now. This is based on my previous post about conditional tags. Some of you might also remember the Meta tag generator. This is maybe the end result of all that.

It does everything automagically. Behind the scenes, it loads the XML template. Searches for previously written meta tags and puts it in the input fields. When you change it, the changes are incorporated in the template and submitted. All of this happens Client side. So, we don’t need “Blogger Team” to support it (BTW, are they sleeping?).

This works on Firefox and Google Chrome. Google Chrome has GreaseMonkey installed by default.

1) Download Greasemonkey addon if you haven’t done it on Firefox. Restart you browser.

2) Click on this installation link. And it will install the script.

This will basically takes care of everything. It’s almost similar to the WordPress.

<note>: Your meta data will be stored in your template. When you change the template, you’ll lose the that. So, before changing the template, copy all the tags. It will be similar to:

<b:if cond='data:blog.url == &quot;http://yourblog.blogspot.com/2007/08/thepost.html&quot;'>
<meta content='This is the description' name='description'/>
<meta content='these, are, some, keywords,' name='keywords'/>
</b:if>

Copy all of these tags. Paste it in the new template just before </head> tag.

</note>

Features to be implemented:

* Template upload without dealing with the copy paste crap (Yes, it’s possible)

* Meta tags for home page

* And I’m open to feature requests

Let me know if you have any bugs. If you like it, use it and link to this article (please, don’t steal it)

Frequently Asked Questions:

1) Day by day, this will keep adding more tags to the template file. So, will it slow down my website?

Ans. No, it will not. Your template is kind of like a program which the blogger engine parses everytime a visitor, visits your website. The meta element will only be loaded if a particular page is visited. So, it will not slow down your website.

-Suhas

It’s been a long time since I posted anything (Exams holding me back). Today I have something special for you. A plugin that’ll make Blogger to WordPress Migration kids play (or atleast, hope so).

Here is the updated Blogger to WordPress guide to go with the plugin.

WordPress Repository
Download

In a blog, images take up the most bandwidth. You might save a lot of bandwidth if you use this method.

Ever since I migrated from Blogger to WordPress, I have been posting pictures to Picasa. Here’s how:

1) Create a dummy blog on blogger.com (say thisisjustforthepictures.blogspot.com)

2) Configure it on Windows Live Writer. (Blogs –> Add blog account)

3) Write a blog post. Add some pictures (duh!)

4) Select “Post draft to blog”

4) Login to your Blogger Dashboard –> Edit Posts.

5) Select the “Edit HTML” tab. Copy everything up (Ctrl + A and Ctrl + C).

6) Login to your WordPress Dashboard. Create a New post (Posts –> Add New) . Select HTML tab, paste the copied text. (Ctrl + V). Publish!

Also, if you are using magazine style template that makes automatic thumbnails, you might want to hear this. By default, WordPress doesn’t make thumbnails of offsite images (which in this case is Picasa). So, you’ll need to implement this hack: WordPress: Automatic thumbnails of blogger or picasa hosted images

Afterthoughts:

Some of you might point out that, “What if Picasa goes down”. Hey, its from Google! It’s here to stay. If you are still worried, you can try cloud backup services like backupify.com

Right now, I think this is the best trick. If I get some time, I’ll try to tweak the WordPress’ upload script to incorporate Picasa API.

You ask me what what’s new with TimThumb beta? By, default wordpress doesn’t make thumbnails of offsite images. This script can make thumbnails (server side resizing) of offsite images. And…don’t worry, no one can misuse it because it has the Allowed sites feature.

Anyways, starting my tutorial. The points in green is the explaination. Everything else for the newbies to follow.

Also read: [WordPress] How to publish pictures on Picasa Web Albums using Windows Live Writer

1) Download this (Right click –> save file). Rename it to “timthumb.php”. Upload timthumb.php to your template directory (wp-content/themes/yourtheme). I have included all the blogger image hosting domains in the allowed list. Plus, I have fixed a little bug.

You can actually upload it anywhere you want but, you’ll have to make subsequent changes in the following code.

1) Login to your WordPress Dashboard –> Appearance –> Editor. You’ll  need to edit some files here.

functions.php : Now, add this just after <php tag

// retreives image from the post
function getImage($num) {
global $more;
$more = 1;
$content = get_the_content();
$count = substr_count($content, '<img');
$start = 0;
for($i=1;$i<=$count;$i++) {
$imgBeg = strpos($content, '<img', $start);
$post = substr($content, $imgBeg);
$imgEnd = strpos($post, '>');
$postOutput = substr($post, 0, $imgEnd+1);
$image[$i] = $postOutput;
$start=$imgEnd+1;

$cleanF = strpos($image[$num],'src="')+5;
$cleanB = strpos($image[$num],'"',$cleanF)-$cleanF;
$imgThumb = substr($image[$num],$cleanF,$cleanB);

}
$space = array("%20", "+");
if(stristr($image[$num],'<img')) { $yo = str_replace("?imgmax=800", "", $imgThumb); } /*Removes the imagemax=800 slug from the blogspot image URL*/
$more = 0;
return $yo;
}
//retreive image ends

This code creates a function that pulls out the first image from the post (Automatic!). Thanks to Fikri Rasyad.

home.php :
Add this inside the loop. Since thumbnails are inserted before the post excepts or title, add it before the_content_limit or the_excerpt or something similar.You’ll need to edit some things in this code. I have commented about it (green colour)

<?php $height = 50 ; $width = 50 ; /* Edit here .. Height and width */ ?>
<?php if( get_post_meta($post->ID, "thumb", true) ): /* If the thumbnail field is defined*/?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="/tools/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&amp;h=<?php echo $height; ?>&amp;w=<?php echo $width; ?>&amp;zc=1" alt="<?php the_title(); ?>" /></a>
<?php elseif ((preg_match("/ggpht.com/i", getImage('1'))) || preg_match("/blogspot.com/i", getImage('1'))): /* If the image is hosted on picasa or blogger*/ ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo getImage('1'); ?>&amp;h=<?php echo $height; ?>&amp;w=<?php echo $width; ?>&amp;zc=1" alt="<?php the_title(); ?>" /></a>
<?php elseif(!getImage('1') == ""): /* If the image is present elsewhere */ ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php echo getImage('1'); ?>" height=<?php echo $height; ?> width=<?php echo $width; ?> alt="<?php the_title(); ?>" /></a>
<?php else: ?>
<?php endif; ?>

If you want the complete loop with the post title, excerpts, thumbnails, here you go. Just replace your old loop with this one. Click on “show source”.

<?php $recent = new WP_Query("cat=1&showposts=5"); /* Edit here.....The usual query. No. of posts and category*/ while($recent->have_posts()) : $recent->the_post();?>
<?php if( get_post_meta($post->ID, "thumb", true) ): /* If the thumbnail field is defined*/?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="/tools/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&amp;h=50&amp;w=50&amp;zc=1" <?php /* Edit here .. Height, width and timthimb.php source */ ?> alt="<?php the_title(); ?>" /></a>
<?php elseif ((preg_match("/ggpht.com/i", getImage('1'))) || preg_match("/blogspot.com/i", getImage('1'))): /* If the image is hosted on picasa or blogger*/ ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo getImage('1'); ?>&amp;h=50&amp;w=50&amp;zc=1" <?php /* Edit here .. Height, width and timthimb.php source */ ?> alt="<?php the_title(); ?>" /></a>
<?php elseif(!getImage('1') == ""): /* If the image is present elsewhere */ ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="thumb" src="<?php echo getImage('1'); ?>" height=50 width=50 /* Edit here .. Height and width */ alt="<?php the_title(); ?>" /></a>
<?php else: ?>
<?php endif; ?>
<strong><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></strong>
 <?php the_content_limit(80, ""); ?>
  <hr/>
  <?php endwhile; ?>

How does this work?
1) Checks in the “thumb” custom field. So, you can use your own thumbnail images.
2) if not, it pulls out the first image from the post.
3) If it is hosted in blogger. It makes a thumbnail of it.
4) If the image is not hosted on blogger, it just shows the image with the img src=”pic.jpg” alt=”" width=”50″ height=”50″ tag (not server side resizing)

How to use your own thumbnails?

While posting a blogpost, enter “thumb” in the Name field and the image path in the Value field (for eg: http://yourblog.com/mypic.jpg).

If you have any questions, please comment.

Ah, I’m here to break my drought of posts. This time, its a little special. I’ve made a small program which will help you add META tags to individual blogger pages.

With this program, you can avoid the hassles of retrieving every URL, pasting it into the code etc. You just enter your Blogspot Address, the number of posts and are good to go. Give it a try!

Update: Bugs fixed!
http://suhastech.com/meta

I have also included a set of FAQs on how to use it.

You can just remove this this easily using conditional tags. It’s basically an if:else parser. Sort of like PHP but you can’t use Boolean expression (AND, OR, and stuff)

As of now, Blogger has introduced conditional tags for post pages, index pages, archive pages and static pages. That means, you can program widgets (or codes) in the such a way that they show up ONLY on the index page or ONLY on the archive page or ONLY on the post pages.

So, you ask what else can I do with this option. The uses are literally endless.

• You can set just the archive page to NOFOLLOW so that search engines don’t index archive pages (for better SEO).
• You can also use it show Adsense only on the post pages. Use it just below the title for better Click Through rates.
• Add meta tags to individual pages
• Hide sidebar on static pages
• and lots more..

Now, I’m going to show how to do it onRelated post widget (LinkWithin). You can use it on any other widget. This can be a little tricky for non – programmers. So, please go through this very carefully. If you still can’t get the hang of it. Please comment.

1) First, you need to know the widget ID of your widget. To find it just Go to Blogger Dashboard –> Layout –> Page element. Click on Edit.

2) You can find the Widget ID here. (Mine is HTML9)

3) Now, Go to Blogger Dashboard –> Layout –> Edit HTML

4) Check “Expand Widget Templates”.

5) Find (Ctrl + F) your Widget ID (Eg: HTML9)

6) Add  this just after the b:includable tag (normally )

If you want to show the widget only on the blog post pages:

If you want to show the widget <strong>only</strong> on the <strong>index page or homepage:</strong>

If you want to show the widget only on the archive pages:

If you want to show the widget <strong>only</strong> on the <strong>a certain url:</strong>

If you want to show the widget only on the new static pages (about me, contact etc):

7) Now, add

before the

tag.

Finally, you should have something like this:

<a href="http://suhastech.com/wp-content/uploads/images/includable2.png"><img style="display: inline; border-width: 0px;" title="includable" src="http://suhastech.com/wp-content/uploads/images/includable_thumb.png" alt="includable" width="639" height="109" border="0" /></a>

8 ) Click on Save Template and it’d done.

<a href="http://suhastech.com/blogger/blogger-making-widgets-appear-only-on-post-pages-or-homepage-or-archive-pages/comment-page-1/#comment-297">Marina</a> pointed out that, if you want to hide a widget in a particular page, you can use <strong>“!=” </strong>instead of <strong>“==”</strong>
<blockquote><strong>Apparently “==” means include and “!=” means don’t include.</strong></blockquote>
<strong>Troubleshooting:</strong>

<a href="http://suhastech.com/blogger/blogger-making-widgets-appear-only-on-post-pages-or-homepage-or-archive-pages/comment-page-1/#comment-145" target="_self">AbdulGafoor</a> described a problem. Sometimes, if you define CSS rules for your widgets and use this hack to hide a particular widget. You’ll find an empty space, that’s it. To fix it, you can add this code between the conditional tags.

#WidgetID1{display:none;}

Add the code before </head> tag just after ‘]]>’

This might pull down search engine rankings. Blogger archive pages can pose a little problem . You can see on this image below that both archive page and post pages have the same content. You need to block it.

This is very simple actually. Just go to Blogger Dashboard –> Layout –> Edit HTML

Add this just after <head> tag.

<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta name="robots" content="noindex, follow" /></b:if>

This code instructs crawlers not to index archive pages.

I recently posted an article on shoutmeloud.com about SEO tricks using Google Webmasters tool. You can check it out.

The solution: You can host the old domain on a server and add .htaccess with the 301 redirection code.

You can use a free webhost for this (I recommend 000webhost). It should have a decent uptime and MUST allow editing .htaccess file. If you have a paid webhosting account, that would be great!

Note This .htaccess method of redirection works ONLY on Linux servers having the Apache Mod-Rewrite moduled enabled

Here’s what you do:

Configuring your old website

Assuming you have a web hosting account and your nameservers configured (If not, this tutorial will help you) I’ll continue to tutorial.

1) Open a FTP client like Filezilla

2) Enter your host name (normally ftp.youroldsite.com) and other credentials. Click on connect.

3) Open public_html. You should find a file called .htaccess (Make sure you can open hidden file)

4) Right click on the file and select Edit.

5) Open using Notepad. Paste this code

Options +FollowSymLinks
RewriteEngine on
RewriteRule (.*) http://www.yournewwebsite.com/$1 [R=301,L]

Save the file.

Configuring your new website

1) Goto your Blogger Dashboard –> Settings –> Publishing Tab

2) Follow this tutorial to configure your new site. This tutorial can be followed for any domain name (.com, .net etc) not neccessarily co.cc.

Phew! I think that’s about it. All your links from your old website will be redirected to the new website.

If you have any doubts, please use the comment form below.

source

1) Just open the JavaScript files using your browser (File like http://www.somesite.com/java.js) or notepad. Copy the code.

2) Goto the Blogger Dashboard —> Layout –> Edit HTML

Enter this code just before </head>

<script type=’text/javascript’>
//<![CDATA[
/* your copied code*/
//]]>
</script>