அஷ்வின் அரங்கம்: உங்கள் பிளாக்கில் நிலையான மெனு பாரினை உருவாக்க.

இன்று எப்படி நிலையான மெனு பார்களை உங்கள் வலைப்பக்கத்திற்கு உருவாக்கிகொள்வது என்று பாப்போம். அனேகமான வலைப்பக்கங்களில் மெனு பார்கள் வலைப்பக்கத்தின் தலைப்பு பகுதியில் காணப்படும். இவை பக்கத்தினை கீழே நகர்த்திச்செல்லும்போது மறைந்துவிடும். ஆனால் இந்த நிலையான மெனு பார்கள் (Fixed Menu Bar) எப்போதும் வலைப்பக்கத்தின் இடது புறத்திலே அழகாக தோற்றமளிக்கும்.
இதனை நானும் செயற்படுத்தியுள்ளேன். என்னுடைய வலைப்பக்க இடதுபுறத்தில் தோன்றும் இவ்வாறான மெனுபாரினை எப்படி உருவாக்கலாம் என பார்க்கலாம்.

நீங்கள் தொடர்ந்து வரும் படிமுறைகளை தொடர்வதற்கு முன் உங்கள் Template இனை Back Up செய்துகொள்வது நல்லது. Back Up செய்துகொள்ள கீழ்வரும் படிமுறையில் செல்லுங்கள்.

Click Design > Edit HTML > Download Full Template

Step 1: உங்கள் ப்ளாக்கர் கணக்கினுள் நுழைந்து Dashboard இனை Click செய்து பின் Design > Template Designer > Advanced என்ற ஒழுங்கில் கிளிக் செய்து கீழ காட்டியுள்ளது போல் Add Css என்பதை கிளிக் செய்யுங்கள்.

Step 2. கீழுள்ள கோடிங் இனை மேலே பெற்ற Add Css பகுதியினுள் பதிவு (Paste) செய்யுங்கள்.

குறிப்பு- தவறாமல் கீழுள்ள Scroll Boxஇனுள் உள்ள அனைத்து பகுதியையும் தெரிவு செய்யுங்கள்.

#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}

/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}

#ver li {
padding:2px;
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}

.clear {
clear:both;
}

*{
/* A universal CSS reset */
margin:0;
padding:0;
}

#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;

/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijY7aXBy8ATpI5IiSTHKFbfo-F7VoeX5Y3BtajDGxJU_3JJfyfHrEjmzLHNpTqbZifPSV65Ri4iISzyRsy4q0QdD1aXlPreH7fOPlvisW-R9nHTX9agXZ8lf9gYiVKzR2c9g93ngt-BAc/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

Step 3. இப்போது பதிவு செய்ததை Apply to blog என்பதை கிளிக் செய்வதன் மூலம் Save செய்துகொள்ளுங்கள். இப்போது Css பகுதி வெற்றிகரமாக பதிவு செய்யப்பட்டுள்ளது.

Step 4. இப்போது உங்கள் ப்ளாக்கின் Design/Layout பகுதிக்கு சென்று Add A Gadget இனை கிளிக் செய்யுங்கள். இப்போது தோன்றும் விண்டோவில் Html/Javascript ஐ கிளிக் செய்யாவும்.

Step 5.தோன்றும் Html/Javascript gadget விண்டோவில் கீழுள்ள கோடிங்கை பதிவு(paste) செய்யவும்.

<li>

Home

</a>

</li>

<li>

About

</a>

</li>

<li>

Blogger Tips

</a>

</li>

<li>

KAVITHAIGAL

</a>

</li>

<li>

Contact us

</a>

</li>

</ul>

</div><a href="http://ashwin-win.blogspot.com//" target="_blank">Get The Fixed Menu Gadget</a>

குறிப்பு: மேலே கோடிங்கில் மஞ்சள் நிறத்திலுள்ள மெனு பார்களின் பெயர்களையும் சிவப்பு நிறத்திலுள்ள அவற்றுக்குரிய URL களினையும் உங்கள் விருப்பத்திற்கேற்றால் போல் மாற்றிக்கொள்ளவும்.

Step 6. இறுதியாக Gadget இனை Save செய்துகொள்ளுங்கள். இப்போது உருவாக்கிய Gadget இனை drag செய்து Layout பக்கத்தின் இறுதியில் வருமாறு விடவும்..

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
பதிவு பயனுள்ளதாக இருந்தால் உங்கள் கருத்துக்களை பதிவு செய்யுங்கள். அத்தோடு மற்றவர்களையும் சென்றடைய பரிந்துரை செய்யுங்கள்..

நன்றி: spiceupurblog
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Post Comment

3 comments:

stalin wesley said...: கோடிங்கை காணோம்,.....நண்பர் அஸ்வின்; November 16, 2011 at 10:18 PM
Ashwin-WIN said...: @stalin wesley
சுட்டிக்காட்டியமைக்கு நன்றி நண்பரே. பின்னணி படத்தில் ஒரு தவறு இருந்தது. இப்போது சரி செய்யப்பட்டு விட்டது.; November 17, 2011 at 12:05 AM
Anonymous said...: I luv your posts and your design. Goooood work. kamagra 100mg; January 5, 2012 at 10:10 AM