ব্লগারে সম্পুর্ণ ব্লগ তৈরির টিউটোরিয়াল (পর্ব-৭: টেমপ্লেট ডিজাইন)

ব্লগারে সম্পূর্ণ ব্লগ তৈরি

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

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

এই পেজটির ঠিক নিচেই আপনার ব্লগের একটি প্রিভিউ দেখতে পাবেন যেটির সাহায্যে কি কি ব্যবহার করার ফলে ব্লগটি কিরকম দেখা যাবে সেটি বুঝতে পারবেন।আসুন ধারাবাহিকভাবে আমরা বিভিন্ন অপশানের বিস্তারিত ব্যবহার দেখি।

১. টেমপ্লেটস (Templates):

এখানে প্রাথমিকভাবে ৬ টি টেম্পলেট দেয়া আছে।প্রতিটির উপর মাউসের লেফট বাটন চাপলে প্রতিটির অভ্যন্তরে আরো কয়েকটি সাব-ডিজাইন দেখতে পাবেন। এখান থেকে পছন্দানুযায়ী যে কোন একটি সিলেক্ট করুন যেটি পরবর্তীতে আমরা ডিজাইন করব।

২.ব্যাকগ্রাউন্ড (Background):


এখানে দেয়া বিভিন্ন কালারের থিম দিয়ে আপনার খসড়া তৈরি করা টেম্পলেটটি সাজাতে পারেন।কালার নির্বাচন করার জন্য Main color theme এর উপর ক্লিক করুন। এছাড়াও ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করতে চাইলে প্রথমে বর্তমান ইমেজটি মুছে ফেলুন বাম পাশে Background Image এর নিচে দেয়া Remove Image বাটনে ক্লিক করে।এরপর খালি ইমেজ বক্সটির উপর ক্লিক করলে অনেকগুলো ব্যাকগ্রাউন্ড ইমেজ দেখতে পাবেন।সেখান থেকে আপনার পছন্দানুযায়ী নির্বাচন করতে পারেন বা আপনার কাছে সংরক্ষিত কোনো ইমেজ দিতে চাইলে Upload Image এ ক্লিক করে ইমেজ সংরক্ষণের জায়গা নির্বাচন করে দিন।ইমেজ আপলোড শেষ হলে Done লেখাতে ক্লিক করুন।এরপর আপনি পছন্দানুযায়ী Alignment এবং Tile ঠিক করে দিতে পারবেন।ব্যাকগ্রাউন্ডের ইমেজটি যদি ব্লগ পেইজ এর সাথে স্ক্রল না করাতে চান তাহলে Scroll with Page থেকে সিলেক্ট চিহ্ন টি উঠিয়ে নিন। প্রতিটি পরিবর্তন করার পরপরই নিচেই ব্লগের ডিজাইনের প্রিভিউ দেখতে পাবেন।

লে-আউট (Layout):


আপনার ব্লগের Gadget এবং ব্লগপোস্ট সমুহের অবস্থান কিভাবে হবে সেটি এই অপশানের মাধ্যমে ডিজাইন করে নিতে পারেন।অর্থাৎ আপনার ব্লগটির কয় কলাম বিশিষ্ট করতে চান এবং ডান বা বামে কয় কলাম চান সেটি এটির মাধ্যমে ডিজাইন করতে পারেন। Body layout এ মোট আটটি এবং Footer layout এ তিনটি করে ডিজাইন পাবেন।বডি লেয়াউট হচ্ছে ব্লগের মুল অংশ এবং ফুটার হচ্ছে একবারে নিচের অংশ। কোনটি বুজতে সমস্যা হলে নিচে প্রিভিউতে পরিবর্তনগুলো খেয়াল করলে বুজতে পারবেন।


দৈর্ঘ্য পুনঃনির্ধারণ (Adjust widths):


পুরো ব্লগের দৈর্ঘ্য কতটুকু হবে তা এই অপশানের মাধ্যমে ঠিক করে দিতে পারেন।এছাড়া বাম বা ডান পাশের গেডযেটের আকার পছন্দানুযায়ী পরিবর্তন করে দিতে পারেন এই অপশানের মাধ্যমে।আমি বডি লে-আউট এ একটি কলাম ব্যবহার করাতে উপরে দেয়া চিত্রে শুধুমাত্র Right sidebar দেখা যাচ্ছে।আপনি বডি লেয়াউট এ যতটি কলাম ব্যবহার করবেন ঠিক ততটির আকার পরিবর্তন করতে পারবেন।

এডভান্সড (Advanced)

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

  1. Page text - ব্লগের টাইটেল বা Description এর কালার,ফন্ট, বোল্ড এবং ইটালিক হবে কি সেটি নির্ধারণ করা।
  2. Backgrounds - ব্লগের আউটার ব্যাকগ্রাউন্ড বা হেডারের পিছনের ব্যাকগ্রাউন্ড এবং পোস্ট এর পিছনের ব্যাকগ্রাউন্ড পছন্দানুয্যী পরিবর্তন করতে পারেবেন এই অপশানের সাহায্যে।

বাকীসবগুলো প্রায় একই।আপনি নিজেই এগুলোর ব্যবহার বুজবেন।না বুঝলে নিচে প্রিভিউতে পর্যবেক্ষন করে ধীরে ধীরে এগুবেন।একবারে শেষেরটা Add CSS টি যারা CSS প্রোগ্রামিং জানে তাদের জন্য প্রযোজ্য।

ডিজাইন শেষ করে একবারে উপরে Apply Blog এ ক্লিক করলে আপনার ব্লগটি এই ডিজাইনে পরিবর্তন হয়ে যাবে।নতুন টেম্পেলেটে যাওয়ার পরে ব্লগের Gadget সমুহ উলট-পালট হয়ে যেতে পারে।এতে চিন্তা করা কিছুই নেই।এগুলোকে পুনরায় পুনঃবিন্যাস করা যাবে Design > Page Element এ গিয়ে।তবে নতুন ডিজাইন এ যাওয়ার আগে অবশ্যই আগে টেম্পলেট টি ডাউনলোড করে ব্যাকআপ রাখবেন।

-ধন্যবাদ।

আমার ব্লগস্পট

Level 0

আমি নিশাচর নাইম। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 47 টি টিউন ও 1182 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

তেমন কিছু জানি না, কিছু জানলে তা অন্যদের শিখানোর চেষ্টা করি যতটুকু সম্ভব।জ্ঞান নিজের মাঝে সীমাবদ্ধ না রেখে সবার মাঝে ছড়িয়ে দেয়াই প্রকৃত সার্থকতা।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Valo Next aR asai ………….

    ধন্যবাদ সাথে থাকার জন্য।

    Level 0

    next er asai na thake practise koro, tume nejei parba. ai ta kono kothin kam na.

    হুম চেষ্টা করুন।এটা তেমন কোন কঠিন কাজ না।আমিতো নিজে নিজে সব শিখেছি।

Level 0

but blogspot site golo open hossena

দারূন লাগলো নাইম ভাই…
আপনার ব্লগস্পট সাইটটির টাইটেল কিভাবে বানিয়েছেন?

অনেকেরই কাজে লাগবে 🙂

”Design অপশান থেকে Template Designer এ ক্লিক করুন।পেজ লোডিং হতে কিছুক্ষণ সময় নিবে।পেজটি ওপেন হলে নিচের মতো দেখা যাবে”
ভাই এইটাতো এখন আর আসেনা।

    আসবে না কেন? আমিতো ইন্সটান্ট স্ক্রিনশট দিলাম।মানে আমি স্ক্রিনশট নিয়ে পোস্ট করলাম।আপনি পুনরায় চেষ্টা করে দেখুন।

ব্লগ টিউটোরিয়াল কি ৭ম পর্বেই শেষ?? লিংকে কিভাবে লেখার মধ্যে যোগ করেন? যেমন লিখেন এখানে ক্লিক করুন এই লেখার মধ্যে কিভাবে লিংকটি প্রবেশ করান?(অফ মন্তব্য)

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

Valo laglo…,
ami akti blog site design korechi bt drop-down menu banate gie jhamela hosche,Side ber a ati valo kaj kore bt menu hishebe upore dile drop-down menu gulo r kaj kore na…..
(menur niche faka space rakhle valo kaj kore)
help pele khushi hobo.

amr blog:http://abusayemtutul.blogspot.com/

সামনে এগিয়ে যান।

Level 0

ভাই, আপনার website (http://www.ebooksdunia.blogspot.com/) এর template টা দেওয়া যাবে?? .XML file টা কোথাও upload (ziddu or others) করে দেন….Please…..অথবা download site এর link দেন….plz……

আর আপনার সাইটে read more Tutorial টা ঠিক আপনার সাইটের দেওয়া read more widgt এর মতো না…..আপনার সাইটের টা দেন Plz

    Level 0

    ভাই, upload করা লাগবে না..আমি এর চেয়ে ভাল template পেয়েছি……read more ও solve…

ধন্যবাদ সুন্দর একটি বিষযের উপর ধারাবাহিক টিউনের জন্য। বেশ কিছুদিন ধরে মাঝে মাঝে ব্লগারের ব্লগ সাইট দেখা যাচ্চেনা , সাইটে গেলে স্কিন সাদা হয়ে থাকে । এখন আপনার ব্লগটিতে গেলাম একই অবস্থা । দয়া করে সমাধান জানাবেসন ।

হুম। ইলিমেন্টগুলান বড্ড বেয়াদপ। খালি উলটা পালটা হইয়া যায়। যাই হোক থেঙ্কু