New Blog Online: October 2010

If you use MooTools(http://mootools.net/) script inside your blogger template, mostly your Google Friend Connect widget will disappear from your blogger blog and only shows a white space.This is a serious problem to more bloggers.I also have faced to this problem and finally find the solution for this problem.I thinks this little trick will also helpful to others and decide to explain how to solve this problem.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

MooTools can be included in your template in 2 ways.

First way:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>

Second way:

<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("mootools", "1.2.4");
</script>

You can do this with in few seconds.Now follow the steps given below.

Fix Google Friend Connect not displaying

Login to your Blogger dashboard --> Design --> Edit HTML.

You don't need to click on "Expand Widget Templates".

Scroll down to where you see the </head> tag of your template.

Now copy below code and paste it just before the </head> tag.

<script type='text/javascript'>
//<![CDATA[

JSON.extend({
parse: function(string) {
return JSON.decode(string);
},
stringify: function(obj) {
return JSON.encode(obj);
}
});

//]]>
</script>

Save your template and you are done.

When your problem is fixed, please don't forget to leave a comment.

In this article,I am going to explain how to add more attractive Subscribe Section + Search Box to your blogger blog.This subscribe section is included Feedburner feed and Email subscriptions boxes,Twitter and Facebook boxes for your Twitter and Facebook profiles and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious) to share your articles among social networks.These social network buttons are powered by www.addthis.com.Above the subscribe section,Search box is included.You don't want to change anything in the search box code.To add this widget to your blogger sidebar without doing any modification,sidebar width must be at least 305 px. You can add this Subscribe Section + Search Box into your blog within few seconds and very easy to configure.If you like to add this widget to your blog or a website,then follow the steps given below.

1.Login to your blogger dashboard --> Design --> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>

Save your template.

4.Now go to Design --> Page Elements and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmvabLcXZqBW8O-B2fEs9Tig-ZPG2CKLov061p_FKWSZ39-z_9MBGVY_UXXZHFYYleGW0MmAYIPpquX9QCWEsKbVmgD-uqUksN4QfxKl1zNW1I5YSBKQrXvMvNEIFjubHLcU6LBIY7IQ08/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwasMxTl83FBR3ABqqv51HClMBnVtEjYQ6YbhNrh0KVYqk9RBHE9N7tS_YnzeQQAcVke8bmrIwmMF7H0bvN7sbW6fZC_7rdzhVB4AxB267QwN9tFCPFU8J2LELfMfaOW3ClBhlUP-9HgKa/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-HPZ0jc6soYbpCy0ydcXSfy1QjfgPcrpQ7oU1sxYYI5OF_qtTfiJHWK4zu6AmJVHUpbzNh__F4RaY5ku0o0EOHqQvWCdOwlOuG441C8eWGXhqQ3bVWWNBcXEJ4EZ0IoplhMIZdMg4f8YB/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE2X4PZC40ODBL-BrHfhIDSrQvJPtzqdYj3MM40z_PV7D453mXfmOObCHoxw6xUqqX_dR19jH4QI7y26Buj5TCPXsDGahtZjtZAYePr48lbrcKFEEvQAXLkEqb3fFbUv1anR8guFabUA6j/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXTkadw-1wMvBU9M6DdFCOL4vw10PYczniCuzkJgUzE0SNRufZYBGr09RG45yQt_hpTAkn37EoudIj2DHAbyPE3C1BUAs05Ui9w54kAOY7Ie8jypuNSrxlvprjwolNlP439TSbkOeLLdQ/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAV3exFgUg2F4o77g7uAKzB3M28cMUscvT9KcU76C4zz9usbwUYrt49PlEyoBt_zAciLD7jmPaFb7mjKO_MOlfMs3B8Db74eMeGNX53AO201rauvEXR3u2HKFTgRS3kFE372ZxYayHSdM/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbKju9fIykpMF-tQVGSGaDB1crt5bI-ld8WcE7ibRwj9hQdJT2XlLA4UR9VULTBkcyF9zFxR68jp9W0uTFpa9NlNYfzgDS1UvJqvCQSJhZ45pjKLiCvgF2gRHllCoczaldpVNIcVAh7HU/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsYamSe-ldxH_aViGNkTy0oScKpRW9uEh94c415Co0YTd4MgBnDKNoXLqpRfITk2AKE3MNzMifsVgA6Zn4ToPIO757vIm6zJBf_sWWwYnSXGRN3BKCce07OtPdPp-ZeuQGeBphnLoBa64/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAleO2WPoDHOS1HsWXTvTccRyVevHCBAVWOEK90naSDXNZqAEmbqOsi7GUyj-lB9hvi9uJlRsnVJjzJ1ZL_NKoT8sUiYjaox5z687ZIGlw92zbvlUdQU8ZtW0lTthhSibMHXxZ4hwAMKM/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBBJM9_XYdwYun0rboe6mfjEZc2Blf5JXoByQEFmumE7ysyWKFeO4toKtg1NQcBedfXQ5wBuyrYq7fmpLLyMbYbcfCz1mM10ZIpyWNjG2-5t7p_oToidhR7AYu35o2TycUCpTja224fg/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTTQYysZWjTDD4qd8bn7ZS29rPPQ_MFYBrv7p4Y6yag3SnN2FUYHaeY6yUjZGPZXuc5a-e2kLyYz33QcmxlNI5kvUmvauoX6230T7HSnXE1Y5EM3Iy6e__l5ZKdafPaCmFLpz18uZqSPw/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

NOTE : Remember to Replace,

FEEDBURNER-ID with your real Feedburner ID.(4 times).
TWITTER-USERNAME with your real Twitter username.
FACEBOOK-USERNAME with your real Facebook username.

You are done.

New Blog Online

Blog Archive

How to Fix "Google Friend Connect is not displayed" Problem

Attractive Subscribe Section + Search Box For Blogger

Popular Posts