ப்ளாக்கர் : ஓடும் எழுத்துக்களை அழகாக காட்ட ( HTML Marquee )

 பிளாக்கர் : தளத்தில் ஓடும் எழுத்துக்களை அழகாகக் காட்ட

நமது இணைய தளத்திலோ அல்லது ப்ளாக்-கிலோ பலரையும் கவரும் படி ஓடும் எழுத்துக்களை கொண்டு வந்திருப்போம் ....

இந்த எழுத்துக்களை ஹச்.டி.எம்.எலில் marquee என்னும் tag -ஐ கொண்டு
இது போன்ற எழுத்துகளை நாம் கொண்டு வர முடியும் ..


வலது பபுறத்தில் இருந்து இடது புறத்திற்கு ...மற்றும் இடது புட்டத்தில் இருந்து வலது புறத்திற்கும் .... மேலே இருந்து கீழும் ...கீழிருந்து மேலும் கொண்டு வருவதை அனைவரும் அறிந்திருப்பீர்கள் ..

இன்று நாம் பார்க்க போவது ஓடும் எழுத்துக்களை அழகாக எப்படி காட்டலாம்

என்று ....

முதலில் சாதாரணமாக எப்படி கொண்டு வருவது என்று பார்போம் .

எழுத்துக்கள் இடது புறத்தில் இருந்து வந்து வலதுபுறத்தில் நின்று விடும் ..

இது Slide வகை :

<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>

left- என்பதற்கு பதிலாக right ---- up--- down என்றெல்லாம் கொடுத்தால் அதற்கேற்ப மேலும் ,கீழும் ,முன்னும் ,பின்னும் வரும் ..

Your slide-in text goes here

இது ஓடிக்கொண்டே இருக்கும்

<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>

Your scrolling text goes here

அடுத்த வகை இரு புறமும் முட்டி கொண்டே இருக்கும் ..

<marquee behavior="alternate">Your bouncing text goes here</marquee>

Your bouncing text goes here

இனி .... அழகாக காட்ட ..

நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் இங்கே .

நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் இங்கே.

தேவையான இடத்தில் கீழே உள்ள கோடிங்கை PASTE செய்யவும் ...

<style>
.wes-mobmarquee {width:600px; height:40px; overflow:hidden; position:relative; border:4px solid rgb(204, 204, 204); margin:0 auto;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

background:#4ad;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

}
.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-moz-animation-name: scroll;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:10s;
-webkit-animation-name: scroll;
}
.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:bold; padding:0 10px;
}
.scroller div a {color:#c00;}

@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}

.scroller:hover {
 -moz-animation-play-state: paused;
 }


@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}

.scroller:hover {
 -webkit-animation-play-state: paused;
 }
</style>

<br />
<div class="wes-mobmarquee">
<div class="scroller">
<div>
நண்பர்களே இந்த தளத்தை தொடர   <a href="http://wesmob.blogspot.com/">இங்கே </a>.</div>
<div>
கிளிக் செய்யவும்  <a href="http://wesmob.blogspot.com/">links</a>.</div>
</div>
</div>
</div>

பச்சை நிறத்தில் வருவதற்கு :

நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் இங்கே .

நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் இங்கே.

தேவையான இடத்தில் கீழே உள்ள கோடிங்கை PASTE செய்யவும் ...

<style type="text/css">

.wes-mob1Marquee {width:600px; height:40px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

background:#29B144;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

}
.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-moz-animation-name: scroll;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:10s;
-webkit-animation-name: scroll;
}
.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:normal; padding:0 10px;
}
.scroller div a {color:#c00;}

@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}

.scroller:hover {
 -moz-animation-play-state: paused;
 }


@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}

.scroller:hover {
 -webkit-animation-play-state: paused;
 }

</style>
<div class="wes-mob1Marquee">
<div class="scroller">
<div>
நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும்  <a href="http://www.blogger.com/follow-blog.g?blogID=2520572890373901885">இங்கே </a>.</div>
<div>
நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் <a href="http://www.blogger.com/follow-blog.g?blogID=2520572890373901885">இங்கே</a>.</div>
</div>
</div>
</div>

நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் இங்கே .

நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் இங்கே.

இந்த (மேலே) நிறத்தில் வருவதற்கு :

<style type="text/css">
.wes-mob2Marquee {width:600px; height:40px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

background:#DD8D16;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

}
.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-moz-animation-name: scroll;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:10s;
-webkit-animation-name: scroll;
}
.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:normal; padding:0 10px;
}
.scroller div a {color:#c00;}

@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}

.scroller:hover {
 -moz-animation-play-state: paused;
 }


@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}

.scroller:hover {
 -webkit-animation-play-state: paused;
 }
</style>

<div class="wes-mob2Marquee">
<div class="scroller">
<div>
நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும்  <a href="http://www.blogger.com/follow-blog.g?blogID=2520572890373901885">இங்கே </a>.</div>
<div>
நண்பர்கள் இந்த தளத்தை தொடர கிளிக் செய்யவும் <a href="http://www.blogger.com/follow-blog.g?blogID=2520572890373901885">இங்கே</a>.</div>
</div>
</div>
</div>

</div>

மேலும் இந்த MARQUEE பயன்கள் :

--- இந்த தொட்டவுடன் நின்று விடும் ..

----600PX ; அளவு அகலம் கொண்டது ..

நன்றி .....

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

சந்தேகம் இருந்தால் கண்டிப்பாக கேட்கவும் ...

• Next ப்ளாக்கர் : தெளிவான Related Post widget புதிய பதிப்பு
• Previous ப்ளாக்கர் : "Quick Edit" ஐக்கானை மறைக்க ( Hide Quick Edit )