My Blogger Hack

Add Facebook Comment Box in thr blogger

2012-07-24T23:29:00.001-07:00

In 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

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

Go To Facebook Developers Page
Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"

     3.   Hit "create app" button and proceed
     4.   After submitting the security check code you will see this page,

       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"

      6. One the new window that appears click the Edit Settings link ,

        7. Then go to Website option and write your Site Domain as blogspot

       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.

Go To Blogger > Design > Edit HTML
Backup your template
Check the "Expand Widget Templates" box
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 : 'YOUR_APP_ID',
      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('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').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,

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 == "item"'>
<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

2012-07-24T23:26:00.003-07:00

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

2012-07-24T22:20:00.001-07:00

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

1. Customize Blogger Comment Form

2. Comment Form with Black Background Theme - Just like ours!

3. Over 1000 Background Themes For Blogger Comment Box!

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 .

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.

Go To Blogger > Template
Backup your template
Click Edit HTML
Click Proceed
Click Expand Widget Templates
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(){

    $(".toggle_container").hide();

    $("h3.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("slow");
    });

});
</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.

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

2012-07-24T22:09:00.000-07:00

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq3gcwrhHbIMqmvWBwrtCW0ZARhXihLf3OuqdtyIdeYKs4cg7RwmfZJiWeJ7sP3BDf2RcCUl8UKDm8i_qKynML3WPPRxkHfvf42KcJq-rJvhsrAuRCxbjErU1uqbGrXwq4SbxiIMmoRi3f/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?

2012-07-24T22:06:00.000-07:00

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.

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.

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!

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

2012-07-24T22:03:00.000-07:00

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.

Log into Facebook Apps
Click on Create New App button towards Top-right
In the box that pops up, type "My Recommendation Bar" inside the App name field and leave other options as default. Click continue.

     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.

         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.

Congrats App finally created! Lets proceed to step2.
Step2: Add "Recommendations Bar" To Your Blog
Follow these steps to add the bar to Blogger:

Go to Blogger > Template
Backup your template
Click Edit HTML > Proceed
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 == "item"'><b:if cond='data:blog.pageType != "static_page"'><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 != ""'>
<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

2012-07-24T21:52:00.000-07:00

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLY0NOt64vnMHBBG7LrdvSg8DQmSTMqjRCdK4xXpgL7fe7B7R894oe_0K5JVJr8SUq6cdL6yV_Swwew9wuiInYqZgvJvGPt-wiMSEVFNUhkfHnoKZuttQxnCJUIxDYgriihEjdu0O2Mlee/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>

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 !

Customize LinkWithin Stylesheet - Add Some colors!

2012-07-24T21:39:00.000-07:00

Just recently while redesigning a client's website, we figured that Linkwithin can completely be customized by overriding its default stylesheet. We used Google Chrome to identify the classes and IDs. This let us change the background colors of the thumbnail images, change the title text color and margining, add cool hover effects and most importantly remove the linkwithin credit link and logo link that appears towards the bottom-right corner of the plugin. We have created a sample style with dark theme and we would like to share the stylesheet, using which you can add your creative new looks to it and blend it perfectly with your blog looks and feel. Both BlogSpot and wordpress users would find this tutorial useful because all you would need to do is to copy and paste a simple CSS code. Lets get to work!

Live Demo

Install LinkWithin

If you have not yet installed linkwithin widget on your blog then kindly first install it:

Read: Install linkwithin on Blogger

Linkwithin Custom Stylesheet

Note: Wordpress users will need to paste the stylesheet below by going to Appearance > Editor.
I will be sharing steps for blogger blogs here.

Go To blogger > Template
Backup your template
Click Edit HTML > Proceed
Search for this style tag:

]]></b:skin>

5. Just above it paste the following:

/* -----Linkwithin Stylesheet by www.MybloggerTricks.com----- */

#linkwithin_logolink_0 {
display:none!important;
}
#linkwithin_logo_0 {display:none;}
#lws_0 {
clear: both!important; margin: 0 0 20px 0!important;
}

.linkwithin_outer{
margin: 0 0 20px 0!important;
}
.linkwithin_text {
color:#FF683F!important;
font-size:16px!important;
padding-bottom:5px!important;
}
.linkwithin_posts a {
background:#333333 !important;
border-right:1px solid #404040!important;
}
.linkwithin_posts a:hover {
background:#666666 !important;
}
.linkwithin_img_0 {
border: 2px solid #dddddd !important; padding:2px !important; width:100px!important; height:100px!important;
}
.linkwithin_img_0:hover {
border: 2px solid #333333 !important; padding:2px !important;
}

.linkwithin_title {
color:#ffffff !important;
font-family:'tahoma', sans-serif !important;
font-size:11px !important;
line-height:14px !important;
text-decoration: none;
border-top:1px solid #ddd !important;
}
.linkwithin_title:hover {
border-top:1px solid #333 !important;
}

Make these changes to change the colors. Tip: Use our Color Tool

To change the color of the text "You Might Also Like" simple change the hexadecimal color code value #FF683F
To change the font size edit 16px
To change the container background color in active mode edit #333333
To change the container background color in mouse hover mode edit #666666
To change the color of the separator between each thumbnail please edit #404040
To change the border across each thumbnail in active mode edit #dddddd image
To change the border in mouse hover mode edit #333333
To change the post title links colour edit #ffffff

6. Save your template and you are all done!
Visit your blog and see it blended just perfectly! :)

How it works?

To force the browser to ignore official stylesheet provided by linkWithin server link and except our custom one, I simple override all attributes with the addition of !important. It's a normal practice to override styles when duplicate properties exists on a webpage.

How to change the text?

By default linkwithin displays "You may also like these stories:" If you want a custom text like "Related stories" or "You Might also like" or any text you like please add the following code inside the linkwithin widget that must be present in your layout.

<script>linkwithin_text='You Might Also Like:'</script>

Change the highlighted text into anything you like.
If you could not locate the widget then paste the above code inside your template just below the <head> tag

Increase Stories without re-installing the widget

When you first install this plugin, linkwithin would ask for your Email Id and blog URL and then control your settings using a unique user ID. This Id would remain the same no matter how many times you delete or reinstall the plugin on your blog.

If you want to increase the number of thumbnail images then simply go to Linkwithin and submit the same Email address with which you created the plugin for the first time and also submit the blog URL. Platform is optional. Set width to the number of stories you want to display. Each story represents a Thumbnail image.

Hit get widget and all done! Do not copy any code and go and refresh your blog to see the plugin updated automatically.

Need help?

If you need help with regard to the alignment and margining of the plugin or any other customization related query then do let me know. Create your artistic designs and share them with all of us. I really like the linkwithin plugin. It displays posts based on relevancy linked with the labels/categories you create. It also loads fast and consumes less kilobytes of transfer data when page is loaded. I strongly prefer it over custom widgets that increase blog load time and does not look professional. I just hope you find this tutorial helpful. Peace and blessings buddies. :)

My Blogger Hack

Add Facebook Comment Box in thr blogger

1- Get a Facebook Application ID

2- Adding the Facebook comments Box to Blogger

Respect Copyright

Need More Fun?

Stickybar With Auto Scrolling Recent Posts Widget for Blogger

Expand/Collapse Blogger comment Box with jQuery

How it works?

Credits

Install on blogger

Need help?

Add Stylish 404 Error Pages To Blogger/Blog

How to insert images in Facebook Chat box?

Share Your Feelings in a new way on Facebook

Add Facebook Recommendations Bar To Blogger

Can it increase your traffic?

Install it on Blogger

Optional Steps

Your views?

Add jQuery Page Loading Effect to Blogger

Related Posts Widget For Blogger - Optimized Version

Add Linkwithin to Blogger

Customize LinkWithin Stylesheet - Add Some colors!

Install LinkWithin

Linkwithin Custom Stylesheet

How it works?

How to change the text?

Increase Stories without re-installing the widget

Need help?