பிளாக்கருக்கான அழகிய Numbered page Navigation

Views:
வலைபூக்களில்  ஒவ்வொரு பக்கமாக செல்ல  Older Post என்பதை கிளிக் செய்து ஒவ்வொரு பக்கமாக பார்வையிடுவோம். இதனால் தொடர்ந்து ஒவ்வொரு பக்கமாகதான் நாம் பார்க்க முடியும் அதிகம் அதிக பக்கத்தையுடைய வலைபூக்களில் இவ்வாறு பார்ப்பது  ரொம்ப கடினமான வேலையாகிவிடும்.
இதனால் படிப்பவர்களுக்கும் சோர்வடைந்து விடுவார்கள்.


Older post என்பதற்கு பதிலாக  Numbered Page Navigation கொடுத்தால் விரைவாக பக்கங்களை பார்வையிடலாம்.... வலைப்பூவும் ஒரு சிறந்த காட்சியமைப்பையும் தரும்

(இந்த Numbered Page Navigation ஆனது ஏனைய Numbered Page Navigation ஐ விட விரைவாக லோடாகும் வகையில் வடிவமைக்கப்பட்டுள்ளது மற்றும் அழகிய தோற்றத்தையும் கொண்டுள்ளது)

Numbered Page Navigation எனது Demo Page ஐ பார்வையிட இங்கே அழுத்தவும்

அழகிய Numbered Page Navigation ஐ பிளாக்கரில் எப்படி இணைப்பது என்பதை பார்ப்போம்

படிமுறை - 1 -Apply Style

1. உங்கள் வலைபூவிற்கு சென்று Login செய்து கொள்ளுங்கள்,
2. பின்னர் Layout ---> Edit html கிளிக் செய்யுங்கள்,
3. அதன்பின் Expand Widget Templates’என்பதை கிளிக் செய்யுங்கள்

4. பின் கிடைக்கும் வார்ப்பு நிரலில்
]]></b:skin>
 என்பதை கண்டுபிடித்து அந்த வரிச் சொல்லுக்கு மேல் பின் வருவதை பிரதி பண்ணுங்கள்..
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }

படிமுறை - 2 -Apply Javascript

வார்ப்பு நிரலில்
</body>
 என்பதை கண்டுபிடித்து அந்த வரிச் சொல்லுக்கு மேல் பின் வருவதை பிரதி பண்ணுங்கள்..
&lt;script type='text/javascript'&gt;
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
&lt;/script&gt;
&lt;script src='http://farhathcool.googlecode.com/svn/trunk/gadgets/pagenavi/pagenaviv202-min.js' type='text/javascript'&gt;&lt;/script&gt;

*****உங்கள் பிளாக்குக்கு வேண்டிய மாற்றங்கள்****

var postperpage=7;

var numshowpage=4;
  • Postperpage : ஒரு பக்கத்தல் உள்ள Post களின் எண்ணிக்கை
  • numshowpage : எத்தனை இலக்கங்கள்  page Navigation தோன்ற வேண்டும் (4)

படிமுறை - 3

வார்ப்பு நிரலில்
 'data:label.url'
 என்பதை கண்டுபிடித்து அந்த வரிச் சொல்லுக்கு பதிலாக பின்வருவதை பிரதி பண்ணுங்கள்..
'data:label.url + &quot;?&amp;max-results=7&quot;'
* 7 என்பதற்கு பதிலாக ஒரு பக்கத்தல் உள்ள Post களின் எண்ணிக்கையை தரவும் *


Save Template என்பதை கிளிக் செய்து உங்கள் Template ஐ Save செய்து கொள்ளுங்கள்

இப்பொழுது உங்கள் பிளாக்கரில்  அழகிய Numbered page Navigation இணைத்தாகிவிட்டது

****நன்றி - எனது இந்த பதிவு பிடித்திருந்தால் மறக்காமல் ஓட்டு போடவும்****
Tags:

5 கருத்துகள்:

  1. Amiable dispatch and this enter helped me alot in my college assignement. Say thank you you for your information.

    பதிலளிநீக்கு
  2. Dear friend, i haven't "data:label.url" in my blog html. kindly help me

    Regards
    ungalblog.blogspot.com

    பதிலளிநீக்கு
  3. Sorry for my bad english. Thank you so much for your good post. Your post helped me in my college assignment, If you can provide me more details please email me.

    பதிலளிநீக்கு
  4. மிகவும் பயனுள்ளதாக இருந்தது. ஆனால் படிமுறை 1 மற்றும் 3 யில் ]]> மற்றும் 'data:label.url' எனது பிளாக்யில் மேற்கொண்ட text இல்லை. என்ன செய்வது எனக்கு தங்கள் மேலான ஆலோசனை வழங்கவும்.

    பதிலளிநீக்கு

இந்த பதிவு பற்றிய உங்கள் கருத்து
உங்கள் சந்தேகங்களை தனிப்பட்ட முறையில் கேட்க விரும்பினால் மெனுபாரில் உள்ள Contact me என்பதை அழுத்தி உங்கள் சந்தேகங்களை கேட்கலாம்..