ব্লগে Leftmenu বা Sidebar তৈরি করুন

4
335
[ছবি: 8xDEn.png] ব্লগে Leftmenu বা Sidebar তৈরি করুন

প্রথমে আপনি আপনার ব্লগে লগিন করুন এবং ডিজাইনে ক্লিক করুন
তারপর আপনার পছন্দ মত যে যায়গায় আপনি গ্যাজেট যুক্ত করতে চান সেই জায়গায় ক্লিক করুন তারপর HTML/JavaScript এর ঘরে কোড গুলো কপি করে পেস্ট করুন

 

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

<div id="staticmenu" style="right: 10px; top: 100px">
<ul>
<li><a href="http://www.torrentsbd.com/">বাংলা ফোরাম টরেন্টসবিডি.কম</a></li>
<li><a href="http://www.torrentsbd.com/forumdisplay.php?fid=46">হ্যাকিং এবং ভাইরাস</a></li>
<li><a href="http://www.torrentsbd.com/forumdisplay.php?fid=6">কম্পিউটার বিষয়ক</a><a href="http://www.torrentsbd.com/forumdisplay.php?fid=10">মোবাইল</a></li>
<li><a href="http://www.torrentsbd.com/forumdisplay.php?fid=11">বিজ্ঞান ও প্রযুক্তি</a></li>
<li><a href="http://www.torrentsbd.com/forumdisplay.php?fid=47">মনের জানালা </a></li>
<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=bhacks&loc=en_US">Subscribe</a></li>
</ul>
</div>

 
# সেভ করার আগে উপরের কোড অংশটুকুতে তিনটি বিষয় পরিবর্তন করে নিন।
# style=left: 10px; এখানে left বদলে right লিখে দিলে মেনুটি ব্লগের শরীরের ডানপাশে থাকবে।
# top: 20px এর পরিবর্তে 100 বা 200 যেকোন সংখ্যা লিখে দিলে উপর থেকে নিচের দিকে ঠিক সেই জায়গায় থাকবে।
#http://www.torrentsbd.com ও বাংলা ফোরাম টরেন্টসবিডি.কম, মোবাইল বিজ্ঞান ও প্রযুক্তি এই গুলো পরিবর্তন করে নিজের প্রয়োজনীয় লিংক ও তার নাম লিখে দিন।

#সেভ করার পর চলে যান Layout > Edit HTML অংশে।
# এখানে Expand Widgets Templates এর পাশের চেকবক্সে টিকচিহ্ন দিতে হবে না।
# HTML কোডের মাঝামাঝি ]]></b:skin> লেখাটি খুঁজে বের করুন।
# এই লেখাটুকু সম্পূর্ণ মুছে দিন।
# লেখাটি যে জায়গায় ছিল ঠিক সেই জায়গায় নিচের কোডটুকু স্থাপন করুন।

 

.wireframemenu{
margin-top:20px;
border: 1px solid #C0C0C0;
background-color: #ffffff; /*#B93B8F*/
width: 115px;
position: absolute;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 4px 3px;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: 14px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #ff0000; /*#1589FF*/
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

.wireframemenu a:visited{
color: #595959;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
color: #0000ff;
border-right:2px solid black;
}

]]></b:skin>

<script type='text/javascript'>
//<![CDATA[

/***********************************************
* Static Menu script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
* Modified by: http://www.banglahacks.com
***********************************************/

//ids of menus to keep static on page (must be absolutely positioned, with left/top attribute added inline inside tag)
//Separate multiple ids with a comma (ie: ["menu1", "menu2"]
var staticmenuids=["staticmenu"]

var staticmenuoffsetY=[]

function getmenuoffsetY(){
for (var i=0; i<staticmenuids.length; i++){
var currentmenu=document.getElementById(staticmenuids[i])
staticmenuoffsetY.push(isNaN(parseInt(currentmenu.style.top))? 0 : parseInt(currentmenu.style.top))
}
initstaticmenu()
}

function initstaticmenu(){
var iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
var topcorner=(window.pageYOffset)? window.pageYOffset : iebody.scrollTop
for (var i=0; i<staticmenuids.length; i++)
document.getElementById(staticmenuids[i]).style.top=topcorner+staticmenuoffsetY[i]+"px"
setTimeout("initstaticmenu()", 100)
}

if (window.addEventListener)
window.addEventListener("load", getmenuoffsetY, false)
else if (window.attachEvent)
window.attachEvent("onload", getmenuoffsetY)

//]]>

</script>

 


*PREVIEW দেখে নিন। পছন্দ হলে সেভ করুন

 

সুত্র     এখানে

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

4 মন্তব্য

  1. দারুন পোস্ট , আরো কিছু style চাই
    অনেক অনেক ধন্যবাদ

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

11 + seven =