Tricks For Blogger :blog templates,blog hack, tricks: Blog hack

Facebook Comments box for blogger installation guide

here is few step to install facebook comment box with blogger comment box this will apear on your blog in tab view

Create a Facebook App

In order to control and keep a backup of the comments made on your blog you will need to create a FB application. The steps of creating this app is very simple. Simply follow these easy steps:
Note: Facebook has changed its layout interface so the screenshots could look a little different from current interface. Steps are exactly the same.

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,
app-id

5. Save that FACEBOOK APP ID in a notepad because we will need that later. 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 ,
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

Creating Tabs For Facebook Comments in Blogger

For blogger comments to display next to tabbed facebook comments, your blogger comment form settings must be set to embedded below post. To show blogger comments below posts do this:

Go To Blogger > Settings > Comments
Set "Comment Form Placement" to Embedded below post

Now follow these easy steps one by one:

Go To Blogger > Design > Edit HTML
Backup your template
Click the "Expand widget templates" box
Search for <head>
Just below it add the following code,

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Blog LOGO Image Link' property='og:image'/> <meta content='FACEBOOK APP ID' property='fb:app_id'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
      $(".comments-tab").addClass("inactive-select-tab");
      $(selectTab).removeClass("inactive-select-tab");
      $(".comments-page").hide();
      $(selectTab + "-page").show();
    }
    </script>

Replace Blog LOGO Image Link with the image link of your blog logo. Your logo size should be as small as 30px by 30px in size. If you don't want a logo to display whenever someone shares your comment on his wall then simply delete the yellow highlighted code.
Replace FACEBOOK APP ID with the numeric facebook app Id that you were asked to note down. You can find your Facebook App ID in settings page of the app you created earlier.

6. Search for <html and replace it with the following code,

<html xmlns:fb='http://www.facebook.com/2008/fbml'

Note: Give a space at the end of the above code.

   7.  Now Search for ]]></b:skin>    and just above it paste the following CSS code,

/*--- Tabbed Facebook Comments By MBT ----*/ .comments-page { background-color: #f2f2f2; width:450px;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

To change the background colour of tabs content area simply edit #f2f2f2
To change the width of the comment box container change width:450px;

  8.  Next search for this

<div class='comments' id='comments'>

After the first occurrence of the above available code paste this code:

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfmR3OdLX-9EW9nYnDeTmFprePxdVmZ989r4F6q11CXf5Sc0QybfnivJ-AI6MgAv6JYhmoIgU_silRRLfpL23dmIkPlSx1PjN4L59nfFZRJL9tT-U26FAAPkiOKmB_QnP5Xd9vgqfTt3s/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments </div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments </div><div class='clear'/>
</div>

    <div class='comments-page' id='fb-comments-page'>
      <b:if cond='data:blog.pageType == "item"'>
       <div id='fb-root'/>
       <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by
<b><a href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b>
</div>

</b:if>
     </div>

Note: If the above code gave errors then delete the red highlighted lines from the code above.

To change the width of the comment box size change the numeric value width='450' . Keep it equal to the width of the comment box container we set earlier in step#7.
To change the footer credits size (i.e. Facebook Comments by blogger Widgets), change this value width:440px
Keep a difference of 10 pixels between the comment box size and footer size. For example if you set comment box-size to width='450' then set footer-size to width:440px
To change the text inside tabs edit Comments for Facebook Tab and Comments for Blogger Tab

9. Save your template and you are All Done!
Visit your blog to see it working just fine. :)
Note: If you have activated blogger threaded comments then the Tabs will display only when at least one comment is posted in blogger

00:02 / 0 comments / Read more

Why This

recommendation bar help you to make user interest on you blogger its also help your visitor to stay long time on you website

Install it on Blogger

it is easy to install on blogger ,here is few step that will help you to install on blogger

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 byhttp://tipntricksworld.blogspot.in/
//<![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://tipntricksworld.blogspot.in' 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://tipntricksworld.blogspot.in 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?

22:48 / 2 comments / Read more

Blogger launched new service by which your blog domain will automatic trnsfer to specific country top domain name some blogger have problem by this thing they don't want this they want only blogspot.com,in this posts we will learn how we can redirect domain name to blogspot.com
Every blogger blog owner may have the same problem of automatic redirection. So here in this post, we have a tweak that enables your blog to stay on blogspot.com URL.
first of all let’s as know Why a .com redirect to a ccTLD (Country Specific Top Level
Domain) URL may hurt you? This is because according to MR. Search Engine Optimizer’s law, you can’t
host the same content on different domains. If you are using blogger on your own top level domain,
then there is no point of worry. But if your blog has a .blogspot.com address in its tail, then it may hurt
you.
Here is the simplest JavaScript code (Pretty short too!) that you can
use to save your blog from being redirected:
Place this in the HTML code of your blog and you won’t see any redirect further.

if ((window.location.href.toString().indexOf('.com/'))=='-1') {
window.location.href =

window.location.href.toString().replace('.blogspot.in/','.blogsp
ot.com/ncr/');
}

23:53 / 1 comments / Read more

You find so may article in this you can add related posts within any posts,here is another method in wich we can scroll posts with Thumbnails his is another way to Make Related Posts with Thumbnails on blogger posts, use marquee style. By using the marquee, we will be able to display the number of related-posts so much more, and of course will look more attractive.

To add this first go to you blogger account and follow this

dashboard
edit html
expand widgets
find </head> (use ctrl+f)

Place the code below before </head> , will look like the following

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
background-color:#003399;

}

#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#C8E6E1;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

5. find the following code
<div class='post-footer-line post-footer-line-1'>
6. place below code

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=15"' type='text/javascript'/></b:if></b:loop>

<div style='text-align: left; font-weight: bold;'><span style='font-size:130%;'>Related Topics</span></div>

<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=7;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<Script Language='Javascript'>

</Script>
</b:if>
</b:if>

You can change related topics name with your own world

08:49 / 0 comments / Read more

First you need to login you blogger account go to dashboard

Go to the Layout Tab (Design tab)
Choose a Page Element
Add Gadget, Choose HTML / JavaScript
And Copy the code below into it
Done

06:37 / 1 comments / Read more