আসুন এবার ব্লগার.কম ব্লগে একটি সমান্তরার মেনু তৈরি করি। এই মেনুটির উপরে মাউস নিয়ে গেলে আলতো করে আগের লেখার পিছনে থাকা ছবিটি সরে যায়। আসলে এই মেনুটিতে গুগল এর এজাক্স দিয়ে একটি অন্যরকম ভালোলাগার মতো সৌন্দর্য সৃষ্টি করা হয়েছে।
- গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগারে লগইন করুন।
- Layout > Edit HTML অংশে যান। এখানে ]]> এর ঠিক উপরে নিচের কোড স্থাপন করুন।
.container {
width: 520px;
height: 100px;
position: absolute;
top: 10%; left: 60%;
margin: 0px 0 0 -80px;
overflow: hidden;
}
img {border: none;}
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 520px;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 10px;
float: left;
text-decoration: none;
color: #fff;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.bh span{
color: #FF0000;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbapovYnGRzTvk8kV8AYEiONvUsB3feeqlX9h_mLRyUbbE1CVCPAWBSTQimDn7HARpNhLqQkvrKlZmMQW3qr521NgUVjJzHftzWo_LD_9qFLIyAFPktVSeUzUEIDRV_iLjmlAm4XPcxuQd/s320/hmenu.png) repeat-x left top;
}
ul#topnav.bh a{
color: #555;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbapovYnGRzTvk8kV8AYEiONvUsB3feeqlX9h_mLRyUbbE1CVCPAWBSTQimDn7HARpNhLqQkvrKlZmMQW3qr521NgUVjJzHftzWo_LD_9qFLIyAFPktVSeUzUEIDRV_iLjmlAm4XPcxuQd/s320/hmenu.png) repeat-x left bottom;
}
- এখনি সেভ করবেন না। একটু নিচে দেখুন লেখা আছে। এর উপরে নিচের কোডটুকু বসিয়ে দিন।
- এবার আরও নিচে নামতে থাকুন। যেখানে
লেখা রয়েছে, তার উপরে নিচের কোডগুলো বসান।
- এখানে আপনার পছন্দমতো লিংক ও লিংকের নাম বসাতে হবে। লাল রঙে বোল্ড করে দেখিয়ে দিয়েছি। # চিহ্নটির বদলে লিংক লিখুন ও Home, Ubuntu ইত্যাদির বদলে আপনার প্রয়োজনীয় নাম লিখুন।
- এবার সেভ করুন। সেভ করার পূর্বে একবার প্রিভিউ দেখে নিতে ভুলবেন না যেন।
- খেয়াল করুনঃ যদি এই অংশটি আগে কোন গেজেট বা মেনুর জন্য ব্লগে ইনস্টল করে থাকেন, তাহলে নতুন করে আর এই লাইনটুকু ব্লগে বসাতে হবে না। যেমন: এর আগে প্রকাশ করা
- সাইডবারের লিংকগুলোকে ঠেলে সরিয়ে দেয়াএবং
- আরও উন্নত "রিলেটেড পোস্ট" (Related Posts) গেজেটযদি আপনার ব্লগে লাগানো থাকে তাহলে ওই লাইনটি বাদ দিয়েই বাকী কোডগুলো বসিয়ে দিন।
আসুন এবার ব্লগার.কম ব্লগে একটি সমান্তরার মেনু তৈরি করি। এই মেনুটির উপরে মাউস নিয়ে গেলে আলতো করে আগের লেখার পিছনে থাকা ছবিটি সরে যায়। আসলে এই মেনুটিতে গুগল এর এজাক্স দিয়ে একটি অন্যরকম ভালোলাগার মতো সৌন্দর্য সৃষ্টি করা হয়েছে।
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন