আমি ১ম পর্ব এবং ২য় পর্বে বলেছিলাম কিভাবে CSS Vertical Menu ব্লগস্পট ব্লগে যুক্ত করা যায় । আজ আমি CSS Vertical Menu এর বাকি Style নিয়ে পোস্ট করব ।তো কথা না বারিয়ে কাজে আসা যাগ ।কিভাবে CSS Vertical Menu ব্লগস্পট ব্লগে যুক্ত করা যায়, তার জন্য নিচের টিপস টি অনুসরন করুন ।Style .1
যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।
নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।
</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।
<style type='text/css'>
#menu6 {
width: 200px;
margin: 10px;
}
#menu6 ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu6 img {
border: none;
}
#menu6 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu6 li a:link, #menu6 li a:visited {
color: #FFF;
display: block;
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/Sw8v8AokVBI/AAAAAAAAAWM/3ctV6iqN1AM/menu6.gif);
padding: 8px 0 0 10px;
}
#menu6 li a:hover, #menu6 li #current {
color: #FFF;
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/Sw8v8AokVBI/AAAAAAAAAWM/3ctV6iqN1AM/menu6.gif) 0 -32px;
padding: 8px 0 0 10px;
}
</style>
Gadget of HTML/JavaScript type. করুন ।
<div id="menu6">
<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'>
#menu5 {
width: 200px;
margin: 10px;
}
#menu5 ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu5 img {
border: none;
}
#menu5 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu5 li a:link, #menu5 li a:visited {
color: #FFF;
display: block;
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/Sw5AuEdSGrI/AAAAAAAAAVs/V4BBVhM7fj0/menu5.gif);
padding: 8px 0 0 10px;
}
#menu5 li a:hover, #menu5 li #current {
color: #FFF;
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/Sw5AuEdSGrI/AAAAAAAAAVs/V4BBVhM7fj0/menu5.gif) 0 -32px;
padding: 8px 0 0 10px;
}
</style>
Gadget of HTML/JavaScript type. করুন ।
<div id="menu5">
<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 .3
যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।
নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।
</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।
<style type='text/css'>
ul {list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwPLoH-qOFI/AAAAAAAAAN0/YxdNJOqujKM/menu4.gif);
padding: 8px 0 0 10px;
}
#menu4 li a:hover, #menu4 li #current {
color: #FFF;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/SwPLoH-qOFI/AAAAAAAAAN0/YxdNJOqujKM/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}
</style>
Gadget of HTML/JavaScript type. করুন ।
<div id="menu4">
<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="#">Photoshop</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'>
ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu3 {
width: 200px;
border: 1px solid #ccc;
margin: 10px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SwPURj-ZiQI/AAAAAAAAAN8/9leFXbCWnzw/menu3.gif);
padding: 8px 0 0 30px;
}
#menu3 li a:hover, #menu3 li #current, #menu3 li a:active {
color: #283A50;
background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SwPURj-ZiQI/AAAAAAAAAN8/9leFXbCWnzw/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}
</style>
Gadget of HTML/JavaScript type. করুন ।
<div id="menu3">
<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="#">Photoshop</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'>
#menu2 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #D8D5D1;
border-size: 1px;
border-width: 1px;
}
#menu2 ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu2 img {
border: none;
}
#menu2 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu2 li a:link, #menu2 li a:visited {
color: #3688BA;
display: block;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sw8v3_cbI_I/AAAAAAAAAWE/ujtXfdZzkKM/menu2.gif);
padding: 8px 0 0 30px;
}
#menu2 li a:hover, #menu2 li #current {
color: #3688BA;
background: url(http://4.bp.blogspot.com/_4HKUHirY_2U/Sw8v3_cbI_I/AAAAAAAAAWE/ujtXfdZzkKM/menu2.gif) 0 -32px;
padding: 8px 0 0 32px;
}
</style>
Gadget of HTML/JavaScript type. করুন ।
<div id="menu1">
<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 .6
যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।
নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।
</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।<style type='text/css'>
#menu1 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #3D261D;
border-size: 1px;
border-width: 1px;
}
#menu1 ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu1 img {
border: none;
}
#menu1 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu1 li a:link, #menu1 li a:visited {
color: #E4D6CD;
display: block;
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/Sw8v0o9zrKI/AAAAAAAAAV8/m7xBrWjtnOQ/menu1.gif);
padding: 8px 0 0 10px;
}
#menu1 li a:hover, #menu1 li #current {
color: #FFF;
background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/Sw8v0o9zrKI/AAAAAAAAAV8/m7xBrWjtnOQ/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}
</style>
Gadget of HTML/JavaScript type. করুন ।
<div id="menu1">
<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 .7
যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।
নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।
</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।<style type="text/css">
.rcornersmenu a {
width:250px;
display:block;
border: solid #666;
border-width: 0 1px;
text-decoration: none;
outline:none;
color: #000;
background: #e4e4e4;
}
.rcornersmenu a b {
display: block;
position:relative;
top: -1px;
left: 0;
border:solid #666;
border-width:1px 0 0;
font-weight:normal;
}
.rcornersmenu a b b {
border-width:0 0 1px;
top: 2px;
padding:1px 6px;
}
.rcornersmenu a:hover,
.rcorners a:hover b {background:#666666;color:#ffffff;}
.rcornersmenu ul,li {
list-style: none;
}
</style>
Gadget of HTML/JavaScript type. করুন ।
<ul class="rcornersmenu">
<li><a href="#"><b><b>Home</b></b></a></li>
<li><a href="#"><b><b>HTML</b></b></a></li>
<li><a href="#"><b><b>CSS</b></b></a></li>
<li><a href="#"><b><b>Java Script</b></b></a></li>
<li><a href="#"><b><b>Advertise</b></b></a></li>
<li><a href="#"><b><b>About</b></b></a></li>
<li><a href="#"><b><b>Contact</b></b></a></li>
</ul>
উপরের যে কোড দেওয়া আছে তা সব টকু আপনার ব্লগস্পট ব্লগে যে গেজেট আছে তার মধ্যে পেস্ট করুন ।
Now click Save
Style .8
যথারীতি গুগল আইডি ও পাসওয়ার্ড দিয়ে ব্লগার.কম এ লগইন করুন।
নিচের লেখাটি (CTRL+F) দিয়ে খুজে বের করুন ।
</head>কোড টি উপরের লেখার কোড টি পূর্বে পেস্ট করে দিন ।
<style type='text/css'>
#lbk-menu1 ul {
list-style: none;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
#lbk-menu1 {
width: 200px;
margin: 10px;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 5px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
#lbk-menu1 li a {
text-decoration: none;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
}
#lbk-menu1 .notopbrdr0xNone {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#lbk-menu1 li a:link, #lbk-menu1 li a:visited {
color: #000000;
display: block;
background-color: #FFFF00;
padding-top: 6px;
padding-right: 0;
padding-bottom: 6px;
padding-left: 10px;
}
#lbk-menu1 li a:hover {
color: #FFFFFF;
background: #000000;
padding-top: 6px;
padding-right: 0;
padding-bottom: 6px;
padding-left: 10px;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#lbk-menu1 ul,#lbk-menu1 ul li a{ height: 1%}
<![endif]-->
Gadget of HTML/JavaScript type. করুন ।
<div id="lbk-menu1">
<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>
<li><a href="#" class="notopbrdr0xNone">Privacy Policy</a></li>
</ul>
</div>
উপরের যে কোড দেওয়া আছে তা সব টকু আপনার ব্লগস্পট ব্লগে যে গেজেট আছে তার মধ্যে পেস্ট করুন ।
Now click Save
techtune
12:59 AM
