blogger website me slider animated text kaise add kare.? Good looking blog banana har kisi blogger ka sapna hota hai. kyoki blog jitna simple aur good looking hota hai visitor utne hi attract hote hai. Vaise to WordPress walo ko design se related koi problem nahi hota kyoki uske liye Millions of professional looking template available hai lekin baat aati hai blogger ki to uska customization khud se karna padta hai. Agar aap apne blog me sliding text add karna chahte hai to is post ko last tak read karen.



vaise to sliding text/message banana bahut easy hai ek chhote se html tag ki help se hum sliding text bana sakte hai but hum isko thoda customiz karke ek new look ke sath show karenge.

Sliding text ke fayede kya hai?
Agar aap soch rahe ho sliding text kyo use kare to iske fayede ke baare me thoda jaano.
1. Sliding text ko aap header me koi message ya koi notification dene ke liye use kar sakte hai jo ki ek professional looking hoga.
2. blog me kuch aise post kar rahe hai jisme warning ya disclaimer dena pad raha ho waha bhi ise use kar sakte hai.
3. flicker news widget jaisa koi important ya tranding post ko header ya footer me add kar sakte hai.

Blog me animated sliding text kaise add kare

Sliding text ke liye simple sa html tag use karte hai jo hai <marquee></marquee> tag. aapne kabhi html padha hoga to ye aapko pata hi hoga but kuch newbies ko pata nahi hota. aise me wo bhi is code ki help se add kar sakte hai.

Code

<marquee> Animated text </marquee>

Output
Animated text

---

Is code ko ab thoda customiz karte hai.. zaruri nahi ki har blogger ko ek hi size, color, speed ka use ho. ho sakta hai kisi ko colored me chahiye ya speed kam ya jyada ho etc. to ab hum iska sliding speed, color, type sab change karenge.

1. Size -

Niche code me aap font-size:200% me aap 200% ko change kar marquee ka size change kar sakte hai.
Code
<marquee>ten iron</marquee>

OutputAnimated scrolling text

---

2. Color

Agar aap is text ka color aur background color change karna chahte hai to niche diye code me color:#ColorCode aur background color ke liye background-color:#ColorCode tag me changes sakte hai. #colorcode me aap name bhi likh sakte hai jaise green, yellow, black etc but kisi color ka dark or light form use karne ke liye Hex code jo ki #FF00FF me rahta hai use karna padega. Hex code ke liye yaha click kare
Code
<marquee>Animated text example</marquee>

OutputAnimated text example

---

3. Speed:

warning/disclaimers messages show karne ke liye slow speed aur welcome messages, news flicker jaise other post link add karne ke liye thoda fast speed achchha rahta hai. sliding animated text speed slow ya fast karne ke liye ye code use karen.

Code
<marquee scrollamount="1" width="100%">Animated text example</marquee>

Output
Slow : Animated text example
Medium : Animated text example
Fast : Animated text example

---

4. Direction :

Abhi tak jitne bhi example dekhe sabme scrolling right side se start ho raha tha. Isko aap 4 direction left, right, up and down se bhi kar sakte hai.
Right se start ho kar left end hone wale ka example already uper hai ab baat karte hai Left, up aur down ke baare me.
Niche diye code me Direction:"up" me up ke jagah me left,right down etc place kar sakte hai.

Code
<marquee direction="up"> Animated text - Direction down to Up </marquee><marquee direction="right"> Animated text - Direction left to right </marquee><marquee direction="down"> Animated text - Direction up to down </marquee>
Output
Animated text - Direction down to Up

Animated text - Direction down to Up

Animated text - Direction down to Up

---

Changed behavior :

uper jitne bhi example dekhe sabhi me ek side start ho raha hai aur dusre side se nikal jaa raha hai. lekin alternative behavior se ek side se start hoga aur aage jaakar bounce hokar return ho jayega. Ise bouncing style bhi bol sakte hai. jiske liye:

Code
<marquee behavior="alternate"> Animated text </marquee>
Output

Moving Alternative

CSS design for Alternative scrolling:

Output
<meta name="viewport" content="width=device-width, user-scalable=no"><h2 style="background-color:transparent;"><marquee behavior="alternate" scrollamount="10"><h2>@iTrickGuru</h2></marquee></h2>