Professional Magazine Blogger Templates Read More ×

Sunday, April 05, 2015

Add Breaking News Ticker For Blogger

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!
Add Breaking News Ticker Widget for blogger

Breaking News Ticker widget for blogger - is a most important and popular tool for blogger. Specially News base blog's must have a breaking news ticker on their website. Today i am share the exclusive tropic. Adding this widget, you can easily shown your latest or recent posts one by one. This widget is help you to show recent posts as a ticker. In this tutorial i will show you, how to add automated breaking news ticker for blogger. Every wordpressian can add latest posts ticker by adding some wordpress plugins easily. But every blogger users need to do it by adding some code manually. In this post, i shared a beautiful breaking news ticker for blogspot blog.


News ticker is a simple and better way to show latest posts one by one. By using a breaking news ticker in blogger, you can easily present your posts on visitors eye. 


Code updated: 20/11/2015


Where you place it? Some webmasters like to show breaking news ticker on top of page and under of navigation menu. if you willing to add this breaking news ticker on your blog, then firstly choice the place where you want to put it. I recommended you choice the place top of page of under of navigation menu. These place are editor's choice.

Here are simple steps to adding this awesome animated jquery breaking news ticker for blogspot blogger blog.

I hope it will be helpful all bloggers. Okay now lets start the tropic.

Step1: Go to your Blogger Dashboard. Template > Edit HTML and find </style>
Step2: Copy the below CSS Code and Past Before </style>
 /*========================== CSS Breaking News by msdesignbd==========================*/
#breakingnews {margin-right:15px;height:30px;line-height:30px;overflow:hidden;width:35%;float:left;}
#adbreakingnews li a {font-family:inherit;font-weight:400;color:#666;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#EE8F04;}
#adbreakingnews {float:left;margin-left:60px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
#breakingnews .breakhead {position:absolute;display:block;float:left;font-size:11px;font-weight:700;text-transform:uppercase;padding: 2px 6px;} 


Step3: Now Past the below javascript before </body> tag.

<script type='text/javascript'>
//<![CDATA[
// Breaking News by msdesignbd.com
$(document).ready(function(){var e="",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Code updated: 20/11/2015


Step4: Now add the below HTML Code where you want show this breaking news ticker. You also add the below code on a HTML/Javascript Gadget.
 <div id='breakingnews'><span class='breakhead'><i class='fa fa-refresh fa-spin'/> Latest</span>
<div id='adbreakingnews'>Loading...</div></div>
<div style='clear: both;'/>

You can change the CSS to make this widget more perfect for your blog.

That's it. Now Save your template and refresh your page and see the change. If you found any problem then just inform me on Comment section. Thanks...
SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

21 comments:

  1. সুবেল ভাই আমি সফল হতে পারলাম না। শ্তাইল তো অনেক গুলা আছে। আমি কি প্রথম স্টাইলের নিচে কোড বসাবো

    ReplyDelete
  2. হে বসাই দেন।

    ReplyDelete
  3. I follow all the steps but it's show "Loading...".

    ReplyDelete
    Replies
    1. URL format will be like http://www.YOUR-SITE.com

      Delete
  4. nice tutorial bro, btw the breaking news still loading only on my homepage, how to fix it ?

    thanks...

    ReplyDelete
    Replies
    1. i was, but it still not show up on my homepage

      Delete
    2. Make sure that your blog URL format is like that, http://www.YOUR-SITE.com

      Delete
  5. I follow all the steps but it's show "Loading...".
    http://www.pariganakapituwa.com
    but its loading please help me

    ReplyDelete
    Replies
    1. Javascript isn't added before body tag on your blog.. Please follow all steps and do it.

      Delete
  6. i follow u step but not working http://www.pariganakapituwa.com/ visit this site can u fix this how

    ReplyDelete
    Replies
    1. I seen your blog and its work fine...

      Delete
  7. its loading ??? why i follow u step
    www.pariganakapituwa.com

    ReplyDelete
  8. Hi, amazing post but i have the same problem, just shows Loading... why?

    my blog
    http://soulbrotherpodcast.blogspot.com.es/

    thanks

    ReplyDelete
  9. same problem, just shows Loading.

    ReplyDelete
  10. এইটা কাজ করে কিন্তু এইটা খবরের হেডলাইনে মত আসে না... নিচে নিচে আসে কেনো?

    ReplyDelete
  11. Could you please put a detailed note on where the URL should be added and where are the places which we can edit. That will be much appreciated

    ReplyDelete