Cara Mudah Memasang Headline Breaking News di Blog

Prodeku - Saat menonton berita di layar kaca biasanya anda menjumpai sekilas berita (Breaking News) yang terdapat pada bagian bawah. Berita tersebut biasanya berjalan dari kanan ke kiri. Menarik kan? Tidak hanya itu, sekarang anda juga bisa memasang breaking news di blog kesayangan anda loh.. Namun pada dasarnya, di blog kita tidak bisa memasangnya di bagian bawah. Kenapa? karena pengunjung tidak mungkin harus scroll kebawah dulu untuk membacanya. Maka dari itu, kita akan memasang nya dibagian header atau bisa disebut headline breaking news.

Headline breaking news ini berfungsi untuk menampilkan beberapa konten artikel pada blog milik anda menjadi satu baris yang bergantian. Biasanya, artikel yang ditampilkan pada headline adalah artikel terbaru yang ada di blog anda. Tidak hanya konten, pada headline ini juga terdapat tombol sosial network. Namun anda juga bisa menghilangkan tombol sosialnya jika anda tidak tertarik.

Bagaimana, ingin memasangnya? Yuk, ikuti tutorial mudah berikut ini.

Tutorial Memasang Headline Breaking News

1. Buka akun blogger anda
2. Pilih menu Template > Edit HTML
3. Cari kode ]]></b:skin>, letakkan kode ini tepat diatas kode ]]></b:skin>
   
   

   /* HEADLINE NEWS PRODEKU.BLOGSPOT.COM */
   #headlinenews { 
    position:relative;
    background:#343434; 
    display: block; 
    height: 33px; 
    line-height: 33px; 
    overflow: hidden;
    margin:0 auto;
    padding: 0px;
    width: 100%;
   }
   #news { 
    float: left; 
    margin-left: 120px; 
   }
   #news a { 
    background: none !important; 
    color:#fff !important; 
    font: bold 11px/33px Arial; 
    text-decoration: none; 
   }
   .titlenews { 
    background:#009688; 
    color: #fff; 
    display: block; 
    float: left; 
    font: bold 12px/33px Arial; 
    padding: 9px; 
    margin-top: -10px; 
    position: absolute; 
   }
   #socialicon { 
    float:right; 
    width:230px; 
    padding:5px 0; 
   }
   #socialicon ul,#socialicon li { 
    padding:0; 
    margin:0; 
    list-style:none; 
   }
   #socialicon li { 
    float:left; 
    margin:0 2px; 
   }
   #socialicon a { 
    display:block; 
    text-indent:-9999px; 
    width:24px; 
    height:24px; 
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1t0x2T9rnaFj0wNeTTBIWMEjAyhXHhyphenhyphenBEnXXT44oJdV0Hp8vni6w7_4yNZz31jstzRT0kZvPZMZt2efHqsuFortxDREWAG4-cVjENGNNIoKw86MG1vPWTy2mt4LXgJqZD8XZAn67_GCs/s1600/soicon.png); 
    background-position:-1px 0; 
    background-repeat:no-repeat; 
    position:relative; 
   }
   #socialicon a:active { 
    top:1px; 
   }
   #socialicon .facebook { 
    background-position:-1px 0; 
   }
   #socialicon .twitter { 
    background-position:-27px 0; 
   }
   #socialicon .google { 
    background-position:-53px 0; 
   }
   #socialicon .linked { 
    background-position:-131px; 
   }
   #socialicon .pinterest { 
    background-position:-79px 0; 
   }
   #socialicon .dribble { 
    background-position:-157px; 
   }
   #socialicon .vmeo { 
    background-position:-183px 0; 
   }
   #socialicon .rss { 
    background-position:-105px; 
   }

4. Cari kode </head>, letakkan kode berikut ini tepat diatas kode </head>
   
   

   <script src="https://googledrive.com/host/0B7qzDchQQtM-WW54bURWSVBuOFk/prodeku-headline-news1.js"/>
   <script src="https://googledrive.com/host/0B7qzDchQQtM-WW54bURWSVBuOFk/prodeku-headline-news2.js"/>

5. Cari kode <div id='header'> atau <div id='header-wrapper'> atau <div id='header-outer'>
6. Letakkan kode berikit ini sebelum kode yang saya sebutkan tadi
   
   

   <div id='headlinenews'>
   <span class='titlenews'>Latest Post</span>
   <div id='news'>
   <script type='text/javascript'>
       var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 5000, &quot;_new&quot;)
       cssfeed.addFeed(&quot;Feed Blog&quot;, &quot;http://prodeku.blogspot.com/feeds/posts/default&quot;)
       cssfeed.displayoptions(&quot;date&quot;)
       cssfeed.setentrycontainer(&quot;span&quot;)
       cssfeed.filterfeed(10, &quot;date&quot;)
       cssfeed.entries_per_page(1)
       cssfeed.init()
   </script>
   </div>
   <div id='socialicon'>
   <ul>
       <li><a class='facebook' href=http://prodeku.blogspot.com' title='Facebook'>facebook</a></li>
       <li><a class='twitter' href='http://prodeku.blogspot.com' title='Twitter'>twitter</a></li>
       <li><a class='google' href='http://prodeku.blogspot.com' title='Google+'>Google+</a></li>
       <li><a class='linked' href='http://prodeku.blogspot.com' title='Linkedin'>Linkedin</a></li>
       <li><a class='pinterest' href='http://prodeku.blogspot.com' title='Pinterest'>Pinterest</a></li>
       <li><a class='dribble' href='http://prodeku.blogspot.com' title='Dribble'>Dribble</a></li>
       <li><a class='vmeo' href='http://prodeku.blogspot.com' title='Vimeo'>Vimeo</a></li>
       <li><a class='rss' href='http://feeds.feedburner.com/Prodeku' title='RSS'>RSS</a></li>
   </ul>
   </div>
   </div>
   <div class='clear'/>

7. Ganti kode yang berwarna merah dengan blog anda, dan jika anda tidak ingin menampilkan sosial ikon, silahkan hapus kode yang berwarna hijau
8. Simpan Template.

Mudah kan untuk pemasangannya? Demikian tutorial tentang Cara Mudah Memasang Headline Breaking News di Blog kesayangan anda. Selamat mencoba ...

Bayu Adji

Kuli Online, Web Designer, SEO Prodeku

Bagikan Artikel ini