My Btrick ব্লগটি বেস্ট ব্রাউজ করা যায় ফ্যায়ারফক্স দিয়ে My Btrick ব্লগটিকে পারফেক্ট ভাবে ব্রাউজ করতে ফ্যায়ারফক্সের লেটেস্ট পোর্টবেল ভার্সন ডাউনলোড করুন এখান থেকে My Btrick ব্লগটি বেস্ট ব্রাউজ করা যায় ফ্যায়ারফক্স দিয়ে My Btrick ব্লগটিকে পারফেক্ট ভাবে ব্রাউজ করতে ফ্যায়ারফক্সের লেটেস্ট পোর্টবেল ভার্সন ডাউনলোড করুন এখান থেকে My Btrick ব্লগটি বেস্ট ব্রাউজ করা যায় ফ্যায়ারফক্স দিয়ে My Btrick ব্লগটিকে পারফেক্ট ভাবে ব্রাউজ করতে ফ্যায়ারফক্সের লেটেস্ট পোর্টবেল ভার্সন ডাউনলোড করুন এখান থেকে My Btrick ব্লগটি বেস্ট ব্রাউজ করা যায় ফ্যায়ারফক্স দিয়ে My Btrick ব্লগটিকে পারফেক্ট ভাবে ব্রাউজ করতে ফ্যায়ারফক্সের লেটেস্ট পোর্টবেল ভার্সন ডাউনলোড করুন এখান থেকে

Sunday, November 22, 2009

ব্লগার ব্লগে স্টাইলীশ পেজ নেভিগেসন widget [My Btrick ব্লগ স্টাইল]



image  আমার আগের পোস্টে ব্লগারের সাইডবারে কীভাবে ড্রপ-ডাউন সাইট ম্যাপ ক্রিয়েট করা যায় সেই ব্যাপারে একটি পোস্ট লিখেছিলাম।সাইডবারে ড্রপ-ডাউন সাইট ম্যাপ যেমন ব্লগের লুক ইনক্রিস করে একটি স্টাইলীশ পেজ নেভীগেশন wiget একই ভাবে ব্লগের লুক ইনক্রিস করে।এক্সস্যামপ্যেল হিসাবে My Btrick ব্লগের পেজ নেভিগেশন widget দেখা যাবে।My Btrick ব্লগের মত একই রকমের পেজ নেভিগেশন widget আপনার ব্লগে প্লেস করার জন্য নিচের প্রস্যেস ফলো করতে হবে।

image
  • ব্লগারে ইউস্যার আইডি এবং প্যাসওয়ার্ড দিয়ে লগিং করতে হবে।
  • একাউন্টে লগিং হলে Layout / Page Elements ওপেন করতে হবে।
  • Page Elements এ Add a Gadget ক্লিক করে একটি নিউ HTML / Javascript নিতে হবে।
2
  • এখন নিচের কোডটি Configure HTML / Javascript উইন্ডোতে পেস্ট এটিকে সেভ  করতে হবে।

<style type="text/CSS">
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #7AA1C3;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #7AA1C3;
background-color:#F6F6F6;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #7AA1C3;
background: #F6F6F6;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #7AA1C3;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#7AA1C3;
}
</style>
<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 = 2;
var displayPageNum = 5;
var upPageWord = 'Previous';
var downPageWord = 'Next';
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"> Pages ('+(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>




  • ক্রিয়েট করা Page Navigation Widget টি ড্রাগ করে  ব্লগের পেজ এলিমেন্টস এর ঠিক Blog Posts এর নিচে প্লেস করে দিতে হবে।
3
  • ফাইনালী টেমপ্লেটটি সেভ করে View Blog থেকে এটির প্রিভিউ দেখা যাবে।


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
Related Posts with Thumbnails
YOUR ADSENSE CODE GOES HERE

7 comments:

রনি পারভেজ on November 22, 2009 at 12:28 PM said...

Thank u Bro..আমার কাজে লেগেছে পোস্টটি।

রনি পারভেজ on November 22, 2009 at 12:30 PM said...

কিভাবে Read More অপশনটি যোগ করলেন? এর কোডটুকু চাই।

Amit on November 22, 2009 at 7:33 PM said...

@Rony
পোস্টটি কাজে লেগেছে জেনে ভাল লাগলো,কিন্তু আপনার প্রশ্নটি আমার কাছে ক্লিয়ার না।Read More এড করার জন্য ব্লগার এডিটরেই অপশন রয়েছে।

Nader on December 10, 2009 at 2:57 PM said...

অত্যান্ত দুঃখের সঙ্গে বলতে হচ্ছে যে, আমি আপনার কথা মত সকল কিছূ করেছি কিন্তু কেন জানি হচ্ছে না৷
এই কথাটি আমি বুঝতে পারিনি?
ক্রিয়েট করা Page Navigation Widget টি ড্রাগ করে ব্লগের পেজ এলিমেন্টস এর ঠিক Blog Posts এর নিচে প্লেস করে দিতে হবে।

Amit on December 10, 2009 at 5:41 PM said...

@Nader
আমি এই মাত্র text/css কোডটি চ্যেক করলাম এর মধ্যে কোন এরর নেই এবং পার্ফ্যেকটলী কাজ করছে।
আমার এক্সপ্যারিয়েন্স হিসাবে নিচের লেখা ম্যাটারগুলি চ্যেক করে নিন
1. পেজ নেভিগেসন widget টি কাজ করার জন্য আপনার ব্লগে কমসে-কম 7 থেকে 10 টি পোস্ট থাকতে হবে।
2.আপনার ব্লগের মেন পেজে কটি পোস্ট শো করা আছে ? তা চ্যেক করে নিন [Seetings >> Formatting >> Show থেকে চ্যেক করা যাবে]
3. text/css কোডটি কপি-পেস্ট করার সময় A to Z কপি-পেস্ট হয়েছে কীনা সেটি স্যিউর করে নিন।

এই কথাটি আমি বুঝতে পারিনি?
ক্রিয়েট করা Page Navigation Widget টি ড্রাগ করে ব্লগের পেজ এলিমেন্টস এর ঠিক Blog Posts এর নিচে প্লেস করে দিতে হবে।
এর মানে শেষ ইমেজটি ভাল-ভাবে নোটিস করলেই বোঝা যাবে।এর পরেও কোন প্রবলেম হলে এখানে কমেন্টের মাধ্যমে জানান।

Sakil Imran on January 29, 2010 at 9:28 PM said...

অসাধারণ একটি পোস্ট। আমার ব্লগে ব্যবহার করলাম। দারুন কাজ করছে। অসংখ্য ধন্যবাদ।

A K M borhanich on April 3, 2011 at 10:36 PM said...

বস জট্টিল একটা ব্লগ বানাইছেন । আর প্লীজ জানাবেন কি কিভাবে কালার ভেরিয়েশন আনলেন ?? প্লীজ আর পাশের ফেজবুক আর টুইটারের বাটন ।প্লীজ

কনফ্যিউস?স্যাজেস্যান বা প্রশ্ন ফ্রীলী জানান!

 

| My Btrick © 2009. All Rights Reserved By Amit Santra | Template Style by My Btrick.com | Design by Amit Santra | Back To Top |