Tutorial

  • Android
  • Blogger
  • Pendidikan
  • Printer
  • Komputer
  • MedSos
  • Breaking News Widget based on its function is almost the same as the Latest Post Widget that displays some of the latest post titles from a Blog. But it is packaged so that this widget impressed Tanpil more professional and Revponsive certainly increasingly beautify the look of the Blog. For the appearance please note the screenshots below Admin already provide desktop and Android versions.

    What do you think of all my buddy bloggers, cool right? Definitely cool Donk! For those of you who want to try to apply Breaking News Widget, first Download the Source code HERE

    First step Login to Blogger, then select Theme Menu Select Sub Menu EDIT HTML

    Make sure first if the blog template buddy already has Code   Jquery by pressing the key combination CTRL + F then it will appear a lookup column. In the keyword input lookup field   jquery. Min. js then press Enter. If there is no please copy-paste the following jQuery code then the pastes on the area between the < head > and the </head >.

     
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    

    Then search code  ]] > </b: skin > If you've found the copy and paspress the code below it exactly above it.

     
      
    /* 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}}
    
     
    <script type='text/javascript'>
    var blog_url = &quot;<data:blog.homepageUrl/>&quot;;
    var latest_post = 7;
    var scrolling_speed = &quot;5&quot;;
    var close_button = false;
    var info_text = true;
    </script>
    
    

    Then find the code   </body > If already found copy and paspress the code below right on it

     
    <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 step put this following code < div id = ' blanter-newsticker '/> where the Breaking news widget will be installed, as in this example the admin installed it in the Header of the Blog.

    After determining the position where the Headline Breaking News widget is, click Save or save the theme to end.

    Quite, So Tutorial how to create and install a Headline Breaking News Widget on Blogger, see you in a later tutorial.

    Artikel Terkait:
    Bagi Anda yang ingin mendapatkan notifikasi update setiap harinya silahkan bergabung WhatsApp Group Gabung Sekarang
    Comment Sekarang