Add it to blogger
First we will add the necessary code for the new pagination and then we will remove the existing default buttons that appear below comment section
- Go To Blogger > Template
- Backup your template
- Click "Edit HTML"
- Search for ]]></b:skin> and paste the following CSS code just above it:
/*################MBT Pager ##########################*/
.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;}
.mbt-pager li.next { height:114px; float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }.mbt-pager li.previous { height:114px; margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px; background:none;
}
.mbt-pager li.previous a { padding-right: 24px; }.mbt-pager li.next:hover, .mbt-pager li.previous:hover {background:#333333; }
.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}.mbt-pager li i { color: #ccc; font-size: 18px; }
.mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.mbt-pager li a span { font-size: 15px; color: #666; font-family:oswald,Helvetica, arial; margin:0px;}
.mbt-pager li a:hover span,
.mbt-pager li a:hover i { color: #ffffff; }
.mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
.mbt-pager li.next i { float: right;
margin-top: 15%;
margin-right: 5%; }.mbt-pager li.next i, .mbt-pager li.previous i ,
.mbt-pager li.next, .mbt-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }.fa-chevron-right {padding-right:0px;}
- To change the black background and white font color of the selected area on mouse hover edit: background:#333333; and for font color edit: color: #ffffff;
- To change the height of the containers edit height:114px; twice
- Use our Color generator tool for picking the hexadecimal color code
5. Now we will add some fancy Google web font called Oswald, so that our widget stands out. Kindly search for <head> and just below it paste the following code:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
Note: Remove the bolded code if you have already added jquery library inside your template.
6. Next we will add the HTML code that will position the pager at the bottom of last paragraph on the blog post. Search for <data:post.body/>
7. Just below it paste the following HTML code:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<ul class='mbt-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' />
<b:else/>
<i class='fa fa-chevron-right'/><a ><strong>Next</strong> <span>You are viewing Most Recent Post</span></a>
</b:if>
</li><li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' />
<b:else/>
<i class='fa fa-chevron-left'/><a ><strong>Previous</strong> <span>You are viewing Last Post</span></a>
</b:if>
</li></ul>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script></b:if></b:if>
Here I used a bit of jquery to fetch the data inside title tags. Since blogger only provides the option to switch between next and previous posts using URLs, therefore we needed jQuery to find the title classes using the heading tags and retrieve the data out of them. The title classes and heading tags may be different for custom blogger templates (you may need my help here by posting your blog urls so that I could tell you the correct title class used inside your blog)
In standard blogger templates the correct class is: .post h3.post-title and therefore I will be using the same inside the jquery code above.
- (Optional) The yellow and orange highlighted text can be replaced with any text you like. They will appear when a user is either viewing the most recent post or the last post on the blog.
8. Save your template and you are almost done! Visit your blogs and you will see the pager navigation working just perfectly! :)
Removing existing Next/Previous buttons
Now its time to prevent the default buttons from displaying below comment sections.
- Search for <b:includable id='nextprev'>
- You will see a big chunk of code below it that looks slightly similar to the code below:
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if><b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if><a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if></div>
<div class='clear'/>
3. All that you need to do is to enclose this code inside conditional codes as shown below:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>THE ABOVE BIG CHUNK CODE IN
</b:if></b:if>
4. Save your template and you are all done!
Now the default buttons will appear on homepage but not inside posts or static pages. If you wish to permanently delete them, then simply delete the big chunk code above and save your template.
Need Help?
- If you are looking for free professional set of png buttons for next/previous buttons then check our gallery: MBT Download Zone
I hope this new widget adds a new life to your blogger templates. It is extremely unique in design and rarely used. So be amongst the first to take your blogs to the next level. As always I am here for any help needed. Peace and blessings buddies :)
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
Mohammad
12/30/2013
Widgets
first comment! by the way great post!
ReplyDeleteHiiii Mohammad,
ReplyDeletethanks bro for this useful and great looking post. using this next and prev post title on blog will incease the look of blog. thanks again...!!
Every think is ok but can't see Title ! (What's wrong...?)
ReplyDeletePreview : http://www.softfully.com/2012/09/microsoft-net-framework.html
DeleteIn your case you should replace .post h3.post-title with .post h1 This will work perfectly.
The solution by Code Norvana is also correct but you dont need to insert the class post-title because it is missing inside your blog.
To align it to center in your blog add this to the styelsheet just above ]]>
.mb-pager {margin-left: -60px;}
Need more help? let me know :)
We solved this issue .mb-pager {margin-left: -60px;} to .mbt-pager {margin-left: -60px;}
DeleteThank you...
Why does it not work for my blog? :( :(
DeleteMy blog is- www.dotgifcomix.com
Please, pretty please get back to me as soon as you can, I'll be so grateful.
Why is my pager different from your pager @Mohammad Mustafa Ahmedzai? See: http://www.dotgifcomix.com/2016/09/reality-and-fantasty.html
DeleteMy pager doesn't have a divider between PREVIOUS and NEXT buttons. Also, there are no arrows like your blogger pager has. Can you help me?
Hi Mohammad,
ReplyDeleteVery good this article!
Have you ever thought about creating a code to put this new form above the comments? It is very difficult to do this?
Sorry my accent, I'm using Google Translator!
Hug!
Dear you can add the code anywhere you like. If you wish to change its location just play with the code in step#7.
DeleteTo add the pager just above comments section then do this:
1. Search for this code
<div class='comments' id='comments'>
2. Paste the code in step#7 just above this line
done :)
Hi, i have problem installing the widget. I have a custom template and thus maybe the class and tags are different. I need your help to resolve this. Thank you!
ReplyDeleteMy blog : http://singaporestockmarketnews.blogspot.sg/
It must be working in your template because you have tag h3. However as proposed by "Code Nirwana" Try this:
Deletereplace: " .post h3.post-title " with " "post-title entry-title" and let me know if this works now. :)
Hi, thank you for your reply. I have tried both but it is still not working.
DeleteHear from you soon, thank you!
@Stock Fanatic
Deletetry to change " .post h3.post-title " with " " .post h3 ".
If still not work than please give the url of blog in which you are trying this :)
.post h3 is the the which you have to place to get the title below next and previous. You might not placing the code correctly, I suggest you to start from the beginning and replace the .post css.
DeleteAslam o alikum bro this is my first comment on your blog. i need your help this widget is not working on my blog and also i want to ask my cooment box is not showing in my blogger menu as well as in comment setting are not showing propar.bro this is my blog url www.yupsoftware.com i hope you will reply soon
ReplyDeleteW.salam Brother,
DeleteWith due respect since you are using our copyrighted theme without our permission we can therefore not entertain any of your questions. We love helping people who value our resources and respect our efforts. Using our blog theme is in complete violation of our services. I therefore kindly request you to remove the template and use the downloadable templates provided by us
We trust with Mohammad Mustafa Ahmedzai,
DeleteWe forget the names of website but we have marked at many website's are using your template.
Aslam o alikum thanks for replying bro how can i contact with you because i sent message on your contact us and also on services page and i have not received any type response from your side.
Deletethanks again bro.
That is the great widget and and useful too. thanks for your effort.
ReplyDeletewww.pakistanblogger.com
Salam ! Muhammad Bhai ! mere pass jesa ke ap ne kaha titles show nahi ho rahe ! my blog : bloggerinblogging.blogspot.com please jaldi koi solution bataen. mene h2 kar ke bhi dekh lia :)
ReplyDeleteEvery think is ok but can't see Title ! (What's wrong...?)
DeleteNobody can solve this ?
Preview : http://www.softfully.com/2013/01/active-disk-image.html
Hi Dear,
Deletesimply replace .post h3.post-title with .post h2.article-title and it will work just perfectly. :)
@OM Softnews
That is possible dear, I am sure you missed seeing the new class. But I love when people help each other. :)
oh .good, well come to blog, thank
ReplyDeletefirst of all Happy new year brother ,thanks for writing such useful blog tricks i think you are number 1 , can you please write one hack for converting blogger posts in to grid view and list view with the grid and list button to change the view , i have searched the whole internet i think so and tried applying many tips provided by other but none of them prove to be useful can you please help.
ReplyDeleteHi dear,
DeleteThat is indeed one of the tutorials that I had already announced I will write but since grid/list view involves intense care and use of codes, it will be a little of headache for a non-techy to implement the guide correctly.
I will release templates on that very soon inshAllah :)
do you will share new template for happy new year 2014?
ReplyDeletesorry for my bad english
I would have loved to do so but didn't get time this year but I have planned around 100 templates for you guys that will be released in 2014. :)
DeleteThanks Muhammad bro,
ReplyDeleteI requested this widget on your Faceook page 2 days ago and now i am happy to read the tutorial live here.. :)
Because we respect your queries! :)
DeleteSalam,
ReplyDeleteMy title class is different as per usual blogger template (.post h3.post-title), here is my blog, http://www.pendapatanda.com/, need your help to find my title class. TQVM
Hello Mohd Shubhi Abdul!
DeleteNow this is the problem everyone facing, including me :) !
but I have the solution.....
You need to replace: " .post h3.post-title " with " "post-title entry-title" and everything will be fine and working well!
Hope I solved your problem :) If have any other question contact me here
Dear In your case you should replace .post h3.post-title with .post h2.post-title
DeleteWill work just perfect :)
@code nirwana
Buddy this solution is correct but it would not work for blogs where the title tag has no post-title entry-title classes. So adding it separately for each tag is important. Kindly check my comment#3.3 :)
please help...It's not working for my blog...waiting for solution. TQ
Delete@Mohammad Mustafa friend after helping everyone now its my time to ask for a help in using this widget! :)
ReplyDeleteSo my problem is, different size of ' li ' (not equal in height). i tried some tricks but not working perfectly for all the pages. so please correct it.
Screen Shot: here
Source / Blog : here
This comment has been removed by the author.
DeleteThis comment has been removed by a blog administrator.
ReplyDeleteAs usual, another wonderful widget by you... Thanks for this and the simple instructions... Got it successfully installed on my site with some customization to colors and fonts sizes... Works and looks great... Btw, is it possible that we can get the links to open in a new tab instead of loading on the same page? Just want to know if there is an option and if so, how to implement it... Three Cheers Bro :D
ReplyDeleteYes you can do this follow instructions:
Delete//for newer posts
search for-> a class='newer-link'
and after ' class='newer-link' ' paste->> target="_blank"
//for older posts
search for-> a class='older-link'
and after ' class='older-link' ' paste->> target="_blank"
Hope it will work :)
Thanks a lot... That seems to have worked perfect :)
Deleteit better to use .post-title than .post h3.post-title , because some custom template use custom heading, custom heading is like wordpress, on homepage the tag is H2 but on the post page the title post is H1
ReplyDeleteI used this widget on my blog. but it does not show anything please help me. my blog url - http://www.timesofblog.com/
ReplyDeleteplz give me solution for my site it not showing title
ReplyDeletehttp://freshtechyard.blogspot.in/
replace: " .post h3.post-title " with " ".post h2"
DeleteThis comment has been removed by the author.
ReplyDeletebloggingstae@blogspot.com is my blog url. I tried to apply this widget but fail to success.. plzzz help me
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHEy I had inserted your http://www.mybloggertricks.com/2009/12/replace-newer-older-and-home-links-with.html widget too and now I am having a problem in "Removing existing Next/Previous buttons" I am not able to find I tried usnig cntrl + F still no use .. Also the widget isnt visible :( pleasehelp
ReplyDeleteHello,
ReplyDeleteI have been struggling to get this code working on a test template that i am planning to apply on my blog.
I have read all the comments and tried all possible keywords for replacing the post h3.post-title but it does not show up.
cleanest1,blogspot.com - this is the url of the blog and if any of the experts here look into the issue, it would be highly appreciated.
Thank you.
Hello Kashish!
DeleteYou are struggling because of wrong post title class name!
Every custom template have different class/id name for there post title not keywords which you said...
for your DEMO blog you have to replace: " .post h3.post-title " with ".hentry .entry-title".
Note:This change might not working in your main blog because of different class name if using different template!
Hope these changes works for you... if not let me know!
Thanks for the reply Nirvana.
DeleteAs i said i have tried most of the replacements and the ".hentry .entry-title" was the last one i tried.
So unfortunately it is not working. I still have the same name for the post title and you can give it a check.
After going through the comments above, I have also tried post h2, h2, post h3, h3 and what not but it is still not working.
I did try all these to minimize your effort but it seems you will have to suggest me a better solution :).
Thanks once again for your time.
This comment has been removed by the author.
ReplyDeletewhere to add first code... below or above the skin...
ReplyDeleteHello Mohammad,
ReplyDeleteI implemented your floating sticky bars in my blog. I really like it!
Now, I am also trying to do this "Next & Previous Post Titles". I think I followed your instruction, but did not work for some reasons.
Can you please help me out?
My blog address is www.my-levis501.blogspot.com
Thank you for your help in advance.
50% Working But Not Showing Post Title
ReplyDeleteon
http://www.theguitar.in/2013/12/gulabi-aankhen-atif-aslam-chords-strumming-progression.html
replace: " .post h3.post-title " with " "#content h3"
DeleteThanks It 100 % Working Now.. !! (^_^) !!
DeleteThis comment has been removed by the author.
ReplyDeleteHi buddy,,
ReplyDeleteCan u help me please... the above code is not working on by blog www.mbapages.in
i have tried with 'h2' and 'h3' and 'h1' instead ".post h2.post-title", but its not working...
also i can't figure out with step 3 in "Removing existing Next/Previous buttons". help please.....
Regards,
Amit Nagar
www.mbapages.in
Hello Mohammad!
ReplyDeleteI need your help. This widget does not show me the arrows left and right, as you can see in my page!
What do you think about this problem?
Thank you!
Dear
ReplyDeleteIts not working on my blog. Please check the error.
Hi Mohammed,
ReplyDeleteIs there any workaround to show the thumbnails ONLY of the next & previous posts with arrows on top of it ?
Please help.
Thanks,
Hi Mohammed,
ReplyDeleteI'm using your "MONOP template" and I have done as u said in this....tutorial as well as some in comment over here but.....not getting fixed the problem that title of articles not showing up...there in my template 2 jquery libs they are <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/> and this one is already in MONOP template <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/> which one do I need to remove. please help me out.
http://nirazz.blogspot.com/2011/12/matrix.html (Plz check this link) Hoping to get help from you.
Regards,
Nirazo Malla
Nepal
replace: .post h3.post-title with .post h2.
DeleteThanks a lot @code Nirvana......You've solved mine problem. I have one more problem that I'll mention in another topic.
DeleteRegards,
Nirazo Shrestha
Nepal
Hey Friend!
ReplyDeleteThanks for the great info! my site is sixsigma.vorsity.net, platform is blogger.
I am stuck at the .post h3.post-title (I guess). Please suggest what to do next.
Regards,
Jeff
I'm also stuck with post titles not showing.
ReplyDeleteWhat should I use in place of .post h3.post-title in my case?
www.TinyYellowBox.com
Thanks,
Nathan
I checked your site again and congratulations you don't need to worry the widget is installed correctly....
Deletejust change the post-title which i told you in my previous comment!
Thank u for this great widget but it's not showing in the blog, I added the codes but the widget is not there and I'm sure I added them right
ReplyDeletehttp://madloligfx.blogspot.com/
I have been using a lil bit different version of this jquery script that wasn't customized like this. It looks really cool. Thanks for bringing this in. H3 & H2 tags problem seemed to be common and almost everyone faced it, thanks to Mohammad & Code Nirvana for helping out everyone. I would like to add that, users also need to add up following style sheet in order to make the arrow icons appear on the either sides.
ReplyDelete( href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet' )
Mohammad could you please update it within your tutorial?
Thanks!! :)
Works like Charms! (Eutectics.blogspot.in) Great work buddy. i am big follower of this website
ReplyDeleteAsalamu Alaykom Brother ,
ReplyDeleteThis is my first comment in this great and wonderful Blog .
But i have a probleme ,.
the probleme is i added all the codes above perfectly and i followed all instruction 100% but no results are shown , so could you please help me .
Hello sir , this is an awesome widget , when i installed it i perfectly appeared
ReplyDeleteBUT below it ' newer post ' and ' older post ' is also showed .
Please tell me how to remove this 'newer post' and 'older post'.
My Blog :-
http://vermakrishan06.blogspot.in/2014/04/prince-of-persia-3-two-thrones.html
If you can not see the arrows (fa-chevron-right and left), add after head the code from below site:
ReplyDeletehttp://fortawesome.github.io/Font-Awesome/get-started/
HI Mohammed,
ReplyDeleteI'm having an extremely hard time trying to do this on blogger. Its been like a year now, and i still haven't been able to do it! It doesnt show up at ALL. IDK why! Not only this but related posts dont either! please tell me what I might be doing wrong.
Didnt work for me
ReplyDeleteBro i have completely done it :D but did not get the last step :/ will you explain me plz :)
ReplyDeleteHi,
ReplyDeleteGreat post, unfortunately I cannot make this work. I'm using custom template and having a hard time in finding the correct class for: .post h3.post-title. Please do help me. My blog is www.ipingip.net
search .post and there might be only one code below body section.
Deletecopy that and past it! DONE
Thanks +My Blogger Tricks for This Awsome Plugin I Set Your Plugin on this http://www.hamaralink.com/2014/05/pakistan-biggest-game-show-jeeto.html
ReplyDeleteThis comment has been removed by the author.
ReplyDeletethx man
ReplyDeleteho to fix problem buttons Next not working
NOT WORK FOR ME
ReplyDeleteAll that you need to do is to enclose this code inside conditional codes as shown below:
ReplyDeleteTHE ABOVE BIG CHUNK CODE IN
I don't understand? How to enclose ?
It doesn't work at all. Why?
ReplyDeleteSalam 3alikom Mohammed,
ReplyDeleteThanks for your Tuts in blogging , and my wish is to become the most successful designer in the world :D . but till that moment to come true , you are the best :)
Kindly check my blog , cause this code didn't work for me .
http://ma3lomat3amh.blogspot.com
Thanks in advance .
Greetings from Egypt.
Oh , Thanks God . i have had 3 tags of , and i was putting my code below the wrong one.
Deletei tried every one , and its done :)
thanks . you'r the best ever . and I'm proud of you as i expect you as a very good Muslim guy .
Exceptional Man..
ReplyDeleteI shall definitely try this out
Hey :) Thank you very much for the code, I really like the widget! Unfortunately I have the same problem like most of the people here: The titles don't show and even though I tried everything possible, nothing seems to work.
ReplyDeleteIt would be very nice if you could tell me what I have to insert instead of ".post h3.post-title" ? That's one of my post pages: http://sparkandbark.blogspot.de/2014/07/how-to-combine-pearl-necklace-casual.html
Thanks in advance
Thank you so much! It works on my blog just fine. You're a genius!
ReplyDeleteHello!
ReplyDeleteI do the flow, but some think wrong in step 3.
Could you explain this step please?
In case i fail at step 3, this next and back still appear?
thank you so much!
sorry about my English not good
Worked wonderfully for me! Thanks so much :)
ReplyDeleteShelly @ www.shellyinreallife.com
Wonderful, I must appreciate it :)
ReplyDeleteHey :) Thank you very much for the code, I really like the widget! Unfortunately I have the same problem like most of the people here: The titles don't show and even though I tried everything possible, nothing seems to work.
ReplyDeleteplease help me. see my blog in be-tandapetik.blogspot.com to solve my problem. My be my template is different with cammon.
Assalamualaikum Muhammad.
ReplyDeleteThank you very much for this great widget. Very useful indeed for blogger blog. I think using table is better compare to unordered list especially to set height equally. At least it works wonderfully on my own responsive template @ubirebus.com.
Thanks again
Hi, i have problem installing the widget. I have a custom template and thus maybe the class and tags are different. I need your help to resolve this. Thank you!
ReplyDeleteHi, I tried this but when I looked at it on Preview Mode, all the codes appear on top. I have the colorful tabs and it works great.
ReplyDeleteCan you help?
Thanks!
Thanks!
ReplyDeleteI love you mybloggertricks
Hello, I added the code in my template but the navigation does not appear, you could help me? I tried to replace the tag h3.post .post-title as you indicate in other reviews but did not work.
ReplyDeletemy blog: http://www.tutoriaisphotoshop.net
Thank you and congratulations for the great job.
Hi guys. I think i'm facing the same issue as you :-( . My blog displays the prev and next buttons, but it does not show the page titles. Any advice? This is my testing blog.
ReplyDeletehttp://alrictechx-test.blogspot.com/2015/01/crossy-road.html
P.D: Mohammad Thanks for your amazing tutorials.
I would like to add a copyright message made by you in my custom template beside that I have.
Greetings!
Hello, thanks for sharing but how i can disable “previous link” in FIRST post and “next link” in LAST post ? I can't do this. Please help :(
ReplyDeleteMost Templates contain .post h1.post-title in place of .post h2.post-title
ReplyDeleteIts possible newer and older label related link only , meaning if click next only show next post that related label post only
ReplyDeleteI've been using this widget. why now this widget does not work properly? Title of the post does not appear
ReplyDeleteYou must have changed your headline tags by following our SEO missing headline tags tutorials.
DeleteChange this .post h3.post-title
with this .post h1.post-title
I tried to change post title but it still display only Previous and Next. Please help: http://3424245334.blogspot.com/2015/07/blog-post_30.html
ReplyDeleteMaybe you must read http://ask.mybloggertricks.com/t/show-next-previous-post-titles-in-blogger-with-jquery-navigation-not-working-proply/4729/2
Deleteit works, thanks! i delete all this line: .post h3.post-title
ReplyDeleteHI! Thanks for share this fabulous pager.
ReplyDeleteI have a cuestion, Can I use this pager with tag filter? I mean, If I'm searching the tag "cats", the next post that will show up will be "cats" as well and not the chronological post tag that will be "dogs" or something. And if not, Can I use another method to filter the tags using the pager?
Thanks for the help! :)
thank you very much mohammad. your blog rocks
ReplyDeletethank you very much it work
ReplyDeleteHi! I got the buttons to show and work but I cant get the title of posts to show!
ReplyDeleteMy blog: http://wemakeplans.blogspot.com
Hi,
ReplyDeleteI read your posts where you guided to change h1, h2, h3 tags for better SEO. I've done it all, and I'm so very thankful to you. But, my blog has poor navigation, as I post in 'Blogger Pages' just so I can arrange each post according to the category it belongs to. I added arrow images and linked them to their respective previous and next posts. But, SEO doesn't seem to recognize that. Check my blog- www.dotgifcomix.com, as you will see, I have a lot of categories. If I would have posted all the content in 'Blogger Posts' then everything would have gotten messy. Now, what I desperately need your help with is to guide me how to make my blog easy to navigate and hence improve SEO. Please, please, help me.
It was not working for me
ReplyDeleteCan you add images to it? Third party images like youtube thumbnails?
ReplyDeleteThis is awesome. I previously used another technique that was JavaScript-heavy and uncustomizable; yours is lighter, loads much faster, and can be modeled any way I like. Thanks for this.
ReplyDeleteFirst of all Thank You so much. I used this code successfully in my website. But Sir, I want next & previous button only for each particular lable in blogger. Is it possible ?
ReplyDeleteI dont need Title. Just need Simple Next & Previous Button for Each particular lable. Please Help.
Hi, it took a while but I finally put this great widget to my blog. Just one problem, post titles not showing up. Could you help me fix it?
ReplyDelete