Here I would like to share a quick method on how one can add a RSS Feed News Ticker in the Blogger Sidebar. Comparatively this is one of the most easiest to implement. All you have to do is to follow few very easy steps to have a cool News ticker on your blog or website.
Follow these steps
1. Sign In to Blogger Dashboard
2. Go to Template -> Edit HTML
3. Find (Ctrl+F) ]]></b:skin>
4. Copy the Following and paste the code just above it.
.LBH-container-header h1{font-weight:300; font-size:48px; text-align:center;} .LBH-container-header h2{font-size:30px; text-align:center;} #LBHnewsticker1 ul { padding: 0px; }.LBHnewsticker { width: 100%; overflow: hidden; height: 440px; position: relative; padding: 0 5px; box-sizing: border-box; margin: 0 auto; text-align:center;}.LBHnewsticker>ul { padding: 0; margin: 0; list-style-type: none; position: relative;}.LBHnewsticker>ul>li { display: none; width: 100%; height: 100px; background: #FFF; position: absolute; overflow: hidden}.LBHnewsticker>ul>li>.LBH-content { position: absolute; top: 0; bottom: 30px; left: 0; right: 0; box-sizing: border-box; padding: 5%; overflow: hidden;}.LBHnewsticker>ul>li>.LBH-content a { text-decoration: none;}.LBHnewsticker>ul>li>.LBH-content a:hover { text-decoration: underline;}.LBHnewsticker>ul>li>.LBH-info { position: absolute; bottom: 0; left: 0; right: 0; height: 20px; padding: 5px; border-top: solid 1px #DDD;}.LBHnewsticker>ul>li>.LBH-info a { display: inline-block; width: 20px; height: 20px; background: #0F0; opacity: 0.2; cursor: pointer;}.LBHnewsticker>ul>li>.LBH-info a:hover { opacity: 1;}.LBHnewsticker>ul>li>.LBH-info a.LBH-facebook-black { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpa1fsx2CxGl5SDUZufAIJrFiDFB0pq1d6TAjq_WUMlaQUeHJr1J4jBvkJna8_8KD_pxlGJ4wYddD9QAyMmtjcHapEzVWsmJyluJcb53lv-sIr2WyHx1vCfnC4jPA3_CdFky4-sHjLVPm/s1600/buttons-black.png) 0 0 no-repeat; float: left; margin-right: 5px;}.LBHnewsticker>ul>li>.LBH-info a.LBH-twitter-black { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpa1fsx2CxGl5SDUZufAIJrFiDFB0pq1d6TAjq_WUMlaQUeHJr1J4jBvkJna8_8KD_pxlGJ4wYddD9QAyMmtjcHapEzVWsmJyluJcb53lv-sIr2WyHx1vCfnC4jPA3_CdFky4-sHjLVPm/s1600/buttons-black.png) -20px 0 no-repeat; float: left; margin-right: 5px;}.LBHnewsticker>ul>li>.LBH-info a.LBH-google-black { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpa1fsx2CxGl5SDUZufAIJrFiDFB0pq1d6TAjq_WUMlaQUeHJr1J4jBvkJna8_8KD_pxlGJ4wYddD9QAyMmtjcHapEzVWsmJyluJcb53lv-sIr2WyHx1vCfnC4jPA3_CdFky4-sHjLVPm/s1600/buttons-black.png) -40px 0 no-repeat; float: left;}.LBHnewsticker>ul>li>.LBH-info a.LBH-link-black { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcpa1fsx2CxGl5SDUZufAIJrFiDFB0pq1d6TAjq_WUMlaQUeHJr1J4jBvkJna8_8KD_pxlGJ4wYddD9QAyMmtjcHapEzVWsmJyluJcb53lv-sIr2WyHx1vCfnC4jPA3_CdFky4-sHjLVPm/s1600/buttons-black.png) -60px 0 no-repeat; float: right;}.LBHnewsticker>ul>li>.LBH-info a.LBH-facebook-white { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxtVyNcUz5hZUIjs6v_Ixe_6_eD1x33Go36HWjy6cHB8SxDVgceTqPtGepwAnXi_Hcug3SDlfumyuSnx_EJjymju8jUBuZaFS_oB9OIAC23iU1lcA42HaBBuu6s56m4ZH1n8kc1uAqe_lD/s1600/buttons-white.png) 0 0 no-repeat; float: left; margin-right: 5px;}.LBHnewsticker>ul>li>.LBH-info a.LBH-twitter-white { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxtVyNcUz5hZUIjs6v_Ixe_6_eD1x33Go36HWjy6cHB8SxDVgceTqPtGepwAnXi_Hcug3SDlfumyuSnx_EJjymju8jUBuZaFS_oB9OIAC23iU1lcA42HaBBuu6s56m4ZH1n8kc1uAqe_lD/s1600/buttons-white.png) -20px 0 no-repeat; float: left; margin-right: 5px;}.LBHnewsticker>ul>li>.LBH-info a.LBH-google-white { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxtVyNcUz5hZUIjs6v_Ixe_6_eD1x33Go36HWjy6cHB8SxDVgceTqPtGepwAnXi_Hcug3SDlfumyuSnx_EJjymju8jUBuZaFS_oB9OIAC23iU1lcA42HaBBuu6s56m4ZH1n8kc1uAqe_lD/s1600/buttons-white.png) -40px 0 no-repeat; float: left;}.LBHnewsticker>ul>li>.LBH-info a.LBH-link-white { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxtVyNcUz5hZUIjs6v_Ixe_6_eD1x33Go36HWjy6cHB8SxDVgceTqPtGepwAnXi_Hcug3SDlfumyuSnx_EJjymju8jUBuZaFS_oB9OIAC23iU1lcA42HaBBuu6s56m4ZH1n8kc1uAqe_lD/s1600/buttons-white.png) -60px 0 no-repeat; float: right;}.LBHnewsticker>ul>li>.LBH-info span { position: absolute; left: 80px; right: 30px; text-align: center; opacity: 0.4; z-index: 0; font-size: 13px; cursor: default;}.LBHnewsticker>div { width: 50px; height: 30px; cursor: pointer; position: absolute; opacity: 0.3;}.LBHnewsticker>div:hover { opacity: 1;}.LBHnewsticker>div.LBH-top-arrow { top: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtcHuGY8OVcKHpbUNzJ0jYi6n4hWVd2nw22TvVXY3J0FS23hTEhZf5pPdn7-NeRY-F8aG6f_mWHTJ8xBBvwRQvXrCmyhIUuoKGEGWeNrwcQTcNrC4cPrjQairs3tMUTNrJc_xCm6nMXg0o/s1600/arrows-black.png) top no-repeat;}.LBHnewsticker>div.LBH-bottom-arrow { bottom: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtcHuGY8OVcKHpbUNzJ0jYi6n4hWVd2nw22TvVXY3J0FS23hTEhZf5pPdn7-NeRY-F8aG6f_mWHTJ8xBBvwRQvXrCmyhIUuoKGEGWeNrwcQTcNrC4cPrjQairs3tMUTNrJc_xCm6nMXg0o/s1600/arrows-black.png) bottom no-repeat;}.LBHnewsticker .LBH-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;}.LBHnewsticker .LBH-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;}.LBHnewsticker .LBH-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;}.LBHnewsticker .LBH-active { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; top: 75px; z-index: 10; display: block;}.LBHnewsticker .LBH-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;}.LBHnewsticker .LBH-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;}.LBHnewsticker .LBH-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;}.LBH-easing2 { transition: .25s linear; -moz-transition: .25s linear; -webkit-transition: .25s linear;}.LBH-easing li { transition: .5s ease-out; -moz-transition: .5s ease-out; -webkit-transition: .5s ease-out;}.LBH-radius li { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}.LBH-radius2 li { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}.LBH-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);}.LBH-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;}
5. Now search for </head>
6. Paste the following code above it.
6. Paste the following code above it.
<script type='text/javascript'>/*<![CDATA[*/(function(e) { $.fn.LBHnewsticker = function(e) { var t = { width: "100%", modulid: "LBHnewsticker", 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("LBH-top0"); $(e.modulid + " ul li").eq(r[1]).addClass("LBH-top1"); $(e.modulid + " ul li").eq(r[2]).addClass("LBH-top2"); $(e.modulid + " ul li").eq(r[3]).addClass("LBH-active"); $(e.modulid + " ul li").eq(r[4]).addClass("LBH-bottom2"); $(e.modulid + " ul li").eq(r[5]).addClass("LBH-bottom1"); $(e.modulid + " ul li").eq(r[6]).addClass("LBH-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="LBH-info" style="background:' + e.infobgcolor + "; border-color:" + e.bordercolor + ';">'; if (e.btnfacebook) i = i + '<a data-type="facebook" data-url="' + $(this).find(".LBH-content").attr("data-link") + '" data-text="' + $(this).find(".LBH-content").text() + '" class="LBH-easing2 LBH-facebook-' + e.buttonstyle + '"></a>'; if (e.btntwitter) i = i + '<a data-type="twitter" data-url="' + $(this).find(".LBH-content").attr("data-link") + '" data-text="' + $(this).find(".LBH-content").text() + '" class="LBH-easing2 LBH-twitter-' + e.buttonstyle + '"></a>'; if (e.btngoogleplus) i = i + '<a data-type="google" data-url="' + $(this).find(".LBH-content").attr("data-link") + '" data-text="' + $(this).find(".LBH-content").text() + '" class="LBH-easing2 LBH-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(".LBH-content").attr("data-link") + '" class="LBH-easing2 LBH-link-' + e.buttonstyle + '" target="' + e.btnlinktarget + '"></a>'; i = i + "</div>" } $(this).append(i) }); $(e.modulid + " ul li .LBH-content").find("a").css({ color: e.contentlinkcolor }); $(e.modulid + " ul li").find(".LBH-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="LBH-top-arrow"></div><div class="LBH-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") == "LBH-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="LBH-active"><div class="LBH-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="LBH-bottom2"><div class="LBH-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="LBH-bottom1"><div class="LBH-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="LBH-bottom0"><div class="LBH-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="LBH-top2"><div class="LBH-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="LBH-top1"><div class="LBH-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="LBH-top0"><div class="LBH-content" data-link="' + veri[e].link + '"><a href="' + veri[e].link + '">' + veri[e].title + "</a></div></li>"; else news = news + '<li><div class="LBH-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="LBH-active"><div class="LBH-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="LBH-active"><div class="LBH-content">Rss Feed Loading...</div></li>'); u() } else { o() } }) }})(jQuery)/*]]>*/</script>
7. Now add a html widget in the side bar and paste the following code in it.
8. Customize it according to your need.
<div class="LBHnewsticker LBH-radius LBH-shadow LBH-easing" id="LBHnewsticker1"><ul> <li><div class="LBH-content" data-link="http://litebloggerhub.blogspot.com/">Powered by LiteBloggerHub (Don't remove or Widget will not work).</div></li></ul> </div> <script> $(document).ready(function(){ $("#LBHnewsticker1").LBHnewsticker({feed:"http://feeds.feedburner.com/litebloggerhub",width:"100%",contentlinkcolor: "#766D6D",timer:5000,titlecolor: "#333",titlefontsize: "16px",itembgcolor: "#FFF",contentlinkcolor: "#766D6D",infobgcolor: "#f2f2f2",bordercolor: "#DDD"}); });</script>
8. Customize it according to your need.
- Replace http://feeds.feedburner.com/litebloggerhub 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.
Want to get updates from LiteBloggerHub?
Subcribe our Email Service to get updates via email. Keep Visiting.... Thanku!
0 comments:
Dear Reader! We’re enthusiastic to see your comment but after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me. Let’s enjoy a personal and evocative conversation. Thank You!