Page Navigation Widget For Blogger Style 2 (Series)

This is the second style of the page navigation series. In my previous post i shared you the white color page navigation widget for blogger. You can get it from below. In this post I am sharing you another different look page navigation widget. This widget is the combination of orange, black and white color which you can see in the image above. This also perfectly works on home page, label page as well as post page. I will be sharing others style soon. So don't forget to subscribe us. So lets start.
Page Navigation Series : GulmiResunga.com
1: Page Navigation Widget For Blogger Style 1  : CLICK ME :)
2: Page Navigation Widget For Blogger Style 2 : CURRENT POST
3: Page Navigation Widget For Blogger Style 3 : CLICK ME :)
4: Page Navigation Widget For Blogger Style 4 : PROCESSING
5: Page Navigation Widget For Blogger Style 5 : PROCESSING

Page Navigation Widget Style 2

Before starting this tutorial i recommend you to backup the blogger template.(Learn How to backup templates on blogger older interface & How to backup templates on blogger new interface.)
  • For Older Blogger Interface : Go to Blogger > Design >Edit HTML>Expand  Widget Template .
  • For Newer Blogger Interface : Go to Blogger>Template>Edit HTML>Proceed>Expand Widget Template.
  • Then search (CTRL+F) for  below code.
<b:includable id='mobile-index-post' var='post'>
  • Paste below code before the above given code
<b:includable id='page-navi'><div class='pagenavi'><script type='text/javascript'>var pageNaviConf = {perPage: 7,numPages: 5,firstText: &quot;First&quot;,lastText: &quot;Last&quot;,nextText: &quot;&#187;&quot;,prevText: &quot;&#171;&quot;}</script><script src='http://awesome-navigation.googlecode.com/files/onlinetrick.js' type='text/javascript'/><div class='clear'/></div></b:includable>

Customization: 
  • Replace the desire post you want to show per page with number 7 &  the number you want to show on page navigation with the number 5 .
  • Then again search (CTRL+F) for  below code.
<b:include name='nextprev'/>
  • And Replace the above code with the following given code below.
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:include name='page-navi'/><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><b:include name='page-navi'/></b:if><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><b:include name='nextprev'/></b:if></b:if>
  • It time to add the CSS Code so that we can give Page Navigation Widget a attractive look as shown in picture above.So search (CTRL+F) for  ]]></b:skin> and add the below code just before ]]></b:skin>
    #blog-pager, .pagenavi {     clear: both;     text-align: center;     margin: 30px auto 15px;}.pagenavi .pages {display: none;}#blog-pager a, .pagenavi span, .pagenavi a {padding: 5px 10px;text-decoration: none;font-family: arial;color: white;margin: 2px;background: black;background-position: bottom;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;border-radius: 30px;font-size: 20px;}#blog-pager a:hover, .pagenavi a:hover {background: orange;}#blog-pager-older-link, #blog-pager-newer-link {     float: none;}.pagenavi .current {background: orange;}
    • Save the template and your are done.

    If you have any question then feel free to ask. You can use blogger comment box to put your quires and stay tuned or subscribe us to get this series right in your inbox. 

    COMMENTS

    Name

    Aastha Band,1,Alcatel,1,Android,17,Android One,1,Anju Pant,26,Apple,18,ARK,3,Badri Pangeni,1,Basanta Thapa,2,Bhojraj Kafle,2,Bima Kumari Dura,6,Bimal Raj Chhetri,2,Bindu Pariyar,5,Birahi Karki,1,Bishnu Khatri,2,Bishnu Majhi,8,Blogger,130,Blogger Templates,16,Blogger Widgets,57,Blogging Tips and Tricks,74,BQ,1,Car Price in Nepal,2,Celkon,4,CG TV,1,Colors,9,Computer Tips,58,Dashain,1,Dashain Tihar Songs,43,Datsun,1,Deepak Limbu,8,Dell,2,Deuda,1,Devi Gharti,30,English Jokes,24,Entertainment,948,Facebook,39,FIFA World Cup,2,Fonts,5,Free Giveaway,6,Free Icons,3,Free SMS,5,Gionee,3,Google,16,Google Plus,5,Guest Post,32,Gurung Movie,2,Hemant Sharma,4,Hemanta Shisir,18,Hero,1,Hindi Jokes,5,Hollywood,1,How To,41,Huawei,15,Hum Gaire,2,Increase Blog Traffic,14,Indira Joshi,4,Info Dose,425,Internet Tips,92,Intex,1,Jokes Collection,97,Juna Shrish,6,Jyoti Magar,1,Kalpana Devkota (Poudel),6,Kamal Shrestha,1,Karbonn,1,Kauda Song,2,Keshu Gurung,1,Khuman Adhikari,9,Komal Oli,1,Korean Songs,1,Krishna Gurung,2,Kulendra BK,3,Laptop Price,2,Lava,5,LG,6,LG TV,2,Load Shedding Schedule,19,Lok Dohori Songs,268,Magar Bhasa,2,Mandavi Tripathi,6,Manju Poudel,2,Manoj Raj,7,Melina Rai,1,Micromax,12,Microsoft,2,Mobile Phone Price in Nepal,102,Movie Promo,80,Muna Thapa Magar,7,Narendra Pyasi,17,Ncell,18,Nepali Cricket,7,Nepali Full Movie,110,Nepali Jokes,72,Nepali Model,1,Nepali Movie Songs,199,NTC,22,Obi Worldphone,2,Online Banking,4,Online Earning,7,Page Navigation,4,Panasonic,3,Panasonic TV,1,Pashupati Sharma,5,Philips TV,1,Photo Gallery,7,Pinterest,2,Pokemon Go,1,Pop and Adhunik Songs,206,Poster Release,103,Prakash Katuwal,4,Pramod Kharel,11,Purnakala BC,29,Puskal Sharma,1,Radhika Hamal,6,Rajan Gurung,1,Rajesh Payal Rai,6,Rajina Rimal,11,Raju Gurung,2,Raju Pariyar,5,Ram Krishna Dhakal,4,Ramji Khand,15,Rishi Khadka,1,Roila Song,4,Roshan Gaire,1,Sabina Gurung,1,Salaijo,4,Samsung,22,Samsung TV,4,Sarada Tamang,1,Sardarji Jokes,5,SEO Tips,6,Sharmila Gurung,2,Shiva Pariyar,20,Shreedevi Devkota,2,Sindhu Malla,1,Smart Phones,23,Smriti Pun,1,SMS,1,Software Download,14,Sony,3,Sony TV,1,Sudip Adhikari,1,Swaroop Raj Acharya,10,Tata,1,Technology,264,Teej Song,49,Tejas Regmi,2,Tika Pun,16,Top List,2,Trishna Gurung,8,TU Notice,10,TV Price in Nepal,10,Twitter,8,Two Wheeler Price,2,Udit Narayan Jha,4,Useful Tools,10,Useful Websites,73,Videcon,1,Wallpapers,4,Windows 8,2,WordPress,2,Xiaomi,6,Yam Chhetri,4,Yamaha,1,YouTube,13,ZTE,1,
    ltr
    item
    GulmiResunga.com: Page Navigation Widget For Blogger Style 2 (Series)
    Page Navigation Widget For Blogger Style 2 (Series)
    Page Navigation Widget For Blogger Style 2 (Series)
    http://3.bp.blogspot.com/-wS0TYWSzIqc/UQ9eokUEoxI/AAAAAAAAFFM/3H60K2T_-o8/s320/Page+Navigation_style_2.png
    http://3.bp.blogspot.com/-wS0TYWSzIqc/UQ9eokUEoxI/AAAAAAAAFFM/3H60K2T_-o8/s72-c/Page+Navigation_style_2.png
    GulmiResunga.com
    http://www.gulmiresunga.com/2013/02/page-navigation-for-blogger-style-2.html
    http://www.gulmiresunga.com/
    http://www.gulmiresunga.com/
    http://www.gulmiresunga.com/2013/02/page-navigation-for-blogger-style-2.html
    true
    9098666623388878892
    UTF-8
    Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy