Friday, March 2, 2012

பிளாக்கர் : அழகான கலர் கலரான மெனு பார்கள் ( வலைப்பூக்களுக்கு )




பிளாக்கர் தளங்களில் ஆரம்பித்த உடனே சாதாரணமாகவே அவர்கள் டெம்ப்ளேட் ..., விட்ஜெட் , மெனு பார்கள் , மேலும் அந்த வார்ப்புருகளை நமக்கேற்ற படிக்க அமைக்க வார்ப்புரு வடிவமைப்பான் நமக்கு இலவசமாக வழங்கி மேலும் நமக்கான இலவச எத்தனை இடுகைகள் வேண்டுமானாலும் பகிர்ந்து கொள்ளலாம் என்ற சுதந்திரத்தையும் கூகிளின் பிளாக்கர் தளம் வழங்குகிறது ,.மேலும் நமக்கு சாதாரணமாக உள்ள வார்ப்புரு பிடிக்கவில்லை
தனிபயன் வார்ப்புருவை பயன்படுத்தி கொள்ளலாம் .. இதில் நாம் கஷ்டம் டெம்ப்ளேட் நிறுவி இருந்தாலும் சில விட்ஜெட் ,சில மூன்றாம் தரப்பு குறியீடுகளை பிளாக்கர் டெம்ப்ளேட்-டோடு இணைப்போம் ..

இன்று நாம் பார்க்க போவது பிளாக்கர் தளத்திற்கு தேவையான அல்லது அழகான மெனு பார்கள் ..

கீழே வரும் சிறு மாற்றங்களை செய்வதன் மூலம் இது போன்ற மெனு பார்களை பெறலாம் ..

ஒரே படியில் இணைக்க :


DESIGN- ADD A GEDJET - HTML & JAVA SCRIPT தேர்வு செய்து அங்கு PASTE செய்யவும்


<style>/* Navi----------------------------------------------- */nav {background: #fbfbfb;border-top: 2px solid #FFFFFF;overflow: hidden;position: relative;width: 100%;}nav:after {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 2px;background: white;}nav ul {background: -moz-linear-gradient(left,#666 0%,#666 50%,#41d05f 100%);background: -webkit-gradient(linear, left top, right top,color-stop(0%,#fbfbfb),color-stop(50%,#fbfbfb),color-stop(50%,#41d05f),color-stop(100%,#41d05f));list-style: none;overflow: hidden;padding: 0 0 0 10px;width: 960px;}nav li {display: inline;}nav a {color: white;display: block;float: left;font-family: HelveticaNeue, Helvetica, Arial, Sans-Serif;font-size: 16px;font-weight:800;padding: 10px 0;text-decoration: none;text-align: center;width: 15%;-webkit-transition: width 0.12s ease;-moz-transition: width 0.12s ease;-o-transition: width 0.12s ease;transition: width 0.12s ease;}nav a:hover {color: white;}nav a:hover span {border-bottom: 2px solid white;}nav li:nth-child(1) a {background: #ff8400;z-index: 100;position: relative;}nav li:nth-child(2) a {background: #e42b2b;}nav li:nth-child(3) a {background: #a800ff;}nav li:nth-child(4) a {background: #49a7f3;}nav li:nth-child(5) a {background: #41d05f;}nav li:nth-child(6) a {background: #444;}.home nav {border-bottom-color: #ff8400;}.forums nav {border-bottom-color: #e42b2b;}.videos nav {border-bottom-color: #a800ff;}.downloads nav {border-bottom-color: #49a7f3;}.contato nav {border-bottom-color: #41d05f;}nav li:hover a {width: 20%;}nav ul:hover .active {width: 19%;}nav ul:hover .active:hover {width: 20%;}nav li a.active {width: 20%;}.bub{text-decoration:none;text-align:center;position:absolute;top:200px;left:200px;width:60px;height:60px;background-color:#33CCFF;border-radius:50px;-moz-border-radius: 50px;-webkit-border-radius: 50px;font-family: Calibri, Helvetica, sans-serif;font-size:130%;font-weight:bold;line-height:1.8em;color:#FFf;}.bub:hover{top:130px; left:130px; width:200px; height:200px; border-radius:400px;-moz-border-radius: 400px;-webkit-border-radius: 400px;-webkit-transition: ease 1s;-moz-transition: ease 1s;z-index:10;}.bub i{top:12px; position:relative; font-size:90%; text-transform:none;}.bub span{display:none;position:relative;top:80px;text-decoration:none;}.bub:hover span{display:block;}</style>

<nav><ul><li><a href="LINK HERE">TEXT HERE</a></li><li><a href="http://nasalab4.blogspot.in/">பிளாக்கர் </a></li><li><a href="http://nasalab4.blogspot.in/">HTML </a></li><li><a href="http://nasalab4.blogspot.in/">INTERNET</a></li><li><a href="http://nasalab4.blogspot.in/">ALL POST</a></li><li><a href="LINK HERE">TEXT HERE</a></li></ul></nav> 



குறிப்பு : LINK HERE மற்றும் TEXT HERE என்னும் இடத்தில் லிங்க்-கையும்

டெக்ஸ்ட் -டையும் கொடுத்து விட வேண்டியது தான் ..

மேலும் பகுதிகள் தேவைப்பட்டால்  


<li><a href="LINK HERE">TEXT HERE</a></li>

இந்த கோடிங்கை </ul> என்பதற்கு முன்னே இணைத்து கொள்ளவும் 


சரி எப்படி இருக்கும் இந்த வகையான மெனு பார்கள்  : 




மெனு பார் பிடித்திருந்தால் உங்கள் வலைப்பதிவில் (வலைப்பூ ) இணைத்து கொள்ளுங்கள்

சமூகத் தளங்களில் பகிர்ந்து கொள்ளுங்கள் .. நன்றி நண்பர்களே .

3 comments:

  1. உங்களுடைய பதிவுகள் பலரை சென்றடைய வேண்டுமா? உங்கள் பதிவுகளை சுலபமாக கூகிள்சிறி இணையத்தளத்தில் இணைக்கலாம். உங்கள் பதிவின் சுருக்கத்தையும் அதன் இணைப்பையும் rss4sk.googlesri@blogger.com என்ற மின்னஞ்சல் முகவரிக்கு மின்னஞ்சல் செய்யுங்கள். இது தமிழ்மணம் பரப்புகிறோம் என்று கூறிக்கொண்டு உங்கள் படைப்புக்களை உங்களிடமே பணம் கறந்து பிரசுரிக்கும் கீழ்த்தர சேவை இல்லை.முற்றிலும் இலவசமான உங்கள் பங்களிப்பை மட்டுமே கொண்ட சேவை.மேலதிக தகவல்களுக்கு கீழுள்ள முகவரிக்கு செல்லுங்கள் http://www.googlesri.com/2012/03/blog-post_4830.html

    ReplyDelete
  2. அழகாக இருக்கு ! நன்றி நண்பரே !

    ReplyDelete
  3. மெனுவில் உட்பிரிவுகள் உருவாக்க முடியாதா.உதவுங்கள்

    ReplyDelete