Membuat Headline News Berjalan di Bawah Blog dengan Tombol Close - Blog Materi Pembelajaran

Kumpulan Artikel tentang pendidikan, materi pembelajaran dan artikel menarik lainnya

Breaking

Home Top Ad

Responsive Ads Here

Friday, June 10, 2016

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 .




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://lh3.googleusercontent.com/-h5PwWpgB8Jw/TgiACcF1vrI/AAAAAAAAA7Q/zXO3KnLk2YU/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="http://1.bp.blogspot.com/-XvA7La2fWQU/T8aIU5kxRnI/AAAAAAAAAJA/uw2dWruT2Yg/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!

No comments:

Post a Comment