NOTICE

Adfly Links not working Find Direct Links HERE

Verticle Auto Scroll News Ticker Using jQuery For Blogger

By: ips.jolly - In: , , - 10 comments


Also Visit :- Verticle Auto Scroll News Ticker Using jQuery For Blogger



Simple but effective news ticker that can be put to use in a variety of ways. When using text, like in this example, defining the headings and associated content sections within a definition list makes sense from a semantics perspective, and it’s easy to add any additional elements we may need as we go.You can Show Text,Images,Videos and Links see in Demo Below

It stops on Hover























Installation :


Step 1:

This is Java script part

Login your BLOGGER account And click on Layout in the sub menu click EDIT HTML

Now find ]]></b:skin>


Open and Copy all text in the TXT file link BELOW and Paste Below]]></b:skin> code in your template

Page_white_textBloggerplugnplay_scroltickertxt.txt


Step 2:

This is style giving part CSS

Copy below Code And Then Paste ABOVE ]]></b:skin>

#ticker {
 width:180px; height:300px; overflow:auto; border:1px solid #aaaaaa;
}
#ticker dt {
 font:normal 14px Georgia; padding:0 10px 5px 10px;
 background-color:#e5e5e5; padding-top:10px; border:1px solid #ffffff;
 border-bottom:none; border-right:none;
}
#ticker dd {
 margin-left:0; font:normal 11px Verdana; padding:0 10px 10px 10px;
 border-bottom:1px solid #aaaaaa; background-color:#e5e5e5;
 border-left:1px solid #ffffff;
}
#ticker dd.last { border-bottom:1px solid #ffffff;


you can change any thing above( colors and dimensions )

Click Save template


Step 3:


This is the HTML part

Click Layout Then page element Now Click Add a gadget Choose HTML/Java Paste below Code in it Click Save !
<dl id="ticker">
  <dt>Heading</dt><dd>Text,Images,Videos or Links here</dd>
  <dt>Heading</dt><dd>Text,Images,Videos or Links here</dd>
  <dt>Heading</dt><dd>Text,Images,Videos or Links here</dd>
  <dt>Heading</dt><dd>Text,Images,Videos or Links here</dd>
  <dt class="heading">Heading</dt><dd class="text">Text,Images,Videos or Links here</dd>
</dl>


Now you can see auto scroll news ticker on your page.



Also Visit :- Verticle Auto Scroll News Ticker Using jQuery For Blogger

10 comments :

  1. Joana MoraisNovember 3, 2009 at 11:55 AM

    Hi there, can you explain me how to add
    for example the code for youtube videos, with the youtube videos small thumbnails scrolling and, if possible, explain a way for the youtube videos to play inside the Vertical scroller [like having a halt on hover]?

    Could you please also give me an idea of how to add an external RSS feed in
    the news scroller?

    Thank you so much for all your wonderful tutorials. :)

    ReplyDelete
  2. ips.jollyNovember 4, 2009 at 12:03 AM

    @ Hi Joana Morais Welcome to Plug n Play, Here you are asking that how can we show or embed youtube videos in Ticker, and to play and stop ticker on mouse over.
    Right?

    Ok I have created a blog ( http://jquery-for-blogger.blogspot.com/ ) for explaining how to embed different thing like text, Link, Videos etc.. in Ticker given Above.

    and the code used is also given there.Its not so Hard you can also change Ticker Width and Height given in HTML part.

    About external Feed a simple widget can do that i will post an article about that.Today.Please wait for a while.

    Thanks for your comment...

    ReplyDelete
  3. ips.jollyNovember 4, 2009 at 12:53 AM

    Hi Joana You asked.How to put External Feed in Ticker ?

    Simply add below code ( Change blog address for which you want feeds ) Between <dd>Code Here</dd> in above HTML code


    <script style="text/javascript" src="http://files-teckzest.bravehost.com/recentposts.js">
    </script>
    <script style="text/javascript">
    var numposts = 25;
    var showpostdate = true;
    var showpostsummary = true;
    var numchars = 100;
    var standardstyling = true;
    </script>
    <script src="http://htinnervoice.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts">
    </script>


    Demo Blog : http://free-mail-alerts-on-mobile.blogspot.com/

    I think this could help.P.S reply the Results :)

    ReplyDelete
  4. StudioSuki@Fantabulous DesignFebruary 10, 2010 at 4:22 AM

    I like the widget. It's really useful.
    But how can I add this on the particular page only?

    ReplyDelete
  5. UnknownFebruary 11, 2010 at 1:34 PM

    i put this on my blog but it didn;t scoll like you said.

    ReplyDelete
  6. StudioSuki@Fantabulous DesignFebruary 13, 2010 at 6:09 PM

    Hi, how can I put it only one particular page?

    ReplyDelete
  7. AnonymousMarch 18, 2010 at 3:38 PM

    Could you please update your Bloggerplugnplay_scroltickertxt.txt file???

    ReplyDelete
  8. AnonymousMarch 22, 2010 at 8:23 AM

    Hello! Could you please update / reupload your "Bloggerplugnplay_scroltickertxt.txt" file???

    ReplyDelete
  9. AnonymousMarch 23, 2010 at 2:03 AM

    Not working on IE :/

    ReplyDelete
  10. AnonymousNovember 29, 2011 at 11:15 PM

    http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-jquery-news-ticker/

    ReplyDelete

Feel free to leave comment if you like above widget, have any questions or just say Hi! :)

Subscribe to: Post Comments ( Atom )

Copyright © 2013 Blogger Plug n Play - jQuery Tools and Widgets and Blogger Templates

Back to Top