How to Add Facebook Like Button to Blogger

Facebook introduced the new “Like” button which enables your blog visitors to share your blog content on their Facebook profiles with one click. After the launch of this button I have seen many bloggers are adapting it. So why not add it to blogger.

For an example, click the below button to “Like” this post :

First Go to Layout (Design) > Edit HTML and check “Expand Widget Templates”.

Second Find <data:post.body/> and immediately after it add the following script :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true'  expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot;  + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
</b:if>

Note that conditional tags are used to
show these Facebook Like buttons only for post pages. If you want to
show it even in home or archive pages remove these tags marked in red.


reference in here

Read more

jQuery Image Zoom In Your Blog

Click this picture

Install jQuery image zoom in your blog

• Login in your blogger
• Click design
• Click Edit Html, and dont forget to cek list expand ( dont forget to backup your template

Now follow my instruction

• Search this code

]]></b:skin>

• and copy this css in above code ]]><b:skin> (atas code ]]><b:skin>)

div.jquery-image-zoom {
 line-height: 0;
 font-size: 0;
 z-index: 10;
 border: 5px solid #fff;
 margin: -5px;
 -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
 background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
 display: block;
 width: 25px;
 height: 25px;
 position: absolute;
 left: -17px;
 top: -17px;
 /* IE-users are prolly used to close-link in right-hand corner */
 *left: auto;
 *right: -17px;
 text-decoration: none;
 text-indent: -100000px;
 outline: 0;
 z-index: 11;
}
div.jquery-image-zoom a:hover {
 background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
 width: 100%;
 height: 100%;
 margin: 0;
}

•  and now, search code

</head>

•  copy this script in above code </head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type="text/javascript" src="http://jquery-for-myblog.googlecode.com/files/jquery.imageZoom.min.js"/>
<script type="text/javascript">
 jQuery(document.body).imageZoom();
</script>

• save your template.

nb : If you ready install jQuery framework in above code </head> , you cant install code like

<script type="text/javascript" src="http://http://jquery-for-myblog.googlecode.com/files/jquery.imageZoom.min.js"/>
<script type="text/javascript">
 jQuery(document.body).imageZoom();
</script>

done.

Source From modification-blog

Read more