ব্লগে Credits Info সহ ৩ কলামের Footer Widgets যুক্ত করুন

আজ প্রফেশনাল ব্লগার টেমপ্লেট তৈরির ৬ষ্ঠ পর্ব শুরু করছি। আমাদের ১ম সিরিজের সবগুলি টিউটরিয়াল প্রায় শেষ পর্যায়ে চলে এসেছে। আশা করছি খুব শীঘ্রই আমাদের বাকী সবগুলি সিরিজ কমপ্লিট করব।

সব ধরনের প্রফেশনাল ব্লগের Footer সেকশনে ৩/৪ কলামের Widgets ব্যবহার করা হয়ে থাকে। ফলে ব্লগের Footer সেকশনটি বড় হওয়ার পাশাপাশি অনেকগুলি Widgets একসাথে ব্যবহার করা সম্ভব হয়। পুরাতন ব্লগে সাধারণত ছোট আকারের Footer ব্যবহার করা হত কিন্তু সম্প্রতি সবাই বড় Footer ব্যবহার করতে চায়। বড় Footer ব্যবহার করার ফলে আপনি ইচ্ছে করলে আপনার ব্লগার প্রোফাইল, জনপ্রিয় পোষ্ট, সম্প্রতি পোষ্ট ইত্যাদি ধরনের Widgets ব্যবহার করতে পারবেন। তাছাড়া আমরা এটিতে Credits অপশনও ব্যবহার করেছি। এতেকরে আপনার ব্লগের Credits Information শো করাতে পারবেন।

সকল পোষ্ট দেখুন

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

• প্রথমে আপনার ব্লগের ডিফল্ট Footer টি Remove করতে হবে।
• Remove করার জন্য ব্লগে লগইন করুন।
• তারপর Template > Edit Html এ ক্লিক করুন।

• এরপর কিবোর্ড হতে Ctrl+F চেপে 
   অংশটি সার্চ করলে ডিফল্ট টেমপ্লেটের HTML কোডগুলি দেখতে পাবেন। কোডগুলি নিচের মত হবে-

 

 

   

     

     

   

   

   

   

     
       
       
       
       
     
   

   

   

     

     

   

 

• এখন উপরের কোডগুলি Delete করে Template Save করুন।
• তারপর টেমপ্লেট থেকে বেরিয়ে আসুন। তাহলে দেখতে পাবেন আপনার টেমপ্লেটের ডিফল্ট Footer রিমুভ হয়েগেছে।

 কিভাবে নতুন Footer যুক্ত করবেন?

• ব্লগার ড্যাশবোর্ড হতে Template > Edit Html এ ক্লিক করুন।
• কিবোর্ড হতে Ctrl+F চেপে 
   অংশটি সার্চ করলে নিচের চিত্রের মত কোডগুলি দেখতে পাবেন।

• এখন উপরের চিত্রের মার্ক করা খালি জায়গাতে নিচের কোডগুলি কপি করে পেষ্ট করুন।

 

   

     
   

   

     
   

   

     
   

   

 

কপিরাইট © ™ , অল রাইটস রিসার্ভড

• পুনরায় কিবোর্ড হতে Ctrl+F চেপে ]]>

 অংশটি সার্চ করুন।

এখন নিচের কোডগুলি ]]>

ট্যাগের ঠিক উপরে পেষ্ট করুন।

/* Footer Wrapper
-------------------------------------------------------- */
#footer{margin:auto;width:100%;background:#0caa8e}
#footer a{color:#272C2D}
#footer h2{margin:0 0 10px 0;padding:3px 0 3px 0;text-align:left;color:#303030;;text-transform:uppercase;font:bold 14px Arial,Tahoma,Verdana;border-bottom:1px solid #9ED8FB}
#footer-wrapper{margin:auto;padding:20px 0;width:100%}
#footerbar-wrapper{color:#2D2A2A;float:left;width:33%;text-align:justify;font-size:100%;line-height:1.6em;word-wrap:break-word;overflow:hidden}
#Footer-First{margin-left:5px;padding:10px 20px 0}
#Footer-Midle{margin:0;padding:10px 20px 0}
#Footer-Last{margin:0;padding:10px 23px 0}
.footerbar{margin:0;padding:0}
.footerbar ul{margin:0 0 0 0;padding:0 0 0 0;list-style-type:none}
.footerbar li{margin:0 0 2px 0;padding:0 0 1px 0;border-bottom:0 dotted #ccc}
.footerbar ul li a{color:#000}
.footer-max{max-width:1000px;margin:0 auto}
#credit{height:50px;margin:0;background:#0C9B81}
#credit span{display:table;color:#FFF;text-align:center;font-size:16px;line-height:50px;margin:auto}

• আবার কিবোর্ড হতে Ctrl+F চেপে  অংশটি সার্চ করুন।

• এখন নিচের কোডগুলি উপরের চিত্রের যে স্থানে লাল চিহ্ন দ্বারা মার্ক করা হয়েছে ঠিক সেই জায়গায় পেষ্ট করুন।

body#layout ul {display:none}
body#layout #footer-wrapper {overflow:hidden}
body#layout #footerbar-wrapper {width:31.6%;float:left;margin-left:10px}
body#layout ul.footerbar, body#layout #credit {display:none}
body#layout #footer-wrapper {margin:auto;padding:20px 0px;width:100%}

• সবশেষে Save Template এ ক্লিক করলেই কাজ OK.

 কাষ্টমাইজেশনঃ

• উপরের চিত্রের লাল চিহ্নিত background:#0caa8e হতে Footer এর Background কালার পরিবর্তন করা যাবে।
• তারপর পিংক কালারের border-bottom:1px solid #9ED8FB হতে টাইটেলের Border কালার পরিবর্তন করা যাবে।
• Credits Info এ কোন Date যুক্ত করতে হবে না। কারণ এটিতে Date এর Scripts ব্যবহার করা হয়েছে। ফলে সবসময় অটোমেটিক তারিখ আপডেট হবে। ইনফরমেশন পরিবর্তন করতে চাইলে আপনার পছন্দমত করতে পারেন।