Thursday, March 22, 2012 - 0 comments

Add A Facebook Comment Box On Your Blogger Blog

Adding a Facebook Comment Box on your blogger blogs is a great idea. Visitors will have an option to use the common blogger comment box or use the Facebook Comment Box in the case that they are online in Facebook. This is really a great plugin created by Facebook and was launched last 2009.


So lets get going!

Adding A Facebook Comment Box On Your Blog 

I.  Get a Facebook Application ID

2.  Type your "Blog Title" on the App Name and click continue.


3.  Now your finish making your application. The digits inside the red rectangle is your Application ID.



II.  Adding The Facebook Comment Box On Blog

1.  Go to Dashboard >> Design >> Edit HTML.
2.  Click on "Expand Widget Templates".
3.  Search for <html and just after it give a space and add this code, 
xmlns:fb='http://www.facebook.com/2008/fbml'

4.  Next search for <body> and after it add this code,
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;YOUR_APP_ID&#39;,
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };
    (function() {
    var e = document.createElement(&#39;script&#39;);
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>

IMPORTANT:   Replace "YOUR_APP_ID" with you Application ID that you made earlier.


5.   Next search for  </head> and just above it paste the following code,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Smashing Notes' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/jai.cuizon' property='fb:admins'/>
<meta content='article' property='og:type'/> 

IMPORTANT:   You have to make the changes below:
Smashing Notes    - your blog title. 
BLOG-LOGO-IMAGE-LINK    - your blog logo image link.
YOUR_APP_ID    - your Application ID. 
http://www.facebook.com/jai.cuizon     - your Facebook user profile link.


6.  Now search for the code below,
<b:includable id='comment-form' var='post'>

7.   Add this next code after the code in step 6,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>
<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.smashingnotes.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://smashingnotes.blogspot.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>smashingnotes.blogspot.com</a></b></div></div>
</b:if>

IMPORTANT:  
  • If you want to use the dark scheme then simply replace light with dark
  • To change the Comments box size, change this value width='520'
  • To change the footer credits size, change this value width:510px
  • Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='480' then set footer-size to width:470px  
 8.  Save your template and your done! Check out you new comment box.
read more

Saturday, March 17, 2012 - , 0 comments

Create A Zoom Effect Photo Gallery Using jQuery

This tutorial will show you how to create a Photo Gallery using jQuery which has a Zoom Effect. This is a pretty nice galley which you can implement in all your posts or adding a HTML/JavaScript gadget on your blog. This can also be implemented on your blog pages if you want. You only have to follow some simple steps below to implement this Zoom Effect Photo Gallery Using jQuery on your blog.


Implementing A Zoom Effect Photo Gallery On Your Blog

1.  Go to your Dashboard >> Design >> Edit HTML.

2.  Find ]]></b:skin>. Before it paste the code below. (Ctrl+F and paste the code on the search bar to find it easily.) 
/* Blogger Zoom Gallery  */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_5UFtWCoLJ0eMJQV4YOLJS3FnDxzLcXkLms2oFf9Fc90B5A8148gvEvIUE9TNsNsIvECLQZs0JBl_3ZW-rzfAbipYy05l39VKqVw8rX-EbJdrDPIt8sTIukGHbcdOfN0mcingimjuYq61/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

IMPORTANT: You can change the value of this line "width: 360px;" to change the width of the gallery.


3.  Then go and find the "</head>" tag and before it paste the next code: 
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

IMPORTANT:  If you have jQuery already installed on your template delete the rel line in the start of the code.


4.  Now save your template.


CONFIGURATION:  In the place where you want the gallery to appear just paste the next code:

<ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>

Replace the blue line with the URL of your images,and if you want to make the image link to another page or url instead of # add the target url.

IMPORTANT:  In order for the image to be not distorted, you have to make the dimensions of the image the same as the dimensions in the code. Find this code "ul.thumb li img {width: 100px; height: 100px;" if you want to change the image dimensions.

If you want to add a new image just add a new line of code like the upper ones.
read more

Thursday, March 15, 2012 - , 0 comments

Optimizing Your Blog Title Tags

Blogsot blogs Title Tags by default shows the blog title first then the post title. This is not good for SEO (Search Engine Optimization). It is very important to show the post title fist then the blog title  especially on Google search engine. This is because Google put more weights on optimized tile tags. But don't worry because this can be resolve by changing just a single code in your blog template HTML. Just follow the steps below on how to change your title tags for SEO.



Optimizing Your Blog Title Tags

1.  Go to your Dashboard >> Design >> Edit HTML.

2.  Find the code below. (Ctrl+F and paste the code below in the search bar to find it right away.)
<title><data:blog.pageTitle/></title>

3.  Replace the code in step 3 by the codes below.
<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> 

4.  Save your template and you should see the result by checking your web browser.


It may take a few days for the changes to show up on the Google search results. But don't just rush things and have patience because SEO isn't that easy.
read more

Wednesday, March 14, 2012 - 0 comments

How To Simply Add Your Own Favicon On Blogger

Boggers want to build brand for their blog and one easy way to do it is adding a unique Favicon. By default, a blogger blog has Blogger Logo as the favicon. You can change the default favicon easily of the blog on your blog design panel. The favicon on the upper left of the panel is editable, which gives you the option of uploading an image from you desktop or from the web as your blog favicon. But the change in favicon will be seen after a day. You don't want to wait that much time just to see a blog favicon right? So here's a way on how to change your blog favicon by just adding a code on your blog template HTML and that will show your new blog favicon just after you save the changes.


Adding A Favicon On Your Blog

1.  First, you need to make you own unique favicon. You do it on image editors or directly from the web. (I have some list of sites where you can make your favicon after this tutorial.)

2.  Now, go to your Dashboard >> Design >> Edit HTML.

3.  Find the code below. (Ctrl+F and paste the code on the search bar to find it easily.)
<b:include data="blog" name="all-head-content"/>

4.  Copy and paste the code below right after the code in step 3.
<link href="YOUR FAVICON IMAGE URL" rel="icon" type="image/vnd.microsoft.icon"/>

IMPORTANT:  Change "YOUR FAVICON IMAGE URL" in the code above with the URL of your own unique favicon.

5.  Now save the template and check your new blog favicon.


Favicon Editor Sites

Comment below if your having problem implementing this tutorial. ^^
read more

Subscribe to: Posts (Atom)