tamilkurinji logo


 

உங்கள் பிளாக்கில் நிலையான மெனு பாரினை உருவாக்க,




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

First Published : Wednesday , 16th November 2011 05:03:46 PM
Last Updated : Wednesday , 31st December 1969 05:00:00 PM


உங்கள் பிளாக்கில் நிலையான மெனு பாரினை உருவாக்க,

இன்றுஎப்படி நிலையான மெனு பார்களை உங்கள் வலைப்பக்கத்திற்கு உருவாக்கிகொள்வது என்று பாப்போம். அனேகமான வலைப்பக்கங்களில் மெனு பார்கள் வலைப்பக்கத்தின் தலைப்பு பகுதியில் காணப்படும். இவை பக்கத்தினை கீழே நகர்த்திச்செல்லும்போது மறைந்துவிடும். ஆனால் இந்த நிலையான மெனு பார்கள் (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('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/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) செய்யவும்.

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="http://ashwin-win.blogspot.com/">
<span>Home</span>
</a>
</li>

<li>

<a class="about" href="http://www.blogger.com/profile/09635670740303908630">
<span>About</span>
</a>
</li>

<li>
<a class="services" href="http://ashwin-win.blogspot.com/2011/06/menu-bar.html">
<span>Blogger Tips</span>
</a>

</li>

<li>
<a class="portfolio" href="http://ashwin-win.blogspot.com/2011/02/blog-post.html">
<span>KAVITHAIGAL</span>
</a>
</li>

<li>
<a class="contact" href="http://networkedblogs.com/blog/ashwin_arangam/?ahash=4c79e34723b4cb2f93e2ea4314da432c">
<span>Contact us</span>
</a>
</li>
</ul>
</div><a href="http://ashwin-win.blogspot.com//" target="_blank"><small>Get The Fixed Menu Gadget</small></a>

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

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


உங்கள் பிளாக்கில் நிலையான மெனு பாரினை உருவாக்க, உங்கள் பிளாக்கில் நிலையான மெனு பாரினை உருவாக்க, உங்கள் பிளாக்கில் நிலையான மெனு பாரினை உருவாக்க,
Potato Capsicum Green Peas Curry சென்னை காரக்குழம்பு Kathirikai varuval
 ரிவர்ஸ் கியர் கொண்ட ராட்சத 'கன்பஸ் 410' பைக்
உலகில் இதுவரை கார்கள், மோட்டார் சைக்கிள்களில் பலவிதமான சாதனைகள் நிகழ்த்தப்பட்டிருக்கிறது. சில சமயங்களில் புதிய வடிவமைப்புகளுக்காக கார் மற்றும் மோட்டார் சைக்கிள்கள் சாதனை படைத்ததுண்டு. அந்த வகையில் ஜெர்மனியை சேர்ந்த நிறுவனம் ஒன்று பழைய கின்னஸ் சாதனைகளை முறியடித்து புதிய மோட்டார்சைக்கிள்

மேலும்...

 வாட்ஸேஎஅப்’பை 16 பில்லியன் டாலர்களுக்கு வாங்கும் ‘ஃபேஸ்புக்’ நிறுவனம்
காலத்தின் நவீனமயத்துக்கு ஏற்ப இந்த பரந்த உலகின் தகவல் தொடர்பு சாதனங்கள் மிகவும் குறுகிப்போய் கைபேசியின் துணையால் உள்ளங்கையில் உலகம் என்ற அளவுக்கு சுருங்கி விட்டது. ’பேஜர்’, ’செல்போன்’, எதிர் முனையில் இருப்பவரின்  முகத்தை பார்த்தபடியே பேசும் திறன் கொண்ட ‘3-ஜி

மேலும்...

 வீடியோ எடிட்டிங், ஸ்கிரீன் ரெக்கார்டிங் செய்ய இலவச மென்பொருள்...
வணக்கம் நண்பர்களே..! இன்றையப் பதிவில் ஒரு அருமையான வீடியோ எடிட்டிங் மென்பொருளைப் பற்றிப் பார்ப்போம். வீடியோவை எடிட் செய்ய இந்த வகையான மென்பொருள்கள் இணையத்தில் இலவசமாகவே கிடைக்கிறது. அவ்வாறான இலவச மென்பொருள்களில் பயன்மிக்க ஒன்றுதான் Corel VideoStudio Pro X5. இந்த மென்பொருளைப்

மேலும்...

 ரொம்ப சுலபம் இ காமர்ஸ் செய்வது!
செல்லிஸ் என்று ஒரு இணைய தளம் இருக்கிற‌து.எல்லோரையும் இ காமர்சிற்கு அழைத்து வரும் இணையதளம் இது.இ காமர்ஸ் என்றால் இனையம் மூலம் பொருட்களை வாங்குவது மட்டும் அல்ல இணையம் மூலம் பொருட்களை விற்பனை செய்வதும் தான்.ஆம் இந்த தளம் இணையம் மூலம்

மேலும்...

 
பிற செய்திகள்

மேலும்...

Comments
Reply Message

Post Your Comments
Name*
Email ID *
* தமிழ் எழுத்துக்கள் இந்தப்பெட்டியில் தோன்றும் (உம்) அம்மா

Match any where Exact Match


















மகளிர்

























Home News Cinema Gallery Privacy Policy Contact us Free Ads
சற்று முன் தமிழகம் இந்தியா உலகம் வர்த்தகம் விளையாட்டு சினிமா
Copyright © 2010 Indianinfotech.in