ব্লগস্পট টিউটোরিয়াল ৩: নাম্বারড পেইজ নেভিগেশন
লিখেছেন: রাশেদ
সোমবার, ১৮ অগাষ্ট ২০০৮ – ৪:০১ পূর্বাহ্ণ৯ টি মন্তব্য
প্রথম পর্বঃ ব্লগস্পট/ব্লগার টিউটোরিয়ালঃ ট্যাবড সাইডবার নেভিগেশন
দ্বিতীয় পর্বঃ ব্লগস্পট টিউটোরিয়ালঃ নতুন টেমপ্লেট সেটআপ
ব্লগস্পট বা ব্লগারে নাম্বারড পেইজ নেভিগেশন সিস্টেম নাই। ফলে Older Post, Newer Post দিয়ে ন্যাভিগেট করতে হয়। তার থেকে যদি সা.ইন, সচলায়তন বা আমাদের প্রযুক্তি এইসব সাইটের মত নাম্বারড পেইজ ন্যাভিগেশন দেয়া যায়, তাহলে অনেক সুবিধাই হবে (অ্যাট লিস্ট আমার কাছে)।
নেটে কয়েকটা স্টাইল আছে এইটার জন্য। আমি যেইটা প্রেফার করি, সেইটা অরিজিনালটার মডিফাইড ভার্শন।
১. ব্লগার এ লগইন করুন।
২. আপনার বর্তমান টেমপ্লেটটির ব্যাকআপ নিন। তার জন্য ক্লিক করুনঃ ড্যাশবোর্ড>লেআউট>Edit HTML>Download Full Template.
৩. এবার প্রথমে স্টাইল কোড অ্যাড করতে হবে। সেজন্য </b:skin> লেখাটা খঁজে বের করুন ও নিচের কোডটুকু পেইস্ট করুন ঠিক তার উপরে।
টিপসঃ ড্যাশবোর্ড>লেআউট>Edit HTML>Expand Widget Templates এ টিক দিন। তারপর Crtl+f চেপে সার্চ উইন্ডো ওপেন করে </b:skin> লিখে সার্চ দিন; পেয়ে যাবেন।
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
৪. এখন Blog Posts লিখে সার্চ দিন Edit HTML উইন্ডোতে। তাহলে নীচের অংশের মত লেখা দেখতে পাবেন।
<b:section class='main' id='main' showaddelement='no'> [এই লাইনটা নাও থাকতে পারে।]
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
৫. এখন উপরের ঐ অংশটুকুর ঠিক নীচে নিচের কোড পেইস্ট করুন।
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount = 5;
var displayPageNum = 4;
var upPageWord = 'আগের পাতা';
var downPageWord = 'পরের পাতা';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> সর্বমোট ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999"; type="text/javascript"></script>
যদি আপনি .com এর বদলে অন্য কিছুতে ব্লগটি হোস্ট করে থাকেন তাহলে var isFirstPage লেখাটি খুঁজে বের করে .com এর বদলে সেই ডোমেইনের এক্সটেনশন দিয়ে দিন।
বিকল্পঃ
যদি এত ঝামেলা করতে না চান, তাহলে নীচের ফাইলটি ডাউনলোড করুন ও পরের স্টেপগুলো ফলো করুন। আপনার নাম্বারড ন্যাভিগেশন নীচের মত দেখাবে অবশ্য তাহলে।
১. ব্লগারে লগইন করুন।
২. ড্যাশবোর্ড>লেআউট> পেইজ এলিমেন্টস এ যান।
৩. Add a Page Element (Add a gadget: যদি ব্লগার ইন ড্রাফট ইউজ করেন) এ ক্লিক করে HTML/JAVASCRIPT সিলেক্ট করুন। যেখানে নীচের টেক্সট ফাইলটির কোডগুলো কপি করে দিন ও সেইভ করুন।
৪. এবার ঐ সেইভ করা এলিমেন্ট/গ্যাজেটটি ড্র্যাগ করে Blog Posts অংশ এর নীচে নিয়ে যান।
৫. সেইভ করুন ও আপনার ব্লগ দেখুন।
বি. দ্র. যে কোন একটি উপায়ে ন্যাভিগেশন প্যানেল অ্যাড করে নিতে পারেন। আর var pageCount = 5; এই ৫ দিয়ে বুঝাচ্ছে এই পাতায় ৫ টি পোস্ট দেখাবে। আর var displayPageNum = 4; দিয়ে বুঝাচ্ছে মোট ৫ টি পেইজের নাম্বার ফ্রন্ট পেইজে দেখাবে। Dashboard>Layout>Edit HTML এ গিয়ে এই কোডগুলো Ctrl+f দিয়ে সার্চ করে বের করে ইচ্ছেমতন নাম্বার দিতে পারেন।
কৃতজ্ঞতাঃ Amanda Fazani এর লেখা একটি পোস্ট। বিকল্পটি কালেক্ট করা হয়েছে Mohamed Rias এর একটি পোস্ট থেকে।
(০ ভোট, গড়: 0/5)
লগ ইন করুন রেটিং এর জন্য!
Loading ...
(০ ভোট, গড়: 0/5)লগ ইন করুন রেটিং এর জন্য!
Loading ...ট্যাগঃ
সুশান্ত ১৮ অগাষ্ট ২০০৮ ৪:০৫ পূর্বাহ্ণ
চলেন তাইলে আমারব্লগ রে ব্লগ স্পটে নিয়ে যাই
রাশেদ অগাষ্ট ১৮, ২০০৮ ৪:০৭ পূর্বাহ্ণ
খিক খিক!
আবু সাঈদ জিয়াউদ্দিন ১৮ অগাষ্ট ২০০৮ ৮:৪২ পূর্বাহ্ণ
জীবন মনে হয় কঠিন হয়ে যাচ্ছে
রাশেদ অগাষ্ট ১৮, ২০০৮ ৪:২৫ অপরাহ্ণ
অ্যা! কারে কইলেন। (H)
হট্টগোল ১৮ অগাষ্ট ২০০৮ ৫:২১ অপরাহ্ণ
যে কোনো পাতায় পোস্ট পুরো দেখায়। এটাকে অধেক করে বাকিটুকু বিস্তারিত পড়ুন এ ফেলা যায় কিকরে?
রাশেদ অগাষ্ট ১৮, ২০০৮ ৫:২৭ অপরাহ্ণ
হু, যাবে। আমি ঐরকম করছি। নেক্সটাতে লিখবো।
আপনি আমার নাম্বারটা কালেক্ট করে একটা ফুন দিতে পারেন। আপনাকে খুঁজতাছি।
হট্টগোল ১৮ অগাষ্ট ২০০৮ ৫:৩৩ অপরাহ্ণ
১ ঘন্টা পর ফুন দিতাছি।
রাশেদ অগাষ্ট ১৮, ২০০৮ ৬:৩০ অপরাহ্ণ
হোকে।