ফ্রি ব্লগারের জন্য ৩টি টপ মেনু

ক’দিন আগে আমি একটা টিউটোরিয়াল লিখেছিলাম যে “নিজের ওয়েব সাইটের আকর্ষণীয় ড্রপ ডাউন মেনু তৈরি করি শুধুমাত্র HTML আর CSS দিয়ে ২ “। এখানে আজগর ভাই মন্তব্য করেছিল যে এটা ফ্রি ব্লগারে লাগানো যাবে কিনা। আমি একটা রিপ্লাই দিয়েছিলাম অবশ্য তবে সেটা যথেষ্ট ছিল না। তাই একটা টিউটোরিয়াল নিয়ে বসলাম ফ্রি ব্লগারে টপ মেনু লাগানোর পদ্ধতি।

১. মেনু নাম্বার ওয়ান। এই মেনুটা ব্ল্যাক অর্থাৎ কালো স্টাইলের Thesis থিম এ আমি প্রায়ই দেখি।

.menu {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
}
.menu li {
float:left;
font-family:”Lucida Sans Unicode”,”Bitstream Vera Sans”,”Trebuchet Unicode MS”,”Lucida Grande”,Verdana,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
margin:0;
padding:0;
}
.menu a {
background:#333333 url(http://2.bp.blogspot.com/_66wIGDjagHk/Sg3C64RbjJI/AAAAAAAAAY4/19Yw1ZFLiJg/s1600/seperator.gif) no-repeat scroll right bottom;
color:#CCCCCC;
display:block;
float:left;
margin:0;
padding:8px 12px;
text-decoration:none;
}
.menu a:hover {
background:#2580A2 url(http://2.bp.blogspot.com/_66wIGDjagHk/Sg3DJ9YDADI/AAAAAAAAAZA/b70HFM1VaBo/s1600/hover.gif) no-repeat scroll center bottom;
color:#FFFFFF;
padding-bottom:8px;
}
#busca {
float:right;
line-height:35px;
}

#menu-wrapper {
margin:0 auto;
width:990px;
}

এবার ]]</b:skin> এর ওপর ওপরে কোড গুলো পেষ্ট করে দিন।
তারপর একটা যায়গায়  <div id=’content-wrapper’>   লেখা আছে তার ওপর নিচের কোডটা পেষ্ট করেদিন। আর যদি একটা হেডারের ওপর লাগাতে চান তাহলে     <div id=’header-wrapper’>  এর নিচে পেষ্ট করে দিন।


<div id=’submenu’>
<div id=’menu-wrapper’>
<ul class=’menu’>
<li><a expr:href=’data:blog.homepageUrl’>Home</a></li>
<li><a href=’#’ title=’Products’>Products</a></li>
<li><a href=’#’ title=’Services’>Services</a></li>
<li><a href=’#’ title=’Support’>Support</a></li>

</ul>
</div>
</div>

২. এটার নির্মাতা Bangla Haks

/* Navigation ———-*/
#NavbarMenu {
background: #A0CFEC;
width: 980px;
height: 34px;
font-size: 12px;
font-weight: bold;
font-family: ‘AdorshoLipi’, Arial, Tahoma, Verdana;
color: #000000;
margin: 0;
padding: 0;
float:left;
}
#NavbarMenuleft {
width: 690px;
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 285px;
float: right;
margin: 0;
padding: 6px 0 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #2008AF;
display: block;
font-size: 14px;
font-weight: bold;
font-family: Georgia, Times New Roman;
margin: 0;
padding: 5px 10px 5px;
}
#nav li a:hover, #nav li a:active {

color: #000000;
font-weight: bold;
margin: 0;
padding: 5px 10px 5px;
text-decoration: underline;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #A0CFEC;
width: 100px;
color: #2008AF;
font-size: 14px;
font-family: ‘AdorshoLipi’, Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 3px 4px;
border-bottom: 1px solid #FFF;

}
#nav li li a:hover, #nav li li a:active {

color: #000000;
padding: 3px 4px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0;
padding: 0;
border-left:1px solid #BFC0C0;

}
#nav li ul a {
width: 100px;
}
#nav li ul ul {
margin: -28px 0 0 100px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

এবার ]]</b:skin> এর ওপর ওপরে কোড গুলো পেষ্ট করে দিন।
তারপর একটা যায়গায়  <div id=’content-wrapper’>   লেখা আছে তার ওপর নিচের কোডটা পেষ্ট করেদিন। আর যদি একটা হেডারের ওপর লাগাতে চান তাহলে     <div id=’header-wrapper’>  এর নিচে পেষ্ট করে দিন।

<div id=’NavbarMenu’>
<div id=’NavbarMenuleft’>
<ul id=’nav’>
<li><a expr:href=’data:blog.homepageUrl’>Home</a></li>
<li>
<a href=’#’>sab1</a>
<ul>
<li>
<a href=’#’>Sab2</a>
<ul>
<li><a href=’#’>Sab3</a></li>
<li><a href=’#’>Sab3</a></li>
</ul>
</li>
<li><a href=’#’>sab2</a></li>
</ul>
</li>
<li><a href=’#’>sab1</a>
<ul>
<li><a href=’#’>sab2</a></li>
<li><a href=’#’>sab2</a></li>
</ul>
</li>
<li><a href=’#’>sab1</a>
<ul>
<li><a href=’#k’>sab2</a></li>
</ul></li>
<li><a href=’/’>sab1</a></li>
</ul>
</div>

৩. এই বার মেনুর সর্বশেষ স্টাইল। এটা আমি আমার নিজের ব্লগের জন্য ডিজাইন করেছিলাম।

#menu {
background-color:#ff5b5b;
border-bottom:1px solid #DDDDDD;
border-right:1px solid #DDDDDD;
border-top:1px solid #DDDDDD;
height:28px;
margin:2px auto 0;
width:980px;
}
#menu ul {
border-left:1px solid #DDDDDD;
float:left;
font-family:’Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif;
list-style-type:none;
margin:0;
padding:0;
width:980px;
}
#menu ul li {
border-right:1px solid #DDDDDD;
display:block;
float:left;
font-size:13px;
text-shadow: 2px 2px 2px
font-weight:lighter;
height:28px;
letter-spacing:1px;
line-height:14px;
margin-right:0;
padding:0;
text-transform:uppercase;
}
#menu ul li:hover {
background-position:left center;
background: #ffffff;
}
#menu ul li a:link, #menu ul li a:visited, #menu ul li a:active {
color:#000000;
display:block;
float:left;
height:28px;
margin:0;
padding:5px 20px 0;
text-transform:uppercase;
}
#menu .home, #menu .current_page_item {
background-color:#ff5b5b;
}
#menu .home a:link, #menu .home a:visited, #menu .current_page_item a:link, #menu .current_page_item a:visited {
background-position:right center;
background-repeat:no-repeat;
color:#000000;
}
#menu ul li a:hover {
background-position:right center;
background-repeat:no-repeat;
color:#000000;
height:28px;
text-decoration:underline;
}
#menu ul li ul {
width:180px;
}

.menunav li:hover ul, ul.menunav li.sfHover ul {
left:-1px;
top:25px;
}
.menunav li:hover li ul, .menunav li.sfHover li ul {
top:-9999px;
}
.menunav li li:hover ul, ul.menunav li li.sfHover ul {
border-top:1px solid #DDDDDD;
left:180px;
top:-1px;
}
.menunav li:hover ul, .menunav li li:hover ul {
top:-9999px;
}
.menunav li ul {
border-right:1px solid #DDDDDD;
position:absolute;
top:-9999px;
}
.menunav li {
border-bottom:1px solid #DDDDDD;
float:left;
position:relative;
}
.menunav ul li {
width:100%;
}
.menunav li li {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/libgt.png) repeat scroll 0 0;
height:auto !important;
padding:0;
}
.menunav li ul {
z-index:100;
}
.menunav li:hover a:link, .menunav li:hover a:visited {
color:#111111 !important;
text-decoration:underline;
}
.menunav li li:hover, .menunav li .current_page_item {
-moz-background-clip:border !important;
-moz-background-inline-policy:continuous !important;
-moz-background-origin:padding !important;
background:transparent url(images/libgth.png) repeat scroll 0 0 !important;
}
.menunav li li a:link, .menunav li li a:visited {
background-image:none !important;
float:left;
height:auto !important;
margin:0 !important;
padding:5px 20px !important;
}
এবার ]]</b:skin> এর ওপর ওপরে কোড গুলো পেষ্ট করে দিন।
তারপর একটা যায়গায়  <div id=’content-wrapper’>   লেখা আছে তার ওপর নিচের কোডটা পেষ্ট করেদিন। আর যদি একটা হেডারের ওপর লাগাতে চান তাহলে     <div id=’header-wrapper’>  এর নিচে পেষ্ট করে দিন।

মেনু গুলো কেমন লাগলো জানাবেন কিন্তু! আর যদি কোন সমস্যা হয় তাহলে আমি আছি। বলতে ভুলবেন না কিন্তু।

8 thoughts on “ফ্রি ব্লগারের জন্য ৩টি টপ মেনু”

  1. ব্লগারের এডিট টেমপ্লেটে এই লেখাটি খুজে পেলাম না ভাই! একটু হেল্প করবেন? আমার ব্লগের জন্য একটি ভালো মেনু খুব দরকার। অনেক চেষ্টা করেও সেটা বসাতে পারছি না।

  2. লেখাটি খুব ভাল লেগেছে।
    যারা গল্প ও কমিক ডাউনলোড করতে চান তারা প্লিজ, ভিজিট করুন blackhash.weebly.com

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

  4. আশরাফুল ইসলাম

    এটাই আমি এতদিন খুজতেছিলাম। ধন্যবাদ শিবলী ভাই।

  5. @টিউটো কে: আামার মনে হয় মেনু থাকলে আর লাগানোর দরকার নাই। কারণ ডিজাইনারা থিম এর সাথে মিলিয়ে মেনুর জিজাইন করেন।
    তবে একান্তই যদি কারও এগুলোই লাগানোর দরকার হয় তবে Navbar, NavbarMenu, Menu এই নামেই কোড গুলো থাকে এগুলো মুছে দিলেই হবে। তারপর অবশ্য আবার এগুলো আবার বসাতে হবে।

  6. মেনুগুলো ভাল লেগেছে। ফ্রি ব্লগে এই মেনুগুলো ব্যবহার করতে গিয়ে অবশ্য টেমপ্লেটটির কথা চিন্তা করে নিতে হবে। অনেক টেমপ্লেটেই নিজস্ মেনু থাকে সে ক্ষেত্রে ব্যবহারটাতে কোডিং এর ঝামেলা পোহাতে হতে পারে।

  7. আমি ১ নম্বর স্টাইল টি আমার ব্লগে দিতে চাই! কিন্তু আমি প্রথম কোড বসার পর পরের ২ টি কোডের মধ্যে কোনটায় খুজে পেলাম না তাই আপনি যদি একটু সাহায্য করতে তাহলে আমি উপকৃত হতাম।

Comments are closed.