Monday, April 2, 2012

ப்ளாக்கர் : ஓடும் எழுத்துக்களை அழகாக காட்ட ( 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 ; அளவு அகலம் கொண்டது ..

நன்றி .....

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

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


10 comments:

  1. நல்ல விஷயமாகத்தான் தெரிகிறது. ஆனால் இந்த கோடிங்கை எங்கே பேஸ்ட் செய்வது ஐய? தேவையான இடம் என்றால்.. Design - Edit Hml சென்று எங்கே பேஸ்ட் செய்ய வேண்டும்? விளக்கினால் உதவிகரமாக இருக்கும்...

    ReplyDelete
    Replies
    1. சார் பதிவுகளில் பயன்படுத்த புதிய பதிவு எழுதும் போது EDITER -ல் வலதுப்பக்கதில் மேலே ஒரு பட்டன்கள் இருக்கும் அதில் HTML என்னும் பட்டனை கிளிக் செய்து அங்கெ PASTE செய்யவும் ....

      விட்ஜேட் -ல் பயன்படுத்த ....LAYOUT---- ADD A GEDJET----HTML ..JAVASCRIPT-அங்கே பேஸ்ட் செய்யவும் ...

      நன்றி ...

      Delete
  2. நல்ல தகவல் அன்பரே நான் நீண்ட நாட்களாய் இதை தேடினேன் நன்றி

    ReplyDelete
  3. மிகவும் பயனுள்ள பகிர்வு .. நன்றி நண்பா

    ReplyDelete
  4. அருமையான பதிவு நன்றி நண்பா

    ReplyDelete
  5. மிக நீண்ட எழுத்துக்கள் அமைக்க முடியவில்லை. அமைத்தாலும் கடைசி எழுத்துக்கள் வரவில்லை. ர்ஹங்களது லிங்க் ஐ அப்படியே காப்பி செய்து பேஸ்ட் செய்தேன்.

    எனக்கு யாரேனும் உதவ முடியுமா?

    ReplyDelete
  6. நல்ல தகவல் , நன்றி ..

    ReplyDelete
  7. நல்ல பதிவு ! நன்றி நண்பரே ! வாழ்த்துக்கள் !

    ReplyDelete
  8. நேற்றுதான் தங்கள் வலைதளத்தை பார்த்தேன். பதிவர்களுக்கு பல தகவல்களை பதிந்துள்ளீர்கள்.மிகவும் பயனடைந்தேன்.நன்றி.

    ReplyDelete