tag:blogger.com,1999:blog-60828374682189269962012-10-15T17:36:38.679+05:30128 BrainsMake a code so beautifulsharan chakradharhttps://plus.google.com/109375774536230816179noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-6082837468218926996.post-66507537185113178412012-10-15T17:36:00.002+05:302012-10-15T17:36:38.684+05:302012-10-15T17:36:38.684+05:30What is Gravatar and Why You Should Start Using it Right Away<div dir="ltr" style="text-align: left;" trbidi="on"><span style="font-family: Trebuchet MS, sans-serif;">Often new WordPress users ask us about how the grey icon that shows up next to their name. Sometimes we get emails from users asking us how can they turn this grey thing off. Well this grey icon is known as GRAVATAR. In this article we will discuss what is a gravatar and why you should start using it right away.</span><br />
<div><span style="font-family: Trebuchet MS, sans-serif;"><br />
</span></div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-Uh8ViiD2yAQ/UHv3JxazPNI/AAAAAAAAAmo/OPUqb6ovSwg/s1600/gravatar.jpg" imageanchor="1"><img border="0" height="320" src="http://2.bp.blogspot.com/-Uh8ViiD2yAQ/UHv3JxazPNI/AAAAAAAAAmo/OPUqb6ovSwg/s320/gravatar.jpg" width="320" /></a></div><div><h2><span style="color: #073763; font-family: Trebuchet MS, sans-serif; font-size: large;">What is a Gravatar?</span></h2><span style="font-family: Trebuchet MS, sans-serif;">Gravatar stands for Globally Recognized Avatar. It is globally recognized because millions of people and websites use them. Most popular applications like WordPress have built-in support for Gravatar. When a user leaves a comment (with email) on a site that supports Gravatar, it pulls their Globally Recognized Avatar from Gravatar servers. Then that picture is shown next to the comment. This allows each commenter to have their identity through out the world wide web.</span><br />
<h2><span style="font-family: 'Trebuchet MS', sans-serif; font-size: large;"><span style="color: #073763;">Where and How Do I get a Gravatar?</span></span></h2><span style="font-family: 'Trebuchet MS', sans-serif;">It’s simple and it’s free. Simply go to </span><a href="http://gravatar.com/" style="font-family: 'Trebuchet MS', sans-serif;"><span style="color: #3d85c6;">Gravatar’s website</span></a><span style="font-family: 'Trebuchet MS', sans-serif;">. Signup with the email that you use the most often to comment. Add an avatar of yourself. This could be a picture of yourself, your company’s logo, or something unique. You really have to do it one time. Chances are you won’t be changing your avatar a lot. So it’s more like set it and forget it.</span><span style="font-family: Trebuchet MS, sans-serif;"><br />
<br />
Most WordPress themes already come with gravatar integration with comments. If your theme doesn’t, then you should seriously consider adding it. For further branding purposes, you can change the default mystery man gravatar on your site and put something else. Here is a tutorial on <a href="http://www.wpbeginner.com/wp-tutorials/how-to-change-the-default-gravatar-on-wordpress/"><span style="color: #3d85c6;">how to change the default gravatar in WordPress</span></a>.<br />
<br />
To see the live demo of gravatar in action simply comment below. Hope to see new faces in our comments. If you have a gravatar, then make a comment below. So we can recognize you.<br />
<br />
</span><br />
<h2><span style="font-family: Trebuchet MS, sans-serif;"><span style="color: #073763; font-size: large;">Why Should I add Gravatar?</span></span></h2><span style="font-family: Trebuchet MS, sans-serif;">If you want to be identified on the web, then you should use a gravatar. If you are a blogger, non-profit, small business, or anyone who wants to build a brand, then you need to start using gravatar. Chances are that you read and comment on blogs. At first your gravatar might not get as much attention. But if the same person sees your comment at numerous sites they read, they will probably end up visiting your website. We as publishers find it really easy to identify our loyal users by their gravatar.</span><br />
<br />
</div></div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6082837468218926996-6650753718511317841?l=128sbrain.blogspot.com' alt='' /></div>sharan chakradharhttps://plus.google.com/109375774536230816179noreply@blogger.com0tag:blogger.com,1999:blog-6082837468218926996.post-36898700321265185742012-10-13T17:30:00.001+05:302012-10-13T17:30:06.792+05:302012-10-13T17:30:06.792+05:30Add a Facebook Invite Friends Link to your Blogger Site<div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;">
<h3 style="background-color: #dfdfdf; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; clear: both; color: #424242; font-size: 18px; margin: 20px -5px 15px; outline: none; padding: 5px 10px; position: relative;">
<span style="background-color: white; color: #666666; font-size: 13px; font-weight: normal; line-height: 18px; margin: 0px; outline: none; padding: 0px;">Over at <a href="http://www.9lessons.info/2012/07/facebook-invite-friends-api.html" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;" target="_blank">9Lessons</a> I read a very helpful tutorial to add an "Invite your Facebook Friends" link to a website. I was able to modify this in order to add to a gadget which now appears in the sidebar on all pages of Blogger Buster (beneath the Facebook Like box).</span><br style="background-color: #f6f6f6; color: #666666; font-size: 13px; font-weight: normal; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><br style="background-color: #f6f6f6; color: #666666; font-size: 13px; font-weight: normal; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><div style="background-color: #f6f6f6; color: #666666; font-size: 13px; font-weight: normal; line-height: 18px; margin: 0px; outline: none; padding: 0px;">
If you click on this link, a box will appear on the page enabling you to invite chosen friends from your Facebook profile to visit Blogger Buster.<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />In this simple tutorial I'll explain how you can add this functionality to your own Blogger powered blog.</div>
</h3>
<h3 style="background-color: #dfdfdf; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; clear: both; color: #424242; font-size: 18px; margin: 20px -5px 15px; outline: none; padding: 5px 10px; position: relative;">
Create a Bit.ly URL for your blog</h3>
The first thing you'll need to do is <a href="http://bit.ly/" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;">create a short bit.ly url for your blog</a>. This will enable us to circumvent the requirement for a secure base URL (beginning with https which we can't natively use with Blogger).<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Make a note of this short bit.ly URL as you will need it when creating your app on Facebook.</b><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><h3 style="background-color: #dfdfdf; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; clear: both; color: #424242; font-size: 18px; margin: 20px -5px 15px; outline: none; padding: 5px 10px; position: relative;">
Create your Facebook App</h3>
Now you'll need to create a Facebook Application as you'll need an appID to use in your code. <a href="https://developers.facebook.com/apps/" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;" target="_blank">Visit the Apps page on Facebook Developers</a> to do this.<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><span style="background-color: white; font-size: 1em; margin: 0px; outline: none; padding: 0px;">Name your application and fill in the first set of details as follows: </span><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><ul style="border-width: 0px; font-size: 1em; line-height: 1.4; margin: 0.5em 0px; outline: none; padding: 0px 2.5em;">
<li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Display Name</b> - The name of your site </li>
<li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Namespace</b> - yournamespace (this will feature in the URL for your app. eg: http://apps.facebook.com/bloggerbuster)</li>
<li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Contact email</b> - your email address </li>
<li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">App Domains</b> - The URL(s) of the blog(s) you will be using this app for (eg: http://yourblog.blogspot.com) </li>
</ul>
</div>
<div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;">
Next, click on "Select how your app integrates with Facebook" and fill in details as follows:<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><ul style="border-width: 0px; font-size: 1em; line-height: 1.4; margin: 0.5em 0px; outline: none; padding: 0px 2.5em;">
<li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Website with Facebook Login</b> - Your blog's URL (eg: http://yourblog.blogspot.com) </li>
<li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Canvas URL</b> - Here you'll need to enter the bit.ly url you generated for your site, adding a question mark at the end. For example, http://bit.ly/blgrbstr? </li>
<li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Secure Canvas URL</b> - Enter your blog's bit.ly URL beginning with https (eg: https://bit.ly/blgrbstr?) </li>
</ul>
<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />If you like, you can add an icon and thumbnail for your application at the top of the page; these will appear when readers use your app. Then save your changes.<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /></div>
<div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;">
Once you've done this, be sure to make a note of your App ID which will be shown at the top of the page as you'll need to add this to the code to be pasted in your site.<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><h3 style="background-color: #dfdfdf; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; clear: both; color: #424242; font-size: 18px; margin: 20px -5px 15px; outline: none; padding: 5px 10px; position: relative;">
Add a custom gadget to your site</h3>
</div>
<div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;">
Finally, go to the <b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Layout</b> section of your Blogger dashboard and choose to add (or edit) an HTML/JavaScript gadget.<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /></div>
<div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;">
Paste the following code into your gadget, replacing the values highlighted in <b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><span style="color: red; font-size: 1em; margin: 0px; outline: none; padding: 0px;">red</span></b> and <span style="color: blue; font-size: 1em; margin: 0px; outline: none; padding: 0px;">blue</span>:<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><blockquote class="tr_bq" style="border: 1px solid rgb(223, 223, 223); font-family: courier, serif; font-size: 1em; margin: 10px 20px; outline: none; padding: 5px;">
<script src="http://connect.facebook.net/en_US/all.js"></script><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><script><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />FB.init({<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />appId:'<b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><span style="color: red; font-size: 1em; margin: 0px; outline: none; padding: 0px;">your-app-id</span></b>',<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />cookie:true,<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />status:true,<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />xfbml:true<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />});<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />function FacebookInviteFriends()<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />{<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />FB.ui({<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />method: 'apprequests',<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />message: '<b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><span style="color: blue; font-size: 1em; margin: 0px; outline: none; padding: 0px;">Your Message Here</span></b>'<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />});<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />}<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /></script><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><div id="fb-root"></div><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><span class="invite-friends-link"><a href='#' onclick="FacebookInviteFriends();"><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><span style="color: blue; font-size: 1em; margin: 0px; outline: none; padding: 0px;">Invite friends link text</span></b><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /></a></span><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><script type='text/javascript'><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />if (top.location!= self.location)<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />{<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />top.location = self.location<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />}<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /></script></blockquote>
And save the changes.<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />This will create a basic text link which your blog visitors can click to bring up a Facebook dialogue box in which their friends can be invited to visit your site.<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />Here's a demo of how the "Invite Facebook Friends" link works:<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><div id="fb-root" style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">
</div>
<span class="invite-friends-link" style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><a href="http://www.bloggerbuster.com/#" style="background-image: url(http://2.bp.blogspot.com/-E5PpxJP0Dr4/T_YWB_HvV-I/AAAAAAAADSk/7fIRr2gw-B0/s1600/facebook.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border: none; color: #3b5998; display: block; font-size: 16px; font-weight: bold; line-height: 30px; margin: 0px; outline: none; padding: 0px 0px 0px 30px;">Invite friends to Blogger Buster</a></span><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />For those who may be reading this post in their feed reader. here's a screenshot of the Facebook pop-up screen:<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><div class="separator" style="clear: both; font-size: 1em; margin: 0px; outline: none; padding: 0px; text-align: center;">
<a href="http://2.bp.blogspot.com/-_mxLlCrHGAI/T_bSo8KgknI/AAAAAAAADS4/HwLHSjsveao/s1600/friend-invites-facebook.png" imageanchor="1" style="border: none; color: #333333; font-size: 1em; margin: 0px 1em; outline: none; padding: 0px;"><img border="0" src="http://2.bp.blogspot.com/-_mxLlCrHGAI/T_bSo8KgknI/AAAAAAAADS4/HwLHSjsveao/s1600/friend-invites-facebook.png" style="border: 1px solid rgb(204, 204, 204); font-size: 1em; margin: 0px; max-width: 540px; outline: none; padding: 4px; position: relative; text-decoration: none;" /></a></div>
<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />If you would like to style the link to look like the one which appears above and in the Blogger Buster sidebar, go to<b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Template>Customize</b> in your Blogger dashboard, scroll down to the <b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Advanced</b> section and add the following to your <b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Custom CSS </b>(or modify to suit your requirements)<b style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">:</b><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><blockquote class="tr_bq" style="border: 1px solid rgb(223, 223, 223); font-family: courier, serif; font-size: 1em; margin: 10px 20px; outline: none; padding: 5px;">
.invite-friends-link a {<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />background: url(http://2.bp.blogspot.com/-E5PpxJP0Dr4/T_YWB_HvV-I/AAAAAAAADSk/7fIRr2gw-B0/s1600/facebook.png) left no-repeat;<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />padding-left: 30px;<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />line-height: 30px;<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />font-size: 16px;<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />font-weight: bold;<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />color: #3b5998;<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />display: block;<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />}</blockquote>
That's all there is to it!<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><h3 style="background-color: #dfdfdf; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: solid; border-top-width: 1px; clear: both; color: #424242; font-size: 18px; margin: 20px -5px 15px; outline: none; padding: 5px 10px; position: relative;">
Final thoughts</h3>
Admittedly it did take a while for me to figure out how to get my own app working properly. The biggest problem I had was finding a way to use a secure base URL as Blogger does not support https requests. Thankfully I discovered that bit.ly enables us to use a secure shortened URL, though you could alternatively use <a href="http://www.facebook.com/SocialServer" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;" target="_blank">the free service provided by Social Server</a>.<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />I hope you have found this tutorial to be useful in creating your own "Invite Facebook Friends" link for your Blogger powered site. Please feel free to leave your comments and suggestions below.</div>
<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6082837468218926996-3689870032126518574?l=128sbrain.blogspot.com' alt='' /></div>sharan chakradharhttps://plus.google.com/109375774536230816179noreply@blogger.com0tag:blogger.com,1999:blog-6082837468218926996.post-26320027563818056372012-10-13T11:22:00.003+05:302012-10-13T11:52:14.821+05:302012-10-13T11:52:14.821+05:30How to create a personal website for free<div class="separator" style="clear: both; text-align: center;">
<a href="http://timesofindia.indiatimes.com/photo/16746969.cms" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span style="font-family: Courier New, Courier, monospace;"><img border="0" height="300" src="http://timesofindia.indiatimes.com/photo/16746969.cms" width="400" /></span></a></div>
<blockquote>
<h3>
<b><span style="font-family: Courier New, Courier, monospace;">Professionally created websites &amp; custom domain names can cost a lot of money. However, you can also create and host as many websites as you like without spending anything, explains ET. </span></b></h3>
</blockquote>
<b><span style="color: #666666; font-family: Courier New, Courier, monospace; font-size: large;"><strike>Instant Homepages:</strike></span></b><br />
<b><span style="color: #666666; font-family: Courier New, Courier, monospace; font-size: large;"><strike><br /></strike></span></b>
<br />
ABOUT.ME <br /><br />After a quick sign-up, About.me helps you create a search engine-optimised homepage with a small biography and links to all your social networks. You can customise the background of the page (upload your own), select a font and choose your favourite colours. It takes only a few minutes and once you publish your page, visitors can email you directly from the page or leave compliments. About.me also tracks your page's statistics and keeps a log of your activity on the page — accessible via a dashboard once you sign in. <br /><br />FLAVORS.ME <br /><br />Flavors shares many features with About.me. However, it offers a few additional features — you can alter the layout of the homepage, organise content from different sources and add visual effects to your content. The free account lets you add up to five social network services. If you opt for a premium account (US$ 20 per year), you can choose from more designs, add unlimited services, create a mobile optimised webpage, view realtime stats, add a visitor contact form and use Flavors with your own domain name. <br /><br />FOLLR.COM <br /><br />Follr takes a different approach — they create a virtual visiting card for you. Your card has details of your socialnetworks, skills, work experience and your contact details. It can also automatically update content from your Twitter timeline or details about your influence from Klout/PeerIndex. It even works as a mini social network — you add known people to your network and they vouch for your skills and influence. Upgrading to a premium account (US$ 2.95 per month) gives you statistics &amp; custom page designs. <br /><br />DOOID.ME <br /><br />A big advantage with Dooid is that it shows you a live preview as you work. In other words, as you add services, tags or change the layout, it shows you a preview of the finished page at the same time. The free account allows you to connect up to 10 services/links and even creates a mobile optimised version of your webpage. Visitors can download your virtual business card with contact details as well as view your social network updates in a 'lifestream'. You can remove the advertisements, add unlimited services, embed a contact form and use a custom domain name by paying US$ 5 per month for a pro account. <br /><br />Create &amp; Host Full Websites <br /><br />WEEBLY.COM <br /><br />With Weebly, you need to first specify the type of site you want to create ( forum, blog, portfolio and so on). You can create a subdomain on Weebly or purchase a new one. Creation couldn't be simpler — you select a theme and then use simple drag-and-drop to add different elements and multimedia. Advanced users can even create ads slots for revenue generation. The owner can also allow other people to manage the website (with admin access). <br /><br />YOLA.COM <br /><br />Yola offers an easy-to-use graphical user interface to build a website. After selecting your website category, Yola generates a starter website (where every element can be configured to suit your taste). A bottom pane lets you quickly switch between multiple themes, layouts and add widgets where required. Once done with the design, you can publish the site as a Yola subdomain and track your visitors through the admin panel. <br /><br />WIX.COM <br /><br />Wix is loaded with stylish templates that will suit many different kinds of websites. You can choose a free template and edit it to your liking in Wix's own graphical HTML editor — no coding skills required. After you have customised the template, publishing the website so that anyone can access it takes only a minute. The only issue is that the website address is slightly long and complicated to remember (www.yourusername.wix.com/sitename). <br /><br />ZOHO.COM <br /><br />Zoho also offers multiple templates to choose from, depending on the style of the website. You can then customise the available templates using a simple drag-and-drop interface — inserting multimedia or embedding elements from third parties is child's play. Zoho even lets you add widgets on the page for useful services like PayPal, Google Adsense, Google Mapsand supports embedding of dynamic content such as user feedback. <br /><br />Mobile Website Creators <br /><br />OCTOMOBI.COM <br /><br />If you need to create a mobile site in minutes, Octomobi does the job really well. Sign up for free, choose a template, edit the layout, add content, upload your logo and your mobile-optimised website is ready. The free account lets you only create a website on the Octomobi network. By paying US$ 9 per month for a pro account you can map the site to your own domain with Google analytics integration. <br /><br />ONBILE.COM <br />Onbile allows you to create a website as a subdomain (www.yoursitename.onbile.com). You can create a rich mobile site with multiple pages, a catalog, an image gallery or an e-commerce site. The free version of the site has ads on each page and only offers basic site statistics. Opting for a pro account (US$ 12 per month) removes the ads, offers 500MB storage and detailed visitor analytics.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6082837468218926996-2632002756381805637?l=128sbrain.blogspot.com' alt='' /></div>sharan chakradharhttps://plus.google.com/109375774536230816179noreply@blogger.com0tag:blogger.com,1999:blog-6082837468218926996.post-64095541495929278252012-10-11T18:22:00.001+05:302012-10-11T18:22:38.942+05:302012-10-11T18:22:38.942+05:30Super Fast Image Search with JSON, JQuery and Flickr<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Trebuchet MS, sans-serif;"><span style="color: #444444;"><br /></span><span style="color: #444444;"><br /></span><span style="color: #444444;">Here is a way to build up a really simple image search application using HTML, CSS and JQuery. One thing that <a href="http://therealfirstworldproblems.tumblr.com/">can be improved</a> about most image search apps is that browsing search history is sloooow.</span><span style="color: #444444;"><br /></span><span style="color: #444444;">This image search app provides a neat solution to the history/speed issue by simply displaying results in a push-pop stack. As you type in new search terms, the image thumbnails are prepended to the resultset. Your search history stays on the page, but is simply pushed further down as new thumbnails appear. Its is really fast and simple to browse your image search history.</span><span style="color: #444444;"><br /></span><span style="color: #444444;">Also, this search app operates entirely in 30 lines of HTML and JavaScript by using a JSON feed to the flickr API. Simple and elegant.</span><span style="color: #444444;"><br /></span><span style="color: #444444;"><a href="http://blog.comperiosearch.com/wp-content/uploads/2012/03/super-simple-image-search.html">Click here for the demo</a></span><span style="color: #444444;"><br /></span><span style="color: #444444;">Or copy and paste the code below this line:</span></span><br />
<span style="color: #444444;"><br /></span>
<span style="color: #444444;"><br /></span>
<span style="color: #444444;"><br /></span>
<span style="color: #444444;"><br /></span></div>
<pre>pre {border: solid 1px blue;
font-size: 1.3 em;
color: blue;
margin: 10px;
padding:10px;
background: #FFFFB3}
code {font-size:1.2em;
color: #008099}</pre>
<pre> <script src="http://code.jquery.com/jquery-latest.js"></script> </pre>
<pre> Search for <b>cats, dogs, cakes</b>, or anything else that takes your fancy
</pre>
<pre>
<input id="searchterm" />
<button id="search">search</button>
<div id="results">
</div>
<script>
$("#search").click(function(){
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
{
tags: $("#searchterm").val(),
tagmode: "any",
format: "json"
},
function(data) {
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).prependTo("#results");
if ( i == 10 ) return false;
});
});
});
</script>
</pre>
</div><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/6082837468218926996-6409554149592927825?l=128sbrain.blogspot.com' alt='' /></div>sharan chakradharhttps://plus.google.com/109375774536230816179noreply@blogger.com1