Blogger tips | Blogger Tricks | Blogger Templates | SEO | Adsense Tips

In order to keeping busy visitors on our blogs finally we got the plugin which we have been waiting from long time,recently facebook has launched their "Recommendation Bar" in beta version,the Recommendation Bar is a plugin which shows a number of some recommended articles for your readers or visitors and you can set number of recommended articles,when any visitor visits to your any post,after some specific time the plugin pop ups at the right/left corner of your blog with the recommended articles,thats why its helps you to keep busy your visitors on your blog.The plugin contains title of your post,thumbnail and number of likes just below of that post and the plugin shows the only those articles which are previously liked or shared on facebook.If you want more such plugins then I am listing some similar widgets and plugins -

Now lets see how to add facebook recommendations bar to blogger?

How To Add Facebook Recommendations Bar To Blogger?

For better understanding I am dividing this post in two parts and they are as below,

Creating new Facebook App
Adding Facebook Recommendations Bar To Blogger

Part 1 : Creating new Facebook App

To create Facebook app for your Recommendation Bar follow below steps,

First go to Facebook Apps and login with your Facebook account
Click on Create New App button at top right corner

As soon as you hit Create New App button a pop up box will appear.In App Name field fill Recommend Bar and keep all it is and hit Continue button.

Click On Image To Enlarge

Enter the captcha as shown in image and hit Submit button

Now you will redirect to an another page.Scroll down and click on Website with Facebook Login tab and inside the box input your blog URL.Now leave all fields as it is and click Save Changes

Click On Image To Enlarge

Now copy your App ID and paste it into notepad,we will need it later.

Great,you have created your App.Now lets see how to add Recommendations Bar to blogger.

Part 2 : Adding Facebook Recommendations Bar To Blogger

Go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Hit Proceed button
Now search for below code in your template

<html

replace it with below code,

<html xmlns:fb='http://ogp.me/ns/fb#'

Now find for below code,

<body>

just below of it paste following code,

Note - If you are using default blogger templates then search for <body tag instead of above code.

<div id='fb-root'/> 
<script> 
//Facebook Recommendation bar by http://www.helperblogger.com/
//this notice must stay intact for legal use
//For more visit http://www.helperblogger.com/
//<![CDATA[
(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return; 
  js = d.createElement(s); js.id = id; 
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR APP ID HERE"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));
//]]> 
</script> 
<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><div style='z-index:999999; position:absolute;'> 
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.helperblogger.com/' trigger='40%'/></div> 
</b:if></b:if>

Replace APP ID HERE with your APP ID which you have created in first part
Replace http://www.helperblogger.com/ with your blog URL.
The widget will only appear on post pages and not on homepage or static pages. To display it on all pages, then simply delete the lines in red color.
If you want to change number of recommendations then simply change the value 3
If you don't want to show your old articles then edit the value max_age='0',you can set it to 1-180.But if you don't want to take age into account then let it be 0 as default.
If you want to change position of bar to right to left then simply replace right with left.
When any visitor comes to your blog,after specific time the bar expand.I have set the time to 10 seconds to chnage it just change value 10.

Finally save your template and visit your post pages.

The installation of this plugin is longer but it is easy.If are getting any problem then feel free to post it via comment form.I'll glad to help you :)

In this post im going to explain, how to
add animated labels for your images. you
can add this effect to your sidebar image
or post images.Im using CSS and HTML
for this tutorial.I added demo link. so you
can check it before apply to your blog.
Get my earlier image effects posts here.

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

5.Find this code by using Ctrl+F ]]></b:skin>

6. Paste below code Before ]]></b:skin> code

/* Bloggertrix  */
.label { 
 /*Position*/
 overflow: hidden;
 position: relative;
 margin: 20px;
 display: inline-block;
 vertical-align: top;
 
 /*Skin*/
 border: 7px solid #fff;
 -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
 -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
 box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
.label img {
 display: block;
}
.label p {
 /*Position*/
 position: absolute;
 padding: 10px;
 width: 100%;
 
 /*Skin*/
 background: #000; /*fallback*/
 background: rgba(0,0,0,0.7);
 color: #fff;
 font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
 
 /*Animation*/
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 transition: all 0.5s ease;
}
/*Top In Bounds*/
.top:hover p, .topleft p, .topright p {
 top: 0%;
}
/*Top Out of Bounds*/
.top p, .centertop p {
 top: -50%;
}

/*Bottom In Bounds*/
.bottom:hover p, .bottomleft p, .bottomright p {
 bottom: 0%;
}
/*Bottom Out of Bounds*/
.bottom p, .centerbottom p {
 bottom: -50%;
}
/*Left In Bounds*/
.bottomleft:hover p, .bottomright:hover p, .topleft:hover p, .topright:hover p, .centerleft:hover p, .centerright:hover p {
 left: 0%;
}

/*Left Out of Bounds*/
.bottomleft p, .topleft p, .centerleft p, .centerleft p {
 left: -150%;
}

/*Right Out of Bounds 150%*/
.bottomright p, .topright p, .centerright p {
 left: 150%;
}

/*Centered From Bottom*/
.centerbottom:hover p {
 bottom: 50%;
}

/*Centered From Top*/
.centertop:hover p, .centerleft p, .centerright p {
 top: 50%;
}

/*Center Margin Fixes*/
.centertop:hover p, .centerleft p, .centerright p {
 margin-top: -20px;
}

.centerbottom:hover p {
 margin-bottom: -20px;
}

7. Go to blogger and click drop-down like 1st step and select Layout

8. Click Add Gadget and select 'HTML/Javascript"

9. Paste below code.

<div class="label top">
   <p>Your Title</p>
   <img src="Image URL 1" />
 </div>
 
 <div class="label bottom">
   <p>Your Title</p>
   <img src="Image URL 2" />
 </div>
 
 <div class="label bottomright">
   <p>Your Title</p>
   <img src="Image URL 3" />
 </div>
 
 <div class="label bottomleft">
   <p>Your Title</p>
   <img src="Image URL 4" />
 </div>
 <div class="label topleft">
   <p>Your Title</p>
   <img src="Image URL 5" />
 </div>

*ReplaceURLs as your like.

10. Now save "HTML/Javascript". You are done.

Easy Zoom:Jquery image zoom effect for blogger

Easy Zoom is a Jquery image zoom plugin for blogger.This will be very helpful for blogs that use lots of images especially photography blogs with high quality in dept images.You can have a medium sized image in your blog post but still let people get a close look without having to click through.Credit and thanks for the original code Goes To the awesome css globe Check Them Out. Now you can see the demo will show you exactly how it works.

Live Demo:-

Live Demo

Add jQuery Image Zoom Effect To Your Blog

Add The Css And Scripts

Step 1. In your Blogger Dashboard Click Design > Edit Html
Step 2. Find the following piece of code.

]]></b:skin>

Step 3. Copy And Paste The Following Code Directly Above ]]></b:skin>

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

Step 4. Now Find the following piece of code in your blog.

</head>

Step 5. Copy and paste the following piece of code Directly Above </head>

Important - The code highlighted in blue is the main jQuery script, if you already have jQuery in your template. Then leave the highlighted code.

Step 6. Save Your Template, that's the jQuery and Css added now you just gotta add your images.

Adding The Image To Your Posts

When you upload a large image (Don't upload image smaller than 500px) to Blogger it will often be re-sized to fit your posts.The image code you upload will look as below and you simply add class="zoom" as highlighted :

Now you had added the image zoom effect to your blog.Feel free to share this post and leave your thoughts in comments we always want to hear from you.