Tuesday, July 24, 2012

Add Facebook Comment Box in thr blogger

0 comments


facebook-comments-boxIn 2009 Facebook developers introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site. This plugin did show a lot of problems when it was embedded in Blogger Blogs in initial days of its development but now thanks to our fellow friend Max from Allblogtools this plugin has been finally bloggerized to work just perfect with any Blogger hosted blogs. I have edited Max's coding in some areas and have mentioned some more interesting options that will help you use the Facebook comments box in parallel to your old Blogger Comment form so that you may loose no previous comments and provide users with multiple options of commenting from different platforms.


Live Demo

This is how the Facebook Comments box looks like,
LIGHT SCHEME
facebook-commentS-box LIGHT
DARK SCHEME
Facebook-comments-dark-scheme

Interesting? Lets now learn how to embed this extremely useful comment form in Blogspot blogs. Kindly follow the simple steps below,

1- Get a Facebook Application ID

  1. Go To Facebook Developers Page
  2. Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"
site-url
     3.   Hit "create app" button and proceed
     4.   After submitting the security check code you will see this page,
app-id
       5.   Save that App ID in a notepad because we will need that latter. Now Click the link near the top-right corner of the same page that says "Developer Dashboard"
image
      6.  One the new window that appears click the Edit Settings link ,
edit-settings
        7.  Then go to Website option and write your Site Domain as blogspot
website
       8.  Save Changes and jump to the next step of this tutorial

2- Adding the Facebook comments Box to Blogger

Now its time to do embed the comments box in your blog templates. So follow these easy steps,
PS: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Check the "Expand Widget Templates" box
  4. Search for <html and just after it give a space and add this code,
xmlns:fb='http://www.facebook.com/2008/fbml'
5.  Next search for 
<body>
Note: In New Blogger Designed templates the same code looks like this,
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Find any one of these codes and just after it paste the code given below,
<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>


  • Replace YOUR_APP_ID with your Facebook application ID that you saved in a notepad.
    6.    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='MY Blogger Tricks' 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/mybloggertricks' property='fb:admins'/>
<meta content='article' property='og:type'/>


Make these changes:
  • Replace MY Blogger Tricks with your blog title/Name.
  • Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size ->  40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,
logo
  • Replace YOUR_APP_ID  with the your Facebook Application ID that you saved in notepad
  • Replace http://www.facebook.com/mybloggertricks with your Facebook user profile link
    7.    Now Search for this,
<b:includable id='comment-form' var='post'>
    8.    Just after it paste the code given below,
<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.allblogtools.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://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>
  • 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='600' then set footer-size to width:590px

      9. Save your template and Bingo you are Done! See your blogs to find a beautiful comment box waiting to be touched. =)

Respect Copyright

This plugin contains credits to allblogtools and MBT blog for the efforts put by us in facilitating blogger users with this great commenting plugin. We therefore request you to please do not remove the footer credits. The credits are attached to the plugin in a design style that it perfectly blends the colour themes of Facebook Comments Box. We only need this favour in return.

Need More Fun?

If you want to further play with codes and wish to give a Facebook style (i.e font colours, background colors, background image) to your old blogger comments form then read the post below,

Stickybar With Auto Scrolling Recent Posts Widget for Blogger

0 comments

In this post i want to share a nice stylish Sticky bar with auto scrolling recent post widget with you,the Widget appears on the top of your Blog page and it is Simply Awesome., just follow the below simple steps..to add this widget to your blog.....



Demo



How to add this widget to blogger?
  • Input your valid site/blog URL
  • Customize settings as you need
  • Click on Generate button
  • Finally click on Add to Blogger button to add this widget to your blog... :)






Drop Your Comments And Questions Below... :)
If You Enjoyed This Post Please Take 5 Seconds To Share It.

Expand/Collapse Blogger comment Box with jQuery

0 comments
Blogger comment form is the only section in blogspot blogs that still irritates users a lot.  After a successful customization of this form last year we now took a step even further to integrate jQuery slideToggle and accordion effect into it. Luckily major browsers now do support JavaScript library so this widget is compatible with all browsers. The tutorial today will help you to create a beautiful expandable and collapsible huge button that will display comment form by sliding down smoothly when triggered and hide it when clicked again. We will be using simple jquery functions to enable a button to  show/hide all div sections that hold the comments box.
Kindly also check out previous tutorials below to add even more fun.
Blogger Comment Box Series
4. Expand/Contract Blogger comment Box with jQuery

How it works?

This idea came in my mind by reading an interesting discussion between some fellows at stackoverflow. The discussion was a little confusing at first but a little focus made it to this structured code.  All this functionality does is that it hides the div sections in active mode but displays the content when clicked. You can see a live demo by clicking our comment box .
collapsible comment box

Credits

The codes below are copyrights of MBT blog. We therefore request both bloggers and developers to kindly attach an attribution link back to this page if they wish to share this tutorial with their readers.
Note: Most of our gadgets are redistributed with no credits attached. All such blogs are being repeatedly reported to both AdSense, Blogger and DMCA. Some readers are therefore advised to kindly use our resources only for non-commercial use only.

Install on blogger

The installation guide is extremely simple. We have kept the steps as clear as possible. You just need to copy and paste the codes as guided. Lets get to work now.
  1. Go To Blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Click Proceed
  5. Click Expand Widget Templates
  6. Just below <head> paste the following code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
   
    $(&quot;.toggle_container&quot;).hide();
 
    $(&quot;h3.trigger&quot;).click(function(){
        $(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
    });
 
});
</script>
      7.  Now search for ]]></b:skin>   and just above it paste the following CSS code
/*----- Comment Box by www.MybloggerTricks.com ----*/
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}
  • To change the width of the button just edit: 518px
  • To change the color, font size, font type of the text "Click here to add Comment" edit the highlighted part of the code.
       8.    Next search this:
<b:includable id='comment-form' var='post'>
       9.   Just below it paste the following code:
<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>
and just above </b:includable> paste this code:
<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div>
</div>

See the image below to see you have followed the steps correctly.
changing the comment form
    10. Save your template and all done!
You can customize the comment form by reading our previous tutorials. You can choose over one thousand background themes to breath a new life in the same commenting system that once looked really dull and simple.
Visit your blog to see your blog in completely different neat look. Your visitors will love to comment now! :)

Need help?

If you needed any help just let me know. I just hope this new tweak proves useful for most of you. I would love to hear your thoughts on this latest widget.  Do not forget to share it! :) Take good care of yourselves and your loved ones. Peace and blessings pals.

Add Stylish 404 Error Pages To Blogger/Blog

0 comments
I
had given you small introduction about "Custom 404 Error Page" in my last post and in this post i give stylish 2 designs for 404 Error Not Found Page. Actually This Page Designed by Paul Santosh making just a few small changes.Check out the screenshot below.

Style 1

Go to blogger.com > Settings > Search Preferences and now click Edit for the setting Custom Page Not Found and then paste the below code



<h1><a href='/'>404 Not Found</a></h1>
<h2>Whoops! It appears you hit a bad link. My bad! Please click the back arrow on your browser to return to the previous page or <a href='/'>click here to go to homepage</a></h2>
<style type='text/css'>
.status-msg-wrap {
    font-size: 100%;
    margin: none;
    position: static;
    width: 100%;
}
.status-msg-border {
    display:none
}
.status-msg-body {
    padding: none;
    position: static;
    text-align: inherit;
    width: 100%;
    z-index: auto;
}
.status-msg-wrap a {
    padding: none;
    text-decoration: inherit;
}
* { margin, padding: 0; }
body {
 background: #474747 url(bg.png);
 margin: 70px;
}
h1 a {
 display: block; text-decoration: none;
 font: 150px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;
 text-align: center;
 color: #999; text-shadow: 0px 3px 8px #2a2a2a;
 }
  h1 a:hover {
   color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
  }

h2 {
 font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
 text-align: center;

 color: #222; text-shadow: 0px 2px 3px #555;
}
#sidebar-wrapper, #blog-pager, #header, #footer, nav, .blog-feeds {
    display: none;
    }
</style>


Style 2

Go to blogger.com > Settings > Search Preferences and now click Edit for the setting Custom Page Not Found and then paste the below code


<h1>404 - Page not found!</h1>
<h2>You are looking for the Page isn't here.</h2>
<h3>let's try our site search</h3><BR><BR>
<div id="md-searchbox">
<form id="md-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /></form></div>
<style type='text/css'>
#md-searchbox{background:url(http://2.bp.blogspot.com/-CVDHw6ocWbo/TgdPfqLJW4I/AAAAAAAAAsc/QaOzExnrfZY/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#md-searchform{display: block;padding: 10px 12px;margin:0;}
form#md-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#md-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
* { margin: 0; padding: 0; }
    body { background: #666; margin: 70px; }
    h1,h2,h3,h4 { margin: 0 0 3px 0; }
        h1 { color: #FFF; font: bold 52px Helvetica, Arial, Sans-Serif;
           text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
           -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
        }
        h1:hover {
           position: relative; top: -3px; left: -3px;
           text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
        }
       h2 { color: white; font: bold 34px Helvetica, Arial, Sans-Serif;
        text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;
        -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
       }
       h2:hover {
           text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;
       }
    h3 { color: white; font: bold 42px Helvetica, Arial, Sans-Serif;
        text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902;
        -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
       }
       h3:hover {
           position: relative; top: -3px; left: -3px;
           text-shadow: 1px 1px #fe4902, 2px 2px #fe4902, 3px 3px #fe4902, 4px 4px #fe4902, 5px 5px #fe4902, 6px 6px #fe4902;
       }
       h4 { color: white; font: bold 24px Helvetica, Arial, Sans-Serif;
        text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe;
        -webkit-transition: all 0.12s ease-out;
           -moz-transition: all 0.12s ease-out;
           -o-transition: all 0.12s ease-out;
       }
       h4:hover {
           text-shadow: 1px 1px #02a2fe, 2px 2px #02a2fe, 3px 3px #02a2fe, 4px 4px #02a2fe, 5px 5px #02a2fe, 6px 6px #02a2fe;
       }
    #content { width: 100%; }
#sidebar-wrapper, #blog-pager, #header, #footer, nav, .blog-feeds {
    display: none;
    }
</style>

Drop Your Comments And Questions Below :)

How to insert images in Facebook Chat box?

0 comments
The advent of Social Media has given a new scope when it comes to sharing emotions with loved ones. At this Stage where Social media, mainly Facebook, has taken the “must Have” status in our lives, it’s important to accept that no matter how great our love for Facebook is, it still provides limited features to its users when it comes to Facebook Chat. Now let us have a flashback of Windows Live Messenger. The chat there is what I call “an actual fun to have Chat”, where you can share images, use emotions, winks, can avail voice chat, etc. These days, when Facebook has taken up the entire Market in every way possible, Statistics show that the majority of the people have shifted from different chatting platforms to Facebook, neglecting the reality that the Facebook Chat holds no reference of sharing emotions ,Images, etc. We talked earlier in detail, how to give a new customized look to your Facebook Chat. However, what we didn’t discuss yet is the fact that you can insert images of your own choice in your Facebook Chat as well.
It’s important to quote here that although you can always share your images, statuses, videos and all through your wall but there is always a room for personal things becoming too public. Sharing your photos by making an album and allowing few people to see them is always a dangerous thing to do if privacy is required due to any reason. Therefore here is a simple solution to make your Facebook Chat the way you ever wanted it to be.

Share Your Feelings in a new way on Facebook

There are geniuses all over the world who are noticing all the lacking stuff in such huge Brands like Facebook, YouTube, Chrome, etc. and are working in order to facilitate the users like you and me. If you are a chat lover and want to get a hold of all possible added features on Facebook, go to Smileytime, which is a smiley devoted website.
 uplaod the picture and generate the code
On the home page of this website, you will find an option of “Choose File” as shown in the image below. This Site acts as a bridge to let you share your emotions and pictures with your friends on Facebook Chat. All you need to do is to upload the File needed to be shared on chat by clicking on ‘Choose File’. Once done with the basic formalities, click on Upload now in order to get the generated code.
code generated
The time taken in code generation depends on the size and quality of the image that is chosen to share. Wait calmly. You will see a set of lines that is the code of your image. You need to copy this code and paste it to the Facebook Chat Box. Your Image will appear and you can share millions of images with your friends on your Facebook Chat Box, all for free!
pasting the code geenratedimage  added on facebook chat
 
Its always a good feeling when you do something special for your loved ones. Knowing the trick stated above, you can now share your pictures, emotions, images, etc. with your friends and family on Facebook Chat Box.
Best Wishes,

Add Facebook Recommendations Bar To Blogger

0 comments
Finally the plugin I had been waiting for since 22nd September 2011. In order to engage readers more and let your visitors spend more time on your website Facebook has finally launched the "Recommendations Bar" in beta version. It's designed to display additional recommended articles right after readers have finished reading an article or spent some time on your blog. It will collapse on page load and expand once a reader has reached a specific location on your blog or finished reading the post. Only those articles are displayed that are previously liked or shared on Facebook.

If you are a Wordpress user you may follow this tutorial:

See the demo live on our blog towards the bottom-right corner. Don't forget to press the like button to let your friends know that you visited this page :)

Can it increase your traffic?

Oh sure yes without any doubts! We often share widgets but we don't implement every plugin on our blog unless it provides some value to traffic or revenue. As you can see we have added the recommendations bar on all our posts and this will surely put a positive effect on pageviews because now visitors can see what their friends previously liked on your blog and due to a human curiosity they would surely check these extra posts along the way that appears under the Label "You Might Also Like". Google Plus button shows friends recommendations in search results and Facebook Bar will display the likes on your blog. Thus consumer of all such plugins is always in benefit.

Install it on Blogger

It can be installed easily on both BlogSpot blogs and Wordpress but with a little patience. We have kept the installation extremely easy and ignored unnecessary steps like installation of Open Graph Meta Tags. We would install necessary codes to keep the structure clean and make the widget work just fine. The code we are sharing is optimized and will display your blog titles and featured images correctly and with a lot of control attributes.
Follow these easy steps:
Step1: Create a Facebook Application
For this plugin to work you will need to create a Facebook App in seconds. The below method is the standard and correct method for creating any FB App you like.
  1. Log into Facebook Apps
  2. Click on Create New App button towards Top-rightcreate new app
  3. In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.
app name
     4.   Enter the captcha security code. Click Submit
     5.  You are app is almost complete. Just click Website with Facebook Login tab and inside the box input your blog URL. See the screenshot below. Do not touch remaining options and click Save Changes.
Site URL
         6.   You will see two strings of alpha-numerical characters. One is App ID and the other is App secret. Just copy the App ID code and keep it save in a notepad. We will need it later.
App ID
Congrats App finally created! Lets proceed to step2.
Step2: Add "Recommendations Bar" To Your Blog
Follow these steps to add the bar to Blogger:
  1. Go to Blogger > Template
  2. Backup your template
  3. Click Edit HTML > Proceed
  4. Search For this :
<html
Replace it with this code:
<html xmlns:fb='http://ogp.me/ns/fb#'
This will make the plugin compatible in older versions of  internet explorer also. Since blogger templates are coded in XML therefore inserting this XML namespace will enhance the plugin performance and compatibility.
     5.   Next search for <body>   and just below this tag paste the following code:
Note: If you are using the new blogger templates like Simple, Awesome Inc., Travel, Watermark or Picture window then please search for <body instead. Make sure to paste the code below the entire body tag.
<div id='fb-root'/>
<script>
//Facebook Recommendation bar by www.mybloggertricks.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=***************";
  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.mybloggertricks.com' trigger='40%'/></div>
</b:if></b:if>
You are almost done. Make these changes:
  • Replace *************** with your 15 digit App Id that you saved in step1.
  • Replace http://www.mybloggertricks.com with your blog link
     6.   Save your template and you are all done!
Visit your blog and scroll down about 50% of your page and wait for 10 seconds for the plugin to expand. Enjoy the new way of free pageviews juice! :)

Optional Steps

Below are optional customization and control options. You can skip them if you want
  • max_age: will decide the age limit of articles. Sometimes you don't want to display too old articles so you can set it to display up to 1-180 days old posts. But if you don't want to take age into account then let it be 0 as default.
  • num_recommendations: You can set how many articles to display. By increasing or decreasing the value 3
  • read_time: As soon as the user reaches a specified location, the plugin would expand and before expanding it will take some time. I have kept it equal to 10  seconds, you can increase it to 30 or more as you wish.
  •  side:  You can decide the location of plugin. By default it shows up towards the bottom right corner of your page. You set it to float to left
  • trigger:  On page load the plugin collapses and as soon as it reaches a specified location it expands. You can choose that location in three ways i.e. onvisible, X% or manual. I prefer locating the trigger point by percentage for better pageviews. The widget will expand as soon as the user scroll downs 40% of your page. You can increase or decrease this value. If you wish that the plugin must expand as soon as the reader reaches the end of your article then instead of pasting the code between the purple lines  paste it just below data:post.body tag and use the value onvisible instead of 40%.
  • The widget will display only on post pages and not on homepage or static pages. To display it on all pages, then simply delete the purple bolded lines.
Troubleshooting :
Since Most templates are not well structured and require installation of meta tags to tell Facebook to fetch correct page titles, thumbnails and blog title. To do this simply paste the following code just below <head> tag inside your template
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
Save your template and now see the plugin if it correctly shows page titles both on your blog and Facebook.

Your views?

I hope the installation was not very techy but still if you got into any trouble then just relax and let us know. This widget is extremely important and a must for every blog. We would be adding more updates on it as soon as we hear from Facebook documentation. Do not forget to like this page through the recommendation bar! :) Peace and blessings pals!

Add jQuery Page Loading Effect to Blogger

0 comments
In this post i am go to show you how to add  jQuery page loading effect to blogger , first see the demo and if you want to add this nice effect to your blog, just follow the simple steps below...

Demo

How To Add jQuery Page Loding Effect To Blogger?
  • Go to Blogger--->Template--->Edit HTML
  • Tick On Expand Widget Template Check Box
  • CTRL + F to find </head> In your Blogs HTML
  • Copy & Paste Code Below Just Above It
<style>#md-loading {
 
     position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://1.bp.blogspot.com/-oihuvyFdV78/UA0jMnQeZUI/AAAAAAAADeg/_3dvib8GVzs/s1600/MD-Lodding.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #md-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#md-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #de1301;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#md-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("MD");


$("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) });


$(window).load(function(){

    $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>
  • Next Search For <body>
  • Copy & Paste Below Code Just After It
<div id='md-loading'><div id='md-progress-bar'></div><div id='md-loader'>Loading...</div></div>
OR

If you want to show this effect in homepage only use the code below.
<b:if cond='data:blog.url == data:blog.homepageUrl'>  <div id='md-loading'><div id='md-progress-bar'></div><div id='md-loader'>Loading...</div></div></b:if>

Now Save Your Template And You Have Done !

 

| My Blogger Hack © 2010. All Rights Reserved | Template Style by Lord HTML | Design by Mohammad Mustafa Ahmedzai | Back To Top |

Your Text Link Here