Blog me animated sliding/scrolling text kaise add kare - html trick

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> 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



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



Output
Animated 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



Output
Animated 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



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


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


Output

Moving Alternative



CSS design for Alternative scrolling:



Output

Output

@iTrickGuru



slider text ko blog me kaise aur kaha add karen.


  • animated text ke liye aapne uper bahut se code dekhe jo kafi good looking tha to ab ise website/blog me add kaise kiya jaye aur kaha use kiya iske baare me baat karte hai.
    1. blogger me kaise use karen.
    2. blogger ki setting me jake
    fir layout
    3. add a gadget me click kar ek new html widget open kare
    4. Ab us html me marquee ka code pase kar jo apko karna ho.

  • template ke top/header me bhi add kar sakte hai. agar aap template thoda customiz kar sakte hai to ye bhi kar sakte hai. Iska tutorial hum next post me denge.
  • Koi bhi post write karte time marquee tag use kar sakte hai. bas post writing ke blogger me html selected ho. is code ka use aap different se kar sakte hai jisme warning ka message dena ho. note dena ho usme bhi iska use kar sakte hai.
  • apne blog ke koi bhi post ka link dene ke liye bhi down to up/up to down tag use mar sakte hai. result wali website/movie website me dekhe hoge bahut se links niche se uper ki orr jate rahta hai. same aap bhi in tags ka use karke bana sakte hai.
    i hope guys blogger website me slider animated text kaise add kare? post aapko helpful lagi ho. vaise to ye codes HTML janne walo ke liye bahut easy hai newbies ko aise text likne me problem jati hai. so ye chhota sa un logo ke helpful hogi. apna scrolling text create karne me, customiz karne me koi problem aati hai to comments karke puchh sakte hai. agar aap ek pro hai to apna valuable suggestions de kar humari help kar sakte hai. apne new blogger friend ke sath post share kare taki wo bhi is tag ka use kar sake. thanks for visiting..

    SEO kaise kare
    Marshmallow ya Samsung me font style kaise change kare
    Bina coding ke Android apps bana kar kaise paise kamaye
    Android ko eyes aur face se kaise control karen
  • Blog me animated sliding/scrolling text kaise add kare - html trick Blog me animated sliding/scrolling text kaise add kare - html trick Reviewed by Love Kaushik on Tuesday, January 23, 2018 Rating: 5

    4 comments

    1. Very good post. Thank you brother. Please tell me some more tricks.

      ReplyDelete
      Replies
      1. Keep visiting brother. Future me aur aise hi post launga.

        Delete
    2. Awesome article with great idea! Thank you for such a profitable article. I truly acknowledge for this extraordinary data.
      Animated Logo

      ReplyDelete
    3. bahut hi badhiya post.. thanks for share.........

      ReplyDelete

    Image Link [https://1.bp.blogspot.com/-M9KsV8WzfIc/WpT5Zs1JDRI/AAAAAAAAA2c/rzBjjGjCD9YhzLrN97_7bsW7DXQhEVOQwCLcBGAs/s1600/Love%2Bkaushik.jpg] Author Name [Love Kaushik] Author Description [Visit : About Us] Facebook Username [#] Twitter Username [#] GPlus Username [#] Pinterest Username [#] Instagram Username [#]