*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
Blogger Tips and TricksLatest Tips And TricksBlogger Tricks
Showing posts with label Blog Site Developer. Show all posts
Showing posts with label Blog Site Developer. Show all posts

ব্লগার Template-কে আকর্ষণীয় ডিজাইন করার জন্য যা যা প্রয়োজন!

প্রফেশনাল ব্লগার টেমপ্লেট তৈরির ১ম সিরিজের শেষ পর্ব শুরু করছি। আমরা ইতিপূর্বে এ সস্পর্কে ০৭ টি ‍টিউটরিয়াল ধারাবাহিকভাবে শেয়ার করেছি। এ ০৭ টি পোষ্টের মাধ্যমে একটি সাধারণ ব্লগার টেমপ্লেট-কে প্রফেশনাল Look দেয়ার কাজ শেষ হয়েছে। ঐ পোষ্টগুলির মাধ্যমে আপনি মাত্র ৩০-৪০ মিনিট সময় ব্যয় করে একটি নরমাল টেমপ্লেটকে আকর্ষণীয় করে তুলতে পারবেন।
ব্লগার Template-কে আকর্ষণীয় করার জন্য যা যা প্রয়োজন!
একটি ভালমানের টেমপ্লেট এর Structure যে রকম হওয়ার দরকার তার সব কাজ আমরা ইতিপূর্বে শেষ করেছি। আজকের এই পোষ্টটির উদ্দেশ্য হচ্ছে একটি টেমপ্লেটকে আরও আকর্ষণীয় করার জন্য কি কি আনুষাঙ্গিক বিষয় এবং উইজেট যুক্ত করার প্রয়োজন হয় তা নিয়ে বিস্তারিত আলোচনা করা। তার আগে আমাদের ১ম সিরিজের সকল পোষ্টের সমন্বয়ে তৈরি করা টেমপ্লেটটি কেমন হল তার লাইভ ডেমো দেখে নিন -  Live Demo

আমরা ইতিপূর্বে যে ০৭ টি টিউটরিয়াল শেয়ার করেছি সেগুলির মাধ্যমে আপনি একটি পরিপূর্ণ পার্সনাল ব্লগ তৈরি করে নিতে পারবেন। একটি পার্সনাল ব্লগ যে ধরনের হওয়া উচিত তার সবকিছুই পোষ্টগুলিতে শেয়ার করা হয়েছে। আপনি হয়ত ভাবছেন আমি বার বার পার্সনাল ব্লগ কেন বলছি? তার কারণ হচ্ছে পার্সনাল ব্লগ এবং ম্যাগাজিন ব্লগ বা নিউজ পেপার ব্লগ এ গুলি একে অন্য হতে ভিন্নরকমের হয়। পার্সনাল ব্লগের Interface হয় সচ্ছ এবং নিখুঁত। অন্যদিকে নিউজ পেপার বা ম্যাগাজিন ব্লগে বিভিন্ন ধরনের বাড়তী অপশন ব্যবহার করা হয়, যা আপনার জন্য মোটেও প্রযোজ্য নয়। এখন আমরা আপনাদের সাথে শেয়ার করব একটি ব্লগকে আকর্ষণীয় করার জন্য যা যা আনুষাঙ্গিক বিষয় প্রয়োজন।
  1. Auto Read More With Thumbnail: ডিফল্ট ব্লগার টেমপ্লেটে Read More অপশন যুক্ত করা থাকে না। ফলে দেখা যায় ব্লগ পোষ্টটির সম্পূর্ণ লেখা হোম পেজে শো করে এবং পোষ্টগুলি খুবই বিশ্রি দেখায়। তাছাড়া ডিফল্ট সিস্টেমে আপনার ব্লগের হোম পেজে মাত্র ০৫ টি পোষ্ট শো করালে ব্লগের হোম পেজটি অনেক বড় হয়ে যাবে। এই সমস্যা থেকে পরিত্রান পাওয়ার জন্য আপনাকে Auto Read More অপশনটি যুক্ত করতে হবে। এই পদ্ধতী ব্লগের হোম পেজের সুন্দর্য বৃদ্ধি হওয়ার পাশাপাশি এক সাথে অনেক পোষ্টও শো করাতে পারবেন। এই লিংক হতে Auto Read More With Thumbnail অপশনটি যুক্ত করে নিতে পারেন। Read More বাটন স্টাইল করার জন্য এই পোষ্টটি দেখতে পারেন।
  2. Search Box: প্রত্যেকটি ব্লগ কিংবা ওয়েবসাইটেরই একটি Search Box থাকা আবশ্যক। Search Box ছাড়া কোন প্রকার ওয়েবসাইটই পূর্ণতা পাবে না। এই জন্য ব্লগার ডিফল্টভাবে তাদের নিজস্ব সার্চ বক্স যুক্ত করার অপশন রেখেছে, যাতে করে যে কেউ সহজে সার্চ বক্স যুক্ত করতে পারে। কিন্তু ব্লগার তাদের নিজস্ব ডিজাইনের যে সার্চ বক্সটি রেখেছে তাথে কোন প্রকার ডিজাইন করা নেই। আপনি এই লিংক থেকে আমাদের ডিজাইন করা লেটেস্ট মডেলের সার্চ বক্স যুক্ত করে নিতে পারেন।
  3. Popular Posts: এটি অত্যন্ত গুরুত্বপূর্ণ একটি উইজেট। সব ধরনের ব্লগে এটি যুক্ত করা হয়ে থাকে। গুগল ব্লগার টিম ডিফল্টভাবে এ ধরনের একটি উইজেট তৈরি করে রেখেছে। কাজেই খুব সহজে আপনি এটি আপনার ব্লগের সাইডবারে যুক্ত করতে পারবেন। পরবর্তী কোন এক সময় আমরা এটিকে আরও অধীক স্টাইল করে আপনাদের সাথে শেয়ার করব।
  4. Recent Post: ব্লগের পাঠকদের ব্লগে দীর্ঘ সময় অবস্থান করানো বা Page View বৃদ্ধি করার জন্য এ ধরনের Widget ব্লগের সাইডবারে যুক্ত করা হয়ে থাকে। এর ফলে পাঠকদের যে কোন পোষ্ট থেকেই আপনার ব্লগের সম্প্রতি পোষ্ট সম্পর্কে ধারনা দিতে পারবেন। আমরা খুব শীঘ্রই এ ধররেন একটি পোষ্ট আপনাদের সাথে শেয়ার করব।
  5. Related Posts: ব্লগের Page View বৃদ্ধি করার জন্য এবং ব্লগে সুন্দর্য বদ্ধি করার জন্য এটিও একটি কার্যকরী উপায়। এ ধরনের উইজেট প্রায় সকল ধরনের ব্লগেই ব্যবহার করা হয়ে থাকে। আমরা ইতিপূর্বে আমাদের ব্লগে এ ধরনের দুটি উইজেট শেয়ার করেছি। এই লিংক থেকে আমাদের তৈরি Related Posts উইজেটগুলি দেখে আসতে পারেন।
  6. আনুষাঙ্গিক ডিজাইনঃ এ ছাড়াও ব্লগকে আর আকর্ষণীয় করার জন্য বিভিন্ন ধরনের উইজেট এবং ডিজাইন যুক্ত করতে পারেন। আপনার ব্লগকে মনেরমত করে সাজানোর জন্য সকল উপাদানই আমাদের ব্লগে পাবেন। অদূর ভবিষ্যতে আরও অনেক ভালমানের কনটেন্ট আমাদের ব্লগে পাবেন।
সর্বশেষঃ আশাকরি আমাদের ০৮ টিউটরিয়াল আপনার ব্লগকে যে কোন ভালমানের কাষ্টম ব্লগের কাছাকাছি নিয়ে যাবে। আসলে আমার উদ্দেশ্যে ছিল অন্যের কাষ্টমাইজ করা টেমপ্লেট ব্যবহার না করে আপনার নিজের তৈরি টেমপ্লেট ব্যবহার করাতে। কারণ যে যতই ভালমানের টেমপ্লেট তৈরি করুক না কেন সে আপনাকে সেটি সম্পূর্ণ ফ্রিতে ব্যবহার করতে দেবে না। যদিও আপাত দৃষ্টিতে দেখতে ফ্রি মনে হবে, তারপরও ভালভাবে লক্ষ্য করলে দেখবেন সেটির ভীতরে কিছু Encrypt করা Scripts থাকবে, যে গুলি আপনি Remove করতে পারবেন না। Encrypt করা Scripts গুলি Remove করলে ব্লগটি ঠিকমত কাজ করবে না। আর কিছু না করলে অন্তত নিজের তৈরি একটি ব্লগ তৈরি করে ব্যবহার করুন। তাহলে নিজের তৈরি ব্লগের স্বাচ্ছন্দ ও মজা আলাদা হবে।
Read More »

ব্লগার Template থেকে Subscribe to: Posts (Atom) ডিলিট করুন

সব ধরনের ব্লগার টেমপ্লেটের সাথে ডিফল্টভাবে "Subscribe to: Posts (Atom)" লিংক দেয়া থাকে। সেখান থেকে পাঠকরা আপনার ব্লগটি Subscribe করে নিতে পারে। তবে বেশীরভাগ ব্লগ ডেভেলপার বা ইউজাররা এই Subscribe to: Posts (Atom) লিংকটি ব্যবহার করতে চান না। কারন ডিফল্টভাবে থাকা এই Feed Link থেকে সকল ধরনের সুবিধা পাওয়া যায় না। যার কারনে প্রায় সব ধরনের ব্লগাররা তাদের ব্লগে Rss Feed ব্যবহার করে থাকেন। ফলে এই Subscribe to: Posts (Atom) লিংকটি ব্যবহার করার কোন প্রয়োজনই থাকে না।
Remove-Blogger-Subscribe-to-Posts-Atom
উপরের চিত্রের এই লিংকটি ব্লগ পোষ্টের নিচের দিকে দেয়া থাকে। এই লিংকে ক্লিক করেই পাঠকরা ব্লগের Feed পোষ্ট দেখতে পান। আমরা ইতোপূর্বে ব্লগে Rss Feed কি বা কেন এবং কিভাবে ব্লগে যুক্ত করতে হয় তা নিয়ে একটি বিস্তারিত পোষ্ট লিখেছি। আপনি ইচ্ছে করলে সেখান থেকে আপনার ব্লগের জন্য Rss Feed তৈরী করে নিতে পারেন।

কিভাবে Remove করবেনঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
edit-blogger-template
  • তারপর ব্লগার টেমপ্লেটের যে কোন জায়গায় ক্লিক করে কীবোর্ড হতে Ctrl+F প্রেস করুন।
blogger-code-search
  • এখন ব্লগার টেমপ্লেট হতে নিচের কোডগুলি সার্চ করুন।
<b:include data='feedLinks' name='feedLinksBody'/>
  • তারপর উপরের এই ট্যাগটি ডিলিট করে Template Save করুন। এখন থেকে আপনার ব্লগার টেমপ্লেটে Subscribe to: Posts (Atom) লিংকটি দেখতে পাবেন না।
Read More »

ব্লগার Template এর Header অংশে আকর্ষণীয় Style যুক্ত করুন

প্রফেশনাল ব্লগার টেমপ্লেট তৈরির ৪র্থ পর্ব শুরু করছি। আমাদের আজকের পর্ব ব্লগের গুরুত্বপূর্ণ অংশ Header. আমরা আজ আপনাদের সাথে শেয়ার করব কিভাবে ব্লগার Template এর Header অংশকে প্রফেশনাল Look দেবেন? আমাদের আজকের পর্ব থেকে ব্লগার টেমপ্লেটের ব্যহিক গঠনের পরিবর্তন লক্ষ্য করতে পারবেন।
ব্লগার Template এর Header অংশকে আকর্ষণীয়ভাবে তৈরি করুন
উপরের চিত্রে দেখুন বেশ কয়েকটি ম্যানুবার এবং Social Media বাটন দেখা যাচ্ছে। এই অংশটি ব্লগার টেমপ্লেট এর সবার উপরে থাকবে। এটিকে ওয়েব ডিজাইনের ভাষায় Top Nav Bar বলা হয়। আমরা এটিতে Menu Bar যুক্ত করার পাশাপাশি Social Media বাটনও যুক্ত করেছি। যার ফলে Top Nav Bar টি আরও আকর্ষণীয় হয়ে উঠবে। তাছাড়া এটির Social Media Button গুলিতে আকর্ষণীয় Css3 ইফেক্ট দেয়া হয়েছে। আপনার ব্লগে এটি যুক্ত করলে এর সম্পর্কে আরও পরিষ্কার ধারনা নিতে পারবেন। এ ধরনের Top Bar কেবলমাত্র প্রফেশনাল ব্লগার টেমপ্লেটে দেখা যায়।

কিভাবে Header কাষ্টমাইজ করবেন?

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
  • কিবোর্ড হতে Ctrl+F চেপে <header> অংশটি সার্চ করলে নিচের চিত্রেরমত দেখতে পাবেন।
ব্লগার Template এর Header অংশকে আকর্ষণীয়ভাবে তৈরি করুন
  • উপরের চিত্রে আপনাদের বুঝার সুবিধার্থে আমি দুটি Screenshot একসাথে যুক্ত করে দিয়েছি। প্রথমে<header> অংশটি সার্চ করুন। টেমপ্লেটের <header> অংশ সার্চ করার পর বাম পাশের ১ নং চিত্রটি দেখতে পাবেন।
  • তারপর ১ নং চিত্রের তীর চিহ্ন দ্বারা মার্ক করা ঐ সংখ্যাটিতে ক্লিক করার পর ডান পাশের ২ নং চিত্রটি দেখতে পাবেন।
  • এখন ২ নং চিত্রে মার্ক করা <header>...</header> অংশটি মাউস অথবা কীবোর্ডের সাহায্যে Cut করুন।
  • এরপর ব্লগার টেমপ্লেটের <body অংশটি সার্চ করলে নিচের কোডগুলি দেখতে পাবেন।
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  • এখন <header>...</header> এর Cut করা অংশটি উপরের লাইনের নিচে পেষ্ট করুন।
  • এখন পুনরায় নিচের কোডগুলি আগেরমত <body .... এর নিচে কপি করে পেষ্ট করুন।
<div class='header-top'>
<div class='max-wrapper'>
<div id='header-top-nav'>
<ul>
  <li><a href='#'>ABOUT</a></li>
  <li><a href='#'>CONTACT</a></li>
  <li><a href='#'>PRIVACY</a></li>
  <li><a href='#'>SITEMAP</a></li>
  <li><a href='#'>OTHER</a></li>
  </ul>
</div>
<div id='header-top-media'>
<ul>
  <li class='Rss'><a class='Rss' href='#' title='RSS'/></li>
  <li class='Thumb'><a class='Thumb' href='#' title='Thumbnail'/></li>
  <li class='Instagram'><a class='Instagram' href='#' title='Instagram'/></li>
  <li class='Pain'><a class='Pain' href='#' title='RSS'/></li>
  <li class='Youtube'><a class='Youtube' href='#' title='Youtube'/></li>
  <li class='GooglePlus'><a class='GooglePlus' href='#' title='GooglePlus'/></li>
  <li class='Facebook'><a class='Facebook' href='#' title='Facebook'/></li>
  <li class='Twitter'><a class='Twitter' href='#' title='Twitter'/></li>
</ul>
</div>
</div>
</div>
<div class='clear'/>
  • আবার <div class='fauxborder-left header-fauxborder-left'> অংশটি সার্চ করুন।
  • উপরের কোডটির ঠিক উপরে <div class='max-wrapper'> লাইনটি যুক্ত করুন।
  • তারপর পুনরায় কিবোর্ড হতে Ctrl+F চেপে </header> অংশটি সার্চ করুন।
  • এখন </div> অংশটি </header> ট্যাগের উপরে পেষ্ট করুন।

 Top Nav Bar স্টাইলশীট যুক্ত করাঃ

  • কিবোর্ড হতে Ctrl+F চেপে .header-outer { অংশটি সার্চ করলে নিচের কোডটি দেখতে পাবেন।
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}
  • উপরের কোডটির জায়গায় নিচের কোডগুলি কপি করে Replace করুন।
.header-outer {
  background: #FFF;
  _background-image: none;
}
  • এখন কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
  • নিচের CSS কোডগুলি কপি করে ]]></b:skin> ট্যাগের উপরে পেষ্ট করুন।
/* Top Wrapper
-------------------------------------------------------- */
.header-inner .Header #header-inner{padding:30px 0px}
.header-top{background:#FFF;height:29px;margin:auto;padding-bottom:1px;position:relative}
.header-top .max-wrapper{background:#fafafa;height:29px;overflow:hidden;border-bottom:1px solid rgba(0,0,0,0.03);border-left:1px solid rgba(0,0,0,0.03);border-right:1px solid rgba(0,0,0,0.03)}
.max-wrapper{max-width:1000px;margin:0 auto}
#header-top-nav{width:100%;max-width:65%;display:inline-flex;margin:0 auto;height:29px;overflow:hidden;font-size:13px;font-weight:700}
#header-top-nav ul{margin:0;list-style:outside none none;padding:0}
#header-top-nav ul li{float:left;list-style:none;padding:8px 0}
#header-top-nav ul li a{font-size:12px;border-right:1px solid #ECECEC;padding:0 10px}
#header-top-nav ul li a:hover{color:#F53B3B;text-decoration:none;transition:all 0.25s ease 0s}
#header-top-media{position:relative;float:right}
#header-top-media .widget-content{background:transparent;margin:0;padding:0;overflow:hidden}
#header-top-media ul{margin:0;list-style:none}
#header-top-media li{float:right;padding:0}
#header-top-media li a{display:block;width:30px;height:30px;border-left:1px solid rgba(0,0,0,0.03);background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl1e6iD8TZ0s9pBkT6N4wVX3MKEkAdRBZuEITburG6tL3Y66Zr_sUsLTLAY6hJee6ulnKB9cqu8iTlRsT-TJiyWI_dOS8oQ_UP5WLHYr9Fnpx35jvJLM9DCrkAJDlM_YwtNqZJIUJWg8I/s1600/media.png) no-repeat #fff;text-indent:-9999px;transition:background .3s}
#header-top-media .Twitter a{background-position:-4px 3px}
#header-top-media .Twitter a:hover{background-color:#40BFF4;background-position:-4px -57px}
#header-top-media .Facebook a{background-position:-40px 3px}
#header-top-media .Facebook a:hover{background-color:#5C82D0;background-position:-40px -57px}
#header-top-media .GooglePlus a{background-position:-74px 3px}
#header-top-media .GooglePlus:hover a{background-color:#EA5D4B;background-position:-74px -57px}
#header-top-media .Youtube a{background-position:-113px 3px}
#header-top-media .Youtube a:hover{background-color:#CC181E;background-position:-113px -57px}
#header-top-media .Pain a{background-position:-150px 3px}
#header-top-media .Pain a:hover{background-color:#bd2126;background-position:-150px -57px}
#header-top-media .Instagram a{background-position:-185px 3px}
#header-top-media .Instagram a:hover{background-color:#2a5b83;background-position:-185px -57px}
#header-top-media .Thumb a{background-position:-220px 3px}
#header-top-media .Thumb a:hover{background-color:#34465d;background-position:-220px -57px}
#header-top-media .Rss a{background-position:-255px 3px}
#header-top-media .Rss a:hover{background-color:#ff9900;background-position:-255px -57px}
  • সবশেষে Template Save করলেই আকর্ষণীয় পরিবর্তন দেখতে পাবেন।
পরবর্তী পোষ্টঃ আমাদের পরবর্তী পোষ্টে দেখাব কিভাবে ব্লগার টেমপ্লেটে আকর্ষণীয় Main Menu Bar যুক্ত করতে হয়? ততক্ষণ আমাদের সাথেই থাকুন। এই পোষ্টের কোথাও বুঝতে কোন অসুবিধা হলে আমাদের কমেন্ট করে জানাতে পারেন। আমরা ২৪ ঘন্টার মধ্যে আপনার সমস্যা সমাধান করার চেষ্টার করব, ইনশাআল্লাহ্।
Read More »

ব্লগার Template এর Credits Info Auto Update করুন!

প্রত্যেক ব্লগ/ওয়েবসাইটের Footer অংশে সাধারণত Credits Information দেয়া হয়ে থাকে। এতেকরে ভিজিটররা ব্লগের Owner সম্পর্কে বিভিন্ন তথ্য সহজে জেনে নিতে পারে। আপনি ভালভাবে লক্ষ্য করলে দেখবেন যে, সব ধরনের ব্লগে “কপিরাইট © 2015 প্রযুক্তি ডট কম ™, অল রাইটস রিসার্ভড” এই ধরনের একটি অংশ থাকে। সেখানে ব্লগের স্বত্বাধিকারীসহ ব্লগটি কত সাল থেকে চলছে ইত্যাদি তথ্যের লিংক দেয়া থাকে।
ব্লগার Template এর Credits Info Auto Update করুন!
এখন আসছি কাজের কথায়। “কপিরাইট © 2015 প্রযুক্তি ডট কম ™, অল রাইটস রিসার্ভড” এই লাইনটিতে একটি সাল উল্লেখ করা আছে। প্রত্যেক ব্লগারকে বছর পরিবর্তনের সাথে সাথে এই সালটি পরিবর্তন করে দিতে হয়। আমি চাচ্ছি এই সালটি প্রতি বৎসর পরিবর্তন না করে অটোমেটিক পরিবর্তন করতে অর্থাৎ বছর পরিবর্তনের সাথে সাথে টেমপ্লেটের সংখ্যাটি অটোমেটিক পরিবর্তন হয়ে যাবে। ছোট একটি JavaScript যুক্ত  করে রাখলে আপনাকে বছরে বছরে এ কাজটি করতে হবে না। JavaScript টি অটোমেটিক বছর পরিবর্তন করে দেবে।

 কিভাবে করবেনঃ

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
ব্লগার Template এর Credits Info Auto Update করুন!
  • এখন আপনার ব্লগের Credit Info এর জায়াগায় নিচের কোডটি Replace করুন।
<a expr:href='data:blog.homepageUrl'><data:blog.title/>™ </a>© <script type='text/javascript'>document.write(new Date().getFullYear());</script>, অল রাইটস রিসার্ভড
  • সবশেষে Template Save করলে Output আপনার ব্লগের Footer অংশে দেখতে পাবেন।

 পরিবর্তনঃ

  • উপরের data:blog.homepageUrl ব্লগের হোম পেজের Url দিতে পারেন।
  • টাইটেল পরিবর্তন করার জন্য <data:blog.title/>™ অংশটি পরিবর্তন করতে পারেন।
  • শেষের অল রাইটস রিসার্ভড এর জায়গায় আপনার পছন্দমত লিখে দিতে পারেন।
Read More »

ব্লগার Older, Newer and Home লিংকে Image যুক্ত করুন

ব্লগার Older, Newer and Home লিংকগুলি সাধারণত ব্লগ পোষ্টের নিচে থাকে। এগুলিতে ক্লিক করে নতুন এবং পুরাতন পোষ্টগুলিতে যাওয়া যায়। ব্লগার ডিফল্ট টেমপ্লেটে এটি শুধুমাত্র Text হিসেবে দেওয়া আছে। যার কারনে অনেক সময় নতুন ভিজিটররা এ গুলি খুজে পায় না কিংবা ভালভাবে বুঝে উঠতে পারে না। এই জন্য এটিকে যদি আপনি Image এর মাধ্যমে দেন, তাহলে একদিকে যেমন ভিজিটররা সহজে বুঝতে পারবে অন্যদিকে এটি আপনার ব্লগের সুন্দর্যও বৃদ্ধি করবে। সাধারনত ভালমানের ডেভেলপররা এটি Page Number এর মাধ্যমে দিয়ে থাকেন। আপনিও যদি চান যে, এটি Page Number এর মাধ্যমে ব্যবহার করবেন, তাহলে আমাদের পূর্বের এই পোষ্টটি (ব্লগে যুক্ত করে নিন একটি Stylist Page Number Navigation) দেখে আসতে পারেন।
Blogg-Newer-Older-and-Home

 কিভাবে ব্লগে যুক্ত করবেনঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
blogger template editor
  • তারপর কিবোর্ড হতে Ctrl+F চেপে নিচের বক্সের কোড হতে লাল অংশগুলি সার্চ করুন। সার্চ করলে কোডগুলি নিচের মত দেখতে পাবেন -
<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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
 </span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
  • এখন যদি আপনি এই লিংকগুলির পরিবর্তে Image ব্যবহার করতে চান তাহলে নিচের কোডটি Replace করুন।
<img src="Give Your Image URL"/>
  •  এখানে Give Your Image URL এর জায়গায় আপনার কাঙ্খিত ইমেজটির URL দিন। আপনি ইচ্ছে করলে এখান থেকে New, Home and Older বাটনগুলি  Download করে নিতে পারেন।
Blogg-Newer-Older-and-Home
  • সবশেষে Save Template এ ক্লিক করলেই কাজ OK.

 আরোও ভালভাবে বুঝার জন্যঃ

  • <data:newerPageTitle/> হচ্ছে New পোষ্ট বাটন।
  • <data:olderPageTitle/> হচ্ছে Old পোষ্ট বাটন।
  • <data:homeMsg/> হচ্ছে Home বাটন।
Read More »

Badiuzzaman ( Rubel )