Cara Membuat Headline News Di Blog

Cara Membuat Headline News Di Blog - saye 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.

           <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>

     <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/AVvXsEiehHd27bNR1gbzzGtgRDcTbgsxCRJA53vrhw3LvIQRrQdPLyDQM5kvr_WZSm7Oj9KpSoPkNg70j06P073R0oBinCMBf1CWN5LMgNKPBhqA5dQoDtrvU6uQkMoN8vhLO6-PfLoBczS0989E/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/AVvXsEh8UKxbp4FJ03SkjHE9Dp5L1vgcc964D0eoJok-vrlCFQfI9CXbQK60HIdkyEjmUEiHqVzs1ITizfx89FLI8dyi2UfvQa2_C619tWrTgB2qZwyS3TZC0sQH73e1lyFGZrgX_K1eDr01FVk/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>

     <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://sumbangsihkomputer.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>