Friday, 13 April 2012

Designed for Blogger 404 error page

Today Blogger update adds many features so strongly about SEO. First is the Meta Description tag (want to add it before we have declared in the template), the corresponding command is data: blog.metaDescription. What I appreciate most is the Meta Description tag can be placed respectively in each article, this new feature introduced but not forthcoming article in the settings. 2nd feature is easy to add rel = "nofollow" target = "_blank" to link the card. Feature 3 is easy to add alt, title for the image. And finally, the long-awaited features: Create 404 error page.

To show the error of your template must have a function and function <b:include data='top' name='status-message'/> must be invoked. As you know, most of the current template has been modified to remove this function. In this article I will guide you to customize the display to be notified when the article was not found in search results and page not found error (404). Message will not appear when accessing Labels, Post Older ...

 Add the following code on the card <b:includable id='main' var='top'> in your template:
<b:if cond='data:numPosts == 0'>
 <data:navMessage/>
</b:if>
 Basically here is finished. The message only appears when the number of posts on your blog page is now at 0. That is when the search does not show the results or page access does not exist (404).

To design for your 404 to Settings Search Options. As for the error and redirect select Edit and write the message you want to display (supports all HTML code) or use the following code to display the same demo blog:

<img alt='404' width='590' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfLMcFsC2VZkQQuv3wHiQuVfbCLCu2FbSrN0zuI59ya5Z41pXDgTcnJldFAr5K4D7aPCsWxa5d6VDT5YoWz8Xq2PEtyy3TPAScpX2TXzSs78LpQ30V9LFu_ekHXsri6EfPUHrvSmz878g/s590/404.png' height='399'/>
 Design is just suggestive, please express your creativity in the design of 404 error page!

Hide / Chat Box (Ver 2)

Today it wandering on Google to find the code hide / show pretty good chat box.
 This code is more smooth effects are quite impressive but which is not in use Jquery or Mootools, so can be assured about the speed issue. I have added the button design.

 Here is the code of the Chat Box V2 (insert the card </body>)
<style type='text/css'>
.gb_fixed{position:fixed;top:30px;right:0px;z-index:+10;}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:4px solid #bf3989;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#fff;
padding:0 3px 3px 3px;
}
</style>
<div class='gb_fixed'>
<table cellpadding='0' cellspacing='0' id='hidden_gb2'>
<tr><td><div><a href='javascript:void(0)' onclick='gb_showHideGB()'><b><center>[ Đóng Chat Box ]</center></b></a></div>

Code Shoutbox/Cbox

</td></tr></table></div>
<script type='text/javascript'>
//<![CDATA[
var gb_obj = document.getElementById("hidden_gb2");
var gb_finish = false;

function gb_setInitBehaviour(){
gb_obj.isHidden = true;
gb_setOpacity(gb_obj, "0.01");
}
function gb_setOpacity(obj, opacity){
opacity = opacity.substr(0, 4);
obj.style.opacity = opacity;
obj.style.filter = "alpha(opacity="+(Math.floor(parseFloat(opacity)*100)).toString()+")";
//writex(opacity);
}
function gb_showGB(){
gb_obj.style.display = "block";
gb_changeOpacityTo(1, "");
gb_obj.isHidden = false;
}
function gb_hideGB(){
gb_changeOpacityTo(0.01, "gb_obj.style.display = \"none\"");
gb_obj.isHidden = true;
}
function gb_changeOpacityTo(fin, funcStr){
var init = parseFloat(gb_obj.style.opacity.substr(0, 4));
var d = init <= 0.2 ? 0.04 : init <= 0.6 ? 0.08 : 0.20;
var m = fin>init ? 1 : -1;
var opacity = init + d * m;
if((fin-opacity)*(fin-init)<0){opacity = fin;}
gb_setOpacity(gb_obj, opacity.toString());
if(opacity != fin){setTimeout("gb_changeOpacityTo("+fin.toString()+", '"+funcStr+"')", 50);}
else{eval(funcStr);}
}
function gb_showHideGB(){
if(gb_obj.isHidden){gb_showGB();}
else{gb_hideGB();}
}
function writex(str){
document.getElementById("wx").innerHTML += str + " ";
}
gb_setInitBehaviour();
//]]>
</script>

<div class='gb_fixed' style='z-index:+5'>
<a href='javascript:void(0)' onclick='gb_showHideGB()'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgakUFqGQ_GzqZoSHb28QS4GLwgNth2hiAyOmFae7dvuh55DNkrguuTDSLstzjWSN6aBg9se2k70wwzoCuhdgBf_zcEIfAVWpT-ewwW5lrndt1OOfOEXdesm3nv_skVfXGzFmaRCTlskv0/s1600/cbutton.png'/>
</a></div>
 Do not know who authored the code should not write the source here.

Jquery language translation utility for blogspot Translate

Surely you already know to add Google Translate - very useful for sites that have traffic from many different countries. Gadgets that I was going to introduce below is based on Google's Translate tool, but in combination with jQuery:

 Cool? The entire site has been translated into other languages ​​without having to open a new tab on browser content. Moreover, language has been translated automatically into the next visit.

To add this gadget to your blog, create a widget HTML / javascript new paste the following code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://jquery-translate.googlecode.com/files/jquery.translate-1.3.9.min.js" type="text/javascript"></script>
<script type='text/javascript'>//<![CDATA[
jQuery.cookie=function(key,value,options){if(arguments.length>1&&(value===null||typeof value!=="object")){options=jQuery.extend({},options);if(value===null){options.expires=-1;}
if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+days);}
return(document.cookie=[encodeURIComponent(key),'=',options.raw?String(value):encodeURIComponent(String(value)),options.expires?'; expires='+options.expires.toUTCString():'',options.path?'; path='+options.path:'',options.domain?'; domain='+options.domain:'',options.secure?'; secure':''].join(''));}
options=value||{};var result,decode=options.raw?function(s){return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;};
var date=new Date();date.setTime(date.getTime()+(86400*360));$(function(){if($.cookie('lang')=='EN'){lanEN();}
if($.cookie('lang')=='VI'){lanVN();}
if($.cookie('lang')=='ES'){lanES();}
if($.cookie('lang')=='FR'){lanFR();}})
function lanVN(){$('body').translate('vietnamese');$.cookie('lang','VN',{path:'/',expires:date});}
function lanEN(){$('body').translate('english');$.cookie('lang','EN',{path:'/',expires:date});}
function lanES(){$('body').translate('Spanish');$.cookie('lang','ES',{path:'/',expires:date});}
function lanFR(){$('body').translate('French');$.cookie('lang','FR',{path:'/',expires:date});}
//]]></script>
<a href="javascript:void(0)" onclick="lanES()" title="Espanol"><img style="margin-right:5px" alt="Spanish" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8BCWHtuWwM4lEsCJR5N1TIkzeMNPjI-NPAviwjYkQxLs5vR3JhqfKDazSD_2hV2aUYo17e2C0R87Y7VvNw5mAKlYlNxwoTaKaV_OiVacSgCKQcO2beypulpSCn4zm789YrQ3Amfv9CTE/s1600/spanish.png" /></a><a href="javascript:void(0)" onclick="lanEN()" title="English"><img style="margin-right:5px" alt="English" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid1j7BJ6jXxxgrBNdenejQtk8mea4I686MCSq5mJsBE8IcovIK_Wevsk5GhurgZRrg8AxZ29-w1VNU5tMMH0ydg5yAtPjpkkp7zb30vPFxiWM30jHkKNFvySE5ZcZG5hZRVNdA2ekIeUk/s1600/english.png" /></a><a href="javascript:void(0)" onclick="lanFR()" title="French"><img style="margin-right:5px" alt="French" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFM9xbAvYLgfgd6vobRXV73YmGu0ysWNi6v43RHNxbgIrGTjO-j6Ww9qNimEWKPBjNCZS1EJ7ha2zu50oWf-chMbQdzdmkbq9CjrGJs2PYhyphenhyphenF12zwc1xYwjaDAKxZSbIsE_H7RKC86GkE/s1600/french.png" /></a><a href="javascript:void(0)" onclick="lanVN()" title="Vietnamese"><img alt="Vietnamese" src="http://lh5.ggpht.com/_rVQLxDFDz0A/TJXxIw-AcOI/AAAAAAAAGqQ/6wL1yekmQls/Vietnam.png" /></a>
 You can add in some other languages ​​that Google supports by changing the red line:
 <a href="javascript:void(0)" onclick="lanVN()" title="Vietnamese"><img alt="Vietnamese" src="image.png" /></a>

Professional Slide Show with prettyPhoto

In the process of understanding the new Wordpress theme, then we have noticed is that designers often use a jQuery plugin is prettyPhoto for their theme to showcase photos.

This is a lightbox format but there are many more functions such as displaying both video and flash. Your site will become more professional if you use this plugin. Want to know how it then you click on the image below:





 To use this plugin on blogspot, then you must first disable your default photo effects Blogger, go to Settings -> Format and then find and select the following:

 Save again, continue to edit the HTML and insert the following code above the </body>

<link href='http://www.no-margin-for-errors.com/wp-content/themes/NMFE/css/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery.prettyPhoto.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery("a[rel^='prettyPhoto']").prettyPhoto();
</script>
 Then, while posted in this picture, you add the rel = "prettyPhoto" like this:

 <a href="image.jpg" rel="prettyphoto"><img src="..."/></a>
 To display the correct type of gallery rel="prettyPhoto[pp_gal]", But rather want to see the video link into image1 image that links to video, such as: http://www.youtube.com/watch?v=_EC2tmFVNNE

Nice comment Framework (decentralized)

This is an improved framework comment posts, add more items in this hierarchy. Is threaded by default Blogger comment should only be a maximum of one level only. But for those who prefer home-grown would like to frame this comment.

 First, save a copy of the original template to prevent mishaps. Then go to edit HTML, select the extension form, find the following:
<b:include data='post' name='comments'/>
Replace it with the following:
<b:include data='post' name='threaded_comments'/>
 Continue to insert this code above ]]> </ b: skin>
Save the template and test again.

 

Auto Readmore Evolution

The script is so popular, at least we have used it a once over. Most blogs are more or less tricks mentioned Auto-readmore, so although never published and never use auto-readmore but it's still in the top keyword Noct Blog.

Thus in order to salvage their traffic and today, will post the script for auto-readmore are some recent template, hope you will have a new option when using this popular procedure.

So what's new? The answer is nothing innovative here at all, just reprocessing the old script to improve download speeds and more customizable.

As you saw in the demo, the thumbnail image has taken a rather nice and faster to resize:
  ----->  



However, for images from Picasa, but not copy from another site still resize again as usual:
  ----->  



Before performing this procedure, you should back up the original template as a precaution, then go to edit HTML and insert the following CSS above ]]></b:skin>
.thumb,.no-thumb{float:left;margin-right:15px;width:164px;height:164px}
.no-thumb{display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTkpR4IribO5jn8MlzZ2tCaZxevg7Qb71HZSVL35GrPkoHp9vMziGnutXQ4lFzKv1cPDkiEoeeJdEY_I2LY1ktLNRyBUE6kOk74iBjLF0h64GARArkLHpTDh2Dro_VDLTOWnZquSXwMbc/) 0 0 no-repeat;}
a.jump-link{font-weight:bold}


But this script is inserted below ]]></b:skin>
<script type='text/javascript'>//<![CDATA[
var snippet=60; G="s164-p";
function H(b,a){return b.replace(/<.*?>/gi,"").split(/\s+/).slice(0,a-1).join(" ")} function rm(b){var b=document.getElementById(b),a="",a=b.getElementsByTagName("img");if(1<=a.length){C=a[0].src;B=C.split("/");D=B[2];if(-1!=D.indexOf("blogspot")||-1!=D.indexOf("googleusercontent")||-1!=D.indexOf("ggpht"))F=B[7],C=-1==F.indexOf(".")?C.replace(F,G):B[0]+"//"+B[2]+"/"+B[3]+"/"+B[4]+"/"+B[5]+"/"+B[6]+"/"+G+"/"+B[7];a='<img class="thumb" src="'+C+'" />'}else a='<div class="no-thumb"></div>';b.innerHTML=a+H(b.innerHTML,snippet)+"..."};
//]]></script>

Red is the image size of thumb, you can edit them, but should be of equal value.
Blue is the default thumb url image post does not contain any images.
60 is the number of characters quotations, can change.

Finally, select expand search utility to fix it <data:post.body/>:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
<script type='text/javascript'>rm(&quot;p<data:post.id/>&quot;)</script><b:else/><data:post.body/></b:if>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if>
</b:if>
<div class='clear'/>

Save the template, it is almost done, if in your template, then delete it the following type:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

This code is fully compatible with the default read-more of Blogger, and if you insert more diligently for the post, then its speed is almost equal can auto-readmore procedure does not use javascript, and the quote is certainly is longer. About SEO, you can rest assured that the entire HTML of your post is displayed in the source of the blog should not affect.