Saturday, April 7, 2012

ப்ளாக்கர் : ரிப்பன் மெனு பார்கள் ( Ribbon Menu For Blogger )




ப்ளாக் வைத்திருக்கும் அனைவரும் அவரவர்கள் அவர்களுக்கு பிடித்த மெனு பார்களை தான் பயன்படுத்துவார்கள் ... அந்த வகையில் பிளாக்கர் தளமும் இயல்பாக சாதாரண மெனு பார்களை கொடுக்கிறது .. அனால் சிலருக்கு மற்ற தளங்களில் பார்த்த சில மெனு பார்களை நாமும் கொண்டு வர வேண்டும் என்று நினைப்பார்கள் ... அப்படி நாம் பார்த்து ஒரு மெனு தான் இந்த ரிப்பன் மெனுபார்கள் ...
பார்ப்பதை விட அதன் hover effect தான் மிக அழகாக இருக்கும் ..

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


1.முதலில்  ]]</b:skin>  என்பதை கண்டறிந்து அதற்கு மேலே 

கீழே உள்ள நிரலைPASTE செய்யவும் ...

.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
    border:1.5em solid #FF1493;
}

.ribbon:after {
    border-right-color:transparent;
}

.ribbon:before {
    border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.4em;
    overflow:hidden;
}
.ribbon span {
    background:#FF1493;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
    -webkit-transition: background, margin 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background, margin 0.2s;  /* FF4+ */
    -ms-transition: background, margin 0.2s;  /* IE10 */
    -o-transition: background-color, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background, margin 0.2s;
}

.ribbon a:hover span {
    background:#1E90FF;
    margin-top:0;
    color:#EEE;
}

.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #000;
    border-bottom:0.5em solid #FF1493;
}

.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #000;
    border-bottom:0.5em solid #FF1493;
}


தேவையான இடத்தில் ஒரு பக்க உறுப்பை உருவாக்கி

அங்கே PASTE செய்யது மேலே இழுத்து விடவும் 

..( ADD A Widget--HTML & Java Script --PASTE the code)
<div class='ribbon'>
<a href='URL HERE'><span>Home</span></a>
<a href='URL HERE'><span>About</span></a>
<a href='URL HERE'><span>Services</span></a>
<a href='URL HERE'><span>Contact</span></a>
<a href='URL HERE'><span>LIST 1</span></a>
<a href='URL HERE'><span>LIST 2</span></a>
<a href='URL HERE'><span>LIST 3</span></a>
<a href='URL HERE'><span>LIST 4</span></a>
<a href='URL HERE'><span>LIST 5</span></a>
</div>

--சரி எப்படி இருக்கும் இந்த மெனுபார்கள்


இங்கே சென்று பார்க்கவும்

மெனுபார் வகை இரண்டு :

  ]]</b:skin> -க்கு முன்னே இணைக்க வேண்டியவை :

.ribbon2:after, .ribbon2:before {
    margin-top:0.5em;
    content: "";
    float:left;
    border:1.5em solid #fff;
}
 
.ribbon2:after {
    border-right-color:transparent;
}
 
.ribbon2:before {
    border-left-color:transparent;
}
.ribbon2 a:link, .ribbon2 a:visited { 
    color:#000;
    text-decoration:none;
    float:left;
    height:3.4em;
    overflow:hidden;
}
.ribbon2 span {
    background:#fff;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
 
    -webkit-transition: background, margin 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background, margin 0.2s;  /* FF4+ */
    -ms-transition: background, margin 0.2s;  /* IE10 */
    -o-transition: background-color, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background, margin 0.2s;
}
 
.ribbon2 a:hover span {
    background:#FFD204;
    margin-top:0;
}
 
.ribbon2 span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
 
.ribbon2 span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
 
 

<div class='ribbon2'>
<a href='URL HERE'><span>Home</span></a>
<a href='URL HERE'><span>About</span></a>
<a href='URL HERE'><span>Services</span></a>
<a href='URL HERE'><span>Contact</span></a>
<a href='URL HERE'><span>LIST 1</span></a>
<a href='URL HERE'><span>LIST 2</span></a>
<a href='URL HERE'><span>LIST 3</span></a>
<a href='URL HERE'><span>LIST 4</span></a>
<a href='URL HERE'><span>LIST 5</span></a>
</div>


மெனு  பார் பிடித்திருந்தால் பயன்படுத்தவும் ..

நன்றி ...

6 comments:

  1. எனது வலைபூவிருக்கு செய்து பார்க்கிறேன் நண்பா ..
    தொடரட்டும் உங்களது சேவை . நன்றி

    ReplyDelete
    Replies
    1. தங்கள் வருகைக்கு நன்றி நண்பா

      Delete
  2. பயனுள்ள பகிர்வு
    நன்றி

    ReplyDelete
  3. புதிய மெனு பார் அன்பரே நன்றி

    ReplyDelete
  4. அழகான மெனு பார்கள் ! நன்றி நண்பரே !

    ReplyDelete
  5. unkal thalam mika arumaiyana thakavalkalai kondullathu.nanri stalin

    ReplyDelete