Home Blogging How to Install a Newsticker Widget on Blogger

How to Install a Newsticker Widget on Blogger

This time Tech Khabri will share tips on How to Install a Newsticker Widget on Blogger . I share the Newsticker widget because there is a request from Blogger friend and incidentally yesterday I updated the Origin SEO Pro template, so there is no harm in me I share one of the Pro features of the template because the Source code blog demo feature is intentionally open for reasons for posting this.

Tech Khabri

The main function of this widget is to display a list of some of the latest articles with slide animations, almost the same as the recent post widget, but only in the form of the title of the post. Okay, just go ahead. Following are the steps on How to Install a Newsticker Widget on Blogger .

How to Install a Newsticker Widget on Blogger

First open Blogger> Click the Theme menu and the Edit HTML button > Then add this CSS code before</head>

<style type='text/css'>
/* Breaking News */
#breakingwrapper{position:relative;background-color:#fff;color:#ccc;display:block;margin:20px auto 0 auto;overflow:hidden;border-radius:5px;box-shadow:0 2px 3px -2px rgba(0,0,0,0.1)}#breakingnews{width:100%;max-width:990px;display:block;margin:0 auto;line-height:42px;height:42px;overflow:hidden;font-size:13px;padding:0}#breakingnews .tulisbreaking{background:#e74c3c;color:#fff;display:block;padding:0 15px;font-size:13px;font-weight:600;height:28px;line-height:28px;float:left;margin:7px 14px 0 7px;text-align:center;border-radius:3px}#recentbreaking{float:left;margin:0;font-size:13px;color:#222;font-weight:600}#recentbreaking ul,#recentbreaking li{list-style:none;margin:0;padding:0}#recentbreaking li a{color:#222}#recentbreaking li a:hover{color:#222;text-decoration:underline}.blog-date{display:inline-block;float:right;margin:0 20px 0 0;font-size:13px;border-radius:2px;cursor:pointer}#recentbreaking li i{margin:0 10px 0 0}
@media screen and (max-width:768px) {
#breakingwrapper{background-color:#e74c3c;color:#fff;margin:10px auto 20px auto;border-radius:0}#breakingnews{padding:0 20px;color:#fff;overflow:hidden;text-overflow:ellipsis}#recentbreaking{color:#fbc531;text-align:center;float:none;margin:0 auto}#breakingnews .tulisbreaking .breakhidden,#breakingnews .tulisbreaking{display:none}#recentbreaking li a,#recentbreaking li a:hover{color:#fff}}
</style>

Next, add the code below right before </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="https://www.naminakiky.com/",t=10;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#recentbreaking li:first").slideUp(function(){$(this).appendTo($("#recentbreaking ul")).slideDown()})}var n,r,a="",i=e.feed.entry;if(void 0!==i){a="<ul>";for(var l=0;l<i.length;l++){for(var s=0;s<i[l].link.length;s++)if("alternate"==i[l].link[s].rel){n=i[l].link[s].href;break}r=i[l].title.$t,a+='<li><i class="fa fa-check-square"></i><a href="'+n+'" target="_blank">'+r+"</a></li>"}a+="</ul>",$("#recentbreaking").html(a),setInterval(function(){t()},5e3)}else $("#recentbreaking").html("<span>There nothing here?</span>")},error:function(){$("#recentbreaking").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Change the code marked with your blog address and change the number 10 according to the number of posts you want to display.
Well, then add the code below freely anywhere as long as it’s still in the body between <body>and </body>as in the previous post.

<div id='breakingwrapper'>
   <div id='breakingnews'>
     <span class='tulisbreaking'>News Update<span class='breakhidden'/></span>
      <div id='recentbreaking'>Loading...</div>
      <div class='blog-date'>
         <script language='Javascript'>
            var dayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
            var monName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
            var now = new Date();
            document.write("" + " " + dayName[now.getDay()] + "," + " " + now.getDate() + " " + monName[now.getMonth()] + "");
         </script>
      </div>
   </div>
</div>
<div class='clear'/>

After that click the Save theme button and Finish! Please see the results on your blog.

Okay, quite so from Tech Khabri. Hopefully it will be useful for all of you.

Anubhav Kushwahahttp://www.techkhabri.com
Friend Mai Koi Professional Blogger Nahi Hun Bas Mere Pas Jis Bhi Chij Ki Information Hai Mai Apke Sath Share Karta Hun To Ummid Hai Ki Mere Dawra Di Gai Information Apko Samj Me Aai Hogi. Thanks For Support 🙏🙏🙏

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Must Read

Faisu (Tik Tok Star), Wiki, Age, GirlsFriend, Family, Weight, Height, Bioghraphy, Net Worth

Hey Guys Today We Are Taking About Mr. Faisu I Know Everyone Know The Mr. Faisu Because He Is A Very Famous Through The...

Symptoms Of CoronaVirus । क्या हैं कोरोना वायरस के लक्षण?

जैसा की आप सभी पता है कोरोना वायरस के बारे में अगर आप नहीं जानते हाँ की कोरोना वायरस क्या है तो आप इसे...

What Is Corona Virus In Hindi

तो जैसा की आप सभी को पता है की चाइना के बाद अब कोरोनावायरस भारत में भी अपना पैर पसार रहा है। और ऐसे...

Riyaz Phone Number |Riyaz Real Number | Riyaz Number

Hello Friends I Know You Are Finding Riyaz Whatsapp Number Or Riyaz Real Phone Number So You Come Correct Website. I Share The Riyaz...

Riyaz Tik Tok Video | Riyaz Latest Tik Tok Video

Hello Friends You Know All About Riyaz This A Star Of Tik Tok And Riyaz Is A Crush Of Many Girls And I Tell...