Advanced News Ticker Widget With Avtar For Blogger

11:05:00

What is a News Ticker?

A news ticker is a primarily horizontal, text-based display. Most tickers are traditionally displayed in the form of scrolling text running from right to left across the screen. This term originally refers to Television News tickers, scrolling near the bottom of the TV screen. The TV news ticker allows breaking news to be shown to the viewer without interrupting the current broadcast. Similarly webmasters have adopted a similar method of displaying latest news on their websites homepage. The latest headlines of your websites or blog is shown scrolling from left to right across the width of the site to keep visitors informed about most updated content.
In short it is a simple, handy widget that helps you to showcase your website's latest headlines, latest updates or featured content from a specific category.

Features of Breaking News Ticker Widget:

Blogger News Ticker is an advanced widget equipped with these features:
  • Author Avatar - Unique!
  • Displays latest posts dynamically. - Unique!
  • Displays recent posts from a specific category/label.
  • Scrolling text with two animations: reveal & fade
  • Clickable Comments Count
  • Custom Date Format - Unique!
  • Title Length is adjustable
  • Fully Customizable - Multi Colors!
  • Responsive and mobile friendly. 
  • Controls Navigation. Play/Pause, Next/Previous
  • Support all browsers: Firefox, Chrome, IE, Safari etc.
  • Many more!

How To add News Ticker Widget In Blogger?

To add news ticker widget in your blogger templates, please follow these easy steps:
  1. Go To Blogger > Template
  2. Backup your template
  3. Click "Edit HTML"
  4. Just below <head> tag paste the following JS and CSS source links:
    <link href='http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css' rel='stylesheet'/>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
  5. Next search ]]></b:skin> and just above it paste the following code:
    /*########Default Newsticker Styles#########*/
    .ticker-wrapper.has-js{margin:20px 0;padding:0 20px;width:780px;height:32px;display:block;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background-color:#f8f0db;font-size:.75em}
    .ticker{width:710px;height:23px;display:block;position:relative;overflow:hidden;background-color:#f8f0db}
    .ticker-title{padding-top:9px;color:#900;font-weight:700;background-color:#f8f0db;text-transform:uppercase}
    .ticker-content{margin:0;padding-top:9px;position:absolute;color:#1F527B;font-weight:700;background-color:#f8f0db;overflow:hidden;white-space:nowrap;line-height:1.2em}
    .ticker-content a{text-decoration:none;color:#1F527B}
    .ticker-content a:hover{text-decoration:underline;color:#0D3059}
    .ticker-swipe{padding-top:9px;position:absolute;top:0;background-color:#f8f0db;display:block;width:800px;height:23px}
    .ticker-swipe span{margin-left:1px;background-color:#f8f0db;border-bottom:1px solid #1F527B;height:12px;width:7px;display:block}
    .ticker-controls{padding:8px 0 0;list-style-type:none;float:left}
    .ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
    .ticker-controls li.jnt-play-pause{background-image:url(../images/controls.png);background-position:32px 16px}
    .ticker-controls li.jnt-play-pause.over{background-position:32px 32px}
    .ticker-controls li.jnt-play-pause.down{background-position:32px 0}
    .ticker-controls li.jnt-play-pause.paused{background-image:url(../images/controls.png);background-position:48px 16px}
    .ticker-controls li.jnt-play-pause.paused.over{background-position:48px 32px}
    .ticker-controls li.jnt-play-pause.paused.down{background-position:48px 0}
    .ticker-controls li.jnt-prev{background-image:url(../images/controls.png);background-position:0 16px}
    .ticker-controls li.jnt-prev.over{background-position:0 32px}
    .ticker-controls li.jnt-prev.down{background-position:0 0}
    .ticker-controls li.jnt-next{background-image:url(../images/controls.png);background-position:16px 16px}
    .ticker-controls li.jnt-next.over{background-position:16px 32px}
    .ticker-controls li.jnt-next.down{background-position:16px 0}
    .js-hidden{display:none}
    .no-js-news{padding:10px 0 0 45px;color:#F8F0DB}
    .left .ticker-controls,.left .ticker-content,.left .ticker-title,.left .ticker{float:left}
    .left .ticker-controls{padding-left:6px}
    .right .ticker-controls,.right .ticker-content,.right .ticker-title,.right .ticker{float:right}
    .right .ticker-controls{padding-right:6px}
    /*########Blogger Newsticker by Tools Valley#########*/
    .ticker-wrapper.has-js{margin:0;padding:0;width:98%;height:42px;display:block;border-radius:0;background-color:#fff;border:1px solid #eee;font-size:12px}
    .ticker{width:80%;height:42px;display:block;position:relative;overflow:hidden;background-color:#fff}
    .ticker-title{background:#71db00;padding:10px;color:#FFF;font-size:16px;font-family:oswald;text-transform:uppercase;text-shadow:1px 1px 6px #666}
    .ticker-title:after{left:76px;top:10px;height:0;width:0;position:absolute;content:" ";pointer-events:none;margin-left:0;margin-top:1px;border-left:13px solid #71db00;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999)}
    .ticker-content{background-color:#fff;margin-left:15px;color:#444;margin-top:1px}
    .ticker-swipe{background-color:#fff;position:relative;top:5px;left:100px!important}
    .ticker-swipe span{margin-left:1px;background-color:#fff;border-bottom:1px solid #333;height:12px;width:7px}
    .ticker-controls{padding:0!important;margin:13px 0 0 10px !important;list-style-type:none;position:relative;right:-50px}
    .ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
    .ticker-controls li a{border:0!important;padding:0!important}
    .ticker-controls li.jnt-play-pause,.ticker-controls li.jnt-play-pause.paused,.ticker-controls li.jnt-play-pause.paused.over,.ticker-controls li.jnt-prev,.ticker-controls li.jnt-play-pause.over,.ticker-controls li.jnt-next{position:absolute;background:none}
    .ticker-controls li.jnt-play-pause:after,.ticker-controls li.jnt-play-pause.over:after{content:"\f04c";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}
    .ticker-controls li.jnt-play-pause.paused:after,.ticker-controls li.jnt-play-pause.paused.over:after{content:"\f04b";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:1.8em}
    .ticker-controls li.jnt-prev:after{content:"\f04a";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:0}
    .ticker-controls li.jnt-next:after{content:"\f04e";font-size:13px;color:#71db00;font-family:fontAwesome;position:relative;left:3.6em}
    .ticker .iauthor:before,.ticker .icomments:before,.ticker .idate:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff}
    .ticker .iauthorpic{width:16px!important;height:16px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px}
    .ticker span{padding-right:5px;font-family:Oswald;font-weight:400}
    .ticker .icomments a{color:#71db00;font-size:11px}
    .ticker .icomments a:hover{text-decoration:underline}
    .ticker .icomments:before{content:'\f086';padding:0 3px 0 0;color:#777;position:relative;top:-1px}
    .ticker .idate{font-size:11px;padding-right:7px}
    .ticker .idate:before{content:'\f073';padding:0 5px;color:#777;position:relative;top:-1px}
    .ticker .mbttitle{font-family:oswald;font-size:14px;color:#71db00!important;font-weight:400;text-decoration:none}
    .ticker .mbttitle:hover{text-decoration:underline}
    Make these changes
    • To change the green color theme of the News Ticker simply replace the green highlighted color codes with color of your choice. The color can be in rgb or #hexadecimal, both work. Use Color Code Generator
  6. Save your template.
  7. Now go to Blogger > Layout
  8. Select "Add a Gadget"
  9. Choose "HTML/JavaScript" gadget
  10. Keep the title field empty and then paste the following code inside it:
    <!-- ######### Breaking News Ticker By Tools Valley ############ -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script src="http://www.jquerynewsticker.com/includes/jquery.ticker.js" type="text/javascript"></script>
    <script type="text/javascript">
    //----------------------------Defaults
    var ListBlogLink = "http://www.toolsvalley.in";
    var ListCount = 5;
    var TitleCount = 70;
    var ListLabel = "Widgets";
    //----------------------------Function Start
    function mbtlist(json) {
    document.write('<ul id="js-news" class="js-hidden">');
    for (var i = 0; i < ListCount; i++)
    {
    //-----------------------------Variables Declared
    var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";
    //----------------------------- Title URL
    for (var j = 0; j < json.feed.entry[i].link.length; j++) {
    if (json.feed.entry[i].link[j].rel == 'alternate') {
    break;
    }
    }
    ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
    //----------------------------------- Title Stirng
    if (json.feed.entry[i].title!= null)
    {
    ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
    }
    if (json.feed.entry[i].thr$total)
    {
    ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
    }
    ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
    ListAuthor=ListAuthor.slice(0, 1).join(" ");
    AuthorPic = json.feed.entry[i].author[0].gd$image.src;
    //################### Date Format
    ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    ListDate= json.feed.entry[i].published.$t.substring(0,10);
                             Y = ListDate.substring(0, 4);
                            m = ListDate.substring(5, 7);
                             D = ListDate.substring(8, 10);
                             M = ListMonth[parseInt(m - 1)];
    //----------------------------------- Printing List
    var listing = "<li class='news-item'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
    +ListAuthor+ "</span> <span class='icomments'>"
    +ListComments + "</span>  <span class='idate'>"
    + D + " " + M + "</span><i class='fa fa-chevron-right'></i> <a class='mbttitle' href="
    +ListUrl+
    "target='_blank'>"
    +ListTitle+
    "</a></li>";
    document.write(listing);
    }
    }
    document.write("</ul><script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
    /*##########Breaking News Ticker Settings########*/
        $(function () {
            $('#js-news').ticker({
            speed: 0.20,
            controls: true, 
            titleText: 'Hottest',
            displayType: 'reveal',
            pauseOnItems: 2000,  
    });
    });
    </script> 
    Make these changes:
    • ListBlogLink : Insert your Blog URL here
    • ListCount : Decide how many breaking titles do you wish to display.
    • TitleCount : Choose how many characters to display in post title length.
    • ListLabel : Insert your blog label here. Remember that labels are case sensitive. Therefore type it exactly as it is shown in your browser address bar. News Ticker will not work if label case is not correct. Edit "Widgets"
    • speed: Edit this value (0.20) to increase or decrease the scroll speed.
    • controls: Set true to false if you wish to hide the control buttons i.e. Play/Pause, Next/Previous
    • titleText: Set the News Ticker title here from Hottest to anything you like such as Latest, Breaking etc.
    • displayType: There are two types of scrolling text animation, reveal or fade. Set it as per your preference.
    • TitleCount : Choose how many characters to display in post title.
    • If you want to show latest posts headlines of your blog without mentioning any specific label/category then simply remove /-/"+ListLabel+" from the code above. 
  11. Click Save button and you are all ready to start showing animated plus scrolling headlines to your readers! :)

Do You Need Any Help?

The installation steps above are made extremely simple. You just need to follow it carefully especially taking care of the label case sensitivity and also the jQuery file. Let me know if you need any help. I would love to assist you as soon as time allows.
I really appreciate when you share your feedback.  Please let us know how useful was this tutorial for you and how can this cool headline news widget for blogger help you to better engage your readers and increase your pageviews. Would be waiting to hear from you.
The next tutorial will be based on adding a tooltip to this scrolling headlines news ticker widget for displaying Image Thumbnail plus description snippet, it would be an amazing enhancement to the current design, so stay tuned for updates! :)

Post a Comment

4 comments:

  1. GOLDBOY16 March 2018 at 22:35

    tysm! works awesome!

    ReplyDelete
  2. GOLDBOY16 March 2018 at 22:43

    i want to remove the author and date from the news ticker,please tell me what changes to i need to make.thankyou.

    ReplyDelete
  3. Athar Mujtaba Wani14 February 2019 at 14:16

    Not working..

    ReplyDelete

Subscribe to: Post Comments ( Atom )