Saturday, February 4, 2012

பிளாக்கர் : வலைப்பூக்களில் நிலையான மெனு பார்கள் ( Fixed menu For Blogger )




வலைப்பதிவு (வலைப்பூ )வுக்கு வருபவர்கள் அடுத்த பக்கங்களுக்கு செல்ல துணை புரிவது இந்த மெனு பார்கள் தான் ..இந்த மெனு பார்களில் வகைகள் தனித்தனியாக பிரிக்க பட்டிருக்கும் .. மேலும் அவர்களை பற்றி ,அவர்களை தொடர்பு கொள்ளும் பக்கங்கள் ஆகியவையும் ,பேஸ் புக் ,ட்விட்டர் , போன்ற பக்கங்களின் இணைப்பையும் இந்த மெனு பார்களில் கொடுத்து இருப்பார்கள் . 

எல்லா வலைப் பதிவுகளிலும் வலைப்பூக்களின் மெனு பார் வலைப்பதிவின் மேற்பகுதில் தான் இருக்கும் . வலைப்பதிவின்  நடுப்பகுதிக்கோ கீழ்ப்பகுதிக்கோ சென்றால் மீண்டும் BACK TO TOP பட்டனை அழுத்தி தான் இந்த மெனு பார்-ஐ 
பார்க்க முடியும் . 

இன்று நாம் பார்க்க போவது வலைபூக்களில் நிலையான மெனுபார்கள் .. 
வலைப் பதிவின் அடிப்பகுதியில்(BLOG FOOTER) நின்றால் கூட இந்த மெனு பாரை பார்க்க முடியும் . 

எப்படி இணைக்கலாம் இந்த நிலையான மெனு பாரை

அதன்எப்படி இருக்கும் என்று பார்த்து விட்டு வாருங்கள்

DEMO (டெமோ)

1.DASH BORAD -TEMPLATE-EDIT HTML -TICK EXPAND WIDGETS


முதலில்  கீழே உள்ள கோடிங்கை தேடி(CTRL+F) அதன் முன்பாக பின்வரும் கோடிங்கை இணைக்கவும்


]]></b:skin>


/* wesmob-menu euy */
.menu {
 position: fixed;
 left: 0;
 top: 0;
 margin: 0;
 width: 100%;
 padding: 0 10px;
 background-color: rgba(30,30,30,.8);
 border-bottom: solid 1px rgba(0,0,0,.1);
 box-shadow: 0 0 20px rgba(0,0,0,1);
 z-index: 100;
}
.menu ul {
 width: 900px;
 font-size: 16px;
 margin: 0 auto;
}
.menu ul li {
 display: block;
 float: left;
}
.menu ul li.kidd a {
 color: #f00;
 font-weight: bold;
}
.menu ul li a, .menu ul li.kidd {
 float: left;
 display: block;
 text-decoration: none;
}
.menu ul li a {
 padding: 10px;
 color: #aaa;
}
.menu ul li a:hover {
 background-color: rgba(255,255,255,.05);
 color: #fff;
}

2.  அதன் பின் கீழே வரும் கோடிங்கை தேடி அதற்கு முன்பாகவோ அல்லது 


பின்பாகவோ (அதில் சொல்லப்பட்ட படி இணைக்கவும் )


<body  (பின் இணைக்கவும் )

 
</body> (முன் இணைக்கவும் )


<div class="menu">
<ul>
<li class="kidd"><a href="/">Home</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-1</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-2</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-3</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-4</a></li>
<li><a href="http://YOUR-LINK-HERE">TITLE-5</a></li>
</ul>
</div>





SAVE TEMPLATE கொடுத்து விட்டு போய் பாருங்கள் ...


நீங்கள்வலைப்பதிவின் எந்த பக்கம் சென்றாலும் இந்த TAB பாரின் கீழே நிற்கும் ..


இந்த தளத்தில் உறுப்பினராக வில்லை என்றால் இங்கு சென்றுஉறுப்பினராகி

கொள்ளவும் (பிளாக்கர் பயனர்கள் மட்டும் )



நன்றி ...



4 comments: