ব্লগে Leftmenu বা Sidebar তৈরি করুন — Javascript সমূহ – ৪

[ছবি: 8xDEn.png]
প্রথমে আপনি আপনার ব্লগে লগিন করুন এবং ডিজাইনে ক্লিক করুন
তারপর আপনার পছন্দ মত যে যায়গায় আপনি গ্যাজেট যুক্ত করতে চান সেই জায়গায় ক্লিক করুন তারপর HTML/JavaScript এর ঘরে কোড গুলো কপি করে পেস্ট করুন
</div>
<div><code><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></code></div>
<div>
  • সেভ করার আগে উপরের কোড অংশটুকুতে তিনটি বিষয় পরিবর্তন করে নিন।
  • style=left: 10px; এখানে left বদলে right লিখে দিলে মেনুটি ব্লগের শরীরের ডানপাশে থাকবে।
  • top: 20px এর পরিবর্তে 100 বা 200 যেকোন সংখ্যা লিখে দিলে উপর থেকে নিচের দিকে ঠিক সেই জায়গায় থাকবে।
  • http://www.torrentsbd.com ও বাংলা ফোরাম টরেন্টসবিডি.কম, মোবাইল বিজ্ঞান ও প্রযুক্তি এই গুলো পরিবর্তন করে নিজের প্রয়োজনীয় লিংক ও তার নাম লিখে দিন।#সেভ করার পর চলে যান Layout > Edit HTML অংশে।
  • এখানে Expand Widgets Templates এর পাশের চেকবক্সে টিকচিহ্ন দিতে হবে না।
  • HTML কোডের মাঝামাঝি ]]></b:skin> লেখাটি খুঁজে বের করুন।
  • এই লেখাটুকু সম্পূর্ণ মুছে দিন।
  • লেখাটি যে জায়গায় ছিল ঠিক সেই জায়গায় নিচের কোডটুকু স্থাপন করুন।
</div>
.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.torrentsbd.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>

*উপরের কোডে আমি /*Background Color*/ এবং /*Link Color*/ লেখাগুলোকে কালার কোড বসিয়ে নিবেন এখান থেকে
*PREVIEW দেখে নিন। পছন্দ হলে সেভ
এই রকম আরো জানতে চলে আসুন     এখানে

Level New

আমি শুভ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 14 বছর যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 51 টি টিউন ও 184 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমাকে ফেসবুকে পেতে http://www.facebook.com/shuvobd1020


টিউনস


আরও টিউনস


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


টিউমেন্টস

ধন্যবাদ টিউনটি করার জন্য , এটি নিয়ে আজকেই পোস্ট দিতাম । আমাকে কয়েকজন এটা নিয়ে টিউন করার জন্য অনুরোধ করেছিল । যাক আপনি আমার কস্ট কমিয়ে দিলেন ।

jotil vhi