Newsticker is an ordinary widget that we usually find on news templates so on this post we will guide you how to add a Responsive Newsticker widget on your blogger blog.
The difference of this widget with news breaking widget is usually the effect of different motion, usually breaking news widget has the effect of rising or falling and only raises a single link in a few seconds, different from this news ticker widget that uses the effect of moving from right to left and bring up some links At once. 😁
HOW TO CREATE NEWSTICKER WIDGET ON BLOG
Make sure there is already jQuery on your blog ...First Step 😃: Put CSS below just above the code ]]></b:skin>or</style>
/* Newsticker CSS */
#blanter-newsticker{margin:20px 0;position:relative}
#recent_post{position:relative;border-bottom:1px solid #ddd;z-index:9;overflow:hidden;padding:8px;width:100%!important}
#recent_post a{margin:0 15px;line-height:2}
.newstitle{float:left;background:#1b77ea;color:#fff;padding:7px 10px;font-weight:bold;border-radius:4px;text-transform:uppercase}
#recent_post .wrapper{width:1120px;max-width:100%;margin:0 auto}
@media screen and (max-width:684px){
.newstitle{font-size:14px;padding:3px 10px!important}#recent_post{top:60px!important;padding:0!important}#recent_post marquee{width:67%!important;line-height:2}}Step Two 😆: Save the following code above the code </head>
<script type='text/javascript'>
var blog_url = "YOUR-BLOG-URL";
var latest_post = 4;
var scrolling_speed = "5";
var close_button = false;
var info_text = true;
</script>
Replace YOUR-BLOG-URL with your blog link.
Third Step 😐: Save Javascript below above the code</body>
<script src='https://cdn.rawgit.com/blanter/design/master/blanter-newsticker.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("blanter-newsticker").appendChild(document.getElementById("recent_post"));
//]]>
</script>
The last 😯 buddy just needs to put the following HTML in the place you want.
<div id='blanter-newsticker'/>
If you are facing any problem installing this widget on your blog please comment below we will solve your problem please share this post also.
COMMENTS