অনেক সময় এমন হয় যে ব্লগের কিছু কিছু লেখাকে পাঠকের চোখের সামনে সবসময় রাখতে চাই। কিন্তু পাঠক পড়তে পড়তে যখন ব্লগের নিচের দিকে চলে যান, তখন সাইডবারে থাকা মেনুবার উপরে চলে যায়, ফলে পাঠক আরও গুরুত্বপূর্ণ পোস্টের
খবর না জেনেই ব্লগ থেকে বিদায় নেন। এটা আমাদের কারোরই কাম্য নয়। তাই পাঠককে ব্লগে ধরে রাখার জন্য আমরা গুরুত্বপূর্ণ পোস্টের লিংকসহ একটি ভাসমান স্থির মেনুবার যদি নিজেদের ব্লগে লাগিয়ে নিই, তাহলে খুব ভালো হয়। আজ আমরা ব্লগার.কম ব্লগে এরকম একটি স্থির মেনুবার তৈরির পদ্ধতি জানবো।
এই কাজের মেনুটি javascriptkit-এর তৈরি করা। কিন্তু তারা ব্লগারের জন্য কোন পরামর্শ দেয় নি। ফলে এটা স্বাভাবিকভাবে স্থাপন করলে মাপ ও সুবিধাগুলো ঠিক থাকতো না। তাই কোডে প্রয়োজনীয় পরিবর্তন করে সুবিধার জন্য মডিফাই করা আছে।
সহজ মেনুবার ব্লগের সমান্তরালভাবে হেডারের ঠিক নিচে অবস্থান করতো। এবার আমরা খাড়াখাড়ি একটি মেনুবার তৈরি করব। উপরে দেওয়া ছবিটি দেখুন। ব্লগপোস্ট পড়তে পড়তে স্ক্রল করে পাঠক নিচে চলে আসার সময় এই মেনুটি নিজে থেকেই নিচে চলে আসবে। অর্থাৎ আপনি ব্লগের যে জায়গায় মেনুটি স্থাপন করবেন, ঠিক সেখানেই থেকে যাবে। স্ক্রল করে নিচে আসার সাথে সাথে উপরে ঢেকে যাবে না।
? ব্লগারে লগইন করুন।
? Layout > Page Elements ট্যাবে চলে যান।
? এখানে একটি HTML / Javascripts গেজেটে নিচের কোডটুকু স্থাপন করুন।<div id="staticmenu" class="wireframemenu" style="left: 10px; top: 20px"> <ul> <li><a href="http://www.rojinamohan.blogspot.com/">Home</a></li> <li><a href="http://www.rojinamohan.blogspot.com/search/label/Blogger">Blogger Tips</a></li> <li><a href="http://www.rojinamohan.blogspot.com/search/label/Ubuntu">Ubuntu Tips</a></li> <li><a href="http://www.rojinamohan.blogspot.com/search/label/Download">Download</a></li> <li><a href="http://www.rojinamohan.blogspot.com/2008/08/email-me.html">Email Me</a></li> <li><a href="http://www.rojinamohan.blogspot.com/2008/11/blog-post_08.html">Support Me</a></li> <li><a href="http://feedburner.google.com/fb/a/mailverify?uri=rmh&loc;=en_US">Subscribe</a></li> </ul> </div>
? সেভ করার আগে উপরের কোড অংশটুকুতে তিনটি বিষয় পরিবর্তন করে নিন।
Ω style=left: 10px; এখানে left-এর বদলে right লিখে দিলে মেনুটি ব্লগের শরীরের ডানপাশে থাকবে।
Ω top: 20px-এর পরিবর্তে 100 বা 200 যেকোন সংখ্যা লিখে দিলে উপর থেকে নিচের দিকে ঠিক সেই জায়গায় থাকবে।
Ω দেওয়া লিংক ও এ্যাংকর টেক্সটগুলো পরিবর্তন করে নিজের প্রয়োজনীয় লিংক ও তার নাম লিখে দিন।
? সেভ করুন।
? সেভ করার পর চলে যান 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 দেখে নিন।
? পছন্দ হলে সেভ করুন।
উপরের কোডে /*Background Color*/ এবং /*Link Color*/ লেখা মন্তব্যদুটোকে লাল রং করা হয়েছে। এই মন্তব্যদুটোর কালার কোড পছন্দ মত পরিবর্তন করে নিতে পারেন।কোডটি ডাউনলোড করার জন্য ক্লিক করুন এখানে।
লেখক সম্পর্কে
0 টি মন্তব্য:
একটি মন্তব্য পোস্ট করুন