Cara Membuat Widget Breaking News di Blogger
Assalamualaikum Sahabat Blogger.
Cara Membuat Widget Breaking News di Blogger - Pada kesempatan kali ini, saya akan membagikan tutorial yang semoga bermanfaat untuk anda semua. Tutorial kali ini ialah tentang "Cara Membuat Widget Breaking News di Blogger". Widget Breaking News adalah salah satu cara populer untuk menurunkan Bounce Rate anda dan mendapatkan lebih banyak tampilan di blog anda, Jika anda menambahkan widget breaking news ke blog anda. Maka anda akan melihat tingkat pentalan anda akan turun yang mana itu sangat bagus untuk kesehatan blog anda.

Manfaat Widget Breaking News untuk Blogger

Berikut ini adalah beberapa manfaat menggunakan widget breaking news :
  1. Blog akan terlihat lebih profesional
  2. Artikel terbaru otomatis akan terupdate
  3. Bounce rate blog akan membaik
Jika anda berminat menggunakan widget breaking news ini, silakan anda simak tutorial dibawah ini dengan baik.

Baca Juga : Cara Mudah Memasang Notifikasi Cookie di Blog Anda

Membuat Widget Breaking News di Blogger

Tahap #1
Masuk ke dasboard blog anda -> Kemudian pilih "Tema" -> Klik "Edit HTML". Setelah itu letakkan kode CSS dibawah ini sebelum kode </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>
Tahap #2
Selanjutnya anda letakkan kode JavaScript dibawah ini sebelum kode </body>
<script type='text/javascript'>
  //<![CDATA[
  // Breaking News
  $(document).ready(function(){
    var e="https://www.masputro.com/",t=10;
    $.ajax({
      url:""+e+"/feeds/posts/default?alt=json-in-script&amp;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>
Catatan : Ganti URL yang berwarna Merah dengan URL blog anda
Baca Juga : 5 Script Search Box Keren dan Cara Membuatnya

Tahap #3
Kemudian anda tambahkan kode HTML dibawah ini antara kode <body> atau </body>
<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(&quot;Sunday&quot;, &quot;Monday&quot;, &quot;Tuesday&quot;, &quot;Wednesday&quot;, &quot;Thursday&quot;, &quot;Friday&quot;, &quot;Saturday&quot;);
        var monName = new Array(&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;, &quot;August&quot;, &quot;September&quot;, &quot;October&quot;, &quot;November&quot;, &quot;December&quot;);
        var now = new Date();
        document.write(&quot;&quot; + &quot; &quot; + dayName[now.getDay()] + &quot;
        ,&quot;
        + &quot;
        &quot;
        + now.getDate() + &quot;
        &quot;
        + monName[now.getMonth()] + &quot;
        &quot;
        );
      </script>
    </div>
  </div>
</div>
<div class='clear'/>

Dan begitulah Cara Membuat Widget Breaking News di Blogger, cukup mudah bukan ? Semoga artikel ini bermanfaat bagi kita semua. Terimakasih Wassalamualaikum.
Penulis : MasPutro.com

Post a Comment

Lebih baru Lebih lama