nnishat.24.2

Thursday, January 30, 2014

এইচ টি এম এল কি?-এইচ টি এম এল(পর্ব-১)



HTML একটা কম্পিউটার ল্যাঙ্গুয়েজ, যা পৃথিবীর বিশাল তথ্য-ভান্ডারকে ইন্টারনেটের মাধ্যমে প্রদর্শনের সুযোগ তৈরি করে দিয়েছে। একটা ওয়েব পেজের মূল গঠন তৈরি হয় HTML দিয়ে। HTML কোন প্রোগ্রামিং ল্যাঙ্গুয়েজ নয়, একে Hyper Text Mark Up Language বলা হয়। Mark Up Language এক সেট Mark Up ট্যাগের সমন্বয়ে গঠিত হয়। একটা ওয়েব পেজের বিভিন্ন অংশ ব্রাউজারের মাধ্যমে কিভাবে প্রদর্শিত হবে, তা HTML এ Mark Up ট্যাগ সমূহ ব্যবহার করে প্রকাশ করা হয় ।

এইচ টি এম এল এর সকল টিউটোরিয়াল

১.HTML কি? (What is HTML)
১.HTML এর ইতিহাস
২.প্রোগ্রাম লেখার পদ্ধতি
৩.ট্যাগ সমুহ ও ব্যবহার
৪.ইলিমেন্ট কি এবং কিভাবে ব্যবহৃত হয়
৫.এট্রিবিউট কি এবং কিভাবে ব্যবহৃত হয়
৬.হেডিং ট্যাগ ও ব্যবহার
৭.HTML প্যারাগ্রাফ
৮.টেক্সট ফরমেটিং
৯.ফন্ট ট্যাগ এর ব্যবহার
১০.স্টাইলের ব্যবহার
১১.লিংক প্রকাশের পদ্ধতি
১২.ছবি প্রকাশ
১৩.টেবিল ও টেবিল প্রকাশ পদ্ধতি
১৪.লিস্টের ব্যবহার
১৫.HTML ফর্ম
১৬.ফ্রেম এর ব্যবহার
১৭.আই ফ্রেম এর ব্যবহার
১৮.রং ও কোড
১৯.লে আউট পদ্ধতি
২০.HTML এ সিএসএস এর ব্যবহার
২১.হেড
২২.মেটা ট্যাগ
২৩.HTML এ স্ক্রিপ্ট এর ব্যবহার
২৪.ওয়েবে অডিও ফাইল চালানোর পদ্ধতি
২৫.ওয়েবে ভিডিও ফাইল চালানোর পদ্ধতি
২৬.ওয়েবে ফ্লাস ফাইল চালানোর পদ্ধতি

Tags: html, এইচ টি এম এল, টিউটোরিয়াল, বাংলা টিউটোরিয়াল

ওয়েব ডিজাইন – অডিয়েন্সই শেষ কথা

আজকাল ওয়ার্ল্ড ওয়াইড ওয়েবের ভুবনে নিজের জন্য একটি ঠিকানা খোঁজার জন্য অনেকেই ব্যতিব্যস্ত হয়ে পড়েন। ওয়েব প্রেজেন্স বা নিজের একটি ওয়েব সাইট থাকাটা এখন বিলাসীতার গণ্ডী পেরিয়ে অতি প্রয়োজনীয় একটি ব্যাপারে রূপান্তরিত হয়েছে। এ কারণেই ওয়েব সাইটের নকশা করাটা এখন আর হেলাফেলা করে করলে চলে না। প্রয়োজন হয় সতর্ক পরিকল্পনা এবং অনেক ভাবনা চিন্তার। ওয়েব সাইট তৈরি করতে গেলে সবসময় একটা ভাবনাই সাইট ডিজাইনারের মাথায় রাখতে হবে, আর সেটি হচ্ছে: অডিয়েন্সকে জানতে হবে। কারণ অডিয়েন্স বা ব্যবহারকারীর জন্যই তৈরি করা হবে ওয়েব সাইট। এ কারণেই তাদের, অর্থাৎ ব্যবহারকারীর দৃষ্টিকোণ থেকেই পুরো ব্যাপারটিকে দেখতে হবে। এজন্য নিচের কিছু প্রাসঙ্গিক বিষয়ে খেয়াল রাখা দরকার।


এক ঝলক

ব্যবহারকারীরা সাধারণত খুটিয়ে দেখেন না যদি ইংরেজিতে বলতে হয় তাহলে বলা যায়: Users are scanners। মানে খুটিয়ে পড়ার বা দেখার চাইতে ইউজাররা স্ক্যান করতে বা এক ঝলক দেখতেই স্বাচ্ছন্দ্যবোধ করেন বেশি। আপনি যদি মনে করেন সাধারণ একজন ভিজিটর আপনার ওয়েব সাইটটি আগ-পাশ-তলা পড়বেন তাহলে কিন্তু ভুল করবেন। আপনার ওয়েব সাইটে যত ভাল ভাল তথ্যই থাক না কেন আপনার সাইটে তিনি থাকবেন নাকি মাউস ক্লিক করে আরেক সাইটে চলে যাবেন সেটি ঠিক করার আগে একজন সাধারণ ভিজিটর মাত্র কয়েক সেকেন্ড সাইটটি স্ক্যান করবেন, মানে চোখ বুলাবেন। যদি চান একজন ভিজিটর আপনার ওয়েব সাইটের লেখাগুলো পড়বেন তাহলে আপনি যা যা বলতে চান তা পেজের একেবারে শুরুতেই বলে ফেললে ভাল হয়। এরপর ছোট ছোট অনুচেছদ এবং আগ্রহোদ্দীপক ও আকর্ষণীয় শিরোনাম দিয়ে ভিজিটরকে আপনার সাইটে ধরে রাখার চেষ্টা করুন।


কমই ভাল

সাইটের টেক্সট লেখার জন্য আপনার মাথায় একটা সোগান থাকলেই যথেষ্ট: Small is beautiful। লেখাগুলোকে যথাসম্ভব ছোট ছোট অনুচ্ছেদে বিন্যস্ত করাই ভাল। সে সঙ্গে একেক পেজে বেশি লেখা তাকলে ভিজিটরের মন বিক্ষিপ্ত হবে এবং তিনি দ্রুত অধৈর্য হয়ে উঠবেন। যদি আপনার অনেক কিছু বলার থাকে তাহলে ছোট ছোট অংশে (Part) লেখাগুলোকে ভাগ করে নিন এবং সেগুলোকে বিভিন্ন পেজে ছড়িয়ে দিন। ভিজিটর আপনার সাইটে কী লেখা আছে সেটি জানার জন্য হাজার হাজার শব্দে ভরা একটি পেজে স্ক্রল করে একেবারে শেষ পর্যন্ত পড়ে দেখবেন এতটা আশা না করাই ভাল।


নেভিগেশন

আপনার সাইটের সমস্ত পেজের জন্য একটি কমন বা অভিন্ন নেভিগেশন স্ট্রাকচার তৈরি করার চেষ্টা করুন। নেভিগেশন মানে হচ্ছে সাইটের বিভিন্ন অংশে সহজে ভিজিট করে বেড়ানোর কাজটি নিশ্চিত করা, ঠিক যেভাবে নদীতে নেভিগেবিলিটি বা নাব্যতা থাকলে সেই নদীতে নৌযানের চলাচল নির্বিঘ্ন হয়, ঠিক সেভাবে আপনার ওয়েব সাইটটিকে একটি নদী হিসেবে কল্পনা করলে এটিতে যাতে ভিজিটর আরামে ঘুরে বেড়াতে পারেন সেটি নিশ্চিত করাই ভাল নেভিগেশন কাঠামো নিশ্চিত করার মূল কথা। সাইটের মধ্যে অভ্যন্তরীণ হাইপারলিংক যত কম থাকে ততই ভাল। যত্রতত্র হাইপারলিংক রেখে ভিজিটরকে আপনার সাইটের এক পেজ থেকে আরেক পেজে পাঠিয়ে দেয়ার চেষ্টা করাটা ভাল ফল এনে দেবে না। এর ফলে নেভিগেশনে ধারাবাহিকতা এবং সামঞ্জস্যপূর্ণতা ক্ষতিগ্রস্ত হবে। যদি হাইপারলিংক ব্যবহার করতেই হয় তাহলে সেগুলোকে একটি প্যারাগ্রাফের নিচে বা আপনার সাইটের নেভিগেশন মেন্যুতে রেখে দিন।


ডাউনলোড স্পিড

অনেক ওয়েব ডিজাইনার যে সাধারণ ভুলটি করে থাকেন সেটি হচ্ছে উপাত্তে সরাসরি অ্যাকসেস-এর সুবিধা আছে এমন একটি লোকাল কম্পিউটারে সাইট ডেভেলপ করা অথবা হাই স্পিড ইন্টারনেট কানেকশন ব্যবহার করে সাইট তৈরি করা। ডেভেলপাররা অনেক সময় ভুলেই যান যে তার তৈরি করা পেজগুলো ডাউনলোড হতে কখনো কখনো বেশ খানিকটা সময় লেগে যায়। ইন্টারনেটের ব্যবহারোপযোগিতা নিয়ে যে বিভিন্ন সমীক্ষা চালানো হয় তাতে দেখা গেছে, যে ওয়েব পেজ লোড হতে সাত সেকেন্ডের বেশি সময় লাগে সেই পেজে ভিজিটর আর থাকেন না। ক্লিক করে অন্য পেজে চলে যান। আমাদের দেশের ধীরগতির ইন্টারনেট সংযোগের কথা মাথায় রেখে এই সাত সেকেন্ডকে আরেকটু বাড়িয়ে দশ বা পনের সেকেন্ডে নির্ধারণ করা যেতে পারে। একটি সাইট বা পেজ লোড হতে যদি মিনিটখানেক লেগে যায় তাহলে একজন ক্যাজুয়াল ভিজিটর সেটি লোড হবার আশায় বসে থাকবেন এতটা আশা না করাই ভাল। আপনি যদি প্রচুর কনটেন্টে ভর্তি একটি পেজ ডিজাইন করেন তাহলে সেটিকে একটি স্বল্প গতির মডেম কানেকশনে টেস্ট করে নেয়াই ভাল। পেজ ডাউনলোড হতে যদি বেশি দেরি হয় তাহলে কিছু মাল্টিমিডিয়া বা গ্রাফিক কনটেন্ট ছেঁটে ফেলাই ভাল।


অডিয়েন্সকে কথা বলতে দিন

ইউজারদের ফিডব্যাক একটি গুরুত্বপূর্ণ বিষয়। আপনার ভিজিটররাই আপনার কাস্টমার। বিভিন্ন সময় এদের কাছ থেকেই আপনি পেতে পারেন ভাল পরামর্শ, উপদেশ বা তথ্য। এসব উপদেশ পেতে কোনো পয়সা লাগে না, কিন্তু আপনার সাইটের ব্যবহারোপযোগিতা বাড়ানোর জন্য এবং এটিকে আরো ভিজিটর-ফ্রেন্ডলি করে তোলার জন্য এসব উপদেশ অমূল্য বলে বিবেচিত হতে পারে। অডিয়েন্স যাতে খুব সহজে আপনার কাছে পৌঁছাতে পারে, মানে আপনাকে তাদের মতামত জানাতে পারে সে ব্যবস্থা অবশ্যই রাখতে হবে। এর ফলে আপনার সাইটের উত্তরোত্তর উন্নতি অব্যাহত রাখার জন্য অনেক মানুষের কাছ থেকে অনেক মূল্যবান পরামর্শ আপনি পেতে থাকবেন।


ভিজিটররা কোন মনিটর ব্যবহার করছেন?

আপনি যে কম্পিউটার মনিটরে আপনার সাইটটি দেখছেন বা ডিজাইন করছেন সেই একই মনিটর যে সব ভিজিটরের কাছেই আছে এমনটা মনে করার কোনো কারণ নেই। আপনি যদি 1024 X 768 রেজল্যুশন-সম্পন্ন একটি মনিটরে ডিসপ্লে করার জন্য আপনার সাইট ডিজাইন করেন তাহলে যেসব ভিজিটর এর চাইতে কম রেজল্যুশন (যেমন 640 X 480)-এর মনিটরের মালিক তারা আপনার পেজটি সঠিকভাবে দেখতে অসুবিধার সম্মুখীন হতে পারেন। সবচেয়ে ভাল হয় যদি 800 X 600 রেজল্যুশনের মনিটরের উপযোগী করে সাইট ডিজাইন করেন। আপনার নিজের মনিটরটির রেজল্যুশন যদি বেশিও হয় তাহলে সাইটটি ডিজাইন করার পর কম রেজল্যুশনের মনিটরে সেটিকে বারবার টেস্ট করে দেখুন।


তারা কোন ব্রাউজার ব্যবহার করে?

সাইট ডিজাইন করার সময় প্রধান প্রধান ইন্টারনেট ব্রাউজারগুলোর কথা মাথায় রাখতে হবে। কারণ বর্তমানে বাজারে প্রচলিত প্রধান প্রধান ওয়েব ব্রাউজার, যেমন ইন্টারনেট এক্সপোরার, ফায়ারফক্স, অপেরা বা সাফারি সবারই আছে নিজস্ব বৈশিষ্ট্য, শক্তি এবং দুর্বলতা যা ওয়েব সাইট ডিজাইন করার সময় মাথায় রাখতে হবে। যদি নিজের ওয়েব সাইটটিকে নিয়ে আপনি আসলেই সিরিয়াস হন তাহলে উচিত হবে উপরে উল্লেখিত সবগুলো ওয়েব ব্রাউজারেই আপনার সাইটটি ঠিক মত ভিউ বা ব্রাউজ করা যাচ্ছে কি না সেটি চালিয়ে দেখে নিশ্চিত হওয়া। সে সঙ্গে এটিও মাথায় রাখা ভাল যে, কোনো কোনো ইউজার (নিশ্চয়ই তাদের সংখ্যা খুব বেশি হবে না) টেক্সট অনলি ব্রাউজার ব্যবহার করেও আপনার সাইট ভিজিট করতে পারে। এরকম একটি বিখ্যাত টেক্সট অনলি ব্রাউজার হচ্ছে লিংক্স (Lynx)। লিংক্স বা এ ধরনের টেক্সট অনলি ব্রাউজার কিন্তু আপনি যতটা ভাবছেন ততটা ভালভাবে আপনার সাইটটি ভিউ নাও করতে পারে। আরেকটি কথা। ওয়েব পেজ ডিজাইন করার সময় নিয়মবদ্ধ, আনুষ্ঠানিক এবং সঠিক (strict, formal, correct) এইচটিএমএল এবং এক্সএইচটিএমএল ব্যবহার করা উচিত। নিয়মবদ্ধ এবং নির্ভুর কোডিং পেজকে সঠিকভাবে প্রদর্শন করতে ব্রাউজারকে সাহায্য করে থাকে।


প্লাগ-ইন

ব্যবহারকারীরা কোন প্লাগ-ইন ব্যবহার করছেন আপনার ওয়েব সাইটের কোনো কোনো উপাদান, যেমন সাউন্ড বা ভিডিও ক্লিপ বা মাল্টিমিডিয়া কনটেন্ট প্রদর্শন করার জন্য ছোট আকারের পৃথক প্রোগ্রামের প্রয়োজন পড়তে পারে। এগুলোকেই বলা হয় হেল্পার অ্যাপ্লিকেশন বা প্লাগ-ইন। আপনার সাইটের ভিজিটররা হাতের কাছে সহজে ঐ সব প্লাগ-ইন পাবেন এ ব্যাপারে নিশ্চিত হওয়ার পর্যন্ত এ ধরনের এলিমেন্ট আপনার সাইটে ইউজ না করাই ভাল।


প্রতিবন্ধীদের কথা মাথায় রাখুন

মনে রাখতে হবে, এমন অনেক ভিজিটর আছেন যাদের দর্শন বা শ্রবণ প্রতিবন্ধীত্ব, মানে দেখার বা শোনার ব্যাপার সীমাবদ্ধতা আছে। আপনার সাইট তৈরি করার সময় এসব প্রতিবন্ধী মানুষের কথাও মাথায় রাখতে হবে, কারণ তারাও সাইটটি ভিজিট করতে পারেন। প্রতিবন্ধীদের কথা মাথায় রেখে সাইট ডিজাইন করা খুব সহজ নয়, তবে সহজেই চোখে দেখা যায় এমন ফন্ট সাইজ ব্যবহার করে, অবোধগম্য রঙ বা ডিজাইন ব্যবহার এড়িয়ে আপনি আপনার সাইটকে প্রতিবন্ধী-অপ্রতিবন্ধী নির্বিশেষে সবার কাছে একটি গ্রহণযোগ্য ও আকর্ষণীয় সাইটে রূপান্তরিত করতে পারেন।

Monday, January 27, 2014

ফেসবুক এর পেজ এ লাইক বাড়ান  

Saturday, January 25, 2014

ফ্রি ব্লগারের পোস্ট বিষয়ক গেজেট

আমার মূলত ফ্রি ব্লগারে ব্লগিং করতে এবং ব্লগ সাজাতে ভালো লাগে। একটা কথায় বলা যায় আমি ফ্রি ব্লগার এর ফ্যান। হাজার হাজার গেজেট আছে ফ্রি ব্লগারের জন্য তবে কোন প্রফেশনাল ব্লগার যত কম সম্ভব তত কম গেজেট ব্যাবহার করেন। আবার গেজেট ছাড়া ব্লগটাকে তো ভালোই লাগবে না। তাই এবার আমি হাজির হয়েছি কিছু {মোটামুটি প্রয়োজনীয় সব গুলো} পোষ্ট বিষয় গেজেট নিয়ে।
পোষ্ট বিষয় গেজেট গুলোর মধ্যে মূলত “সাম্প্রতিক পোষ্ট”,“একই রকম পোষ্ট”,“জনপ্রিয় পোষ্ট”(সর্বোচ্চ মন্তব্যের পোষ্ট) ইত্যাদি।

সাম্প্রতিক পোষ্ট

সাম্প্রতিক পোষ্ট গেজেটে নতুন পোষ্ট গুলো দেখানো হয়। যাতে ভিজিটর আপনার ব্লগের কোন একটা পোষ্ট ওপেন করলে সর্বশেষ পোষ্ট গুলো দেখতে পায়।

সাধারণ সাম্প্রতিক পোষ্ট:

এটা শুধু আপনার ব্লগের সর্বশেষ পোষ্ট গুলোর হেড লাইন দেখাবে। এটা আপনার ব্লগে লাগানোর জন্য নিচের কোড গুলো HTML/JavaScript গেজেটে কপি করে পেস্ট করে দিন। এটা খুবই দ্রুততার সাথে লোড হয়।
<script style=”text/javascript” src=”https://sites.google.com/site/shiblyy111/post/recentposts.js”></script><script style=”text/javascript”>var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = false;</script><script src=”/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts”></script>

পোষ্ট এর ছবি সহ সাম্প্রতিক পোষ্ট:

এটাতে আপনার পোষ্ট এর প্রথম ছবি সহ দেখাবে এবং এটা আমি ব্যবহার করি। এটা আপনার ব্লগে লাগানোর জন্য নিচের কোড গুলো HTML/JavaScript গেজেটে কপি করে পেস্ট করে দিন। এবং নিচে লাল রং করা যে আমার সাইটের ঠিকানাটা আছে এটা বদলিয়ে আপনার ঠিকানা বসিয়ে দিন।
<script language=”JavaScript”>
imgr = new Array();
imgr[0] = “https://sites.google.com/site/neshibly24/win/No–Image.png”;
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = “#ffffff”;
bgTD = “#000000″;
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = “#666″;
aBold = true;
icon = ” “;
text = “comments”;
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = “#666″;
icon2 = ” “;
numposts = 8;
home_page = “http://blogger-shibly.blogspot.com/“;
</script>
<script src=”https://sites.google.com/site/neshibly24/win/recentposts.js” type=”text/javascript”></script>

পোষ্ট এর ছবি সহ এনিমেশন করা সাম্প্রতিক পোষ্ট:

এটাতে আগেরটার মতই আপনার পোষ্ট এর প্রথম ছবি দেখাবে এবং এটা এনিমেশন এর মত নড়বে। অর্থাৎ পোষ্ট গুলো উঠা নামা করবে। এটার ঐ একই কিচ্ছা কোড গুলো HTML/JavaScript গেজেটে কপি করে পেস্ট করে দিন। এবং নিচে লাল রং করা যে আমার সাইটের ঠিকানাটা আছে এটা বদলিয়ে আপনার ঠিকানা বসিয়ে দিন।
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>
<style type=”text/css” media=”screen”>
<!–
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
–>
</style>
<script language=’JavaScript’>
imgr = new Array();
imgr[0] = “https://sites.google.com/site/neshibly24/win/No–Image.png”;
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = “#232c35″;
bgTD = “#000000″;
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = “#666″;
aBold = true;
icon = ” “;
text = “comments”;
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = “#666″;
icon2 = ” “;
numposts = 10;
home_page = “http://blogger-shibly.blogspot.com/“;
limitspy=4
intervalspy=4000
</script>
<div id=”spylist”>
<script src=’http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js’ type=’text/javascript’></script>
</div>

একই রকম পোষ্ট

এটা অতি গুরুত্বপূর্ণ গেজেট আপনার ভিজিটরকে আপনার ব্লগে বেশীক্ষণ রাখার কাজে এটা বিশেষ ভাবে সহযোগিতা করবো। যেমন আমি হাইড্রোজেন বিষয়ক একটা পোষ্ট লিখেছি। আবার আমার ব্লগে অক্সিজেন বিষয়ক একটা পোষ্ট আছে এখন যে হাইড্রোজেন বিষয়ক পোষ্ট পড়ে সে অবশ্যই অক্সিজেন এর ওপর আগ্রহ বোধ করবে। কোড গুলো HTML/JavaScript গেজেটে কপি করে পেষ্ট করে দিন এবং নিচে লাল রং করা বদলিয়ে আপনার ইচ্ছা মত শব্দ বসিয়ে দিন।
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>
<script src=”http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js” type=”text/javascript”></script>
<script type=”text/javascript”>
relatedPostsWidget({
‘containerSelector’:'div.post-body’
,’relatedTitle’:'Related Posts:’
,’recentTitle’:’Recent Posts:’
,’loadingText’:'loading…’
,’maxPosts’:’5
,’blogURL’:’http://blogger-shibly.blogspot.com/’
});</script>

জনপ্রিয় পোষ্ট

এটা আপনার ব্লগের সর্বোচ্চ মন্তব্যে হওয়া পোষ্ট গুলো দেখাবে। এটা আপনার ব্লগে লাগানোর জন্য কোড গুলো HTML/JavaScript গেজেটে কপি করে পেষ্ট করে দিন। এবং নিচে লাল রং করা যে আমার সাইটের ঠিকানাটা আছে এটা বদলিয়ে আপনার ঠিকানা বসিয়ে দিন।
<script language=”JavaScript”>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = “http://Blogger-Shibly.blogspot.com/”;
</script>
<script src=”https://sites.google.com/site/shiblyy111/file/popularpostblogger-min.js” type=”text/javascript”></script>
আমি এখানে সবচেয়ে সহজ কোড গুলো ব্যাবহার করেছি। যাতে যে কোন ব্যাবহার কারি এগুলো নিজের ব্লগে ব্যাবহার করতে পারে। তারপরেও যদি কোন সমস্যা