এর আগে আমরা ব্লগার.কম ব্লগে আরেকটি সাইডবার তৈরি করার পদ্ধতি শিখেছি। আশা করি আপনারা সফলভাবেই নিজেদের ব্লগে অতিরিক্ত একটি সাইডবার তৈরি করতে পেরেছেন। আজ আসুন জেনে নিই কিভাবে ব্লগের নিচে কয়েকটি কলামের বটমবার (Bottom bar for bottom columns) তৈরি করা যায়।
ব্লগের নিচে বটমবার থাকলে বেশ কিছু দিক দিয়ে সুবিধা আছে। "বাংলা হ্যাকস" ব্লগের নিচে দেখুন।
তিন কলামের একটি বার আছে। এখানকার কলামগুলোতে আমি গুরুত্বপূর্ণ কিছু গেজেট ও লিংক রেখে দিয়েছি। ফলে ব্লগের দুইপাশের সাইডবারের আকার দৃষ্টিকটুভাবে লম্বা হয়ে যায়নি। এরকম একাধিক (একের বেশি) কলাম আপনিও নিজের ব্লগে অন্যের দ্বারস্থ না হয়ে তৈরি করে নিতে পারেন। কিভাবে ব্লগের নিচে একাধিক কলাম তৈরি করা যায়, তাই আজ আমি বর্ণনা করবো।
How to create extra bottom columns on blogger blogspot blog. Here is the easiest method.
লেখাটির ঠিক উপরে নিচের কোডগুলো বসিয়ে দিন।ব্লগের নিচে বটমবার থাকলে বেশ কিছু দিক দিয়ে সুবিধা আছে। "বাংলা হ্যাকস" ব্লগের নিচে দেখুন।
তিন কলামের একটি বার আছে। এখানকার কলামগুলোতে আমি গুরুত্বপূর্ণ কিছু গেজেট ও লিংক রেখে দিয়েছি। ফলে ব্লগের দুইপাশের সাইডবারের আকার দৃষ্টিকটুভাবে লম্বা হয়ে যায়নি। এরকম একাধিক (একের বেশি) কলাম আপনিও নিজের ব্লগে অন্যের দ্বারস্থ না হয়ে তৈরি করে নিতে পারেন। কিভাবে ব্লগের নিচে একাধিক কলাম তৈরি করা যায়, তাই আজ আমি বর্ণনা করবো।
How to create extra bottom columns on blogger blogspot blog. Here is the easiest method.
- যথারীতি গুগল আইডি ও পাসওয়ার্ড দিলে লগইন হয়ে নিন।
- Layout > Edit HTML ট্যাবে যেতে হবে। Expand Widget Templates এর পাশের চেকবক্সে টিক চিহ্ন দিতে হবে না।
- ]]> লেখার উপরে নিচের কোডটি সম্পূর্ণ লিখে দিন।
/* bottom
==================== */
#bottom {
width: 970px;
position: relative;
clear:both;
margin: 0 auto;
color:#4E0038;
float: left;
background:#efefef;
padding: 5px 0 5px 0;
}
#bottom h2 {
padding: 4px;
margin: 0 auto;
color:#884218;
background-color: #addfff;
font-size: 100%;
color: #ff0000;
font-weight:bold;
border-bottom: 1px solid #ffffff;
letter-spacing: 0px;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#062D4E;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
padding-left:5px;
}
#bottom1 {
width: 250px;
float: left;
padding-left:10px;
}
#bottom2 {
width: 250px;
float: left;
padding-left:10px;
}
#bottom3 {
width: 220px;
float: left;
padding-left:10px;
}
#bottom4 {
width: 200px;
float: left;
padding-left:10px;
}- সেভ করবেন না।
- এখানে আপনার ব্লগের আকার বুঝে #bottom {width: 970px; এবং bottomগুলোর width পরিবর্তন করে নিন। এই পরিবর্তনটি একটু সতর্ক হয়ে করতেই হবে। না হলে ব্লগের আকার এলোমেলো হয়ে যেতে পারে। এছাড়াও color:#4E0038; এবং background:#efefef; ইত্যাদির কালার কোডকালার চার্ট দেখে পরিবর্তন করতে পারবেন। চারটির জায়গায় তিনটি কলাম চাইলে যে কোন একটি কলামের সম্পূর্ণ কোড অর্থাৎ #bottom4 {
width: 200px;
float: left;
padding-left:10px;
} সম্পূর্ণটুকু মুছে দিতে পারবেন। এখানে মুছে দিলে নিচের অংশেও মুছে দিতে হবে। - এবার আরও নিচে নেমে