সাজিয়ে নিন আপনার ব্লগস্পট ব্লগ [পর্ব-০৯] :: আপনার ব্লগস্পট ব্লগের জন্য তৈরি করুন বাম পাশে ভাঁজকরা মেন্যু

সাজিয়ে নিন আপনার ব্লগস্পট ব্লগ

কেমন আছেন সবাই ?

আপনাদের ভালবাসায় আজকে আবারও আমার ব্লগস্পট ব্লগ ডিজাইনের ধারাবাহিক পর্বে ফিরে এলাম।

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

প্রথমে এই রকম থাকবে। পরে যখন আপনি লাল পাশে ক্লিক করবেন তখন নিচের ছবির মতন হবে।


দেখে পছন্দ হয়ে গেছে তাই না ? ভাবছেন খুব কথিন কাজ তাই না ?

আরে না  একেবারেই সহজ। নিচের কাজ গুলি ধাপে ধাপে করুন দেখবেন কিভাবে হয়ে যাবে আপনি নিজেই বুঝতে পারবেন না ।

  • প্রথমেই আপনার ব্লগে লগ ইন করুন
  • তারপর  Design>Add A Gadget>HTML/JavaScript এ গিয়ে নিচের কোড গুলো এড করে সেইভ করুন।
 <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://4.bp.blogspot.com/_8X8A6_fKD8A/S9CFbXuUDgI/AAAAAAAAC-Y/yr2cyLZgCV0/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="http://2.bp.blogspot.com/_8X8A6_fKD8A/S8mQ8Ig6q3I/AAAAAAAAC9o/rnKICWGwLls/s320/sidebarcollapse.gif" title="sideBar" /></a>
 </div>
  • একটি বিষয় খেয়াল রাখবেন সেইভ করার আগে উপরে "#" এর স্থলে আপনার লিংক এবং Link One, Link Two, Link Three এবং Link Four এর জায়গায় আপনার প্রয়োজনীয় নাম দিয়ে সেইভ করবেন।
  • আর এখানে আমি ৪টি লিংক ব্যবহার করেছি, আপনি চাইলে ১০টি পর্যন্ত লিংক দিতে পারবেন

আশা করি সবাই বুঝতে পেরেছেন। লন সমস্যা হলে কমেন্ট করে জানাতে এবং ভালো লাগলে কমেন্ট করতে ভুলবেন না যেন।

সবাই ভালো থাকুন, সুস্থ থাকুন, ভালবাসাসহ আপনাদেরই টেক লাভার সাব্বির

Level 0

আমি সাব্বির আলম। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 108 টি টিউন ও 869 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 9 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি মোহাম্মদ সাব্বির আলম ( আসিফ পাগলা সাব্বির ) । Google Adsense এর একজন পাবলিশার্স হিসাবে কাজ করছি। বর্তমানে SEO নিয়েই পরে থাকতে এবং সবার মাঝে শেয়ার করতেই ভালো লাগে। আর বাংলা ব্লগিং করাটাই সব চেয়ে বড় নেশা। আমার সম্পর্কে আরো বিস্তারিত জানতে অথবা লাইভ সাপোর্ট পেতে আমাকে ফেইসবুকে অ্যাড...


টিউনস


আরও টিউনস


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


টিউমেন্টস

যাক! পাগলা ভাই নাম বদলাইছে।

টিউনের জন্য ধইন্যা।

আমার সিনট্যাক্স হাইলাইটারের এর কথা ভুইলেননা কিন্তুক।

খেয়াল করছি কিন্তু এটা ঠিক করার উপায় কি ?

এটা কী ওয়ার্ডপ্রেসে কাজ করবে?

Level 0

Thanks ashif vai. Very good tune..

Level 0

vai, Button a SideBar ar poriborte onno kisu likhbo kemne? ami sidebare add korechi and sidebar a click korle upor theke niche move kore. bam theke dane move korabo kemne? Thanks.

Level 0

থাঙ্ক উ

Level 0

বস ঘড়ি বানাইয়া দেন ব্লগের জন্য

বস, পারতাছি না। দেখেন http://www.movie.sabbd.com

Level 0

আমি filezila তাড়াতাড়ি connect হতে চাই কিন্তু পারিনা কোনও উপাই আসে কিনা connect হতে পারলে আমি wordpress upload করতে পাড়বো কিন্তু server এ connect হওয়া খুবিএ tough কোনও ভালো উপায়ী আছে কি
Reply

Level 0

filezila তে আমি আমার host login pas word দিলাম কিন্ত connect সহজে হইনা pls help

    আমার জানা নেই ভাই । আমি ওয়ার্ডপ্রেসের কাজ ভালোমত পাড়িনা । আপনি সাহায্য বিভাগে এটি নিয়ে একটা পোস্ট দেন @boooby:

থ্যাঙ্ক। সফল হয়েছি।

Level 0

সাব্বির ভাই “#” এই জায়গাই লিঙ্ক দিয়েছি কিন্তু লিঙ্ক পাচ্ছেনা!!!
plz help me…..

help me pls.ami jodi ei menu lagai;tahole amar fb like button kaj kore na.amar blog > http://austte.blogspot.com

blog e facebook link bosabo ki kore?