Membuat Headline News Berjalan di Bawah Blog dengan Tombol Close

Membuat Headline news di Bawah Blog dengan Tombol Close - Membuat text berjalan pada prinsipnya menggunakan marquee . Dengan menggunakan effect marquee kita dapat menciptakan seperti effect memantul , effect image berjalan kesamping dan text dapat bergerak dari bawah keatas .

Pada Headline news berikut ini menggunakan effect marquee sehingga dapat berjalan dan ketika cursor berada diatas text maka akan berhenti , dan juga pada widget ini dilengkapi dengan tombol close .

Demo   CODE

Bagi Anda yang tertarik berikut ini langkah-langkah pemasangannya :

1. Login Keakun Blogger
2. Pilih Layout/Tata Letak
3. Klik add Gadget, lalu pilih HTML/Javascript
4. Kemudian Salin kode Javascript dibawah ini dan pastekan pada content yang tersedia

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>

5. Masih pada Mode HTML/Javascript , silahkan Anda salin kode dibawah ini dan pastekan pada content yang tersedia atau tepatnya dibawah kode diatas .

<script type="text/javascript">
var hn_url_blog = "http://www.aak-share.com";
var hn_jumlah_post = 10;
var hn_warna_latar = "#000000";
var hn_warna_garis = "#000000";
var hn_posisi = "bottom";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src=" https://sites.google.com/site/aaksharedotcom/js/headline-news.js">
</script><script src="http://www.aak-share.com/feeds/posts/default?alt=json-in-script&amp;callback=hn_start&amp;max-results=10"></script><style type="text/css">#hn_headline{    position:fixed;    bottom:0px;    left:0px;    padding:5px;    width:100%;    background:#000000;    border:1px solid #000000;}* html #hn_headline{position:relative;}</style><div id="hn_headline" title="Headline news of  www.aak-share.com"><div style="float:left"> <a href="http://www.aak-share.com/feeds/posts/default">  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9_x0tx8UfEyRTU0JrJZNn08hCR1BCqhStSshMaKYB9oJpDDOUgVu8fS4nJvnnXUlQB1u7lByjDzd7iHft2n3-IJPxPFnIA6mD2dXHM3SYpSZ5mXQyKoVJjkd6kqf6WC-Yj77CZvhO_qBY/s288/news.rss.png" height="20" /> </a></div>  <div style="float:left; font-size:8px; text-align:right; margin-left:10px;">    Headline news of <br />    <a href="http://www.aak-share.com/">www.aak-share.com</a>  </div>  <marquee style="float:left; margin-left:10px; width:80%" scrollamount="3">
<a href="URL Tujuan" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()">Judul Artikel</a> | <a href="URL Tujuan" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()">Judul Artikel</a> | <a href="URL Tujuan" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()">Judul Artikel</a> | <a href="URL Tujuan" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()">Judul Artikel</a> | <a href="URL Tujuan" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()">Judul Artikel</a> | <a href="URL Tujuan" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()">Judul Artikel</a> | <a href="URL Tujuan" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()">Judul Artikel</a> | <a href="URL Tujuan" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()">Judul Artikel</a> | <a href="URL Tujuan" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()">Judul Artikel</a> | <a href="URL Tujuan" onmouseover="this.parentNode.stop()" onmouseout="this.parentNode.start()">Judul Artikel</a>  </marquee><div style="float:right; margin-right:10px;">  <a href="javascript:void(0)" onclick="document.getElementById(&quot;hn_headline&quot;).style.display=&quot;none&quot;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNbjiqJgnC1LJB67ByVrBmQQrWyaJmLTYXnxdKIYLFqTJunhj24u3PRqIwxGUOkCg1Kj04EcU016Vm-Y2r_PyHJeD_w9PGjkgW8UUVjKPMGYoUZX7P_mRg-fzoA8gq4XYIR8KJtAEMybTQ/s1600/close-icon.png" /></a></div><div style="float:right; font-size:8px; text-align:right; margin-right:10px">  <span class="bingknowledgewidget" data-type="snapshot~dc=dashblack,cse=1,crs=2,cr=1,ss=1,sor=1,nolink=1,ndf=1,vlh=1,sz=99,crres=1,crre=1,fbh=1" data-explicit="true" data-entityid="a24a8b23-950e-d82f-03da-597fe799c15d" data-form="BW3PUB" data-formcodeinside="BWTPFO" data-width="340px" data-height="290px" data-query="graphical control element" data-filters="ufn%3a&quot;graphical control element&quot;+sid%3a&quot;a24a8b23-950e-d82f-03da-597fe799c15d&quot;" data-processing="false" data-processed="true" style="cursor: pointer; text-decoration: none; border-bottom-width: 2px; border-bottom-style: dashed; border-bottom-color: rgb(0, 0, 0);">Widget</span> by <br />  <a href="http://www.aak-share.com/">  www.aak-share.com  </a></div></div>
</div></div>

Keterangan :
==> Pada Kode warna merah untuk ganti dengan url tujuan Anda
==> Pada kode warna abu-abu ganti dangan isi judul Artikel Anda
==> Silahkan Anda pehatikan pada link yang perlu Anda ganti

6. Klik Simpan

Semoga bermanfaat!