How to have labnol like Newer and older post in blogger

 

Most of the blogs will have Older Posts or Newer Posts after the article or in the footer section.

  You can replace it with post titles by following some simple steps.


1)  Sign in to your Blogger Dashboard.

2) Click on the blog you want to change ( In case you have more than one blog )

3) Click on template.

4) Take a back up of the template and then proceed.

5) Now click "edit HTML" and proceed.

6) Find </head> ( Use CTRL+F )

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

8) Save the Template.

9) Now go to the Layout.

10) Click " add gadget " and click " HTML/Javascript "

11) Now copy the code below and paste it in the gadget and save it.

<style type="text/css"> #blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>

12) Now you will see the Post title instead of Older and newer post as shown below in the screenshot.

How to get free +2500 backlinks to your blog/website

Most of us have seen website value calculators and whois search, pages that link to our domain and show up in the search engine results when we search for our domain name. The main aim of getting Backlinks are to rank top in the search engine.
Now a days as many blogs are got affected by Panda update and lost their traffic. It is the best and automated way to get some backlinks/link popularity which is provided by IMTALK.


In this tool the script creates pages about your website/blog which is resulting in about 2500+ different pages with backlinks pointing back to your website. In this some of them are no-follow and some are do-follow.

This tool creates page in well established websites which regularly crawled by Google and other Search Engines. By this your website/blog will get backlinks/link popularity, will be visited and indexed more frequently by Googlebot and other search engine bots like Yahoo, Bing, etc.

How to use this Tool : 

Step 1 : Just visit this Website IMTALK
Step 2 : You will get the tool named IMT Website Submitter, which is something like below.



Step 3 : Enter the Required fields, i.e. Website/Blog URL, Keyword, select the number of pages to be created and then click submit.

Step 4 : Now this tool creates the page and will also be pinged. That means backlinks/link popularity are being created which is something like below.




Note : Please do not interrupt till it counts to the selected number of pages.


Step 5 : By this way we can create 2500 Free Backlinks or a Link popularity, enjoy fast crawling and high ranking in Search Engine.

How to add unique like and tweet box for all post in blogger homepage

Today, this easy tutorial will guide you "How to Add Facebook Like and Twitter Tweet Buttons Box On Every Single Post On Blogger Blog Homepage?". I am sure your readers will like these buttons on your blog. Because social networking is the most powerful way for increase traffic to your blog.

Facebook Like, Twitter Tweet and Google +1 are the three main online systems for spreading your post all over the world, more likes and tweets you have more post is shared and you will get more views. Make your blog more attractive by adding these buttons with the help of simple CSS code.

How to Add Like & Tweet Box On Every Single Post On Blogger Homepage

• Go to Blogger Dashboard > Template > Edit HTML > Proceed
• Take Backup Of Your Template Before Make Any Changes
• Now Click Expand Widget Templates and Press Ctrl + F and Search For ]]></b:skin> Code and Paste The Below Code Right Above It.   
  
  

   .post-homepage-share{box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;-moz-box-shadow: 0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;float:right;width:130px;height:65px;background: #f9f9f9;border:1px solid #ddd;margin:5px 0 0 10px;padding:5px 10px 2px 0}

• 3. Now again make a search for <div class='post-header'> and paste the below code right below it.

<b:if cond='data:blog.pageType != &quot;item&quot;'><div class='post-homepage-share'><span style='float:right'><a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'/></span><span style='float:right;padding-right:5px'><div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='false' expr:href='data:post.url'/></span></div></b:if>

• If you already had facebook and twitter pulgin avoid this step.Place this code before </head>

 <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Now codes are placed and you can save your template, now refresh your blog and see if like and tweet box has loaded or not, if you think that the box is getting too much up or too much low you can change the margin value in the above code in red color.

Note : Using these Like and Tweet for every single post on your blog may make your blog a little slow, as everytime a person loads your homepage additional requests for like and tweet buttons will be carried out so try using it if it fits best than enjoy :)

How to make a link to open 30 time in a single click

Hello friends! As you all might have open your respective blogs already, Tell me what is the most difficult challenge in blogging? Probably (according to me) it's traffic ya. I mean other things like writing posts, designing a good blog, etc. comes under our knowledge, but getting plenty of traffic is really hard. Just we open a very informative blog but others don't see it, then what's that blog value?

It's a complete zero. So today I am going to unleash a very useful trick to you all. This tutorial will increase the pageviews of you blog by 4x. Can you believe that? You may not, but it's really the true fact. 

What are you waiting for. Procure below very fast.

(NOTE:You guys must have at least some traffic initially. This trick only work for those who have a bit traffic initially.)

What it does is that you will keeping a button with a link and as soon as somebody clicks on it your site will be opened at once in more than 30 tabs/windows. Now say me wont your site pageviews be boosted. Let's proceed then;

• Go to your dashboard.
• Be forwarded to design>layout.
• Click on Add A Gadget in the place where you want to place the link.
• Scroll down and click on Html/Javascript.
• Copy the below code and paste it in the content box

<script>
function open_win() 
{
for(i=0;i<=750;i++)
window.open("http://truebloggertricks.blogspot.com");
}
</script>

<form>

<input type="button" value="Click Here" onclick="open_win()" />
</form>

1. Change "http://truebloggertricks.blogspot.com " to your own blog URL.

• Finally click on save button and you are done.

You can also keep this button in a post or anywhere you desire. For it just paste this code by switching to HTML mode(for editors) and if it already then directly paste the code.You can use this trick while commenting in other blog

A live example of this tutorial is given below. Clicking on the button below will open Truebloggertricks home page many times.

I hope you enjoyed the tutorial.

Spiceupyourblog like comment design in blogger

Spiceupyourblog is a beautiful blog with unique design.Paul crowe is owner of that blog.I also shared spiceupyourblog template in previous post. In this tutorial you will learn how to make your blogger comment system design like on Spiceup your blog.
SYB is well designed by Paul Crowe. But the comment system design is one of the best thing we find in SYB, the design and it's look makes the comments easier to understand. 

 

You can also see the Demo here

DEMO 

To make this type of comment system is very simple.Just you have to do 2 steps

• Enable threaded comment in your blog
• Applying CSS in your template

Enable threaded comment in your blog:

1. Blogger Dashboard > Select the Blog that you want to enable the Threaded Comments
2. Go to Settings > Posts and Comments
3. Comment Location option set to Embedded
   
4. Go to Settings > Other 
5. Allow Blog Feed option set to Full
   

Still not getting Threaded Comments?

Backup your Template before going to change any thing.

Method 1:

You will lost all Changes in Blog Posts and Widgets. like, Adsense Ads inside Post,Post Footer changes, Share Buttons, Signatures etc,.!!

1. Go to Design > Edit HTML
2. Click on Revert widget templates to default link

This will Discard the all Changes Widget and revert to Default. This is Best suitable for non Custom Templates.

For Custom Template Follow the Method 2

Method 2:

1. Go to Template > Edit HTML
2. Click on Expand Widget Templates Check box
3. Find the Following code.
   

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

4. You will get Two results. one is belongs to mobile template and other is belongs to web Template.
   Replace it with the Below Section of Code on both mobile and web template.  
   
   

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

5. Save the Template!

Applying CSS in your template :

It can be done easily with CSS. You can make changes to the CSS if you understand what you are doing or you may just ignore making any changes. Follow these Instruction to add this long CSS

1. Go to Blogger Dashboard 
2. Now click on the Template tab
3. Click on the Customize button
4. Select the Advance tab > scroll down and Add CSS 
5. Now you will see a textarea on right side, this is where you have to paste the HTML
   

   @font-face { font-family: 'Philosopher'; font-style: normal; font-weight: 400; src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff'); } .comment .avatar-image-container { border: 1px solid #B6B6B6; max-height: 70px !important; margin-top: -5px; width: 70px !important; position: relative; z-index: 50; } .comment .comment-block { margin-left: 75px !important; } .comment .comment-header { background: none repeat scroll 0 0 #A9F5D0; color: #333; font-size: 15px; font-weight: bold; margin-left: 60px; } .comment .comment-header a { color: white !important; text-decoration: none; } .comment .comment-content { background: none repeat scroll 0 0 #FEFFF9; border-bottom: 2px solid #E6E6E6; font-size: 14px; margin: 0 0 30px; padding: 5px 5px 10px 10px; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment-header cite { background: none repeat scroll 0 0 #DF7401; border: 1px solid white; color: white; padding: 2px 20px; position: relative; z-index: 99; margin-left: -20px; } cite.blog-author { background: none repeat scroll 0 0 #8181F7 !important; } .icon.blog-author { display: none !important; background: url("") no-repeat scroll 0 0; margin-left: 90px; width: 60px !important; height: 60px !important; position: absolute; right: 5px; bottom: 5px; top: 10px; } .comment .comment-header { color: #333; font-size: 15px; font-weight: bold; } .comment .avatar-image-container img { border: medium none !important; height: 70px !important; width: 70px !important; max-height: 70px !important; max-width: 70px !important; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD !important; color: #333 !important; display: inline-block !important; line-height: 1 !important; margin: 0 3px !important; padding: 3px 6px !important; text-decoration: none !important; font-size:16px; } .comment .comment-actions a:hover { background: #CCC !important; text-decoration: none !important; } .comments { font-family: 'Philosopher', arial, serif !important; font-size: 1em; color: black; } .comments .continue a { display: block !important; font-weight: bold !important; padding: .5em !important; color:#E34600; font-size:16px; } .comments .continue a:hover {color:#4D3123;text-decoration:none;} .item-control { display: none !important; } .comments .continue { border-top: 2px solid transparent !important; }

Then open your blog and see the comment system.If it does not works for you,please comment below.