World Wide of Tips and Tricks: Blog Tricks

Showing posts with label Blog Tricks. Show all posts

Numbered Page Navigation For Blogger

Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.Here is a little screenshot of what this is all about. blogger page navigation

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization).

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer :)

After installing this widget proceed to the label fix.

The Complex Method. :P

If you installed the widget you shouldn’t be here.. Scroll down to the label fix.

1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’

3.Now find

]]></b:skin>

and replace it with

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need

4.Next is the JavaScript part. Find

</body>

and replace it with

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace it with

a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation working perfectly on your blog. :)

This tutorial is based on Codes from Abu Farhan and Muhammad Rias. So if you plan to write this tutorial on your blog,do link back to them also.

Permalink: Numbered Page Navigation For Blogger

Remove Blogger Nav bar Completely

Blogger has got a default Navigation Bar. This navigation bar is hidden in most of the third party templates. Instead of hiding the nav bar using CSS, we can completely remove it.

To do that

1. Login to your Blogger account and navigate to Layout > Edit HTML

2. In the Template Code find <body> and just above that add the following Code.

<!--<body>-->

3. Now Save the Template and you will see a confirmation about deleting the Navbar Widget. Confirm the Deletion by Clicking on the Delete Widgets Button

4.Now your Nav bar is completely removed from your Blog.

Advantages of this Method

You will be completely removing the nav bar and not hiding it. The nav bar iframe codes wont be present in your blog’s HTML source and so the blog would be more Search Engine Friendly and your blog will have a more valid XHTML code..

Disadvantages of this Method

You will no longer see the Quick Edit pencil

or wrench links

on your blog even if you are logged in. This is not a a big deal. You can Edit the Widgets from the Layout >Page Elements Page. You wont see the Comment Delete icon near your comments even if you are logged in.But you can definitely manage the comments from the Blogger Comment Tab.It would also be a good idea to completely remove the Quick Edit and Wrench Links from Blogger

How to Get back the Nav Bar?

If you followed this method to remove the nav bar and now want to get it back, then delete the extra code that you added. i.e remove the code from step 2, that you added into your template and Save the Template.

Facebook Like Box For Blogger

Facebook Like Button allows you to provide more Sharing Options to your Readers. Your readers can share your posts on Facebook using the Like Button. Have you added the Like button and still not getting any “Likes”? :(. Ok then we will present the Like button in a much better and elegant way.

Here is a Screenshot of the Facebook Like Box. Isn’t it lovely and more “Likable” than the default Like Button?

The Facebook Like box also includes a link to your Facebook Fan Page. This FB Like Box was Designed Styled and coded by Mia of Dezign Matterz . Thanks to her for designing and styling this awesome Like Box.

How to install the Facebook Like Box?

1. First Fill in the following Details (Code will be updated with these details)

2. Now Login to your Blogger Account and navigate to Design > Edit HTML and check the option which says “Expand Widget Templates”

3. Look for ]]></b:skin> in your template and just above that place the following code (You can use Ctrl +F to find the code).

.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:540px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("http://lh5.ggpht.com/_u4gySN2ZgqE/TJ3dpjy9PaI/AAAAAAAABr0/PTUXIS8ykps/fblogo%5B3%5D.jpg") no-repeat scroll left top transparent;
}
.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:515px;
height:42px;
}

4. Now Look for <data:post.body/> in your template and just below that add the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'></div>
<div class='fb_like_button_holder'>
<b:if cond='data:post.isFirstPost'> 
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if> 
<fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' width="450" font="arial" action="like" colorscheme="light"></fb:like>
</div>
</div>
</b:if>

5.Next you have to add the fb namespace to your template tag.Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find

<html

and change it to

<html xmlns:fb="https://www.facebook.com/2008/fbml"

The following screenshot will help you out.

This is necessary for all FBML widgets using the fb tag. So if you have already added the namespace while adding some other FB plugin, then you can skip this.

6. Now Save your template and you will see a Facebook Like Box on your post pages.

Add Google Plus One Button on Blogger

Add Google Plus One ( +1 ) Button on Blogger

Google has released an alternative to the Facebook and Twitter Sharing buttons named +1.If you like something that you find on the web, you can hit the +1 button, and your +1'swill help friends, contacts, and others on the web find the best stuff when they search. This tutorial will guide you on adding the same to your Blogger Blog.

Why Should I add the Google +1 Button?

1. The Plus one button will have a major impact on your Search results. When a friend of yours does a search in Google, your +1s will count.

2. You can get a detailed report about the +1 metric and how it affects your search traffic over at Webmaster Tools. You can read more about it at the Official Google Webmaster Blog - http://googlewebmastercentral.blogspot.com/2011/06/1-reporting-in-google-webmaster-tools.html

Adding Google Plus one (+1) button to Blogger

1. If you are already using the official Blogger Sharing buttons, you should already be seeing the +1 buttons on your blog. If it is not, then go to that tutorial, and you will get the answer to how you can fix it.

2. No I don’t want to add those Blogger Sharing buttons, but would love to add the +1 button somehow. If that’s the case, then read on..

3.Generate the Google +1 button code using the following generator.(The codes and the tutorial will be updated with the options that you make using the generator)

Configure the Button

Demo

4. Go to Blogger Dashboard > Design > Edit HTML and click on the button which says “Expand widget Templates”. Look for </head> and immediately above that paste

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}
</script>

5. Now look for <data:post.body/> and immediately below that paste

<div>
<g:plusone size="standard" expr:href="data:post.canonicalUrl"/>
</div>

6.Save the template, and you should see the Google +1 buttons on your blogger blog.

You think its cool?, then +1 it :P

Grid Layout For the Popular Posts Widget

A few days back, I published the JavaScript version of the Recent Posts widget, and I loved the Grid Layout of the Widget. One of the most popular Widgets used by Bloggers is Blogger’s Official Popular Post Widget. So I decided to edit the gadget, and give it the Grid Style.

How does the Gadget Look like after tweaking it?

So Here are the Steps to make your Popular Posts Widget act like an Image Grid

1. Go to the Layout Page and add the Popular Posts Gadget, if you haven’t already added it.

2. Edit the Gadget Settings so that it displays the Thumbnails and not the Snippet

3. Now Go to Template/Design > Edit HTML . DO NOT Click on the Expand Widget Templates checkbox. Leave it unchecked, and look for PopularPosts1 (Do a Ctrl +F to find it in your template) and you will get some line like this

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

4. Change This line to

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' src='http://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>         
             </div>
            <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

5. Save your Template

6. Now Go to Template Designer > Advanced > Add CSS and paste the following CSS snippet there, and apply to your Blog

.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}

The image URL present in the Widget Code is the Default Thumbnail which will be displayed if the post doesn’t have a thumbnail associated with it. You can modify it to get a custom default thumbnail. You can spice up the CSS to make the grid look more eye catching. I would leave that to you :)

Reverting Back to the old one

If you are not satisfied by the way it looks, then revert it back. Here are the steps:

Just Remove the Popular Posts Widget from the Layout Page.If you need the original version, then add it back again
Remove the CSS which you added to Template Designer > Advanced > Add CSS
That’s it.

I think that this Hack would work out well on Recipe and Photography Blogs. Try it out, and let me know if it is useful :)

Pages

World Wide of Tips and Tricks

Labels

Peoples in now

Top Songs Of 2012

Most Visited Websites 2011-2012

History of Facebook

Airtel 3G 70% less in Kerala Plans

Aakash Tablet is Available For Booking

Related Posts Widget for Blogger with Thumbnails

Related Posts Widget for Blogger with Thumbnails

Related Posts with Thumbnails for Blogger

Related Posts Widget with Thumbnails for Blogger

How to display the related posts on every page and not only on the post pages?

Numbered Page Navigation For Blogger

Numbered Page Navigation For Blogger

Implementation of Blogger Page Navigation

The Complex Method. :P

Label Fix

How to Edit the template to cut short the posts per page?

Remove Blogger Nav bar Completely

Remove Blogger Nav bar Completely

Advantages of this Method

Disadvantages of this Method

How to Get back the Nav Bar?

Facebook Like Box For Blogger

Facebook Like Box For Blogger

How to install the Facebook Like Box?

Add Google Plus One Button on Blogger

Add Google Plus One Button on Blogger

Why Should I add the Google +1 Button?

Adding Google Plus one (+1) button to Blogger

Grid Layout For the Popular Posts Widget

Grid Layout For the Popular Posts Widget

How does the Gadget Look like after tweaking it?

Reverting Back to the old one

Mobile Phone Reviews

Todays Top Story

Popular Posts

Followers