Add a Facebook Invite Friends Link to your Blogger Site

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="post-body entry-content" id="post-body-29604519493684944" itemprop="articleBody" style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px 5px; outline: none; padding: 0px; width: 680px;"> <span style="background-color: white; font-size: 1em; margin: 0px; outline: none; padding: 0px;"></span></div> <div class="post-body entry-content" id="post-body-29604519493684944" itemprop="articleBody" style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px 5px; outline: none; padding: 0px; width: 680px;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCmLjdQma0ieOif5mayEEY0ZsKMUzr6nLR-F_RymfidXg2nON1ytipoosr-HCT3AvXe-NwWgY29Mq-EHL0BI6Edmf_-hgqZBm5fHlkINaNnpGQfS8et6LFiYb3QzrpUORk3DJ1JeUg7j3/s1600/Invitation.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="269" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlCmLjdQma0ieOif5mayEEY0ZsKMUzr6nLR-F_RymfidXg2nON1ytipoosr-HCT3AvXe-NwWgY29Mq-EHL0BI6Edmf_-hgqZBm5fHlkINaNnpGQfS8et6LFiYb3QzrpUORk3DJ1JeUg7j3/s320/Invitation.png" width="320" /></a></div> <span style="background-color: white; font-size: 1em; 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 /> <br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /> <div style="font-size: 1em; 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 /> <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.<br /> <br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /> <a href="http://www.blogger.com/blogger.g?blogID=8763881840306391860" name="more" style="border: none; font-size: 1em; margin: 0px; outline: none; padding: 0px; text-decoration: underline;"></a><br /> <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 /> <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 /> <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 /> <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 /> <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="font-size: 1em; margin: 0px; outline: none; padding: 0px;"> Next, click on "Select how your app integrates with Facebook" and fill in details as follows:<br /> <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.</div> <div style="font-size: 1em; 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 /> <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="font-size: 1em; 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.</div> <div style="font-size: 1em; 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 /> <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 /> <script><br /> FB.init({<br /> 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 /> cookie:true,<br /> status:true,<br /> xfbml:true<br /> });<br /> function FacebookInviteFriends()<br /> {<br /> FB.ui({<br /> method: 'apprequests',<br /> 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 /> });<br /> }<br /> </script><br /> <div id="fb-root"></div><br /> <span class="invite-friends-link"><a href='#' onclick="FacebookInviteFriends();"><br /> <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 /> </a></span><br /> <script type='text/javascript'><br /> if (top.location!= self.location)<br /> {<br /> top.location = self.location<br /> }<br /> </script></blockquote> And save the changes.<br /> <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 /> <br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /> Here's a demo of how the "Invite Facebook Friends" link works:<br /> <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx17HnwtLOHBazZt8MyL9LxfUVO3G2S116MCrerwGtnlSflX5uA7KzjcD3bLrNQXLyNuzB7PFFDfbeEDpkybRhN4ytdSlwSyRV1HbNDAVwGo68oLkGeWuZKJRQGy2qUVsc3m72nyZbqUeU/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 /> <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 /> <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96bPeou8K6BkYhITcx3ONxf17Ly1kKduzITk4jpSMZj34tQRi7XRULCHhZVI25p_cpUGXRjLNfAOOSPk9Bj7Axtpsmsu8EqEhiSZctJibfNKsVO72jyk9tTH871KrCWDdUJqISU5-irw8/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96bPeou8K6BkYhITcx3ONxf17Ly1kKduzITk4jpSMZj34tQRi7XRULCHhZVI25p_cpUGXRjLNfAOOSPk9Bj7Axtpsmsu8EqEhiSZctJibfNKsVO72jyk9tTH871KrCWDdUJqISU5-irw8/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 /> <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 /> background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx17HnwtLOHBazZt8MyL9LxfUVO3G2S116MCrerwGtnlSflX5uA7KzjcD3bLrNQXLyNuzB7PFFDfbeEDpkybRhN4ytdSlwSyRV1HbNDAVwGo68oLkGeWuZKJRQGy2qUVsc3m72nyZbqUeU/s1600/facebook.png) left no-repeat;<br /> padding-left: 30px;<br /> line-height: 30px;<br /> font-size: 16px;<br /> font-weight: bold;<br /> color: #3b5998;<br /> display: block;<br /> }</blockquote> That's all there is to it!<br /> <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 /> <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 style="clear: both; font-size: 1em; margin: 0px; outline: none; padding: 0px;"> </div> </div> <br /> <div style="background-color: #f6f6f6; border: 1px solid rgb(204, 204, 204); clear: both; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 1em 0px; outline: none; padding: 5px;"> </div> <br /> <div class="post-footer" style="-webkit-text-stroke-width: 0px; background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.6; margin: 0px; orphans: auto; outline: none; padding: 0px; text-align: start; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"> <div class="post-footer-line post-footer-line-1" style="font-size: 1em; margin: 0px; outline: none; padding: 0px; text-decoration: none;"> <span class="post-author vcard" style="font-size: 1em; margin: 0px 1em 0px 0px; outline: none; padding: 0px; text-decoration: none;"></span><span class="post-timestamp" style="font-size: 1em; margin: 0px 1em 0px -1em; outline: none; padding: 0px; text-decoration: none;"></span><span class="reaction-buttons" style="font-size: 1em; margin: 0px 1em 0px 0px; outline: none; padding: 0px; text-decoration: none;"></span><span class="star-ratings" style="font-size: 1em; margin: 0px 1em 0px 0px; outline: none; padding: 0px; text-decoration: none;"></span><span class="post-backlinks post-comment-link" style="font-size: 1em; margin: 0px 1em 0px 0px; outline: none; padding: 0px; text-decoration: none;"></span><span class="post-icons" style="font-size: 1em; margin: 0px 1em 0px 0px; outline: none; padding: 0px; text-decoration: none;"></span><br /> <div class="post-share-buttons goog-inline-block" style="display: inline-block; font-size: 1em; margin: 0.5em 0px 0px; outline: none; padding: 0px; position: relative; text-decoration: none; vertical-align: middle;"> </div> </div> <div class="post-footer-line post-footer-line-2" style="font-size: 1em; margin: 0px; outline: none; padding: 0px; text-decoration: none;"> </div> <div class="post-footer-line post-footer-line-3" style="font-size: 1em; margin: 0px; outline: none; padding: 0px; text-decoration: none;"> <span class="post-location" style="font-size: 1em; margin: 0px; outline: none; padding: 0px; text-decoration: none;"></span></div> </div> </div>

Add a Facebook Invite Friends Link to your Blogger Site

Over at  9Lessons  I read a very helpful tutorial to add an "Invite your Facebook Friends" link to a website. I was able to ...

Read more »

Add Stylized Captions to Images in your Blog Posts Using CSS

<div dir="ltr" style="text-align: left;" trbidi="on"><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">In recent weeks, you may have noticed the captions I add to images in my blog posts. Where I am showcasing the work of another author, I prefer to add a caption explaining where this image has come from, whether this be Flickr or a screenshot of another blog/website.</span><br /><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; 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-bottom: 10px; outline: none; padding: 0px;">I've tried a few different methods to display captions beneath images, and the best solution I have found so far is to use CSS. This allows me to align images (and their relevant captions) to the left, right or center of the post with ease.</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">So in this post, I will explain how I achieve stylized captions beneath my images in Blogger posts using only CSS and HTML tags</div><h3 style="background-color: #dfdfdf; background-position: initial initial; background-repeat: initial initial; 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; display: block; font-size: 18px; margin: 20px -5px 15px; outline: none; padding: 5px 10px; position: relative; text-decoration: none;">Some examples of images with captions</h3><div style="font-size: 1em; margin: 0px 0px 10px; outline: none; padding: 0px; text-decoration: none;"><span class="captionleft" style="font-size: 1em; margin: 0px; outline: none; padding: 0px; text-decoration: none;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmUROF5FErCERLIkD8SgObgdENuYcX21ENk1ZamUH9H0eTeZqG0uVxBXxrv0fZGtIkASj3NOoI0jTvM64mugtXnWDt4_S3mDPQhCdDCITyfFGjgcJJ2U5FQy9wsK94QkbKXW-UxzxG50/s1600-h/sunset-left.jpg" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px; text-decoration: underline;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5184359858131537538" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmUROF5FErCERLIkD8SgObgdENuYcX21ENk1ZamUH9H0eTeZqG0uVxBXxrv0fZGtIkASj3NOoI0jTvM64mugtXnWDt4_S3mDPQhCdDCITyfFGjgcJJ2U5FQy9wsK94QkbKXW-UxzxG50/s320/sunset-left.jpg" style="border: 1px solid rgb(204, 204, 204); cursor: pointer; font-size: 1em; margin: 0px; max-width: 540px; outline: none; padding: 4px; position: relative; text-decoration: none;" /></a></span></div><div style="font-size: 1em; margin: 0px 0px 10px; outline: none; padding: 0px; text-decoration: none;">Left Image</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;"><span id="fullpost" style="margin: 0px; outline: none; padding: 0px;"></span><span class="captionright" style="margin: 0px; outline: none; padding: 0px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WQJA5G8f51R5_ZKw0ayYfPis7CFd7kxTZLNK3SZQnpxwXXTvRwsP7Nise9UplUk0CQOr6eGF7PF61Cs3ZiyzqhFD8gooLpcoaMaGLtPIOosUOhDHcgQq0cG_IAZDyVKKXY-5JrFe1HE/s1600-h/beach-right.jpg" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5184361146621726354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5WQJA5G8f51R5_ZKw0ayYfPis7CFd7kxTZLNK3SZQnpxwXXTvRwsP7Nise9UplUk0CQOr6eGF7PF61Cs3ZiyzqhFD8gooLpcoaMaGLtPIOosUOhDHcgQq0cG_IAZDyVKKXY-5JrFe1HE/s320/beach-right.jpg" style="border: 1px solid rgb(204, 204, 204); cursor: pointer; font-size: 1em; margin: 0px; max-width: 540px; outline: none; padding: 4px; position: relative; text-decoration: none;" /></a></span></div><div style="font-size: 1em; margin-bottom: 10px; outline: none; padding: 0px;">Right Image</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;"><span class="captionright" style="margin: 0px; outline: none; padding: 0px;"></span>Here are some images aligned to the left, right and center with their relevant captions beneath. The caption appears below the image with a border beneath which separates it from the main body of the post.</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; 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-bottom: 10px; outline: none; padding: 0px;">This is achieved by wrapping both the images and the captions in <span> tags which have a "class" depending on their alignment (left, right or center aligned).</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;"><span class="captionfull" style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5feTKlubOUBb7fPRZKdcuJot4jweFxWStO5FUl57amxtGY_OQZ6eOzLtzGzXXgn8O1uPNMU3hqxwF0LROMaUJs1bT67NdR1fAb9ak0Q725mhrI-EzchtBzbvLq2dxd71ATovNxKUJxsi6/s1600-h/panorama.jpg" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5184367692151885490" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5feTKlubOUBb7fPRZKdcuJot4jweFxWStO5FUl57amxtGY_OQZ6eOzLtzGzXXgn8O1uPNMU3hqxwF0LROMaUJs1bT67NdR1fAb9ak0Q725mhrI-EzchtBzbvLq2dxd71ATovNxKUJxsi6/s1600/panorama.jpg" style="border: 1px solid rgb(204, 204, 204); cursor: pointer; font-size: 1em; margin: 0px; max-width: 540px; outline: none; padding: 4px; position: relative; text-decoration: none;" width="500px" /></a></span></div><div align="center" style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">Center aligned image (Photo by <a href="http://flickr.com/photos/yakobusan/" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;">Montrasio International</a>)</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;"></div><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-family: Arial, Helvetica, sans-serif; font-size: 18px; margin: 20px -5px 15px; outline: none; padding: 5px 10px; position: relative;">How these captions work</h3><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">This image demonstrates the code I use to make the captions appear beneath each image:</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-1jZSc9Sg_dkz9lL9Stqs2_F1sb0F79II3YrEg1YXIM8ZOkjcMUONdT1vplGhJcPaQl6rJ7v0nw3DgrQnwSbszctnBjJyP_Ec6wOLV5VALSTT3WYklTHSH7fyqfOIJY0mfIpPaA4pMQ/s1600-h/how-post-captions-work.png" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5184408648960020162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh-1jZSc9Sg_dkz9lL9Stqs2_F1sb0F79II3YrEg1YXIM8ZOkjcMUONdT1vplGhJcPaQl6rJ7v0nw3DgrQnwSbszctnBjJyP_Ec6wOLV5VALSTT3WYklTHSH7fyqfOIJY0mfIpPaA4pMQ/s400/how-post-captions-work.png" style="border: 1px solid rgb(204, 204, 204); cursor: pointer; display: block; font-size: 1em; margin: 0px auto 10px; max-width: 540px; outline: none; padding: 4px; position: relative; text-align: center; text-decoration: none;" /></a></div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">In the body of my posts, the code for the images and captions will appear like this:</div><pre class="code" style="background-color: #f6f6f6; color: #666666; font-size: 13px; line-height: 18px; outline: none; padding: 0px;"><span class="<span style="color: red; font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">left-caption</span>"><br /><br /><img src="http://url-of-image.com/image.jpg" /><br /><br /><p>Caption of this image</p><br /><br /></span></pre><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">This example would produce an image and caption which is aligned to the left of the text in my post.</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; 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-bottom: 10px; outline: none; padding: 0px;">To align an image to the right, I would replace "left-caption" with "right-caption", or to center the image I would use "center-caption".</div><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-family: Arial, Helvetica, sans-serif; font-size: 18px; margin: 20px -5px 15px; outline: none; padding: 5px 10px; position: relative;">The CSS code used to produce these images and captions</h3><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">If you would like to use captions which are styled like those I use in my posts, you will need to use the following styling code:</div><div style="background-color: white; border: 1px solid rgb(51, 51, 51); color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; height: 200px; line-height: 18px; margin: 0px; outline: none; overflow: auto; padding: 5px; width: 500px;">.left-caption { float: left; margin: 0 1.5em 1em 0; padding: 0.5em; text-align: center; }<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />.right-caption { float: right; margin: 0 0 1em 1.5em; padding: 0.5em; text-align: center; }<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />.center-caption { margin: 0 0 1em 0; padding: 0; text-align: center; }<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />.left-caption img, .right-caption img, .center-caption img { margin: 0 auto; display: block; }<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />.left-caption p, .right-caption p, .center-caption p { background: #eee; margin: 0; line-height: 1.6em; padding: 0.5em; border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; font-size: 0.9em; color: #333; }</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">Copy this entire section of code and paste this just before the closing </b:skin> tag in your blog's template code.</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;"></div><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-family: Arial, Helvetica, sans-serif; font-size: 18px; margin: 20px -5px 15px; outline: none; padding: 5px 10px; position: relative;">How to use these captions in your Blogger posts</h3><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">Once you have added this style code to your blog's template, you can display captions beneath the images in your posts.</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">To achieve this, you will need to wrap both your image and your caption in span tags according to the alignment you prefer. Here are the three different formats you could use:</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;"><span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">To align these to the left</span></div><pre class="code" style="background-color: #f6f6f6; color: #666666; font-size: 13px; line-height: 18px; outline: none; padding: 0px;"><span class="left-caption"><br /><br /><img src="http://image-host.com/yourimage.jpg" /><br /><br /><p>Your Caption Here</p><br /><br /></span></pre><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; 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-bottom: 10px; outline: none; padding: 0px;"><span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">To align these to the right:</span></div><pre class="code" style="background-color: #f6f6f6; color: #666666; font-size: 13px; line-height: 18px; outline: none; padding: 0px;"><span class="right-caption"><br /><br /><img src="http://image-host.com/yourimage.jpg" /><br /><br /><p>Your Caption Here</p><br /><br /></span></pre><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; 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-bottom: 10px; outline: none; padding: 0px;"><span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">To align these to the center of the page:</span></div><pre class="code" style="background-color: #f6f6f6; color: #666666; font-size: 13px; line-height: 18px; outline: none; padding: 0px;"><span class="center-caption"><br /><br /><img src="http://image-host.com/yourimage.jpg" /><br /><br /><p>Your Caption Here</p><br /><div style="font-size: 1em; margin-bottom: 10px; outline: none; padding: 0px;"><br /></div><br /></span></pre><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; 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-bottom: 10px; outline: none; padding: 0px;">Note that the captions are also wrapped in paragraph tags, like this:</div><pre class="code" style="background-color: #f6f6f6; color: #666666; font-size: 13px; line-height: 18px; outline: none; padding: 0px;"><p>Your Caption Here</p></pre><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">This ensures the caption is properly styled, as the CSS code contains the styles for paragraphs which appear within this span class.</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; 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-bottom: 10px; outline: none; padding: 0px;"><span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">If you upload your image using Blogger's image upload function, you must make sure that you choose "None" in the layout choices.</span></div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">It may be easier for you to use the HTML editor to create posts with image captions as this will allow you to see all of the code you are using.</div><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-family: Arial, Helvetica, sans-serif; font-size: 18px; margin: 20px -5px 15px; outline: none; padding: 5px 10px; position: relative;">Other methods of adding captions to your posts</h3><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">As I explained at the beginning of this post, there are many different methods you could use to display captions beneath your images. The method I explained here is the one which works best for me, though you may prefer to use a different technique.</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">Here are some links to other articles which offer alternative methods to display captions beneath your post images:</div><ul style="background-color: #f6f6f6; border-width: 0px; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; 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;"><a href="http://www.1976design.com/blog/archive/2003/11/25/captions/" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;">JavaScript Image Captions</a> from 1976 Design<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />This method automatically inserts a caption based on the title of the image.</li><li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><a href="http://blogger-tricks.blogspot.com/2008/01/captions-for-images-in-blog-posts.html" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;">Captions for Images in Blog Posts</a> by Blogger Tips and Tricks<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />This is a much simpler method, using only HTML code in the body of the post.</li><li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><a href="http://www.askthecssguy.com/2006/12/image_captions_generated_with.html" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;">Image Captions with CSS and JavaScript</a> by Ask The CSS Guy<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />Similar to 1976 Design's post, this article uses a combination of styling code and scripting to add a partially transparent caption over the bottom section of the image.</li></ul><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; 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-bottom: 10px; outline: none; padding: 0px;">I hope this tutorial has been useful in explaining how you could add captions to your post images in Blogger. If you have any questions or would like to suggest further uses for this, feel free to leave your comments and suggestions below.</div></div>

Add Stylized Captions to Images in your Blog Posts Using CSS

In recent weeks, you may have noticed the captions I add to images in my blog posts. Where I am showcasing the work of another author, I pre...

Read more »

Find free icons for your blog with the Iconlet search engine

<div dir="ltr" style="text-align: left;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBdX4H3b8s8tp_CImml4Q3mLV3sY38YK2KhH4rfWf29UIh7Rr7SVcoeor2QqBaoqJIZTelXNb06crmSPGDWo3-MbJkz0TEgJSfdKoF8dAbFzBjL7gHZpBqfoQOCmMyA6OYRuJF2Fxt-6PD/s1600/New-Flat-Social-Media-Icons-2013.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBdX4H3b8s8tp_CImml4Q3mLV3sY38YK2KhH4rfWf29UIh7Rr7SVcoeor2QqBaoqJIZTelXNb06crmSPGDWo3-MbJkz0TEgJSfdKoF8dAbFzBjL7gHZpBqfoQOCmMyA6OYRuJF2Fxt-6PD/s320/New-Flat-Social-Media-Icons-2013.jpg" width="303" /></a></div> <a href="http://www.iconlet.com/" style="background-color: #f6f6f6; border: none; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;">Iconlet.com</a><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;"> is a great new search service to help you find free icons you can use in your blog posts and templates. This service runs like a simple search service, allowing you to input search terms for the icons you need and returning results in image format for you to download to your computer. There are loads of "Web 2.0" style icons to use, and even full icon sets (such as Home/About/Contact icons of a matching theme).</span><br /> <span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">Don't be put off ny the simple layout of the front page: this is truly a very useful design tool, and can also provide you with great inspiration for your blog template design. Let me know what you think of </span><a href="http://www.iconlet.com/" style="background-color: #f6f6f6; border: none; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;">Iconlet</a><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;"> by leaving your comments below.</span></div>

Find free icons for your blog with the Iconlet search engine

Iconlet.com  is a great new search service to help you find free icons you can use in your blog posts and templates. This service runs ...

Read more »

Top 12 keyboard shortcuts for bloggers

<div dir="ltr" style="text-align: left;" trbidi="on"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYytI6KxiBw0IeLFI6I-8Eb4klpx1zfYhHUog1lw1_4SjjZlrx29u2db7wpMqItbCK1cEo7c0SRNsm8dctW0R8UsmnrNHtw-7miMWxy_MBPCYGekxr-v0Rozvl05z4s0vjV5DrfAjbYSo/s320/keyboard.jpg" /><br /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">I often use keyboard shortcuts while blogging, as these can save much time and enable you to perform certain tasks more easily. Here is a list of the top 12 keyboard shortcuts I use while blogging, which can be really useful when editing posts and templates.</span><br /><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">These keyboard shortcuts work in all major browsers, including Internet Explorer, Firefox and Opera.</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;">As Mac OSX uses the <span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">CMD</span> key rather than the regular <span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">CTRL</span> key, all references in the table below refer to<span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">CTRL/CMD</span>, so that users of either type of computer are able to understand these shortcuts.</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;"></div><table border="1" style="background-color: #f6f6f6; border: 1px solid rgb(0, 0, 0); color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px; width: 500px;"><tbody style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="background-color: #cceedd; font-size: 1em; margin: 0px; outline: none; padding: 0px; width: 100px;"><span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">Function</span></td><td style="background-color: #cceedd; font-size: 1em; margin: 0px; outline: none; padding: 0px; width: 100px;"><span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">What it does</span></td><td style="background-color: #cceedd; font-size: 1em; margin: 0px; outline: none; padding: 0px; width: 300px;"><span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">Example of usage</span></td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">CTRL/CMD+B</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;"><span style="font-size: 1em; font-weight: bold; margin: 0px; outline: none; padding: 0px;">Bold Text</span></td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">When editing your blog posts, highlight the section you want to appear in bold test and key CTRL+B (or CMD+B)</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">CTRL/CMD+I</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;"><span style="font-size: 1em; font-style: italic; margin: 0px; outline: none; padding: 0px;">Italic Text</span></td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">For when editing blog posts. Highlight the text you would like italicised and key CTRL+I (or CMD+I)</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">CTRL/CMD+A</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Select all</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Selects all of the content on a page. If you put your cursor in a container (eg: when editing a blog post or your template), this will select all of the content in the container.</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">CTRL/CMD+C</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Copy</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Copied the highlighted selection to your clipboard. Useful for when copying code in your template, or using quotations in your blog posts.</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">CTRL/CMD+V</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Paste</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Pastes the content of your clipboard into the area you are working on. Often used with the "copy" function (above)</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">CTRL/CMD+X</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Cut</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Cuts the selection from your working area, and copies to the clipboard for later use rather than deleting it. Useful for when you need to move a selection of code or text from one area to another.</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">CTRL/CMD+F</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Find</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Presents a test input box which you can use to find specified text in your current page. This is very helpful when editing your blog template, for example when finding a specific line of code.</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">CTRL/CMD+N</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">New browser window</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">This brings up a new browser window, ideal for when you need to view two web pages in the same session.</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">CTRL/CMD+T</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">New Tab (Not available in IE)</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Brings up a new browser tab.</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">HOME</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Go straight to the top of the page</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Ideal for when you need to go back to the top of a page quickly</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">END</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Go straight to the bottom of a page, or to the end of a line if you are editing your posts/template</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">A fast way to reach the bottom of a post when editing, for example. When editing your posts or template, this key will quickly move your cursor to the end of the line you are editing.</td></tr><tr style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">CTRL+H</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">View browser history</td><td style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-bottom-width: 1px; font-size: 1em; margin: 0px; outline: none; padding: 3px; vertical-align: top;">Bring up a sidebar section in your browser to display recently viewed pages.</td></tr></tbody></table><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; 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-bottom: 10px; outline: none; padding: 0px;">I hope you find these keyboard shortcuts as useful as I do while blogging! Please feel free to leave your comments below.</div><div style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin-bottom: 10px; outline: none; padding: 0px;"><br /></div><div><br /></div></div>

Top 12 keyboard shortcuts for bloggers

I often use keyboard shortcuts while blogging, as these can save much time and enable you to perform certain tasks more easily. Here is a li...

Read more »

How to add a music player in Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS9SgnUkSIxFpCozMLitNm3AnjBN5LEz3IWftPKqn3gbMTH53rsIIWC0elM5BC-lgNgxjvztECA45sGIwFZVnsy_3rVwsJEAensfkHK7D4qYa2qQOWAZIr5Y_Bbdv_3dc_CDsNwUFFslNv/s1600/audio.png" /><br /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">In preparation for explaining how to podcast with Blogger, this tutorial explains how to easily add an HTML5 mp3/audio player to your blog posts or layout. No JavaScript, Flash or plugins are required, and with a fallback for older browsers which don't support the player.</span><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">I've even created a simple form to generate basic tags for you! Adding music to your Blogspot site has never been so easy!</span><br /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">The <audio> tag is a new feature of HTML5 which we can use to natively embed audio playback in our sites.</span><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">It is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari, and can be set to play the linked audio file automatically (autoplay) or loop if required.</span><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">Here's a basic example using the <audio> element:</span><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><audio controls="" style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;"></audio><b style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;"><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /></b><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">The audio player above is produced using the following HTML code:</span><br /><blockquote class="tr_bq" style="background-color: #f6f6f6; border: 1px solid rgb(223, 223, 223); color: #666666; font-family: courier, serif; font-size: 13px; line-height: 18px; margin: 10px 20px; outline: none; padding: 5px;"><audio <span style="color: red; font-size: 1em; margin: 0px; outline: none; padding: 0px;">controls</span>> <br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><source src="url-of-audio-file" /> <br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />If you cannot see the audio controls, your browser does not support the audio element <br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /></audio></blockquote><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">In the example above, all code related to the audio player is wrapped in <audio> tags. By including </span><b style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;"><span style="color: red; font-size: 1em; margin: 0px; outline: none; padding: 0px;">controls</span></b><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;"> in the audio element, a simple player is displayed, enabling the user to begin playback when (or if) they want, and to adjust the volume.</span><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">Any text between the audio tags (which is not enclosed in the <source> tags) is displayed in browsers which do not support the audio element (IE8 and below).</span><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">If you would like the audio to begin playback as soon as it is ready, you can enable </span><b style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;"><span style="color: blue; font-size: 1em; margin: 0px; outline: none; padding: 0px;">autoplay</span></b><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;"> as in the following example:</span><br /><blockquote class="tr_bq" style="background-color: #f6f6f6; border: 1px solid rgb(223, 223, 223); color: #666666; font-family: courier, serif; font-size: 13px; line-height: 18px; margin: 10px 20px; outline: none; padding: 5px;"><audio controls <span style="color: blue; font-size: 1em; margin: 0px; outline: none; padding: 0px;">autoplay</span>><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><source src="url-of-audio-file" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />If you cannot see the audio controls, your browser does not support the audio element<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /></audio></blockquote><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">By retaining the </span><b style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;">controls</b><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;"> attribute, you give visitors the option to stop or resume audio playback if they choose.</span><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><br style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;" /><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">To loop audio (specify that the audio will start over again, every time it is finished), include the </span><span style="background-color: #f6f6f6; color: lime; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; margin: 0px; outline: none; padding: 0px;">loop </span><span style="background-color: #f6f6f6; color: #666666; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px;">element in the <audio> tag, like this:</span><br /><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;"><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;"><audio controls <span style="color: lime; font-size: 1em; margin: 0px; outline: none; padding: 0px;">loop</span>><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><source src="url-of-audio-file" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />If you cannot see the audio controls, your browser does not support the audio element<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /></audio></blockquote><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;">Hosting files for your audio player</h3>Blogger does not allow us to upload or host audio files, so in order to add an audio player you will need to find a host for your mp3/ogg files.<br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" /><br style="font-size: 1em; margin: 0px; outline: none; padding: 0px;" />While Blogger Help suggests hosting providers which offer free <i style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">and</i> premium packages, I anticipate most of you would prefer a simple free solution, so here are a few suggestions:<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;">Link to public domain audio files which allow hotlinking, such as <a href="http://en.wikipedia.org/wiki/Wikipedia:Sound/list/playlist" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;" target="_blank">this collection of classical music on Wikipedia</a></li><li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><a href="http://www.way2blogging.org/2011/07/host-blog-scripts-files-dropbox-free.html" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;" target="_blank">Upload files to your <b style="font-size: 1em; margin: 0px; outline: none; padding: 0px; text-decoration: none;">Public</b> folder on Dropbox</a></li><li style="border-width: 0px; font-size: 1em; margin: 0px 0px 0.25em; outline: none; padding: 0px;"><a href="http://www.bloggersentral.com/2010/03/where-to-host-javascript-for-blogspot.html" style="border: none; color: #333333; font-size: 1em; margin: 0px; outline: none; padding: 0px;" target="_blank">Host files on Google sites</a></li></ul><div style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">Once you have uploaded your audio files, make a note of <span style="font-size: 1em; margin: 0px; outline: none; padding: 0px;">the direct link to the file</span> which you'll need to add in the code for your audio player.</div><div style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"><br /></div><div style="font-size: 1em; margin: 0px; outline: none; padding: 0px;"></div></div></div>

How to add a music player in Blogspot

In preparation for explaining how to podcast with Blogger, this tutorial explains how to easily add an HTML5 mp3/audio player to your blog p...

Read more »

Official Facebook Recommendations Bar Widget for Blogger / Blogspot

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="meta" style="background-color: #fafafa; border: 0px; clear: both; color: #837171; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 11px; line-height: inherit; margin: 0px; overflow: hidden; padding: 5px 0px 18px; text-transform: uppercase; vertical-align: baseline;"><span class="categories" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span><br /></div><div class="article-entry entry-content" style="background-color: #fafafa; border: 0px; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 22px; margin: 0px; padding: 0px; vertical-align: baseline; word-wrap: break-word;"><a class="article-thumb single-thumb" href="http://www.way2blogging.org/2012/06/official-facebook-recommendations-bar-widget-blogger-blogspot.html" rel="bookmark" style="border: 0px; color: #3395bf; display: block; float: right !important; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 0px 15px 10px; padding: 0px; vertical-align: baseline;" title="Official Facebook Recommendations Bar Widget for Blogger / Blogspot"><img alt="Official Facebook Recommendations Bar Widget for Blogger / Blogspot" class=" wp-post-image" height="225" src="http://turbo.way2blogging.org/wp-content/uploads/blog_images/official-facebook-recommendations-bar-widget-blogger-blogspot.jpg" style="border: 0px; display: block; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: auto; line-height: inherit; margin: 0px; max-width: 98%; padding: 0px; vertical-align: baseline; width: auto;" title="Official Facebook Recommendations Bar Widget for Blogger / Blogspot" width="225" /></a><div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;"><span style="color: #3395bf; font-family: inherit;"><span style="font-style: inherit; font-variant: inherit; line-height: inherit;">Facebook</span></span> Introduced their brand new social social plugin called Facebook Recommendations Bar. It is Beta Plugins.<br />In this tutorial, we go to learn how to install Facebook Recommendations Bar in Blogger Blogs. This widget is more helpful to drive traffic from Facebook with and instant likes and related posts.</div><div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;"><span id="more-308" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></span></div><div class="clear" style="border: 0px; clear: both; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: 1px; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; width: auto;"></div><h4 style="border: 0px; font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.6em; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 20px 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">PREVIEW</h4><div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;"><img alt="Official Facebook Recommendations Bar Widget Preview" class="screenshot" src="http://www.way2blogging.org/wp-content/uploads/images/official-facebook-recommendations-bar-widget-preview.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: auto; line-height: inherit; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /><br /><small style="border: 0px; font-family: inherit; font-size: 11px; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">OR</small><br />You can take a look at Right Bottom of this Page and see it’s action in Live!</div><h3 style="-webkit-box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; background-color: transparent; background-image: url(http://turbo.way2blogging.org/wp-content/themes/way2blogging/images/h3.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Myriad Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 18px; font-style: inherit; font-variant: inherit; line-height: 1; margin: 20px 3px; padding: 6px 10px 6px 30px; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase; vertical-align: baseline;">HOW TO INSTALL THE OFFICIAL FACEBOOK RECOMMENDATIONS BAR WIDGET?</h3><div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">In order to work the Facebook Recommendations Bar every blog should must have the Facebook Open Graphs meta tags.<br />I found the simplest and Working Facebook Open Graphs tags on GitHub gist. Thanks to <span style="color: #3395bf; font-family: inherit;"><span style="font-style: inherit; font-variant: inherit; line-height: inherit;">pathawks</span></span>.!</div><div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">Add the Following code after <code style="background-color: #efefef; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; color: #111111; font-family: 'Courier New', monospace; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 1px 4px; vertical-align: baseline;"><head></code> tag.</div><pre style="background-color: #fff8e8; border: 2px solid rgb(255, 231, 175); clear: both; color: #333333; font-family: 'Courier New', monospace; font-style: inherit; font-variant: inherit; line-height: 18px; margin: 25px 5px; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="xml" data-result="[object Object]" data-second_best="[object Object]" style="background-color: rgb(253, 246, 227) !important; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; color: #657b83; display: block; font-family: 'Courier New', monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 1.6; margin: 0px; overflow: auto; padding: 10px !important; vertical-align: baseline; word-wrap: break-word;"><span class="comment" style="border: 0px; color: #93a1a1; font-family: inherit; font-size: inherit; font-style: italic; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><!-- Begin Open Graph metadata --></span><br /><span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">b:if</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">cond</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'data:blog.pageType == &quot;item&quot;'</span>></span><br /> <span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">meta</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">content</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'article'</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">property</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'og:type'</span>/></span><br /> <span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">meta</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">expr:content</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'data:blog.title'</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">property</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'og:site_name'</span>/></span><br /> <span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">meta</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">expr:content</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'data:blog.pageName'</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">property</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'og:title'</span>/></span><br /> <span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">b:if</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">cond</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'data:blog.postImageThumbnailUrl'</span>></span><br /> <span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">meta</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">expr:content</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'data:blog.postImageThumbnailUrl'</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">property</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'og:image'</span>/></span><br /> <span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">b:if</span>></span><br /><span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">b:else</span>/></span><br /> <span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">meta</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">expr:content</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'data:blog.title'</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">property</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'og:title'</span>/></span><br /> <span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">meta</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">content</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'website'</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">property</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'og:type'</span>/></span><br /><span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">b:if</span>></span><br /><br /><span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">meta</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">expr:content</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'&quot;en_US&quot;'</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">property</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'og:locale'</span>/></span><br /><span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">meta</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">expr:content</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'data:blog.canonicalUrl'</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">property</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'og:url'</span>/></span><br /><span class="comment" style="border: 0px; color: #93a1a1; font-family: inherit; font-size: inherit; font-style: italic; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><!-- End Open Graph metadata --></span></code></pre><ol style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; list-style-image: initial; list-style-position: initial; margin: 10px 0px 20px 15px; padding: 0px; vertical-align: baseline;"><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">First Go to <span style="color: #3395bf; font-family: inherit;"><span style="font-style: inherit; font-variant: inherit; line-height: inherit;">Facebook Recommendations Bar Official Page</span></span>.</li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Directly click the <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Get Code</strong> Button.<br /><img alt="Official Facebook Recommendations Bar Widget for Blogger / Blogspot step one" class="screenshot" src="http://www.way2blogging.org/wp-content/uploads/images/official-facebook-recommendations-bar-widget-for-blogger-blogspot-step-one.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: auto; line-height: inherit; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Click on <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Create a new app</strong> Link<br /><img alt="Official Facebook Recommendations Bar Widget for Blogger / Blogspot step two" class="screenshot" src="http://www.way2blogging.org/wp-content/uploads/images/official-facebook-recommendations-bar-widget-for-blogger-blogspot-step-two.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: auto; line-height: inherit; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Enter the <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">App Name</strong> with your Blog Title and <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">App URL</strong> with your Blog URL, like as below and Click <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Continue</strong> button.<br /><img alt="Official Facebook Recommendations Bar Widget for Blogger / Blogspot step three" class="screenshot" src="http://www.way2blogging.org/wp-content/uploads/images/official-facebook-recommendations-bar-widget-for-blogger-blogspot-step-three.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: auto; line-height: inherit; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Enter Captcha Code Correctly and Click <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Submit</strong> button<br /><img alt="Official Facebook Recommendations Bar Widget for Blogger / Blogspot step four" class="screenshot" src="http://www.way2blogging.org/wp-content/uploads/images/official-facebook-recommendations-bar-widget-for-blogger-blogspot-step-four.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: auto; line-height: inherit; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Then Click the Get Code Button once again.<br /><img alt="Official Facebook Recommendations Bar Widget for Blogger / Blogspot step five" class="screenshot" src="http://www.way2blogging.org/wp-content/uploads/images/official-facebook-recommendations-bar-widget-for-blogger-blogspot-step-five.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: auto; line-height: inherit; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Copy the First JavaScript SDK code (First Box Code) and Encode the Code using This <span style="color: #3395bf; font-family: inherit;"><span style="font-style: inherit; font-variant: inherit; line-height: inherit;">Tool</span></span><br /><img alt="Official Facebook Recommendations Bar Widget for Blogger / Blogspot step six" class="screenshot" src="http://www.way2blogging.org/wp-content/uploads/images/official-facebook-recommendations-bar-widget-for-blogger-blogspot-step-six.jpg" style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(204, 204, 204) 0px 0px 4px; clear: both; display: block; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: auto; line-height: inherit; margin: 20px auto; max-width: 98%; padding: 2px; vertical-align: baseline; width: auto;" /></li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Login to <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">New Blogger Dashboard</strong> > Choose your Blog and Click the <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">More Options</strong> Dropdown</li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Select the <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Template</strong> > Click on <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Edit HTML</strong> > <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Proceed</strong></li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Check/Tick the <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Expand Template Widgets</strong> checkbox</li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Search for <code style="background-color: #efefef; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; color: #111111; font-family: 'Courier New', monospace; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 1px 4px; vertical-align: baseline;"><body></code> tag and place the Copied code <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">After</strong> <code style="background-color: #efefef; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; color: #111111; font-family: 'Courier New', monospace; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 1px 4px; vertical-align: baseline;"><body></code> tag.</li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">Facebook Recommendations Bar Customizations:</strong><br />You can customize the Facebook Recommendations Bar settings<div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;"></div><form id="w2bForm" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><fieldset style="border: 1px solid rgb(204, 204, 204); font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px 0px 1.5em; padding: 0px 1.4em 1.4em; vertical-align: baseline;"><legend style="border-width: 0px; font-family: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: -0.2em 0px 1em; padding: 0px 4px; vertical-align: baseline;">Settings</legend><div style="border: 0px; clear: both; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;"><label for="" style="border: 0px; display: block; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; width: 275.421875px;">Position:</label><br /><select class="select-box" id="w2bPosition" style="-webkit-box-shadow: rgb(223, 223, 223) 1px 1px 1px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-color: rgb(221, 221, 221); border-top-left-radius: 4px; border-top-right-radius: 4px; box-shadow: rgb(223, 223, 223) 1px 1px 1px; color: #666666; font-family: georgia; font-style: italic; margin: 0px 2px; max-width: 48%; padding: 4px 6px;"> <option value="left">Left</option> <option selected="selected" value="right">Right</option> </select></div><div style="border: 0px; clear: both; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;"><label for="" style="border: 0px; display: block; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; width: 275.421875px;">Action</label><br /><select class="select-box" id="w2bAction" style="-webkit-box-shadow: rgb(223, 223, 223) 1px 1px 1px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-color: rgb(221, 221, 221); border-top-left-radius: 4px; border-top-right-radius: 4px; box-shadow: rgb(223, 223, 223) 1px 1px 1px; color: #666666; font-family: georgia; font-style: italic; margin: 0px 2px; max-width: 48%; padding: 4px 6px;"> <option selected="selected" value="like">Like</option> <option value="recommend">Recommend</option> </select></div><div style="border: 0px; clear: both; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;"><label for="" style="border: 0px; display: block; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; width: 275.421875px;">Trigger</label><br /><select class="select-box" id="w2bTrigger" style="-webkit-box-shadow: rgb(223, 223, 223) 1px 1px 1px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-color: rgb(221, 221, 221); border-top-left-radius: 4px; border-top-right-radius: 4px; box-shadow: rgb(223, 223, 223) 1px 1px 1px; color: #666666; font-family: georgia; font-style: italic; margin: 0px 2px; max-width: 48%; padding: 4px 6px;"> <option selected="" value="onvisible">onvisible</option> <option value="X%">X%</option> <option value="manual">Manual</option> </select></div><div style="border: 0px; clear: both; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;"><label for="" style="border: 0px; display: block; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; width: 275.421875px;">Read Time</label><input class="input-text" id="w2bReadTime" style="-webkit-box-shadow: rgb(223, 223, 223) 1px 1px 1px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(223, 223, 223) 1px 1px 1px; color: #666666; font-family: georgia; font-style: italic; margin: 0px 2px; max-width: 48%; padding: 4px 6px;" type="text" value="30" /></div><div style="border: 0px; clear: both; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;"><label for="" style="border: 0px; display: block; float: left; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: bold; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; width: 275.421875px;">Number of Recomednations</label><input class="input-text" data-searcg="data-num-" id="w2bNumRecmm" style="-webkit-box-shadow: rgb(223, 223, 223) 1px 1px 1px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(221, 221, 221); box-shadow: rgb(223, 223, 223) 1px 1px 1px; color: #666666; font-family: georgia; font-style: italic; margin: 0px 2px; max-width: 48%; padding: 4px 6px;" type="text" value="2" /></div></fieldset></form><div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">Search for <code style="background-color: #efefef; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; color: #111111; font-family: 'Courier New', monospace; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 1px 4px; vertical-align: baseline;"><data:post.body/></code> tag and place the following code <strong style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">after</strong> the<code style="background-color: #efefef; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; color: #111111; font-family: 'Courier New', monospace; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 1px 4px; vertical-align: baseline;"><data:post.body/></code> tag</div><pre style="background-color: #fff8e8; border: 2px solid rgb(255, 231, 175); clear: both; color: #333333; font-family: 'Courier New', monospace; font-style: inherit; font-variant: inherit; line-height: 18px; margin: 25px 5px; overflow: auto; padding: 0px; vertical-align: baseline;"><code class="xml" data-result="[object Object]" data-second_best="[object Object]" id="w2bFRBcode" style="background-color: rgb(253, 246, 227) !important; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; border: 0px; color: #657b83; display: block; font-family: 'Courier New', monospace; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 1.6; margin: 0px; overflow: auto; padding: 10px !important; vertical-align: baseline; word-wrap: break-word;"><span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">b:if</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">cond</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">'data:blog.pageType == &quot;item&quot;'</span>></span><span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"><<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">div</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">class</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"fb-recommendations-bar"</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data-trigger</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"onvisible"</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">expr:data-href</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"data:post.url"</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data-read-time</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"30"</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data-action</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"like"</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data-side</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"right"</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">expr:data-site</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"data:blog.homepageUrl"</span> <span class="attribute" style="border: 0px; color: #b58900; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">data-num-recommendations</span>=<span class="value" style="border: 0px; color: #2aa198; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">"2"</span>></span><span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">div</span>></span><span class="tag" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;"></<span class="title" style="border: 0px; color: #268bd2; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">b:if</span>></span></code></pre></li><li style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 1.4; margin: 0px 0px 10px 20px; padding: 0px; vertical-align: baseline;">Save the Template, Enjoy <img alt=":)" class="wp-smiley" src="http://turbo.way2blogging.org/wp-includes/images/smilies/icon_smile.gif" style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; height: auto; line-height: inherit; margin: 0px; max-width: 98%; padding: 0px; vertical-align: baseline; width: auto;" /></li></ol><div style="border: 0px; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: inherit; margin-bottom: 15px; padding: 0px; vertical-align: baseline;">Please dorp your comments and share this post.</div></div></div>

Official Facebook Recommendations Bar Widget for Blogger / Blogspot

Facebook  Introduced their brand new social social plugin called Facebook Recommendations Bar. It is Beta Plugins. In this tutorial, we go t...

Read more »