01P Blogger Help

If you use blogger to daily push out new updates to your blog, then this morning you might have noticed your entire image thumbnails suddenly got disappeared from the homepage of your blog. This leaves you thinking that you may have done some unnecessary editing to your template, which might be the reason image thumbnails are not appearing on the homepage or archive pages. However, that’s not the case, image thumbnails are broken because of a new bug that recently blogger users are facing. Today in this article, we will show you, How to fix image thumbnail not appearing bug in blogger.

Why Image thumbnails are not appearing?

The very first thing that you would be concerned about is that, why all of a sudden these image thumbnails stopped working? You didn’t do any kind of changes to the template, even tried uploading a fresh new template but the results are all same. If you are seeing this bug, you’re not alone almost all blogger users are having issues with new and old image thumbnails they have on their blog. Following are some people who’re having same image broken issue with their blogs:

Since yesterday, my newly posted pictures are lacking the thumbnail. I figured earlier that the thumbnail does not get generated if all images are sourced from an external host. That's why I always upload the first photo via Blogger's upload option so that a thumbnail is created automatically.
But since yesterday, that is no longer working. I tried to create a second post today (now the latest post) just to see if the issue was related to that specific post. It appears the issue is site-wide.

Help will be appreciated.

Thanks.

All of a sudden the images doesn't show up anymore om my homepage. I have this with every website with the vortex template from templates.com.. Can you please help me fix it?

The problem happens even in the Popular Posts widget and the "data:post.thumbnail" tag, only for posts published today. That's a major issue.

Try publishing a new post by uploading an image, add a title, little post content and press publish. Now go to your blog and you’ll still don’t see your image thumbnail on the home page. This might make you lose your calm but we have a simple solution to this bug.

How to fix image Thumbnails stopped appearing in blogger?

The very first thing you need to do is to go to Blogger >> Posts >> now from the list of your published post select anyone and press Edit Posts. It will lead you to blogger post editor, now revert to the HTML tab and search for the following code:

https://

Upon finding, replace all the URLs that are starting with https:// to http://. We have attached a screenshot below which will help you understand better.

Please note: If nighter https:// nor http:// protocol is attached to your image URL then, search for src="// and replace// with http://.

After making changes, publish the post again and your image thumbnails will start appearing again on your homepage. The issue is caused by blogger, which is not giving permission to https:// image thumbnails to appear. However, we hope this bug would be completely fixed by blogger sooner or later.

We hope this quick tip has helped all those users who were continually sending us emails about image thumbnails not showing on the homepage. This article would certainly make them feel relaxed about their site. Do let us know if you’re facing the same bug and what precautions you have taken to fix the bug?

How to Fix Image Thumbnail Not Appearing Bug in Blogger

Posted by Admin No comments

Why Image thumbnails are not appearing?

Since yesterday, my newly posted pictures are lacking the thumbnail. I figured earlier that the thumbnail does not get generated if all images are sourced from an external host. That's why I always upload the first photo via Blogger's upload option so that a thumbnail is created automatically.
But since yesterday, that is no longer working. I tried to create a second post today (now the latest post) just to see if the issue was related to that specific post. It appears the issue is site-wide.

Help will be appreciated.

Thanks.

All of a sudden the images doesn't show up anymore om my homepage. I have this with every website with the vortex template from templates.com.. Can you please help me fix it?

The problem happens even in the Popular Posts widget and the "data:post.thumbnail" tag, only for posts published today. That's a major issue.

How to fix image Thumbnails stopped appearing in blogger?

https://

Upon finding, replace all the URLs that are starting with https:// to http://. We have attached a screenshot below which will help you understand better.

Please note: If nighter https:// nor http:// protocol is attached to your image URL then, search for src="// and replace// with http://.

A good blog is the one which is not only saturated with good content but also it eases the difficulties of its fans by providing them alternative ways to make their work easier and quicker. Being a blogger, you should have enough potential to keep your fans in your hands and not letting them to wander for other blogs. Never letting your fan base decrease has been the greatest achievement of everyone’s bright career. Be it blogging or music, your work or speech, one should never let the people, who adore them, slip out of their hands. A fully customized blog is the foremost recommended way to keep your fans stick to your blog.

Now think about how cool it would be when people will speak to search posts in your blog rather than typing long sentences. Yes! You got it right. In this post we will be telling you how to add voice searchwidget in your blog.After providing you with a number of different ways to customize your blog, here we come again with a new feature that is called Voice Search.

Voice Search is a voicemail service which lets the users to know their queries by speech instead of writing, because nobody has got time for that. It will give your blog a more professional look.
In this article, we would be telling you about the feature ‘Voice Search’, its advantages and how to add it to blogger. In this article, we will show you how to add voice search widget in blogger.

Why to Add Voice Search in Blogger?

Now the question arises why should we add voice search? Well, here you go! It has been reported that half of the teens (aging from thirteen to nineteen) use voice search instead of typing the whole thing. It actually shows the need of voice search. Who does not want to do their work in the most easiest and time saving way? Voice search lets you to speak your mind and eases your hardships. Adults claim voice search to be a Tech savvy. It is however assumed the longer your query is, the more chance you have got for the incorrect interpretation; although there is nothing like that. Voice search goes hand to hand and comes handy in most aspects.

How to Add Voice Search In Blogger

Now after knowing so much about Voice Search, you might be wondering how to become its benefactor. Well, inserting voice search is a piece of cake. You do not have to wait much long nor is there any need of pages long coding. All you have to do is to follow these simple steps and get your work done within minutes.

NOTE THAT VOICE SEARCH ONLY WORKS FOR CROME BROWSER AND ANDROID UPTILL NOW

Adding a voice search is just a game of few minutes. You only need to add a line to your search input in order to avail that facility.
First log in to your blogger account then go for dashboard

After logging in, choose Template and then go for Edit HTML
It is then followed by a popup window. A popup window will open, press CTRL+F for Windows.
Now there will be series of different codes. You just have to add x-webkit-speech to the current search code which goes like this

<input class='field' id='s' name=”q” x-webkit-speech=”” x-webkit-grammar=”builtin:search” onwebkitspeechchange=”startSearch()” />

Preview your blog and you are done adding a Voice Search to your blog!

Now go and add a Voice Search to your blog as well and let your fans gain some benefits from it. We hope this article have helped you in learning how to add voice search widget in blogger. Share you thoughts in the comment section below.

How to Add Voice Search Widget in Blogger

Posted by Admin No comments

Why to Add Voice Search in Blogger?

How to Add Voice Search In Blogger

NOTE THAT VOICE SEARCH ONLY WORKS FOR CROME BROWSER AND ANDROID UPTILL NOW

Adding a voice search is just a game of few minutes. You only need to add a line to your search input in order to avail that facility.
First log in to your blogger account then go for dashboard

After logging in, choose Template and then go for Edit HTML
It is then followed by a popup window. A popup window will open, press CTRL+F for Windows.
Now there will be series of different codes. You just have to add x-webkit-speech to the current search code which goes like this

<input class='field' id='s' name=”q” x-webkit-speech=”” x-webkit-grammar=”builtin:search” onwebkitspeechchange=”startSearch()” />

Most of us already know adding images to Blogger posts or creating an image gallery in blogger is as simple as you like. However, have you ever thought about adding an image in the sidebar widget of your Blogger site? Recently, we were asked by one of our reader at our Facebook fan page that how to add images to Blogger Sidebar Widgets? You can use the same technique to display affiliate image advertisements on the sidebar of your site. In this article,f we will show you how to insert images in blogger sidebar widget.

Fortunately, Blogger does provide a built-in image gallery widget that can easily be added to your blogger enabled site, to do so follow the following instructions.

The very first thing you’ll be doing is to go to Blogger.com >> Layout >> Add a Gadget. Now you’ll notice a list of widgets providedfac by Blogger that can be added to your site. Since, we are adding image widget so scroll down to “Image” Widget as it can be seen below:

Now you will notice a couple of options that you can fill according to your desire needs. Input the title of the image in the “Title” text field, “Caption” or “Hyperlink” of the image. Once you are done filling text fields, try uploading the image either from your hard drive by browsing the image or upload it form URL of the image as it can be seen in the below screenshot.

Once everything is done, Press the “Save” button and that’s it. You can arrange the widget in the sidebar by selecting and dragging to the location you like and after that “Save Arrangement”.

We hope this tutorial may have helped you in learning something that you didn’t knew before. Do share your thoughts by letting us know what your opinions about this simple but efficient tutorial.

If you like this tutorial, then do share it with your friends on Facebook, Google+ or eventwitter. If you want to get updates directly in your inbox then subscribe to our newsletter.

How to Insert Images in Blogger Sidebar

Posted by Admin No comments

In the past, we have already showed you how to display most recent comments in blogger. However, one of our users contacted us asking how to display top commenters in the sidebar of his blogger site. Comments are the handiest way of engaging users on your content. You might have already noticed such widgets on various popular blogs, as it’s the best way to feature your most loyal reader so that it could motivate new users to comment and gain the same luxury. In this article, we will show you how to show top commenter in blogger.

The very first thing you need to do is to login to your blogger account by visiting blogger.com. Once you are logged in, select the blog you’ll like to add the top comment widget. Go to Template >> Edit HTML >> Search for ]]></b:skin> and just above it paste this code:

.top-commentators {
margin: 3px 0;
border-bottom: 1px dotted #ccc;
}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
padding-left:0;
}

Now go to Layout >> Add a Gadget >> from the list of widgets select Add HTML/JavaScript and proceed to the next step.

Now in the text area of the widget, paste the following JavaScript code. This code would be responsible for digging, finding and displaying the top commenters of your blog. You can also fill the tile of the widget i.e. Our Top Commenter or etc according to your needs.

<script type="text/javascript">
var maxTopCommenters = 8;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No Recent commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5x8N7bBfTvY0LohGVSPuYDPAcN4UXD3z1SLejklBPK6TniptvIASHFRv2YgSTBfj0WU0DvRAIpaijCsBYQi0ay7XncxlBKEsGfTMqhSiZSL-e5Ufx9SPxSJKUFssWdG92PlrBQ6z0SzTU/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4b99OH1BsoKuTHW-O8Oe45c5DUE9klNkwTW4UigBJdxv4gWNGqsMfkErLRaAXeYlRefUiw_MOxsbSh_XWLF5otD-1142NaB3bawS1GK22ob9PJuufVpdOl96criHyFeFMAuEr87YJVVq/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g);
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;
var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}
// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commentators">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Once everything is done, save the widget by pressing orange “Save” button located towards the bottom and the widget will start appearing at your blog. Now, it is up to you where you exactly want the widget to appear either in the sidebar or footer. In Layout area, simply select and drag the widget to a new position and press “Save Arrangement button”.

How to Show Top Commenter in Blogger

Posted by Admin 1 comment

.top-commentators {
margin: 3px 0;
border-bottom: 1px dotted #ccc;
}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
padding-left:0;
}

<script type="text/javascript">
var maxTopCommenters = 8;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Anonymous", "someotherusertoexclude"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No Recent commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5x8N7bBfTvY0LohGVSPuYDPAcN4UXD3z1SLejklBPK6TniptvIASHFRv2YgSTBfj0WU0DvRAIpaijCsBYQi0ay7XncxlBKEsGfTMqhSiZSL-e5Ufx9SPxSJKUFssWdG92PlrBQ6z0SzTU/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ4b99OH1BsoKuTHW-O8Oe45c5DUE9klNkwTW4UigBJdxv4gWNGqsMfkErLRaAXeYlRefUiw_MOxsbSh_XWLF5otD-1142NaB3bawS1GK22ob9PJuufVpdOl96criHyFeFMAuEr87YJVVq/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = author.gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g);
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;
var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}
// convert object to array of tuples
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commentators">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Previously, we have already showed you away on how to add a contact us widget in blogger. However, you might have noticed that sometimes users find it difficult to locate your contact us page link because it is located somewhere deep down into your footer. What if you are running an eCommerce site on blogger and your customer needs to send a quick query email to the support to find some desire information. Since, your contact us page is located deep down the footer he may not send any email and would move to another better site taking away all the possibilities of making a new sale. A simple solution to this problem is to have a floating contact us widget. Today in this article, we will show you how to add a floating contact us widget in blogger.

The very first thing you need to do is to take a backup of your template, so in case you did not followed the bellow instructions properly you can use the backup to restore the template.

Go to Blogger >> Template >> Edit HTML >> Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for skin tag and just above it paste the following CSS style sheet coding.

#mbl-contact .ContactForm {
margin: 0px!important;
}
#mbl-contact .contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border: 0;
background-image: none;
background-color: #FA411E;
cursor: pointer;
font: normal normal 13px Open Sans;
font-style: normal;
font-weight: 400;
}
.#mbl-contact .contact-form-button-submit:hover {
background-color: #222;
background-image: none;
border: 0;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
margin: 0px;
font-weight: 400;
background-color: #FA411E;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
letter-spacing: 3px;
text-align: center;
}
#mbl-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#mbl-contact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#mbl-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
background-color: #DDD;
color: #111;
border: 0;
padding: 10px 5px;
font: normal normal 13px Open Sans;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}

Now with the help of search box, look for the starting <body> tag and just below it paste the following coding which consists of a contact us widget and JavaScript that will make the contact us widget floating across your site.

<div id="mbl-contact">
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
<b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<script type='text/javascript'>
//<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
//]]>
</script>

Once everything is done, press the “Save Template” button located at the very top of the HTML template editor. Congratulations, you have successfully added a floating contact us widget in blogger. Now go to your site and you will notice a floating contact us widget on the bottom right of your screen.

We hope this tutorial we have helped you to learn how to add floating contact us widget in blogger. If you like this widget then, do share it with your blogger friends on Facebook, Google+ or tweet about us on Twitter.

How to Add a Floating Contact Us Widget in Blogger

Posted by Admin No comments

The very first thing you need to do is to take a backup of your template, so in case you did not followed the bellow instructions properly you can use the backup to restore the template.

#mbl-contact .ContactForm {
margin: 0px!important;
}
#mbl-contact .contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border: 0;
background-image: none;
background-color: #FA411E;
cursor: pointer;
font: normal normal 13px Open Sans;
font-style: normal;
font-weight: 400;
}
.#mbl-contact .contact-form-button-submit:hover {
background-color: #222;
background-image: none;
border: 0;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
margin: 0px;
font-weight: 400;
background-color: #FA411E;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
letter-spacing: 3px;
text-align: center;
}
#mbl-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#mbl-contact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#mbl-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
background-color: #DDD;
color: #111;
border: 0;
padding: 10px 5px;
font: normal normal 13px Open Sans;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}

<div id="mbl-contact">
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
<b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<script type='text/javascript'>
//<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
//]]>
</script>

In the past, we have showed you how to add a RSS Feed news ticker in blogger with lot possibilities and customizations. However, people are trendier about adding a news ticker in the sidebar of their website. For some obvious reasons, some news tickers are unable to adjust in the sidebar of website because of their large size (horizontal in nature). Therefore, we have developed a flexible, elegant, simple yet highly professional RSS Feeds news ticker for your Sidebar. Today in this article, we will show you how to add a RSS Feed News Ticker in Blogger Sidebar.

The very first thing you need to do is to login to your blogger account. After logging in, select the blog you would like to install this widget on and go to Template >> Edit HTML. Now in the template editor, search for the ]]></b:skin> tag and just above it paste the following CSS Codes:

.MBL-container-header h1{font-weight:300; font-size:48px; text-align:center;}
.MBL-container-header h2{font-size:30px; text-align:center;}

#MBLnewsticker1 ul { padding: 0px; }
.MBLnewsticker {
width: 100%;
overflow: hidden;
height: 440px;
position: relative;
padding: 0 5px;
box-sizing: border-box;
margin: 0 auto;
text-align:center;
}
.MBLnewsticker>ul {
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}
.MBLnewsticker>ul>li {
display: none;
width: 100%;
height: 100px;
background: #FFF;
position: absolute;
overflow: hidden
}
.MBLnewsticker>ul>li>.MBL-content {
position: absolute;
top: 0;
bottom: 30px;
left: 0;
right: 0;
box-sizing: border-box;
padding: 5%;
overflow: hidden;
}
.MBLnewsticker>ul>li>.MBL-content a {
text-decoration: none;
}
.MBLnewsticker>ul>li>.MBL-content a:hover {
text-decoration: underline;
}
.MBLnewsticker>ul>li>.MBL-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
padding: 5px;
border-top: solid 1px #DDD;
}
.MBLnewsticker>ul>li>.MBL-info a {
display: inline-block;
width: 20px;
height: 20px;
background: #0F0;
opacity: 0.2;
cursor: pointer;
}
.MBLnewsticker>ul>li>.MBL-info a:hover {
opacity: 1;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfYBpodPMV_9HUQ2gSWOnZyH1ujulekhfZj4bc0eCekyEMlU2d80W6nffvClnilL06V6m61NCIvpt9oyDaFCoM64KkRhPo9vD2stTc5diV_K0ZWMwRcbuc8qVlYuBoFOCCSYRIqA91dO-/s1600/buttons-black.png) 0 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfYBpodPMV_9HUQ2gSWOnZyH1ujulekhfZj4bc0eCekyEMlU2d80W6nffvClnilL06V6m61NCIvpt9oyDaFCoM64KkRhPo9vD2stTc5diV_K0ZWMwRcbuc8qVlYuBoFOCCSYRIqA91dO-/s1600/buttons-black.png) -20px 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfYBpodPMV_9HUQ2gSWOnZyH1ujulekhfZj4bc0eCekyEMlU2d80W6nffvClnilL06V6m61NCIvpt9oyDaFCoM64KkRhPo9vD2stTc5diV_K0ZWMwRcbuc8qVlYuBoFOCCSYRIqA91dO-/s1600/buttons-black.png) -40px 0 no-repeat;
float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfYBpodPMV_9HUQ2gSWOnZyH1ujulekhfZj4bc0eCekyEMlU2d80W6nffvClnilL06V6m61NCIvpt9oyDaFCoM64KkRhPo9vD2stTc5diV_K0ZWMwRcbuc8qVlYuBoFOCCSYRIqA91dO-/s1600/buttons-black.png) -60px 0 no-repeat;
float: right;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyCLPmI5zE-qF02qr_L0mf2GSE7iW9eWfKjWy25fRxz0eHQjl8kf86AM7EcftFcv53K0DgyPlKe_ybRul0WLkIl5ayamaVRvtHmsQI7gFfFtqQflnmL2pwE4LhH0RRWUkhmtMuMZWU628/s1600/buttons-white.png) 0 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyCLPmI5zE-qF02qr_L0mf2GSE7iW9eWfKjWy25fRxz0eHQjl8kf86AM7EcftFcv53K0DgyPlKe_ybRul0WLkIl5ayamaVRvtHmsQI7gFfFtqQflnmL2pwE4LhH0RRWUkhmtMuMZWU628/s1600/buttons-white.png) -20px 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyCLPmI5zE-qF02qr_L0mf2GSE7iW9eWfKjWy25fRxz0eHQjl8kf86AM7EcftFcv53K0DgyPlKe_ybRul0WLkIl5ayamaVRvtHmsQI7gFfFtqQflnmL2pwE4LhH0RRWUkhmtMuMZWU628/s1600/buttons-white.png) -40px 0 no-repeat;
float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyCLPmI5zE-qF02qr_L0mf2GSE7iW9eWfKjWy25fRxz0eHQjl8kf86AM7EcftFcv53K0DgyPlKe_ybRul0WLkIl5ayamaVRvtHmsQI7gFfFtqQflnmL2pwE4LhH0RRWUkhmtMuMZWU628/s1600/buttons-white.png) -60px 0 no-repeat;
float: right;
}
.MBLnewsticker>ul>li>.MBL-info span {
position: absolute;
left: 80px;
right: 30px;
text-align: center;
opacity: 0.4;
z-index: 0;
font-size: 13px;
cursor: default;
}
.MBLnewsticker>div {
width: 50px;
height: 30px;
cursor: pointer;
position: absolute;
opacity: 0.3;
}
.MBLnewsticker>div:hover {
opacity: 1;
}
.MBLnewsticker>div.MBL-top-arrow {
top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEzjaCgrVDzKYhArB4-yRiRNkh6NQNYnCegmI9QL93z8qu1q9x7Z1bM7uJhVz18z4C1JLuuXWHB5eoQLKgJWxkmjavh_sci_4GfWKf4-TKMcRL8_b1MgzLomN9yX4M4-Rd-4mFT4kVXxRx/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
bottom: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEzjaCgrVDzKYhArB4-yRiRNkh6NQNYnCegmI9QL93z8qu1q9x7Z1bM7uJhVz18z4C1JLuuXWHB5eoQLKgJWxkmjavh_sci_4GfWKf4-TKMcRL8_b1MgzLomN9yX4M4-Rd-4mFT4kVXxRx/s1600/arrows-black.png) bottom no-repeat;
}
.MBLnewsticker .MBL-top0 {
-ms-transform: scale(0.80);
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: 0.85;
top: 0;
z-index: 1;
display: block;
}
.MBLnewsticker .MBL-top1 {
-ms-transform: scale(0.87);
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.9;
top: 20px;
z-index: 2;
display: block;
}
.MBLnewsticker .MBL-top2 {
-ms-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0.95;
top: 45px;
z-index: 3;
display: block;
}
.MBLnewsticker .MBL-active {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
top: 75px;
z-index: 10;
display: block;
}
.MBLnewsticker .MBL-bottom2 {
-ms-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0.95;
top: 105px;
z-index: 6;
display: block;
}
.MBLnewsticker .MBL-bottom1 {
-ms-transform: scale(0.87);
-webkit-transform: scale(0.90);
transform: scale(0.90);
opacity: 0.9;
top: 130px;
z-index: 5;
display: block;
}
.MBLnewsticker .MBL-bottom0 {
-ms-transform: scale(0.80);
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: 0.85;
top: 150px;
z-index: 4;
display: block;
}
.MBL-easing2 {
transition: .25s linear;
-moz-transition: .25s linear;
-webkit-transition: .25s linear;
}
.MBL-easing li {
transition: .5s ease-out;
-moz-transition: .5s ease-out;
-webkit-transition: .5s ease-out;
}
.MBL-radius li {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.MBL-radius2 li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.MBL-shadow li {
-webkit-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
}
.MBL-shadow-big {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
}

Again in the template editor, search for the ending </head> tag and just above it paste the following JavaScript codes (these codes will make the ticker work, so be sure to add it correctly).

<script type='text/javascript'>
/*<![CDATA[*/
(function(e) {
$.fn.MBLnewsticker = function(e) {
var t = {
width: "100%",
modulid: "MBLnewsticker",
autoplay: true,
timer: 3e3,
itemheight: 130,
infobarvisible: true,
btnfacebook: true,
btntwitter: true,
btngoogleplus: true,
btnlinkbutton: true,
btnlinktarget: "_blank",
pagecountvisible: true,
buttonstyle: "black",
pagenavi: true,
pagenavistyle: "black",
feed: false,
feedcount: 100
};

var e = $.extend(t, e);
return this.each(function() {
function o() {
function o() {
$(e.modulid + ">div").css({
left: ($(e.modulid).width() - 30) / 2
})
}
function u() {
$(e.modulid + " ul li").eq(r[0]).addClass("MBL-top0");
$(e.modulid + " ul li").eq(r[1]).addClass("MBL-top1");
$(e.modulid + " ul li").eq(r[2]).addClass("MBL-top2");
$(e.modulid + " ul li").eq(r[3]).addClass("MBL-active");
$(e.modulid + " ul li").eq(r[4]).addClass("MBL-bottom2");
$(e.modulid + " ul li").eq(r[5]).addClass("MBL-bottom1");
$(e.modulid + " ul li").eq(r[6]).addClass("MBL-bottom0")
}
function a() {
t--;
if (t < 0) t = n;
l()
}
function f() {
t++;
if (t == n + 1) t = 0;
l()
}
function l() {
$(e.modulid + " ul li").attr("class", "");
if (t == 0) {
r[0] = n - 2;
r[1] = n - 1;
r[2] = n;
r[3] = t;
r[4] = t + 1;
r[5] = t + 2;
r[6] = t + 3
} else if (t == 1) {
r[0] = n - 1;
r[1] = n;
r[2] = t - 1;
r[3] = t;
r[4] = t + 1;
r[5] = t + 2;
r[6] = t + 3
} else if (t == 2) {
r[0] = n;
r[1] = t - 2;
r[2] = t - 1;
r[3] = t;
r[4] = t + 1;
r[5] = t + 2;
r[6] = t + 3
} else if (t == n) {
r[0] = n - 3;
r[1] = n - 2;
r[2] = n - 1;
r[3] = t;
r[4] = 0;
r[5] = 1;
r[6] = 2
} else if (t == n - 1) {
r[0] = n - 4;
r[1] = n - 3;
r[2] = n - 2;
r[3] = t;
r[4] = t + 1;
r[5] = 0;
r[6] = 1
} else if (t == n - 2) {
r[0] = n - 5;
r[1] = n - 4;
r[2] = n - 3;
r[3] = t;
r[4] = t + 1;
r[5] = t + 2;
r[6] = 0
} else {
r[0] = t - 3;
r[1] = t - 2;
r[2] = t - 1;
r[3] = t;
r[4] = t + 1;
r[5] = t + 2;
r[6] = t + 3
}
u()
}
$(e.modulid + " ul li").css({
height: e.itemheight,
background: e.itembgcolor,
border: "solid 1px " + e.bordercolor,
color: e.titlecolor,
"font-size": e.titlefontsize
});
$(e.modulid + " ul li").each(function(t, r) {
if (e.infobarvisible) {
i = '<div class="MBL-info" style="background:' + e.infobgcolor + "; border-color:" + e.bordercolor + ';">';
if (e.btnfacebook) i = i + '<a data-type="facebook" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-facebook-' + e.buttonstyle + '"></a>';
if (e.btntwitter) i = i + '<a data-type="twitter" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-twitter-' + e.buttonstyle + '"></a>';
if (e.btngoogleplus) i = i + '<a data-type="google" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-google-' + e.buttonstyle + '"></a>';
if (e.pagecountvisible) i = i + "<span>" + ($(this).index() + 1) + " / " + (n + 1) + "</span>";
if (e.btnlinkbutton) i = i + '<a href="' + $(this).find(".MBL-content").attr("data-link") + '" class="MBL-easing2 MBL-link-' + e.buttonstyle + '" target="' + e.btnlinktarget + '"></a>';
i = i + "</div>"
}
$(this).append(i)
});
$(e.modulid + " ul li .MBL-content").find("a").css({
color: e.contentlinkcolor
});
$(e.modulid + " ul li").find(".MBL-info").find("a").click(function(e) {
if ($(this).attr("data-type") == "facebook") {
window.open("http://www.facebook.com/sharer.php?u=" + encodeURIComponent($(this).attr("data-url")) + "&t=" + encodeURIComponent($(this).attr("data-text")), "sharer", "toolbar=0,status=0,width=626,height=436");
return false
} else if ($(this).attr("data-type") == "twitter") {
window.open("http://twitter.com/share?text=" + $(this).attr("data-text") + "&url=" + $(this).attr("data-url"), "sharer", "toolbar=0,status=0,width=626,height=436");
return false
} else if ($(this).attr("data-type") == "google") {
window.open("https://plus.google.com/share?url=" + $(this).attr("data-url") + "&title=" + $(this).attr("data-text"), "sharer", "height=550,width=525,left=100,top=100,menubar=0");
return false
}
});
$(e.modulid + " ul li").click(function(e) {
t = $(this).index();
l()
});
if (e.pagenavi) {
$(e.modulid).append('<div class="MBL-top-arrow"></div><div class="MBL-bottom-arrow"></div>');
$(e.modulid).css({
height: e.itemheight + 200,
padding: "20px 10px",
width: e.width
})
} else {
$(e.modulid).css({
height: e.itemheight + 160,
padding: "0px 10px",
width: e.width
})
}
o();
$(window).resize(function(e) {
o()
});
u();
$(e.modulid + ">div").click(function(e) {
if ($(this).attr("class") == "MBL-top-arrow") a();
else f()
});
if (e.autoplay) {
s = setInterval(function() {
f()
}, e.timer);
$(e.modulid).hover(function() {
clearInterval(s)
}, function() {
s = setInterval(function() {
f()
}, e.timer)
})
}
}
function u() {
$.ajax({
type: "GET",
url: document.location.protocol + "//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + e.feedcount + "&callback=?&q=" + encodeURIComponent(e.feed),
dataType: "json",
async: false,
success: function(i) {
veri = i.responseData.feed.entries;
news = "";
$(veri).each(function(e, t) {
if (e == 0) news = news + '<li class="MBL-active"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == 1) news = news + '<li class="MBL-bottom2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == 2) news = news + '<li class="MBL-bottom1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == 3) news = news + '<li class="MBL-bottom0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == veri.length - 1) news = news + '<li class="MBL-top2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == veri.length - 2) news = news + '<li class="MBL-top1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == veri.length - 3) news = news + '<li class="MBL-top0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else news = news + '<li><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"
});
$(e.modulid + " ul").html("");
$(e.modulid + " ul").append(news);
n = veri.length - 1;
r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];
o()
},
error: function() {
$(e.modulid + " ul").html('<li class="MBL-active"><div class="MBL-content">Error! Please try again later...</div></li>')
}
})
}
e.modulid = "#" + $(this).attr("id");
var t = 0;
var n = $(e.modulid + " ul li").length - 1;
var r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];
var i = "";
var s = e.modulid;
if (e.feed != false) {
$(e.modulid + " ul").html("");
$(e.modulid + " ul").append('<li class="MBL-active"><div class="MBL-content">Rss Feed Loading...</div></li>');
u()
} else {
o()
}
})
}
})(jQuery)
/*]]>*/
</script>

Now to add the widget in the sidebar, Go to Layout >> Add a Gadget >> from the list select “Add HTML/JavaScript” and paste the following code in the HTML text box.

<div class="MBLnewsticker MBL-radius MBL-shadow MBL-easing" id="MBLnewsticker1">
<ul> <li>
<div class="MBL-content" data-link="http://01p.blogspot.com">Powered by 01P (Don't remove or Widget will not work).</div>
</li></ul>
</div>

<script>
$(document).ready(function(){
$("#MBLnewsticker1").MBLnewsticker({
feed:"http://feeds.feedburner.com/01p",
width:"100%",
contentlinkcolor: "#766D6D",
timer:5000,
titlecolor: "#333",
titlefontsize: "16px",
itembgcolor: "#FFF",
contentlinkcolor: "#766D6D",
infobgcolor: "#f2f2f2",
bordercolor: "#DDD"
});
});
</script>

Now it’s up to you, if you want to customize the appearance of your ticker you can do it with absolute ease. Take a look at the following codes to learn about the customization of the ticker and usage of the codes:

Replace http://feeds.feedburner.com/01p with any other feed URL.
Replace 100% from the above code, to reduce or increase the width.
Replace 5000 with any other digit to increase or decrease the rotation animation of the ticker.
Replace #FFF to change the background color of the info bar in the ticker.
Replace #f2f2f2 to change the background color of the ticker.
Replace #DDD to change the border color of the ticker.
Replace #766D6D to change the color of the link appearing in the ticker.

Once everything is done, save the widget by pressing “Save” button present towards the bottom of the screen window. Congraltuations, you have successfully added a RSS news ticker widget in blogger sidebar.

We hope this tutorial may have helped you in learning how to add a RSS feed news ticker in blogger sidebar. Do share your thoughts about this new improve news ticker widget we have developed by blogspot users. If you like this widget, share it on Facebook, Twitter or Google+.

How to Add a RSS Feed News Ticker in Blogger Sidebar

Posted by Admin No comments

.MBL-container-header h1{font-weight:300; font-size:48px; text-align:center;}
.MBL-container-header h2{font-size:30px; text-align:center;}

#MBLnewsticker1 ul { padding: 0px; }
.MBLnewsticker {
width: 100%;
overflow: hidden;
height: 440px;
position: relative;
padding: 0 5px;
box-sizing: border-box;
margin: 0 auto;
text-align:center;
}
.MBLnewsticker>ul {
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}
.MBLnewsticker>ul>li {
display: none;
width: 100%;
height: 100px;
background: #FFF;
position: absolute;
overflow: hidden
}
.MBLnewsticker>ul>li>.MBL-content {
position: absolute;
top: 0;
bottom: 30px;
left: 0;
right: 0;
box-sizing: border-box;
padding: 5%;
overflow: hidden;
}
.MBLnewsticker>ul>li>.MBL-content a {
text-decoration: none;
}
.MBLnewsticker>ul>li>.MBL-content a:hover {
text-decoration: underline;
}
.MBLnewsticker>ul>li>.MBL-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 20px;
padding: 5px;
border-top: solid 1px #DDD;
}
.MBLnewsticker>ul>li>.MBL-info a {
display: inline-block;
width: 20px;
height: 20px;
background: #0F0;
opacity: 0.2;
cursor: pointer;
}
.MBLnewsticker>ul>li>.MBL-info a:hover {
opacity: 1;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfYBpodPMV_9HUQ2gSWOnZyH1ujulekhfZj4bc0eCekyEMlU2d80W6nffvClnilL06V6m61NCIvpt9oyDaFCoM64KkRhPo9vD2stTc5diV_K0ZWMwRcbuc8qVlYuBoFOCCSYRIqA91dO-/s1600/buttons-black.png) 0 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfYBpodPMV_9HUQ2gSWOnZyH1ujulekhfZj4bc0eCekyEMlU2d80W6nffvClnilL06V6m61NCIvpt9oyDaFCoM64KkRhPo9vD2stTc5diV_K0ZWMwRcbuc8qVlYuBoFOCCSYRIqA91dO-/s1600/buttons-black.png) -20px 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfYBpodPMV_9HUQ2gSWOnZyH1ujulekhfZj4bc0eCekyEMlU2d80W6nffvClnilL06V6m61NCIvpt9oyDaFCoM64KkRhPo9vD2stTc5diV_K0ZWMwRcbuc8qVlYuBoFOCCSYRIqA91dO-/s1600/buttons-black.png) -40px 0 no-repeat;
float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-black {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfYBpodPMV_9HUQ2gSWOnZyH1ujulekhfZj4bc0eCekyEMlU2d80W6nffvClnilL06V6m61NCIvpt9oyDaFCoM64KkRhPo9vD2stTc5diV_K0ZWMwRcbuc8qVlYuBoFOCCSYRIqA91dO-/s1600/buttons-black.png) -60px 0 no-repeat;
float: right;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-facebook-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyCLPmI5zE-qF02qr_L0mf2GSE7iW9eWfKjWy25fRxz0eHQjl8kf86AM7EcftFcv53K0DgyPlKe_ybRul0WLkIl5ayamaVRvtHmsQI7gFfFtqQflnmL2pwE4LhH0RRWUkhmtMuMZWU628/s1600/buttons-white.png) 0 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-twitter-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyCLPmI5zE-qF02qr_L0mf2GSE7iW9eWfKjWy25fRxz0eHQjl8kf86AM7EcftFcv53K0DgyPlKe_ybRul0WLkIl5ayamaVRvtHmsQI7gFfFtqQflnmL2pwE4LhH0RRWUkhmtMuMZWU628/s1600/buttons-white.png) -20px 0 no-repeat;
float: left;
margin-right: 5px;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-google-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyCLPmI5zE-qF02qr_L0mf2GSE7iW9eWfKjWy25fRxz0eHQjl8kf86AM7EcftFcv53K0DgyPlKe_ybRul0WLkIl5ayamaVRvtHmsQI7gFfFtqQflnmL2pwE4LhH0RRWUkhmtMuMZWU628/s1600/buttons-white.png) -40px 0 no-repeat;
float: left;
}
.MBLnewsticker>ul>li>.MBL-info a.MBL-link-white {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxyCLPmI5zE-qF02qr_L0mf2GSE7iW9eWfKjWy25fRxz0eHQjl8kf86AM7EcftFcv53K0DgyPlKe_ybRul0WLkIl5ayamaVRvtHmsQI7gFfFtqQflnmL2pwE4LhH0RRWUkhmtMuMZWU628/s1600/buttons-white.png) -60px 0 no-repeat;
float: right;
}
.MBLnewsticker>ul>li>.MBL-info span {
position: absolute;
left: 80px;
right: 30px;
text-align: center;
opacity: 0.4;
z-index: 0;
font-size: 13px;
cursor: default;
}
.MBLnewsticker>div {
width: 50px;
height: 30px;
cursor: pointer;
position: absolute;
opacity: 0.3;
}
.MBLnewsticker>div:hover {
opacity: 1;
}
.MBLnewsticker>div.MBL-top-arrow {
top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEzjaCgrVDzKYhArB4-yRiRNkh6NQNYnCegmI9QL93z8qu1q9x7Z1bM7uJhVz18z4C1JLuuXWHB5eoQLKgJWxkmjavh_sci_4GfWKf4-TKMcRL8_b1MgzLomN9yX4M4-Rd-4mFT4kVXxRx/s1600/arrows-black.png) top no-repeat;
}
.MBLnewsticker>div.MBL-bottom-arrow {
bottom: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEzjaCgrVDzKYhArB4-yRiRNkh6NQNYnCegmI9QL93z8qu1q9x7Z1bM7uJhVz18z4C1JLuuXWHB5eoQLKgJWxkmjavh_sci_4GfWKf4-TKMcRL8_b1MgzLomN9yX4M4-Rd-4mFT4kVXxRx/s1600/arrows-black.png) bottom no-repeat;
}
.MBLnewsticker .MBL-top0 {
-ms-transform: scale(0.80);
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: 0.85;
top: 0;
z-index: 1;
display: block;
}
.MBLnewsticker .MBL-top1 {
-ms-transform: scale(0.87);
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.9;
top: 20px;
z-index: 2;
display: block;
}
.MBLnewsticker .MBL-top2 {
-ms-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0.95;
top: 45px;
z-index: 3;
display: block;
}
.MBLnewsticker .MBL-active {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
top: 75px;
z-index: 10;
display: block;
}
.MBLnewsticker .MBL-bottom2 {
-ms-transform: scale(0.95);
-webkit-transform: scale(0.95);
transform: scale(0.95);
opacity: 0.95;
top: 105px;
z-index: 6;
display: block;
}
.MBLnewsticker .MBL-bottom1 {
-ms-transform: scale(0.87);
-webkit-transform: scale(0.90);
transform: scale(0.90);
opacity: 0.9;
top: 130px;
z-index: 5;
display: block;
}
.MBLnewsticker .MBL-bottom0 {
-ms-transform: scale(0.80);
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: 0.85;
top: 150px;
z-index: 4;
display: block;
}
.MBL-easing2 {
transition: .25s linear;
-moz-transition: .25s linear;
-webkit-transition: .25s linear;
}
.MBL-easing li {
transition: .5s ease-out;
-moz-transition: .5s ease-out;
-webkit-transition: .5s ease-out;
}
.MBL-radius li {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.MBL-radius2 li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.MBL-shadow li {
-webkit-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
box-shadow: 0px 0px 10px 0px rgba(100,100,100,0.3);
}
.MBL-shadow-big {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) !important;
}

Again in the template editor, search for the ending </head> tag and just above it paste the following JavaScript codes (these codes will make the ticker work, so be sure to add it correctly).

<script type='text/javascript'>
/*<![CDATA[*/
(function(e) {
$.fn.MBLnewsticker = function(e) {
var t = {
width: "100%",
modulid: "MBLnewsticker",
autoplay: true,
timer: 3e3,
itemheight: 130,
infobarvisible: true,
btnfacebook: true,
btntwitter: true,
btngoogleplus: true,
btnlinkbutton: true,
btnlinktarget: "_blank",
pagecountvisible: true,
buttonstyle: "black",
pagenavi: true,
pagenavistyle: "black",
feed: false,
feedcount: 100
};

var e = $.extend(t, e);
return this.each(function() {
function o() {
function o() {
$(e.modulid + ">div").css({
left: ($(e.modulid).width() - 30) / 2
})
}
function u() {
$(e.modulid + " ul li").eq(r[0]).addClass("MBL-top0");
$(e.modulid + " ul li").eq(r[1]).addClass("MBL-top1");
$(e.modulid + " ul li").eq(r[2]).addClass("MBL-top2");
$(e.modulid + " ul li").eq(r[3]).addClass("MBL-active");
$(e.modulid + " ul li").eq(r[4]).addClass("MBL-bottom2");
$(e.modulid + " ul li").eq(r[5]).addClass("MBL-bottom1");
$(e.modulid + " ul li").eq(r[6]).addClass("MBL-bottom0")
}
function a() {
t--;
if (t < 0) t = n;
l()
}
function f() {
t++;
if (t == n + 1) t = 0;
l()
}
function l() {
$(e.modulid + " ul li").attr("class", "");
if (t == 0) {
r[0] = n - 2;
r[1] = n - 1;
r[2] = n;
r[3] = t;
r[4] = t + 1;
r[5] = t + 2;
r[6] = t + 3
} else if (t == 1) {
r[0] = n - 1;
r[1] = n;
r[2] = t - 1;
r[3] = t;
r[4] = t + 1;
r[5] = t + 2;
r[6] = t + 3
} else if (t == 2) {
r[0] = n;
r[1] = t - 2;
r[2] = t - 1;
r[3] = t;
r[4] = t + 1;
r[5] = t + 2;
r[6] = t + 3
} else if (t == n) {
r[0] = n - 3;
r[1] = n - 2;
r[2] = n - 1;
r[3] = t;
r[4] = 0;
r[5] = 1;
r[6] = 2
} else if (t == n - 1) {
r[0] = n - 4;
r[1] = n - 3;
r[2] = n - 2;
r[3] = t;
r[4] = t + 1;
r[5] = 0;
r[6] = 1
} else if (t == n - 2) {
r[0] = n - 5;
r[1] = n - 4;
r[2] = n - 3;
r[3] = t;
r[4] = t + 1;
r[5] = t + 2;
r[6] = 0
} else {
r[0] = t - 3;
r[1] = t - 2;
r[2] = t - 1;
r[3] = t;
r[4] = t + 1;
r[5] = t + 2;
r[6] = t + 3
}
u()
}
$(e.modulid + " ul li").css({
height: e.itemheight,
background: e.itembgcolor,
border: "solid 1px " + e.bordercolor,
color: e.titlecolor,
"font-size": e.titlefontsize
});
$(e.modulid + " ul li").each(function(t, r) {
if (e.infobarvisible) {
i = '<div class="MBL-info" style="background:' + e.infobgcolor + "; border-color:" + e.bordercolor + ';">';
if (e.btnfacebook) i = i + '<a data-type="facebook" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-facebook-' + e.buttonstyle + '"></a>';
if (e.btntwitter) i = i + '<a data-type="twitter" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-twitter-' + e.buttonstyle + '"></a>';
if (e.btngoogleplus) i = i + '<a data-type="google" data-url="' + $(this).find(".MBL-content").attr("data-link") + '" data-text="' + $(this).find(".MBL-content").text() + '" class="MBL-easing2 MBL-google-' + e.buttonstyle + '"></a>';
if (e.pagecountvisible) i = i + "<span>" + ($(this).index() + 1) + " / " + (n + 1) + "</span>";
if (e.btnlinkbutton) i = i + '<a href="' + $(this).find(".MBL-content").attr("data-link") + '" class="MBL-easing2 MBL-link-' + e.buttonstyle + '" target="' + e.btnlinktarget + '"></a>';
i = i + "</div>"
}
$(this).append(i)
});
$(e.modulid + " ul li .MBL-content").find("a").css({
color: e.contentlinkcolor
});
$(e.modulid + " ul li").find(".MBL-info").find("a").click(function(e) {
if ($(this).attr("data-type") == "facebook") {
window.open("http://www.facebook.com/sharer.php?u=" + encodeURIComponent($(this).attr("data-url")) + "&t=" + encodeURIComponent($(this).attr("data-text")), "sharer", "toolbar=0,status=0,width=626,height=436");
return false
} else if ($(this).attr("data-type") == "twitter") {
window.open("http://twitter.com/share?text=" + $(this).attr("data-text") + "&url=" + $(this).attr("data-url"), "sharer", "toolbar=0,status=0,width=626,height=436");
return false
} else if ($(this).attr("data-type") == "google") {
window.open("https://plus.google.com/share?url=" + $(this).attr("data-url") + "&title=" + $(this).attr("data-text"), "sharer", "height=550,width=525,left=100,top=100,menubar=0");
return false
}
});
$(e.modulid + " ul li").click(function(e) {
t = $(this).index();
l()
});
if (e.pagenavi) {
$(e.modulid).append('<div class="MBL-top-arrow"></div><div class="MBL-bottom-arrow"></div>');
$(e.modulid).css({
height: e.itemheight + 200,
padding: "20px 10px",
width: e.width
})
} else {
$(e.modulid).css({
height: e.itemheight + 160,
padding: "0px 10px",
width: e.width
})
}
o();
$(window).resize(function(e) {
o()
});
u();
$(e.modulid + ">div").click(function(e) {
if ($(this).attr("class") == "MBL-top-arrow") a();
else f()
});
if (e.autoplay) {
s = setInterval(function() {
f()
}, e.timer);
$(e.modulid).hover(function() {
clearInterval(s)
}, function() {
s = setInterval(function() {
f()
}, e.timer)
})
}
}
function u() {
$.ajax({
type: "GET",
url: document.location.protocol + "//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + e.feedcount + "&callback=?&q=" + encodeURIComponent(e.feed),
dataType: "json",
async: false,
success: function(i) {
veri = i.responseData.feed.entries;
news = "";
$(veri).each(function(e, t) {
if (e == 0) news = news + '<li class="MBL-active"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == 1) news = news + '<li class="MBL-bottom2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == 2) news = news + '<li class="MBL-bottom1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == 3) news = news + '<li class="MBL-bottom0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == veri.length - 1) news = news + '<li class="MBL-top2"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == veri.length - 2) news = news + '<li class="MBL-top1"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else if (e == veri.length - 3) news = news + '<li class="MBL-top0"><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>";
else news = news + '<li><div class="MBL-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"
});
$(e.modulid + " ul").html("");
$(e.modulid + " ul").append(news);
n = veri.length - 1;
r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];
o()
},
error: function() {
$(e.modulid + " ul").html('<li class="MBL-active"><div class="MBL-content">Error! Please try again later...</div></li>')
}
})
}
e.modulid = "#" + $(this).attr("id");
var t = 0;
var n = $(e.modulid + " ul li").length - 1;
var r = [n - 2, n - 1, n, t, t + 1, t + 2, t + 3];
var i = "";
var s = e.modulid;
if (e.feed != false) {
$(e.modulid + " ul").html("");
$(e.modulid + " ul").append('<li class="MBL-active"><div class="MBL-content">Rss Feed Loading...</div></li>');
u()
} else {
o()
}
})
}
})(jQuery)
/*]]>*/
</script>

Now to add the widget in the sidebar, Go to Layout >> Add a Gadget >> from the list select “Add HTML/JavaScript” and paste the following code in the HTML text box.

<div class="MBLnewsticker MBL-radius MBL-shadow MBL-easing" id="MBLnewsticker1">
<ul> <li>
<div class="MBL-content" data-link="http://01p.blogspot.com">Powered by 01P (Don't remove or Widget will not work).</div>
</li></ul>
</div>

<script>
$(document).ready(function(){
$("#MBLnewsticker1").MBLnewsticker({
feed:"http://feeds.feedburner.com/01p",
width:"100%",
contentlinkcolor: "#766D6D",
timer:5000,
titlecolor: "#333",
titlefontsize: "16px",
itembgcolor: "#FFF",
contentlinkcolor: "#766D6D",
infobgcolor: "#f2f2f2",
bordercolor: "#DDD"
});
});
</script>

Replace http://feeds.feedburner.com/01p with any other feed URL.
Replace 100% from the above code, to reduce or increase the width.
Replace 5000 with any other digit to increase or decrease the rotation animation of the ticker.
Replace #FFF to change the background color of the info bar in the ticker.
Replace #f2f2f2 to change the background color of the ticker.
Replace #DDD to change the border color of the ticker.
Replace #766D6D to change the color of the link appearing in the ticker.

01P Blogger Help

What's New Here?

How to Fix Image Thumbnail Not Appearing Bug in Blogger

Why Image thumbnails are not appearing?

How to fix image Thumbnails stopped appearing in blogger?

How to Fix Image Thumbnail Not Appearing Bug in Blogger

Why Image thumbnails are not appearing?

How to fix image Thumbnails stopped appearing in blogger?

How to Add Voice Search Widget in Blogger

Why to Add Voice Search in Blogger?

How to Add Voice Search In Blogger

How to Add Voice Search Widget in Blogger

Why to Add Voice Search in Blogger?

How to Add Voice Search In Blogger

How to Insert Images in Blogger Sidebar

How to Insert Images in Blogger Sidebar

How to Show Top Commenter in Blogger

How to Show Top Commenter in Blogger

How to Add a Floating Contact Us Widget in Blogger

How to Add a Floating Contact Us Widget in Blogger

How to Add a RSS Feed News Ticker in Blogger Sidebar

How to Add a RSS Feed News Ticker in Blogger Sidebar

Popular Posts

Tags

Archives