-->
logo
» » আপনার ব্লগস্পট ব্লগের জন্য তৈরি করুন বাম পাশে ভাঁজকরা মেন্যু

আপনার ব্লগস্পট ব্লগের জন্য তৈরি করুন বাম পাশে ভাঁজকরা মেন্যু

author

10:21 PM 0

আপনাদের ভালবাসায় আজকে আবারও আমার ব্লগস্পট ব্লগ ডিজাইনের ধারাবাহিক পর্বে ফিরে এলাম।
আজ আমি শেয়ার করবো কিভাবে আপনার ব্লগের জন্য বাম পাশে ভাঁজকরা মেন্যু বানবেন। মেন্যুটি দেখতে অনেকটা স্লাইডিং মোবাইলের মত লাগবে।
নিচের স্কিনশট দুটি দেখলে আপনি সহজেই বুঝতে পারবেন।
প্রথমে এই রকম থাকবে। পরে যখন আপনি লাল পাশে ক্লিক করবেন তখন নিচের ছবির মতন হবে।

দেখে পছন্দ হয়ে গেছে তাই না ? ভাবছেন খুব কথিন কাজ তাই না ?
আরে না  একেবারেই সহজ। নিচের কাজ গুলি ধাপে ধাপে করুন দেখবেন কিভাবে হয়ে যাবে আপনি নিজেই বুঝতে পারবেন না ।
  • প্রথমেই আপনার ব্লগে লগ ইন করুন
  • তারপর  Design>Add A Gadget>HTML/JavaScript এ গিয়ে নিচের কোড গুলো এড করে সেইভ করুন।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<script src="http://sites.google.com/site/banglahacks/shrd/prototype.js"type="text/javascript"></script>
<script src="http://sites.google.com/site/banglahacks/shrd/effects.js"type="text/javascript"></script>
<script src="http://sites.google.com/site/banglahacks/shrd/side-bar.js"type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVMu3TcPHXxT5knebyvju7NdCJH_j_TaHlqFBz7_jnMnRUmryewX6Dt6Ci8JpmrETCwAEdF60jMQPZXPN-AYDgmq1k3p_pPJw__MzOOOrO8JVyKiU_QrcVLh6SWYpi8iHEqMFx_L5-Vp0u/s320/left.collapse.border.gif);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUx5ecFpkpd13UdEexfnAIvf3yIK3KhD7R9bYmwrQFi040w8T_s_VbO_Vs3XFhc1JL3sNXYsm0fb8vyYIiOFMt53oeAbC6QEJ9m-yXF79MhDK4jw1XxsBrUFMCDvR-wp8JyuVQH_EAgIOI/s320/sidebarcollapse.gif"title="sideBar" /></a>
</div>
  • একটি বিষয় খেয়াল রাখবেন সেইভ করার আগে উপরে "#" এর স্থলে আপনার লিংক এবং Link One, Link Two, Link Three এবং Link Four এর জায়গায় আপনার প্রয়োজনীয় নাম দিয়ে সেইভ করবেন।
  • আর এখানে আমি ৪টি লিংক ব্যবহার করেছি, আপনি চাইলে ১০টি পর্যন্ত লিংক দিতে পারবেন

Tags

advertisement centil
author

This blog is created for your interest and in our interest as well as a website and social media sharing info Interest and Other Entertainment.