After the sensational success of Scrolling News Update Headline Tickerfor Blogger as well as due to the large position out of requests nosotros received from our loyal readers, nosotros are thus delighted to introduce you lot the fresh as well as enhanced version of headline pump which is enhanced alongside RSS Feeds thus nosotros don’t shout out for to update our pump 1 time to a greater extent than as well as again, which agency it volition update automatically alongside the assistance of RSS Feeds. Getting our readers upwards to appointment is the virtually pregnant business for a blogger but due to stretched (tuff) schedule virtually of blogger are unable to notify their visitors alongside their latest Featured posts. This is the argue why nosotros convey coded a build novel Headline Ticker which volition update automatically, thus nosotros tin sit down dorsum as well as taste a loving cup of tea piece our pump updates on automation.
I know you lot would honey to Preview the widget thus earlier nosotros conk along to our tutorial, permit us hold back at the alive demo of this widget.
Features of RSS Feed Automatic Update Ticker:
- Compatible alongside all Browsers i.e. Chrome, Firefox, Internet Explorer as well as etc
- Works on automation alongside the assistance of RSS Feeds
- Optimized alongside attractive JQuery shutter effect
- No compromise inwards site speed
- Fully optimized alongside JavaScript
- Easy To Customize
Adding Ticker’s Style Sheet CSS inwards Blogger:
To insert MBL RSS Feed Headline pump inwards blogger weblog follow these steps.
- Step# 1: Go To Blogger.com >> Your Blog
- Step# 2: Now Select Template >> Backup Template
- Step# 3: Now Press Edit HTML >> Proceed
- Step# 4: Then Search for the next code inwards the template.
]]></b:skin>
- Step# 5: When You Found ]]></b:skin> just above it glue the next code.
/* MBL RSS Feed Headline pump Style Sheet */
#feed-container {
width: 920px;
margin: 0;
padding: 5px 5px 5px 36px;
border: 1px corporation #c8c8c8;
vertical-align:middle;
overflow: hidden;
-khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
background: #e8e8e8 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHqb9cZtnGksPIxeOnW3s8L5nFp5b8cwdbM-6acy3squOAuel_DTl8m6EOOQnxZXZ_-nDKIr3FcfaY7ajZ1yHR0fy2g_7ySNpffGLY6nlWJnE80EQROI78gh9gS-k5J1PQv9lfaH0hjy4/s1600/1.png') no-repeat 10px 50%;
min-height: 25px;
}
#feed-content ul {
font-family: "Lucida Grande","Lucida Sans Unicode", Helvetica, Arial, inherit;
font-size: 18px;
line-height: 20px;
color: black;
width: 100%;
list-style:none;
margin: 0;
padding: 0;
}
a:link {
color:#333;
text-decoration:none;
outline: none;
} /* unvisited link */
a:visited {
color:#333;
text-decoration:none;
} /* visited link */
a:hover {
color:#333;
text-decoration:underline;
} /* mouse over link */
a:active {
color:#333;
text-decoration:underline;
} /* selected link */
Customization:
To alter the width of the pump but replace 920px
To alter the tiptop of the pump but replace 20px
To alter font size but replace 18px
Step# 6: After customizing Save the template past times pressing Save Now button
Adding HTML as well as Java Script Coding inwards Blogger:
To Add JavaScript inwards Blogger Follow these steps
- Step# 1: Go To Blogger.com >> Your Blog
- Step# 2: Now Select Layout >>Now Press Add a Gadget
- Step# 3: Now Select Add Html/JavaScript And Paste The Following Code
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery-min.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.vticker.js"></script>
<script type="text/javascript">
var feed_limit = 10;
var feedURL = "http://feeds.feedburner.com/mybloggerlab";
var animation_duration = 700;
var pause_time = 7000;
var target = "_top"; // "_top" (same) or "_blank" (new window)
function loadrssfeed() {
var options = {
date: true,
content: true,
snippet: false,
showerror: true,
errormsg: '',
key: null
};
return $(this).each(function(i, e) {
var $e = $(e);
if (feedURL == null)
return false;
var api = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=" + feedURL;
if (feed_limit != null) api += "&num=" + feed_limit;
if (options.key != null) api += "&key=" + options.key;
$.getJSON(api, function(data){
// Check for error
if (data.responseStatus == 200) {
// Process the feeds
_callback(e, data.responseData.feed, options);
}
});
});
}
function rss_truncate(str, length, suffix) {
if (str.length <= length) {
provide str;
}
if (suffix == undefined) {
suffix = '...';
}
provide str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix;
}
// Callback share to practise HTML result
var _callback = function(e, feeds, options) {
if (!feeds) {
provide false;
}
for (var i=0; i<feeds.entries.length; i++) {
var entry = feeds.entries[i];
var html = '<li><a href="'+entry.link+'" target="'+target+'" title="RSS Feeds News Update Ticker For Blogger - Works Automatically">'+rss_truncate(entry.title, 70)+'</a></li>';
$('#feed-content ul').append(html);
}
$('#feed-content').vTicker({ showItems: 1, mousePause: true, pause: pause_time, speed: animation_duration});
}
function stoptransition()
{
if (timer)
{
clearTimeout(timer);
$(':animated', iframe_display).stop(true, true);
}
autoplay = false;
timer = null;
}
$(document).ready(function() {
loadrssfeed();
});
</script><body style="background-color: transparent; margin: 0pt;">
<div id="feed-container">
<div id="feed-content"><ul></ul></div>
</div>
Customization:
Replace /search?q=scrolling-news-update-headline-ticker">How To Burn Your Blog Feeds
- Step# 4: After customizing Save the Widget past times pressing Save button. And instantly see your weblog as well as it volition hold out a photograph finish.
No comments:
Post a Comment