Monday, January 30, 2012

பிளாக்கர் : வலைப்பூக்களில் அழகான மெனு பார்கள் (சி.எஸ்.எஸ்.மெனு ) CSS Menu For blogs



அதிகமாக பெரிய இணையதளங்களில் பயன்படுத்த படும் சி.எஸ்.எஸ் பட்டன் -களை நமது ப்ளாக்கில் இலவசமாக இணைக்க இந்த பதிவு பயன்ப்படும்


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

1.BLOGGER DASH BORAD - SELECT SITE ADMIN - TEMPLATE- EDIT HTML 


</head>
கோடிங்கை தேடி அதன் மேலே கீழே உள்ள நிரலை PASTE செய்யவும் ..


<style type="text/css">

.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: lightyellow;
}

.redtheme li a{
font-size:18px;
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}

.greentheme li a{
font-size:12px;
background: green;
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}

.orangetheme li a{
font-size:14px;
background: #e55e3f;
background: -moz-linear-gradient(center top, #ecad9a, #e5937c 25%, #cf4c2a 45%, #e5937c 85%, #ecad9a);
background: -webkit-gradient(linear, center top, center bottom, from(#ecad9a), color-stop(25%, #e5937c), color-stop(45%, #cf4c2a), color-stop(85%, #e5937c), to(#ecad9a));
}

</style>

_______________________________________________________________________________


2.அதன் பின் DESIGN -ADD GETJET / WIDGET/ PAGE ELEMENT - SELECT HTML & JAVASCRIPT -பேஸ்ட் செய்யவும் ..

உதா  நிற பட்டனுக்கு மட்டும்

<div class="gradientbuttons">
<ul>
<li><a href="URL HERE">MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
</ul>
</div>
______________________________________________________________________

சிவப்பு நிற பட்டனுக்கு மட்டும்

<div class="gradientbuttons redtheme">
<ul>
<li><a href="URL HERE">MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
</ul>
</div>
______________________________________________________________________

 பச்சை நிற பட்டனுக்கு மட்டும் 

<div class="gradientbuttons greentheme">
<ul>
<li><a href="URL HERE">MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
</ul>
</div>
________________________________________________________________________

கருப்பு நிற பட்டனுக்கு மட்டும்

<div class="gradientbuttons blacktheme">
<ul>
<li><a href="URL HERE">MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
<li><a href="URL HERE"> MENU</a></li>
</ul>
</div>
__________________________________________________________________________

லைட் சிவப்பு நிற பட்டனுக்கு மட்டும்

<div class="gradientbuttons orangetheme">
<ul>
<li><a href="URL HERE">MENU</a></li>
<li><a href="URL HERE">MENU</a></li>
<li><a href="URL HERE">MENU</a></li>
<li><a href="URL HERE">MENU</a></li>
<li><a href="URL HERE">MENU</a></li>
</ul>
</div>
__________________________________________________________________________


MENU - என்னும் இடத்தில் மெனு பெட்டியில்என்ன இருக்க வேண்டும் 
என்று எழுதிட வேண்டும் . 

URL HERE - என்னும் இடத்தில் URL கொடுத்து விடுங்கள் ..


எப்படி இருக்கும் இந்த மெனுக்கள் :


DEMO :

12 comments:

  1. பல புதிய தொழிற்நுட்ப பகிர்வுகளுக்கு மிக்க நன்றி. தொடருங்கள்...

    ReplyDelete
  2. அழகாக உள்ளது நண்பா! பகிர்வுக்கு நன்றி!

    ReplyDelete
  3. மெனு பார் கலர்புல்லா இருக்கு. நல்ல டிப்ஸ்.

    ReplyDelete
  4. மிகவும் பயனுள்ள பதிவு.

    ReplyDelete
  5. சூப்பரா இருக்கு சார்.. பகிர்விற்கு நன்றி

    ReplyDelete
  6. அழகாக உள்ளது ! நானும் செய்ய வேண்டும் ! வாழ்த்துக்கள் ! நன்றி நண்பரே !

    ReplyDelete
  7. அருமையானதொரு பதிவு. நன்றித் தோழரே!

    ReplyDelete
  8. நன்றாக உள்ளது சகோ . பகிர்வுக்கு நன்றி

    ReplyDelete
  9. பயனுள்ள தகவல் நன்றி

    ReplyDelete
  10. உங்கள் செல் நம்பர் தர இயலுமா,?

    ReplyDelete
  11. enakku menu varuthu anaa athukkulla ok koduththa onnume varamattenkuthu

    ReplyDelete