After embedding recent blog posts widget, one of our client asked us to show only title of the recent blog posts in a scrolling bar as trending news. He was using responsive blogger template and therefore, he needs to add responsive news bar.
Accordingly, I am here to share with all of you a responsive breaking news bar which will scroll the specified number of recent posts of your blogger blog as trending stories.
How To Display Recent Posts Titles As Trending Stories/Breaking News
Step-1:
Login to your blogger account and navigate the Template Tab.
Step-2:
Click on Edit HTML text button appears on template tab. Now, click anywhere in the template editor and press Ctrl+F to find closing ]]></b:skin> tag. Copy and paste these CSS codes just before/above ]]></b:skin>
Save your template and see a live breaking news bar at the top of your blogger blog. Enjoy! However, you may add the above HTML codes into a HTML/JavaScript Gadget from the Layout tab of your blogger blog.
Customization Of SWT Breaking News Scrolling Bar
1) Find <input name='uri' type='hidden' value='SuperWebTricks'/> line and replace SuperWebTricks with your own feedburner feed URL name.
2) Find ScrollPosts =12; and change the value 12 to any number of blog posts you want to show as breaking news.
3) Find ScrollPostsWidth = 100; and change the value 100 to any number below 100 which denotes the width of your scrolling posts titles. I recommend you to keep it intact the default value.
4) Find ScrollPostsDelay = 111; and change the value 111 to any number which indicates the scrolling timing of posts titles.
5) Find ScrollPostsDirection = "left"; and change the direction of breaking news from left to right or up. We have not set up the direction to down as it rarely used by any website owner.
Breaking News Ticker Widget For Blogger - JSON Feeds Support!
Breaking News widget for blogger blogs to display latest headlines automatically along with post info in scrolling text.
Breaking News widget for Blogger blogs is a free, flat, stylish, modern, easy to use and responsive Blogger jQuery news ticker. It displays text-based titles of your latest posts in a scrolling fashion automatically. It is the best way to showcase your hottest content to your website visitors on your homepage just how BBC or CNN does it! We have coded itusing Blogger JSON Feeds API and jQuery News Ticker plugin.
Some sites like codecanyon are selling News Ticker Plugins at $5, but you will not only get it free at MBT but you will also learn how such widgets are coded if you read our JSON Feeds series.
Instead of using RSS Feeds to built a scrolling newsticker, we will use JSON Feeds to create a more advanced, lightweight and dynamic News Ticker that will not only just display titles but will also show almost every info (i.e. Avatar/Comments/Published date) about your blog post.
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:
Go To Blogger > Template
Backup your template
Click "Edit HTML"
Just below <head> tag paste the following JS and CSS source links:
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 our Color Code Generator.
Save your template.
Now go to Blogger > Layout
Select "Add a Gadget"
Choose "HTML/JavaScript" gadget
Keep the title field empty and then paste the following code inside it:
<!-- ######### Breaking News Ticker By MBT ############# -->
<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.mybloggertricks.com";
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);
}
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.
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 bloggerhelp 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! :)
If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »
11:38 PM
cpsha
Posts
16 comments