பிளாக்கர் தளங்களில் ஆரம்பித்த உடனே சாதாரணமாகவே அவர்கள் டெம்ப்ளேட் ..., விட்ஜெட் , மெனு பார்கள் , மேலும் அந்த வார்ப்புருகளை நமக்கேற்ற படிக்க அமைக்க வார்ப்புரு வடிவமைப்பான் நமக்கு இலவசமாக வழங்கி மேலும் நமக்கான இலவச எத்தனை இடுகைகள் வேண்டுமானாலும் பகிர்ந்து கொள்ளலாம் என்ற சுதந்திரத்தையும் கூகிளின் பிளாக்கர் தளம் வழங்குகிறது ,.மேலும் நமக்கு சாதாரணமாக உள்ள வார்ப்புரு பிடிக்கவில்லை
தனிபயன் வார்ப்புருவை பயன்படுத்தி கொள்ளலாம் .. இதில் நாம் கஷ்டம் டெம்ப்ளேட் நிறுவி இருந்தாலும் சில விட்ஜெட் ,சில மூன்றாம் தரப்பு குறியீடுகளை பிளாக்கர் டெம்ப்ளேட்-டோடு இணைப்போம் ..
இன்று நாம் பார்க்க போவது பிளாக்கர் தளத்திற்கு தேவையான அல்லது அழகான மெனு பார்கள் ..
கீழே வரும் சிறு மாற்றங்களை செய்வதன் மூலம் இது போன்ற மெனு பார்களை பெறலாம் ..
ஒரே படியில் இணைக்க :
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>
<div class="section" id="pages">
<div class="widget PageList" id="PageList1">
<br />
<br />
<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></div>
மெனு பார் பிடித்திருந்தால் உங்கள் வலைப்பதிவில் (வலைப்பூ ) இணைத்து கொள்ளுங்கள்
சமூகத் தளங்களில் பகிர்ந்து கொள்ளுங்கள் .. நன்றி நண்பர்களே .
Post a Comment