Tagged under: Widgets
Have you ever seen those blogs that has a tabbed widget area in the sidebar consisting of popular, recent and features posts within a single click? It is more commonly known as jQuery Tabbed widget, which allows you to save a lot of space in the sidebar keeping the interface user friendly for your users by combining 3 different widgets into just one. In this article, we will be showing you how to add a jQuery Tabbed Sidebar Widget in Blogger.
What is a jQuery Tabbed Widget?
You would have seen a lot of websites that has a tabbed widget at the very top of their sidebar that keeps three widgets at just one place providing you the ability to select one to view among them. It not only allows you to save a bit of space in the sidebar but also keeps your blog design clean and professional.
A lot of big named popular websites are using the same technique to display more widgets within less space. In this article, we will be showing you a way how to add a jQuery tabbed sidebar widget in blogger and would guide you through each and every step in detail.
Creating jQuery Tabbed Widget in Blogger:
The very first thing you need to do is to go to Blogger >> Template >> Edit HTML and paste the following CSS coding just above the ]]></b:skin> tag. If you have a separate CSS Style sheet file then you can also add the following CSS to it.
/* Tab Widget */.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}
Now this step entirely depends on the coding of your blogger template as different designers have different way of coding but we will share a way that is used more commonly in the template. You have to look up to the code of your Sidebar widget area. Search for <div id='sidebar-wrapper'> and just below it paste the following piece of coding.
<!-- Tab Widget [start] --><div class='tabviewsection'><script type='text/javascript'> jQuery(document).ready(function($){ $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide(); $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show(); $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show(); $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() { $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a"); $(this).addClass("tabs-widget-current"); $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); </script><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'> <li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li> <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li> <li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li></ul><!-- Tab Widget 1 --><div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'><b:section class='sidebar' id='sidebartab1' preferred='yes'> </b:section> </div> <!-- Tab Widget 2 --> <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'><b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div> <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'><!-- Tab Widget 3 --><b:section class='sidebar' id='sidebartab3' preferred='yes'></b:section> </div></div><!-- Tab Widget [endt] -->
Once everything is done and dusted, save the template by pressing “Save Template” at the top. Now go to Layout area and you would notice three widget areas just above your sidebar. You can add widgets two those three areas and it appear in form of tabs when you view it live on your site.
We hope this tutorial have helped your biggest issue that how to add a jquery tabbed sidebar widget in blogger. With CSS, you can style the tab widgets according to the look of your blog. Share your thoughts and suggestions about this widget in the comment below, you can see the demo of this widget here.
Tagged under: Widgets
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.
You can, see the demo of this widget on this site http://www.faizanali.com/
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/AVvXsEhctex8qgSVq4qcfRQ9TDB_hUWH1A7oS3RscWldd9yl1Z-rLKTCVM2fm2IPiFytLYMvUt029v_JhCznaOhB7IRfqpkoRbW1qGLVYUpA2K_P7Jy4b6gkA5lI3Ut8lPdEH4DDRqNEOMSMO9GZ/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/AVvXsEhctex8qgSVq4qcfRQ9TDB_hUWH1A7oS3RscWldd9yl1Z-rLKTCVM2fm2IPiFytLYMvUt029v_JhCznaOhB7IRfqpkoRbW1qGLVYUpA2K_P7Jy4b6gkA5lI3Ut8lPdEH4DDRqNEOMSMO9GZ/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/AVvXsEhctex8qgSVq4qcfRQ9TDB_hUWH1A7oS3RscWldd9yl1Z-rLKTCVM2fm2IPiFytLYMvUt029v_JhCznaOhB7IRfqpkoRbW1qGLVYUpA2K_P7Jy4b6gkA5lI3Ut8lPdEH4DDRqNEOMSMO9GZ/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/AVvXsEhctex8qgSVq4qcfRQ9TDB_hUWH1A7oS3RscWldd9yl1Z-rLKTCVM2fm2IPiFytLYMvUt029v_JhCznaOhB7IRfqpkoRbW1qGLVYUpA2K_P7Jy4b6gkA5lI3Ut8lPdEH4DDRqNEOMSMO9GZ/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/AVvXsEjytSeBnlZS_T5wRq2SxKH1XSer-2aSfKtkM3LXbnbflVSg1sNAwCWYj-jlekkBqATVy7IzD7_HCkYHzJYchB7ekQ0pl-Qrnr4XGQznzBc8Y1Zsb_3LKkj50iAxwz1Lv9s36ymlktf1YEEt/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/AVvXsEjytSeBnlZS_T5wRq2SxKH1XSer-2aSfKtkM3LXbnbflVSg1sNAwCWYj-jlekkBqATVy7IzD7_HCkYHzJYchB7ekQ0pl-Qrnr4XGQznzBc8Y1Zsb_3LKkj50iAxwz1Lv9s36ymlktf1YEEt/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/AVvXsEjytSeBnlZS_T5wRq2SxKH1XSer-2aSfKtkM3LXbnbflVSg1sNAwCWYj-jlekkBqATVy7IzD7_HCkYHzJYchB7ekQ0pl-Qrnr4XGQznzBc8Y1Zsb_3LKkj50iAxwz1Lv9s36ymlktf1YEEt/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/AVvXsEjytSeBnlZS_T5wRq2SxKH1XSer-2aSfKtkM3LXbnbflVSg1sNAwCWYj-jlekkBqATVy7IzD7_HCkYHzJYchB7ekQ0pl-Qrnr4XGQznzBc8Y1Zsb_3LKkj50iAxwz1Lv9s36ymlktf1YEEt/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/AVvXsEh0BKuSZAByoZYX7SlF4wJkFa6jWTq-JDoTyQa7WJ0GgtU0Cz6-YmKtUPT_epIdvJSwSRDZfoTMTsLgSGb5_ZRgmbZNyWgPeGthHyKbDZpvwoMhANb498bHDG_qV_mYSz3hCbcfhi70kfT8/s1600/arrows-black.png) top no-repeat;}.MBLnewsticker>div.MBL-bottom-arrow { bottom: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0BKuSZAByoZYX7SlF4wJkFa6jWTq-JDoTyQa7WJ0GgtU0Cz6-YmKtUPT_epIdvJSwSRDZfoTMTsLgSGb5_ZRgmbZNyWgPeGthHyKbDZpvwoMhANb498bHDG_qV_mYSz3hCbcfhi70kfT8/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://mybloggerlab.com">Powered by MyBloggerLab (Don't remove or Widget will not work).</div></li></ul> </div>
<script>
$(document).ready(function(){
$("#MBLnewsticker1").MBLnewsticker({
feed:"http://feeds.feedburner.com/mybloggerlab",
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/mybloggerlab 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+.
Tagged under: Widgets
Do you want to attract more and more subscribers to your blog? Here, we will tell you how to do that by just adding a simple Facebook widget to your blog. Since Facebook is one of the most used social networks, it helps your subscribers to get recent updates of your blog via their Facebook accounts. Once they log in to their account they are able to know all about the recent activities of your blog which is twinkling on their newsfeed. Recently, Facebook released a new page like box widget. In this article, we will show you How to add Facebook Page Plugin in blogger.
What is Facebook Page Plugin?
Facebook page plugin is in short the replacement of the Facebook Like box. However, it works exactly like the previously known like box.
The functions are the same but it comes with extra layer of improved look which also shows facebook cover photo. You can display your recent page posts, showing some random people who liked your page and etc.
Why Facebook Widget are Important?
Everyone craves for a blog having high traffic and millions of subscribers. Facebook now paves your way from dream to reality. Facebook widget is the most top-rated way to attract viewers and forcing them to become your permanent subscribers.It not only keeps your old fans tied to your blog but it has been observed blogs having such features are attracting more fans by each passing day.
Following are the most popular widgets for Facebook. If your blog lack them, then I would say it is your prime responsibility to add them and let your business grow.
Facebook POP Likebox:
Once you furnish your account with a Facebook widget, a Facebook like pop-up window will appear every time a visitor visits your blog for the first time.
- Floating Facebook Likebox: It comforts users to like your Facebook fan page from any page on your site rather than forcing them back to go to the homepage searching for like box.
- Share Button:It gives your subscribers the authority to share your content to their Facebook profiles. It is highly recommended to add this widget since it will attract the subscriber’s friends as well and they too will stick to your blog. Learn how to add share button in blogger.
- Page Badge:It comes real handy when you want a boost in your traffic. It will connect your Facebook page and website by sharing information from page to your website.
- Like button: Facebook like button ases your users by allowing them to publish content and activity to Facebook.
How to Add New Facebook Like box in Blogger:
Adding a Facebook Plugin is quite easy. All you have to do is to follow these simple steps:
The very first thing you need to do is to visit Facebook Page Plugin. You will find a few options to customize the appearance of your page plugin.
Provide your Page URL, choose the width and height of your page plugin. Since, the plugin shows the cover page on to the widget you can simply hide it from the plugin in case you don't want it to appear. You can also choose whether to show your latest page posts or not.
If you are not a techsavvy person than leave all the options blank, but do not forget to add the URL to your facebook page. Once you are satisfied with the customizations you can press the get code button to continue.
Facebook will give you two codes, copy the first code and paste it above the </head> tag in your blogger template. Additionally you can also paste the code, ideally right after the opening <body> tag.
Now, Copy the second code and paste it anywhere you would like to display the facebook page like box. We recommend you add it in your sidebar by going to Layout >> Add a Gadget.
I must say in order to increase your blog’s publicity; you should never miss out on such useful widgets which will clear the way for more people to subscribe to your blog. A blog which has all the modern features pleases the fans and helps them to get more and more benefits from your blog. So, what are waiting for? Go and get your Facebook widgets and let people know you in a broader sense via your blog.
