After the sensational success of Scrolling News Update Headline Tickerfor Blogger in addition to due to the large publish of requests nosotros received from our loyal readers, nosotros are thus delighted to introduce y'all the fresh in addition to enhanced version of headline heart which is enhanced amongst RSS Feeds thus nosotros don’t take away to update our heart in i lawsuit to a greater extent than in addition to again, which agency it volition update automatically amongst the attention of RSS Feeds. Getting our readers upwards to appointment is the near meaning job for a blogger but due to stretched (tuff) schedule near of blogger are unable to notify their visitors amongst their latest Featured posts. This is the argue why nosotros convey coded a construct novel Headline Ticker which volition update automatically, thus nosotros tin sit down dorsum in addition to taste a loving cup of tea spell our heart updates on automation.
I know y'all would dear to Preview the widget thus earlier nosotros popular off along to our tutorial, allow us await at the alive demo of this widget.
Features of RSS Feed Automatic Update Ticker:
- Compatible amongst all Browsers i.e. Chrome, Firefox, Internet Explorer in addition to etc
- Works on automation amongst the attention of RSS Feeds
- Optimized amongst attractive JQuery shutter effect
- No compromise inward site speed
- Fully optimized amongst JavaScript
- Easy To Customize
Adding Ticker’s Style Sheet CSS inward Blogger:
To insert MBL RSS Feed Headline heart inward 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 inward the template.
]]></b:skin>
- Step# 5: When You Found ]]></b:skin> just above it glue the next code.
/* MBL RSS Feed Headline heart Style Sheet */
#feed-container {
width: 920px;
margin: 0;
padding: 5px 5px 5px 36px;
border: 1px company #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 modify the width of the heart exactly replace 920px
To modify the transcend of the heart exactly replace 20px
To modify font size exactly replace 18px
Step# 6: After customizing Save the template past times pressing Save Now button
Adding HTML in addition to Java Script Coding inward Blogger:
To Add JavaScript inward 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) {
furnish str;
}
if (suffix == undefined) {
suffix = '...';
}
furnish str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix;
}
// Callback role to exercise HTML result
var _callback = function(e, feeds, options) {
if (!feeds) {
furnish 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 similar a shot see your weblog in addition to it volition endure a photograph finish.
No comments:
Post a Comment