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 memakai effect marquee kita sanggup membuat ibarat effect memantul , effect image berjalan kesamping dan text sanggup bergerak dari bawah keatas .

Pada Headline news berikut ini memakai effect marquee sehingga sanggup berjalan dan dikala 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, kemudian pilih HTML/Javascript
4. Kemudian Salin arahan 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 arahan dibawah ini dan pastekan pada content yang tersedia atau tepatnya dibawah arahan 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="Membuat Headline News Berjalan di Bawah Blog dengan Tombol Close"><div style="float:left"> <a href="http://www.aak-share.com/feeds/posts/default">  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbpkCs0XUBWZYr5HKLyXUM5WJu7vwpGBrwGYIPSxYEwimjMqoszG1pv6JhwuuRBymf7bdRVzHXsBtxe1x5CUvSjhmHCL-B7buBukke0tql7duIs5lhbIRRwKlfYz2nZ3WE7xBLI-8yGCs0/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/AVvXsEgbWES_juevqHPEFjawrh5h0ArDpAXNWSjt-SkDreUyDqhSyF0ajBxmbb8Z43RA1sI-r5Y-14LzqeSLhqZ4EPXPnc__k9rryQA3BwKNuqNL8iBGJskXthcqwZBj52laKkvPClC8YK7xQkAS/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 arahan warna abu-abu ganti dangan isi judul Artikel Anda
==> Silahkan Anda pehatikan pada link yang perlu Anda ganti

6. Klik Simpan

Semoga bermanfaat!


Sumber http://www.websiteedukasi.com/