Cara Membuat Headline News Di Blog

 

Saya akan berbagi ilmu tentang headline news. Tahukah anda headline news? disebut dengan Headline News, atau sekumpulan berita-berita terbaru yang dapat kita baca dengan seksama.

Sesuai namanya, widget headline news ini menampilkan judul serta link artikel-artikel terbaru dari blog kamu di bagian atas atau bawah blog kamu.

Judul-judul artikel pada headline news tersebut bergerak, sehingga lebih menarik perhatian pembaca.

Cara Membuat Headline News Di Blog versi 1
Caranya:

    Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
    Klik "Add a Gadget" dan pilih "HTML/JavaScript",
    Tidak usah diberi judul, kemudian copy-paste kode di bawah ini:

           <script type="text/javascript">
           var hn_url_blog = "http://BLOGKAMU.blogspot.com";
           var hn_jumlah_post = 5;
           var hn_warna_latar = "#EEEEEE";
           var hn_warna_garis = "#000000";
           var hn_posisi = "top";
           var hn_tampilkan_judul = true;
           var hn_backlink = true;
           </script>
           <script src="http://copycat91.googlecode.com/svn/trunk/headlinenews.js">
           </script>

  
 Berikut adalah penjelasan tentang variabel-variabel di atas:

        hn_url_blog adalah URL blog kamu (widget ini hanya untuk pengguna blogger).
        hn_jumlah_post adalah jumlah judul artikel yang ingin kamu tampilkan pada headline news.
        hn_warna_latar adalah kode warna untuk latar belakang headline news.
        hn_warna_garis adalah kode warna untuk garis bingkai/border headline news.
        hn_posisi menentukan posisi headline news kamu apakah di atas ("top") atau di bawah ("bottom"),
        hn_tampilkan_judul bernilai true kalau kamu ingin menampilkan tulisan "Headline news of BLOGKAMU" di bagian kiri dan bernilai false jika tidak ingin menampilkannya,
        hn_backlink bernilai true kalau kamu ingin menampilkan backlink ke blog ini dan false jika tidak.


Cara Membuat Headline News versi 2

1. masuk blogger Setelan >> Edit HTML >> Expand Widget Template
  tekan "Ctrl+F" cari kode  </head>

2. Copy dan paste kode html  ini, di atas atau sebelum kode  </head>

     <style type='text/css'>    #bd {
    float:bottom;
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.5;
    margin-top:5px;
    font-size:12px
    }    .text {
    color:#98BF2F;
    margin-left:8px
    }    div#news-1 .gk_news_highlighter {
    font-family:Verdana, Arial;
    font-size:11px;
    color:#666
    }    div#news-1 {
    width:960px;
    height:24px;
    margin-left: -10px;
    display:scroll;
    position:fixed;
    bottom:1px;
    border-top:1px solid #CCC;
    border-bottom:1px solid #CCC;
    background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbew4XJvTibjMrO7xHLaZ-xqknnvpgcikOyk4NEstyfU4QPWd93K1AOGWJD5vpuHdVeYP5LfBdXsALRM1VrTpZfrFhifCAhEq6eYchQVURq5iDA8nwBpwldc1mQf3mVlhYqbFtqmjtYqu1/s320/gradient.png) repeat-x 0 -100px;
    clear:both;
    overflow:hidden
    }    div#news-1 .gk_news_highlighter_wrapper {
    float:left;
    width:820px;
    height:24px;
    line-height:24px;
    overflow:hidden;
    position:relative
    }    div#news-1 .gk_news_highlighter_item {
    width:auto;
    height:24px;
    padding-left:20px;
    display:none;
    position:absolute
    }    div#news-1 .nowrap {
    white-space:nowrap
    }    div#news-1 .gk_news_highlighter_title {
    padding-left:5px
    }    div#news-1 .gk_news_highlighter_desc {
    padding-right:5px
    }    div#news-1 .gk_news_highlighter_interface {
    float:left;
    width:120px;
    height:24px;
    text-align:right;
    line-height:24px;
    z-index:1000
    }    div#news-1 .gk_news_highlighter_interface .text {
    float:left;
    display:block;
    width:auto;
    padding-left:5px;
    font-weight:700
    }    div#news-1 .gk_news_highlighter_interface div {
    width:30px;
    float:right
    }    div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next {
    cursor:pointer;
    width:13px;
    height:24px;
    display:block;
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0UfjD4GzNgY_9t_oFbFf7qKkCxm2UAsHEQoSJFoSMuZXmSoPMuaFCBUSRUSiGteK7LmxFMs0AfYp5F64rPLXKW7B1GQL2_ywHiuBfzLYlwR10ys8Cx9V7dxxKYHmfJ2MGMFMyLBigKMo/s1600/play.png&#39;) no-repeat 0 50%;
    float:left
    }    div#news-1 .gk_news_highlighter_interface a:hover.prev {
    background-position:-13px 50%
    }    div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus {
    color:#FFF
    }    div#news-1 .gk_news_highlighter_interface a.next {
    float:right;
    background-position:-26px 50%
    }    div#news-1 .gk_news_highlighter_interface a:hover.next {
    background-position:-39px 50%
    }    </style>

3. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <div id='content-wrapper'>.

Bagi blog yang menggunakan template dari template designer, cari kode  </footer>


4. Copy dan paste kode HTML dan Javascript ini, dibawah atau sesudah kode <div id='content-wrapper'>

Bagi blog yang menggunakan template dari template designer, paste kode HTML dan Javascript ini di atas atau sebelum </footer>

     <div id='bd'>
    <div class='gk_news_highlighter' id='news-1'>
    <div class='gk_news_highlighter_interface'>
    <span class='text'>HOT NEWS</span>
    <div>
    <a class='prev' href='#'/>
    <a class='next' href='#'/>
    </div>
    </div>
    <div class='gk_news_highlighter_wrapper'>
    <script language='JavaScript'>
    imgr = new Array();
    showRandomImg = false;
    aBold = true;
    text = &quot;no&quot;;
    showPostDate = false;
    summaryPost = 200;
    summaryFontsize = 12;
    summaryColor = &quot;#000&quot;;
    icon = &quot; &#187; &quot;;
    label = &quot;&quot;;
    numposts = 30;
    home_page = &quot;http://sekitarduniaunik.blogspot.com/&quot;;
    </script>
    <script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>
    </div>
    </div>
    </div>
    <script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/>
    <script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
    <script type='text/javascript'>
    try {$Gavick;}catch(e){$Gavick = {};};
    $Gavick[&quot;gk_news_highlighternews-1&quot;] = {
    &quot;animationType&quot; : 3,
    &quot;animationSpeed&quot; : 200,
    &quot;animationInterval&quot; : 2000,
    &quot;animationFun&quot; : Fx.Transitions.linear,
    &quot;mouseover&quot; : 1};
    </script>

5. Edit kode yang di cetak tebal  dengan warna merah dengan menggantikannya dengan URL blog Sobat dan juga jumlah postingan yang hendak ditampilkan.

6. Seterusnya klik Preview. Jika kedudukan bar terlalu ke kiri atau ke kanan, silakan edit nilai pada kode yang di bold dengan warna biru pada langkah 4.

width:960px; (Panjang bar)
margin-left: -10px; (Jika kedudukan bar terlalu ke kanan, edit nilai -10 kepada 10 dan sebaliknya)

7 . Klik Save semoga berhasil.

Semoga bermanfaat.