CSS Vertical Menu ব্লগস্পট টিউটেরিয়াল ।

CSS Vertical Menu বিভিন্ন রকম হয়ে থাকে । আমরা আমাদের পছন্দ মত বিভিন্ন CSS Vertical Menu নিজেদের ব্লগস্পট ব্লগে যুক্ত করি । যেহেতু সব CSS Vertical Menu আমাদের পছন্দ মত শত ভাগ আমাদের চাহিদা পূরন করতে সফল হয় না । আর সেই কারনে আমার টিউন করা । CSS Vertical Menu এর বিভিন্ন Style নিয়ে আমি টিউন করব । আজ আমার CSS Vertical Menu নিয়ে প্রথম টিউন । কিভাবে CSS Vertical Menu ব্লগস্পট ব্লগে যুক্ত করবেন তার জন্য নিচের টিপস টি অনুসরন করুন  । .,

Style 1.
যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।

নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।

</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।

<style type='text/css'>
#button {
width: 12em;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Tahoma, Arial, sans-serif;
/*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
font-size : 10px;
background-color: #90bade;
color: #333;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
list-style: none;
list-style-image: none;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

#button li #active {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
</style>

Gadget of HTML/JavaScript type. করুন

<div id="button">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">Java Script</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

উপরের যে কোড দেওয়া আছে তা সব টকু আপনার ব্লগস্পট ব্লগে যে গেজেট আছে তার মধ্যে পেস্ট করুন ।

Now click Save

Style 2.

যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।

নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।

</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।

<style type='text/css'>
#navcontainer {
background: #f0e7d7;
width: 30%;
margin: 0 auto;
padding: 1em 0;
font-family: georgia, serif;
font-size: 13px;
text-align: center;
}

ul#navlist {
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 70%;
}

ul#navlist li {
display: block;
margin: 0;
padding: 0;
}

ul#navlist li a {
display: block;
width: 100%;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a {
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover {
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}
</style>

Gadget of HTML/JavaScript type. করুন

image

.,

<div id="navcontainer">

<ul id="navlist">

<li><a href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">Java Script</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

উপরের যে কোড দেওয়া আছে তা সব টকু আপনার ব্লগস্পট ব্লগে যে গেজেট আছে তার মধ্যে পেস্ট করুন ।

Now click Save

Style 3.

যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।

নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।

</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।

<style type='text/css'>
#menu15 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #BCD2E6;
border-size: 1px;
border-width: 1px;
}

#menu15 ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu15 img {
border: none;
}

#menu15 li a {
height: 32px;
  voice-family: "\"}\"";
  voice-family: inherit;
  height: 24px;
text-decoration: none;
}

#menu15 li a:link, #menu15 li a:visited {
color: #8BADCF;
display: block;
background:  url(http://1.bp.blogspot.com/_4HKUHirY_2U/Sxm-5WLofwI/AAAAAAAAAck/DTy4rENfgV8/menu15.gif);
padding: 8px 0 0 10px;
}

#menu15 li a:hover, #menu15 li #current {
color: #627EB7;
background:  url(http://1.bp.blogspot.com/_4HKUHirY_2U/Sxm-5WLofwI/AAAAAAAAAck/DTy4rENfgV8/menu15.gif) 0 -32px;
padding: 8px 0 0 10px;
}
</style>

Gadget of HTML/JavaScript type. করুন

<div id="menu15">

<ul>

<li><a id="current" href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

উপরের যে কোড দেওয়া আছে তা সব টকু আপনার ব্লগস্পট ব্লগে যে গেজেট আছে তার মধ্যে পেস্ট করুন ।

Now click Save

Style 4.

যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।

নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।

</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।

<style type='text/css'>
#menu14 {
   width: 200px;
   margin: 10px;
   }

#menu14 ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu14 img {
border: none;
}

#menu14 li a {
   height: 32px;
     voice-family: "\"}\"";
     voice-family: inherit;
     height: 24px;
   text-decoration: none;
   }

#menu14 li a:link, #menu14 li a:visited {
   color: #333;
   display: block;
   background:  url(http://2.bp.blogspot.com/_4HKUHirY_2U/Sw9J34GZyxI/AAAAAAAAAW8/hv18w33snxc/menu14.gif);
   padding: 8px 0 0 10px;
   }

#menu14 li a:hover, #menu14 li #current {
   color: #FFF;
   background:  url(http://2.bp.blogspot.com/_4HKUHirY_2U/Sw9J34GZyxI/AAAAAAAAAW8/hv18w33snxc/menu14.gif) 0 -32px;
   padding: 8px 0 0 10px;
   }
</style>

Gadget of HTML/JavaScript type. করুন

image

.,

<div id="menu14">

<ul>

<li><a id="current" href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

উপরের যে কোড দেওয়া আছে তা সব টকু আপনার ব্লগস্পট ব্লগে যে গেজেট আছে তার মধ্যে পেস্ট করুন ।

Now click Save

Style 5.

যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।

নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।

</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।

<style type='text/css'>
#menu13 {
    width: 200px;
    margin: 10px;
    }

#menu13 ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu13 img {
border: none;
}

#menu13 li a {
    height: 32px;
      voice-family: "\"}\"";
      voice-family: inherit;
      height: 24px;
    text-decoration: none;
    }

#menu13 li a:link, #menu13 li a:visited {
    color: #C7377D;
    display: block;
    background:  url(http://1.bp.blogspot.com/_4HKUHirY_2U/Sw9J0TKiAZI/AAAAAAAAAW0/SqacHBpDk_s/menu13.gif);
    padding: 8px 0 0 10px;
    }

#menu13 li a:hover, #menu13 li #current {
    color: #C7377D;
    background:  url(http://1.bp.blogspot.com/_4HKUHirY_2U/Sw9J0TKiAZI/AAAAAAAAAW0/SqacHBpDk_s/menu13.gif) 0 -32px;
    padding: 8px 0 0 10px;
    }
</style>

Gadget of HTML/JavaScript type. করুন

<div id="menu13">

<ul>

<li><a id="current" href="#">Home</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JavaScript</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

উপরের যে কোড দেওয়া আছে তা সব টকু আপনার ব্লগস্পট ব্লগে যে গেজেট আছে তার মধ্যে পেস্ট করুন ।

Now click Save

.,
http://www.techtune.co.cc

পূর্বে এখানে প্রকাশিত হয়েছিল

Level 0

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

http://www.enjoybd.co.cc http://www.bdlink24.co.cc


টিউনস


আরও টিউনস


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


টিউমেন্টস

অনেক সুন্দর টিঊটোরিয়াল। ধন্যবাদ আপনাকে।

ধন্যবাদ ফাহিম রেজা বাঁধন ।

ভাই একটা প্রশ্ন ছিল, তা হলো কোড লেখার জন্য যে বক্স ব্যবহার করেছেন তা কিভাবে করেছেন ? অথবা এর জন্য কোন কোড লিখার প্রয়োজন আছে কিনা, তা যদি জানান তাহলে উপকৃত হ্য়।

বখতিয়ার ভাই কোড লিখার প্রয়োজন আছে । আর মন্তব্য করার জন্য ধন্যবাদ ।

****** কোড*******

আপনি আমার কথা হ্য়তো বুঝতে পারেননি।আমি বলতে চেয়েছি HTML ট্যাগগুলো আপনি যে বক্সের ভিতর লিখেছেন, সে বক্স লিখতে যে কোডগুলো লিখছেন তা কি হবে যদি উল্লেখ করেন তাহলে আমার উপকার হয়।

বখতিয়ার ভাই আমি বুঝতে পেরেছি কিন্তু টেকটিউনসে কোডগুলো দেখা যায় না , তাই আপনাকে লিন্ক দিলাম http://www.enjoybd.co.cc/p/html.html

আপনার কাজ হলে কমেন্ট করবেন । আমি আমার সাইট থেকে লিন্কটা Delete করে দিবো । আর মন্তব্য করার জন্য ধন্যবাদ ।

অনেক ধন্যবাদ।

আপনাকেও ধন্যবাদ