Blogger Footer navigation with specific number of posts in label pages

I think you have noticed a navigation menu at the bottom of my home page . Normally , blogger includes a link to older posts and previous posts at the end of each page .

129 Normal%2B blogger post footer navigation Blogger Footer navigation with specific number of posts in label pagesIn the above case , its pretty difficult as is makes us move on through each and every stories to view an inner page . Here i will discuss about a Blogger Footer navigation system which looks as shown below .
131 new %2Bbogger%2B page%2B footer%2B navigation Blogger Footer navigation with specific number of posts in label pagesUsually the label pages in Blogger displays all the stories tagged with a particular label . So if you have 10 posts for a label “computer”, everything under computer will come to a single page . After applying this hack , you will be able control the no: of posts that can appear in a single label page .

First part is to add a CSS code above tag </b:skin>. This code can be used to change the size ,colors and border of your Footer navigation menu .
download
Open Your Blogger templates’ layout , select edit HTML and expand widget templates.
Now complete the first part by inserting the CSS code at the exact location .

Second step is to add the following JavaScript below </b:section> tag .
download2

In most cases ,it will the one that lies near below the Blog 1 or footer comment section .So its up to you to find out the exact location and you can do some trial and error method in this case .

<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

Now you can customize the Blogger Footer navigation by changing the number of posts and links on it . On the JavaScript code , search for a section var pageCount = 5; It defines the number of posts that can be displayed on a single page, while var displayPageNum = 5; defines the number of blocks of pages which are displayed (like: 1 2 3 4 5) under the post section.

Once you completed these tasks , save your template and open your blog in a new window. Now you can see a footer navigation under your blogger posts .

Thanks to amanda

Show related Posts in Blogger

Its essential tactic to show related Posts in Blogger , to improve usage statics and page views . If a definite number of related articles are shown at the bottom of each posts,there is chance for the reader to click on those links and head over to the next page . Related posts widget on Blogger depends on how you name your post labels .

127 show%2Brelated%2Bposts%2Bin%2BBlogger Show related Posts in Blogger
Here’s how you can do that ,
1. Open your Blogger template’s Layout and select Edit HTML .
2. Download full template for future use .
3. Click on expand widgets templates.
4. Press Cntrl+F and search for tag and insert the following script above that line .
Download
5. Similar to step 4 , find out section .<p><data:post.body/></p> . Anything you post under this line would appear at end of each posts.
6. Now paste the following code below that line .
Download
7. Save your template

Now if everything went fine , your post pages would show related articles depending on the applied label.You can customize the color and font size of the widget by editing the bold elements in the CSS code(download 1).

#related-posts .widget h2, #related-posts h2 {
color : #333333;
font-size : 13px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}

The default number of related posts are 5 as set on the code . You change it by editing max-results=5 in the JavaScript ( download 2) code to a suitable value .

Credits: Rias

Sell/Transfer Blogger blog

Just like selling a website , you can sell /transfer your Blogger blog . First step is to invite the other user as a contributor/author of your Blog . Here’s how you you can do this ,
Go to Blogger template’s settings section and open permissions.
Now as shown below, enter the Gmail address of the person to whom you want to transfer your blog .

121 sell%2Band%2Btransfer%2Ba%2BBlogger%2BBlogspot%2BBlog Sell/Transfer Blogger blog
After inviting , ask your client to verify the confirmation email to accept invitation .
Now, the permission tab in your Blog settings would have changed as shown below .

123 sell%2Byour%2BBlogger%2Bblog Sell/Transfer Blogger blog
Grand admin privileges to the invited user and remove your account just above that . Now you have successfully completed the transaction of your Blogger blog.

Show adsense ads in Blogger posts

People using Blogger blogs can show up to 3 Adsense ads in between posts .Make sure that ads are not placed below post title as they are against adsense TOS .
Here’s how you can do this ,
From dashboard , open the target blog’s layout and click on edit for Blog Posts . A new window will open as shown below.
103 Show%2Badsense%2B%2Bads%2Bbetween%2BBlogger%2Bposts Show adsense ads in Blogger postsClick on show Ads Between Posts. Now you have to enter your adsense email and details on the following form .
105 adsense%2Bin%2Bblogger%2Bposts Show adsense ads in Blogger posts
After singing in , they will send you a verification email to provide access for Adesnse in Blogger .
Verify email and return to show ads between posts menu . Choose the suitable color and format of your ad and save your template .

Note :Find out how you can choose matching color for your adsense ad titles and background

Add RSS/Email subscription in Blogger

Providing RSS/Email subscription in Blogger blog is the easiest way to keep in touch with the users . Users are alerted by email when the blog contents are updated . As far i have seen , Feedburner and Feedblitz are the major players in RSS/Email subscription services . Here in this example , i am using Feedburner.com .

99 rss%2Bheadphones Add RSS/Email subscription in Blogger
Go Feedburner.com and sign up with your Google account . At this point , you can choose a suitable name for your feed . After successful registration , they will be taking you to the Myfeeds section . Click on your feed for moving on to the dashboard . Select publicize menu from the five available tabs . Now you are about to enable email subscription in Blogger . So select email subscription and click on activate this service.

101 email%2Bsubscription%2Bin%2Bblogger Add RSS/Email subscription in Blogger
On the other side , open your Blogger dashboard and go to the layout section. Choose a location for your Email form to appear . Click on add a Page element /Gadget (For new blogger) and select JavaScript . Copy the and paste the Email form code from feedburner onto it and save the widget . Edit JavaScript code to change the height,width,border color ,text ,scroll and other parameters . After building a good sum of subscribers , you can choose to display your feed count , same from the publicize menu in Feedburner .

Add read more in blogger posts

Adding Read more in Blogger posts is pretty difficult compared to WordPress . Since we don’t have a more tag on Blogger, we need to implement a template hack for getting this done.

Open Edit HTML from blogger Layout section and expand widget templates .
Copy this JavaScript code and paste it before </head> in your Blogger template code . Now , press Cntrl+F and search for <p><data:post.body/></p> . The block of codes found near to the above line usually looks as shown below .

<div class=’post-body>
<p><data:post.body/></p>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div

You have to edit them as shown below to add read more in Blogger posts .

<div class='post-body'  expr:id='"post-"   data:post.id' >

     <b:if cond='data:blog.pageType == "item"'>        <style>#fullpost{display:inline;}</style>        <p><data:post.body/></p>     <b:else/>        <style>#fullpost{display:none;}</style>

<p><data:post.body/></p>

       <span id='showlink'>        <a expr:href='data:post.url'>Read More......</a>       </span>       <script type='text/javascript'>         checkFull("post-"   "<data:post.id/>");       </script&gt; </b:if>

<div style='clear: both;'/> <!-- clear for photos floats --></div>

Make sure that the codes(in orange) above <p><data:post.body/></p> are added just after <div class=’post-body’ (or you have to find a similar one in your template) .

Now the template part is over and the next task is to add read more in Blogger posts. Save the template and return for a new post .

This is the part above read more
<span id=”fullpost”>
Here goes Read more ..
</span>

So when each time you blog , insert <span id=”fullpost”> and
</span> in “compose” to access read more into your Blogger posts .

Update : Blogger team added expandable post option in Blogger blogs .

Wednesday 8th February 2012-Techknowl.com- Free software reviews, downloads and tech tips.