buat srolling text bergerak

Here is the code to add a simple scrolling text from right to left side

<marquee>code to simple scrolling text</marquee>
The output will be like:
Example 1:


code to simple scrolling text


If you want some more attraction,then try these,

Add a background color to the text,
<marquee bgcolor="#99CCFF">code to simple scrolling text</marquee>
Example 2:


code to simple scrolling text

You can choose your background colour by replacing the hexadecimal code(#99ccff).
Click here to see the codes of the different colors.

Here are some mode attributes to learn:

direction="left" direction="right" direction="up" direction="down"

The above attributes tells the text which direction to scroll.
Use the code below:
<marquee direction="right" bgcolor="#99CCFF">code to simple scrolling text</marquee>

Here is are some examples:
To scroll in the 'right' direction:
Example 3:


code to simple scrolling text



Example 4:
To scroll in the 'up' direction:


code to simple scrolling text



Example 5:
Downwards:(I changed the hexa decimal codes for different colours)


code to simple scrolling text


few more attributes:
You can add this attribute to alternate the text
behavior="alternate"
Here is the code to do this:
<marquee behavior="alternate" direction="down" bgcolor="#33FFCC">code to simple scrolling text</marquee>
Example 6:




code to simple scrolling text


You can also set the speed of the text with this simple attribute:
scrollamount="2"
The lower the scrollamount value, the less the speed it moves,
the html code for this:
<marquee behavior="alternate" direction="left" bgcolor="#9999CC" scrollamount="2">code to simple scrolling text</marquee>
example 7:(for scrollamout =2)


code to simple scrolling text


Example 8:(for scrollamount=5)


code to simple scrolling text


Pausing the text when mouse is over the text:It is very useful when the reader wants to read the text,and the scrollamount is big,sothat he will put the mouse over the text to pause the text and read the matter:
Here is the code to do this
<marquee behavior="alternate" direction="left" bgcolor="#CCCCCC" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" scrolldelay="50"> code to simple scrolling text</marquee>
Example 9:


code to simple scrolling text


(place the mouse over the text to test it)
Changing the text colour:
Here is the code to change the text colour:(Add it before the marquee tag)
<span style="#FFFFFF">
So, the code looks like this
<span><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" bgcolor="#cccccc"><br /><br />code to simple scrolling text<br /><br /></marquee>
Example 10:




code to simple scrolling text

Here is the important one and most useful one, adding hyperlinks in the scrolling text.
Hyperlink means a link when clicked go to another location(site).
Let's see how to add hyperlinks to the scrolling text:

Adding hyperlinks(open in the same window):
Here is the sample code:
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>
NOTE:Replace the Link#1,Link#2,Link#3 with the text and url#1,url#2 and url#3 with the target url addresses.
Here is an example:
<marquee behavior="scroll" align="middle" direction="left" bgcolor="#99FFFF" scrollamount="4" onmouseover="this.stop()" onmouseout="this.start()"><br /><br /> <a href=" http://kranthitips.blogspot.com/2007/12/embed-flashflvswf-files-in-blogger.html ">Flash animations in your blog</a> <a href=" http://kranthitips.blogspot.com/2007/12/how-to-embed-youtube-videomovie-in-your.html ">Youtube videos</a> <a href=" http://kranthitips.blogspot.com/2007/12/hexa-decimal-color-chart-for-bloggers.html ">Hexadecimal codes</a><br /><br /> </marquee
The output will look like this



Flash animations in your blog Youtube videos Hexadecimal codes<>

If you want to open the links in new window,here is the code:
<marquee behavior="scroll" direction="left" bgcolor="#99FFFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4"> <a href="url#1">LINK#1</a> <a href="url#2">LINK#2</a> <a href="url#3">LINK#3</a> </marquee>



That's it!Now you can add this to your blogger sidebar,in the blog post,where ever you want.

If you want to put this in sidebar,then sign in to your blogger account>click the add a page element> and paste the code in html/javascript and save the changes .This is shown in the below pictures.







Next,

perbesar gamar di posting

trick dahsyat pembesaran gambar


 Go to Layout » Edit html

Find this

]]></b:skin>

Add this before that line:


img {
max-width: 560px;
width: expression(this.width > 560 ? 560: true);
}

Change the value in red depending on the previous step.

Note: Do check if you have the img{ tag already in your template. If its there, just add the additional couple of lines to it.


max-width: 560px;
width: expression(this.width > 560 ? 560: true);



Save the changes.

2. Now, while doing your posts, upload the images normally like you did previously. Once the image is uploaded, go to Edit html tab, and the image code will look something like this


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWgVnsoYkkFx-OowbLSflyiTp-e-biXP7nXAM2yOZBZ40V64tXz9tJHDTGWsJzDtKA_UfcCSjFA-aXin7AnxjlEn7FwqDBT2VwY_4_EJuCUAjaSPt6DHP2dPOE1Z3u6pCB057ZmADnDWdm/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 280px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWgVnsoYkkFx-OowbLSflyiTp-e-biXP7nXAM2yOZBZ40V64tXz9tJHDTGWsJzDtKA_UfcCSjFA-aXin7AnxjlEn7FwqDBT2VwY_4_EJuCUAjaSPt6DHP2dPOE1Z3u6pCB057ZmADnDWdm/s400/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

All you have to do is Just remove that bolded text (width and height attributes) and replace s400 to s800.

So, the final code looks like this


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWgVnsoYkkFx-OowbLSflyiTp-e-biXP7nXAM2yOZBZ40V64tXz9tJHDTGWsJzDtKA_UfcCSjFA-aXin7AnxjlEn7FwqDBT2VwY_4_EJuCUAjaSPt6DHP2dPOE1Z3u6pCB057ZmADnDWdm/s1600-h/megan+fox.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWgVnsoYkkFx-OowbLSflyiTp-e-biXP7nXAM2yOZBZ40V64tXz9tJHDTGWsJzDtKA_UfcCSjFA-aXin7AnxjlEn7FwqDBT2VwY_4_EJuCUAjaSPt6DHP2dPOE1Z3u6pCB057ZmADnDWdm/s800/megan+fox.jpg" alt="Normal Picture without the hack" id="BLOGGER_PHOTO_ID_5350218059319919970" border="0" /></a>

buat resensi dokument blog

buat resensi dokument blog

1. Sign into Blogger dashboard
2. Go to Layout » Add a gadget » html/javascript

3. Just copy and paste this code..


<script language="JavaScript">

imgr = new Array();


imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 5;

home_page = "http://schemar-mag.blogspot.com/";

</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Explanation:

(Edit the values to fit your blog)

boxwidth - Width of the widgetcellspacing - Space between cells (default one is good)
borderColor - Border color (add the background color of your template to perfectly blend it in the template)
thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)fntsize - Font size of the titleacolor - Color of the titleaBold - you want bold titles? (true or false)
numposts - How many posts you want to show?
home_page : http://schemar-mag.blogspot.com/ (change this to your blog url)
But, it is STRONGLY Recommended to download the script and upload to your own hosting (google for free javascripts hosts) and replace that url with yours.

4. Last but not the least.. Save the Changes.

Activate your Email Subscription to: Blogger Tricks

Hello there,

You recently requested an email subscription to Blogger Tricks. We can't
wait to send the updates you want via email, so please click the following
link to activate your subscription immediately:

http://feedburner.google.com/fb/a/mailconfirm?k=rLv5H_62efrlf5U6fM9bToSJohM

(If the link above does not appear clickable or does not open a browser
window when you click it, copy it and paste it into your web browser's
Location bar.)

--
This message was sent to you by FeedBurner (feedburner.google.com)
You received this message because you requested a subscription to the feed,
Blogger Tricks.
If you received this in error, please disregard. Do not reply directly to
this email.

agar blog terbaca cepat di seluler

As you know, millions of people use their mobile phones to access internet. The mobile internet speed is also very fast these days with 3G's , mobile apps,etc.

From this, we can say many of your readers are coming to your blog through mobile phones..But, if you don't make your blog mobile friendly, .you may lose all your mobile readers because in a mobile phone, a normal blog takes lot of time to load and there are other issues that your site not fitting properly in the mobile screen.

So, here is how to make your Blogger (blogspot) blog mobile internet friendly..

Sign into your Blogger account > Design > Edit html

Find this line..



<b:include data='blog' name='all-head-content'/>

Paste this code below that line...



<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>


Save the Changes!

That's it! Now, your visitors can access your blogger blog through mobile phones with blazing speed...

ganti komemtar di bg

Just yesterday we shared a tutorial and announcement on Blogger's most awaited feature of threaded commenting system. We shared how to enable threaded comment style in official blogger templates but that method don't work on custom templates which are downloaded from un-official designers. Almost 75% of blogger users prefer using un-official templates and since this feature can't simply be resisted therefore we took some time to install it safely and apply all required codes to make this feature function properly after a lot of trial and errors. The tutorial below is first time shared and will offer the easiest way to add threaded commenting style to blogger blogs. I had received some JavaScript codes from our Malay speaking Fellow bloggers  and Indian Guest authors which was producing the same effect using scripts created by third party developers but the reason I delayed those guest posts was due to their browser load time conflict issues. I am glad Blogger team provided us with a much neater and fast loading script that has now surely pushed blogspot blogs to the next level. Lets get to work then!

Credits

This is again a first time shared tutorial guide by mbt blog. These scripts and style sheets are provided only by MBT blog therefore if you wish to share this tutorial with your readers and friends then kindly link back to this post as the only favour in return.
Do also check our previous tutorials on customizing Blogger comment box. Note that those tutorials will need to be updated to make it work with this new feature.

• Customize Blogger Comment Box - Make it possible!
• Black Background theme For Blogger Comment Box
• 1000+ Background Themes For Blogspot Comment Box

Apply Threaded Comments To Custom Templates

The steps are extremely easy and you just need to follow it carefully.

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Click "Expand Widget Templates" box
4. Search for this code,

(Info: This code initially appeared twice but blogger team has officially replaced the first occurrence, therefore we just need to add it once as shown here. It has become now more easy than expected.)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>
</b:if>

     5.   Replace it with this,  

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
         <b:else/>
           <b:include data='post' name='comments'/>
         </b:if>
       </b:if>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
         <b:else/>
           <b:include data='post' name='comments'/>
         </b:if>
       </b:if>

      6.   Save your template

      7.    Done!

Visit your blogs and you will find a Reply link along with a delete link below each comment. Clicking the reply link will open the comment form just below that comment so that you could post a threaded reply. It will work just perfectly. :)

Customizing Threaded Comments

The threaded comment style will override your current comment style format. In order to customize the comment body completely to suit your preferences I am sharing below the CSS code required to edit the style sheet for the comment block.
Your template will include the following CSS code automatically inserted by blogger:

<b:includable id='threaded_comment_css'>   <style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  margin-bottom: 16px;
}
.comments .comment .comment-actions a {
  padding-top: 5px;
  padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comments .comments-content .comment-content {
  text-align:justify;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  width: 36px;
  max-height: 36px;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
  </style>
</b:includable>

If you want a comment style just like the one on MBT then replace the above CSS code with the following one:

<b:includable id='threaded_comment_css'>
  <style>
/*------------- START of Blogger Threaded Comments By MBT -------------*/

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
background:#1F9EE5;
cursor:pointer;
color:#ffffff;
padding:2px 3px; margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:9px sans-serif; border:1px solid #1F9EE5;

}
.comments .comment .comment-actions a:hover {
  text-decoration: none; background:#5AB1E2; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
 
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  width: 36px;
  max-height: 36px;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
/*------------- End of Blogger Threaded Comments By MBT -------------*/
  </style>
</b:includable>

tambah komentar fb ke bgg

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

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"

     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.

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,

• 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,

• Customize Blogger Comment Form!

Troubleshooting

If you faced any problem then kindly do not hesitate to let me know. It would be a pleasure to be at your service. I will write more tutorials on this topic this week so that you may get all the latest updates. I hope this plugin proves useful to most of you and it may bless your blogs with even more organic traffic. Peace! :>