ভাসমান স্থির সাইডমেনু ব্লগে তৈরি করার পদ্ধতি — Javascript সমূহ – 13

# ব্লগার.কম ড্যাশবোর্ডে গুগল আইডি ও পাসওয়ার্ড দিয়ে লগইন করুন।
# প্রথমেই Layout > Page Elements ট্যাবে চলে যান।
# এখানে একটি HTML/ Javascripts গেজেটে নিচের কোডটুকু স্থাপন করুন।

<div id="staticmenu" style="left: 10px; top: 20px">
<ul>
<li><a href="http://www.comtunesbd.blogspot.com/forumdisplay.php?fid=6/">কম্পিউটার বিষয়ক</a></li>
<li><a href="http://www.comtunesbd.blogspot.com/forumdisplay.php?fid=28/">ওয়েব ডিজাইন </a></li>
<li><a href="http://www.comtunesbd.blogspot.com/forumdisplay.php?fid=10">মোবাইল</a></li>
<li><a href="http://www.comtunesbd.blogspot.com/forumdisplay.php?fid=11">Download</a></li>
<li><a href="http://www.comtunesbd.blogspot.com/forumdisplay.php?fid=36">Email Me</a></li>
<li><a href="http://www.comtunesbd.blogspot.com/forumdisplay.php?fid=26">Support Me</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/forumdisplay.php?fid=11 লিংক ও এ্যাংকর টেক্সটগুলো পরিবর্তন করে নিজের প্রয়োজনীয় লিংক ও তার নাম লিখে দিন।
# সেভ করার পর চলে যান Layout > Edit HTML অংশে।
# এখানে Expand Widgets Templates এর পাশের চেকবক্সে টিকচিহ্ন দিতে হবে না।
# HTML কোডের মাঝামাঝি ]]></b:skin> লেখাটি খুঁজে বের করুন।
# এই লেখাটুকু সম্পূর্ণ মুছে দিন।
# লেখাটি যে জায়গায় ছিল ঠিক সেই জায়গায় নিচের কোডটুকু স্থাপন করুন।

.wireframemenu{
margin-top:20px;
border: 1px solid #C0C0C0;
background-color: #ffffff; /*Background color*/
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; /*Link Color*/
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 দেখে নিন। পছন্দ হলে সেভ করুন

Posted in: Blog,Blogger,Webdesign