Vertical Scrolling News Ticker With Thumbnail For Blogger

News ticker is something which emphasis your content with fade in and fade out and it is preferred by bloggers who blog about news updates and design resource. This vertical scrolling news ticker with thumbnail was coded by Webdesignbooth and I made some modification and made it to work on blogger platform.  In this news ticker you can add your own content, images and add description of the news and so on. Below you will find the installation steps and before proceeding, take a backup of your template.

Newsticker for blogger

Live Demo

Step 1: Log in to your Blogger dashboard and navigate to Layout > Edit HTML and check Expand Widget Template. Now search for the code <head> and replace it with the below code

<head>
<script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://sites.google.com/site/bloggermint/jcarousellite_1.0.1c4.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$(&quot;.newsticker-jcarousellite&quot;).jCarouselLite({
        vertical: true,
        visible: 3,
        auto:500,
        speed:2000
    });
});
</script>

If you wish to change the speed of news ticker movement, change the speed in the above code with your required value. For an example, in the above code you can see the speed as 2000 (2 seconds) where in you can change the value to adjust. You  can also change the number of news to be visible.

Step 2: Now we need to add the CSS code to make the slider work exactly as you seen on the demo. Search for the code ]]></b:skin> and replace it with the below code

* { margin:0; padding:0; }

#newsticker-demo {
width:310px;
background:#EAF4F5;
padding:5px 5px 0;
font-family:Verdana,Arial,Sans-Serif;
font-size:12px;
margin:20px auto;
}

#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }

#newsticker-demo .title {
text-align:center;
font-size:14px;
font-weight:bold;
padding:5px;
}

.newsticker-jcarousellite { width:300px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:110px; }
.newsticker-jcarousellite .info { float:right; width:190px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }
.clear { clear: both; }
]]></b:skin>

You can change the color and font of the news ticker by just editing the color code.

Step 3: At this step we will be inserting the div part in blogger, so do that search for the code <div id=’sidebar-wrapper’> and place the below code after <div id='sidebar-wrapper'>

<div id='newsticker-demo'>
<div class='newsticker-jcarousellite'>
<ul>
<li>
    <div class='thumbnail'>
        <a href='http://bloggermint.com'><img src='http://i39.tinypic.com/n47h8k.jpg'/></a>
    </div>
    <div class='info'>
        <a href='http://www.bloggermint,com'>Blogger Plugins</a>
        <span class='cat'>Your description goes here</span>
    </div>
    <div class='clear'/>
</li>

<li>
    <div class='thumbnail'>
        <a href='http://bloggermint.com'><img src='http://i39.tinypic.com/dcdjky.jpg'/></a>
    </div>
    <div class='info'>
        <a href='http://www.bloggermint.com'>Wordpress Plugins</a>
        <span class='cat'>Your description goes here</span>
    </div>
    <div class='clear'/>
</li>
<li>
    <div class='thumbnail'>
        <a href='http://bloggermint.com'><img src='http://i40.tinypic.com/15i4wav.jpg'/></a>
    </div>
    <div class='info'>
        <a href='http://www.bloggermint.com'>10  Cool Footer Designs</a>
        <span class='cat'>Your description goes here</span>
    </div>
    <div class='clear'/>
</li>
<li>
    <div class='thumbnail'>
        <a href='http://bloggermint.com'><img src='http://i41.tinypic.com/jtsxlt.jpg'/></a>
    </div>
    <div class='info'>
        <a href='http://www.bloggermint.com'>Best 10 Inspirations</a>
        <span class='cat'>Your description goes here</span>
    </div>
    <div class='clear'/>
</li>
</ul>
</div></div>

To change the thumbnail image resize your image with dimensions 100*75 and upload it to any image hosting website. Installation procedure is over, so save your template to see the effect. If there is any issue in implementing on your blog, drop in your comments.

April 12, 2010. This entry was posted in Blogger, jQuery, Tutorials and tagged , , , , . Bookmark the permalink.

We Recommend HostGator Hosting

Bloggermint strongly recommends Hostgator Hosting for all of your web hosting needs. Sign up today for WordPress Hosting at just $4.95/month.

Use coupon code "bloggermint" to get 25% discount on any hosting packages. Get an account with Hostgator now!

22 Responses so far!

  1. For some reason I am able to get everything in like you said, but it’s not doing the effect…need some help..

  2. @Buzrk – Remove this line <script src='http://sites.google.com/site/bloggermint/jquery-latest.pack.js&#39; type='text/javascript'/> from the step 1 and try. jQuery has been initialized previously for the content slider. So remove the line and check for changes.

  3. Still no luck man…

  4. @Buzrk – Bro send me your template to my mail. I will fix the issue.

  5. Did you ever get a chance to get my template fixed man? thanks again.

  6. @Buzrk – Got busy with some other works, I will fix that issue and send you the template in some days.

  7. How to make an horizontal scrolling newsticker???
    .-= Catatan Mampus´s last blog ..Membuat Efek Timbul Pada Gambar, Layer, atau Teks (Tutorial Photoshop) =-.

  8. @Catatan – In the script change vertical to horizontal, then in CSS change the size of width and add height to it.

    If you wait for a week, I will write about horizontal scrolling ticker.

    • Any link for the horizontal ticker? I changed in the css and the scripts, but in IE its displaying 5 images when I asked for 4, which displays correctly in FireFox thou, and also in IE, the ul tag is not getting its css loaded

  9. when i upload this to server.on first load the plugin is not loading after a refresh it loads…need some help..

  10. thanks for the INFO is very helpful for me
    .-= ilmucts´s last blog ..Cara menempelkan flash animasi di blog =-.

  11. Thank you for the info, but please let us how to show the fulltext under “cat” class without truncating it.

    I have modified to suit my need, when I place a longer text inside .. the text is truncated.

  12. Pingback: Виджет избранные статьи блога на Blogspot (лента новостей) « Realty

  13. ok, i find it.

  14. how to apply gridview content into this slider…..

  15. Its cool !! will try surely on ma site ..

  16. great post but what if i wanted it for blogger??? could u modify it for that??

  17. do you have a script for download?
    i need this script for any time.. thanks

  18. Hai Frank! :) I Am New About Blog…Your Sharing Is Verry Nice..Thanks…

  19. good solution should have a try

  20. nice ticker friend………………..

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>