<!--<head><style type='text/css'>@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxP.ttf)format('truetype');}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(//fonts.gstatic.com/s/roboto/v32/KFOlCnqEu92Fr1MmEU9fBBc9.ttf)format('truetype');}</style>
<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1967239390418511736&zx=059b867f-efaa-42aa-a50e-108c92004cf7' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1967239390418511736&zx=059b867f-efaa-42aa-a50e-108c92004cf7' rel='stylesheet'/></noscript>
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

</head>-->

Home › Tutorial Blog

Membuat Headline News Berjalan di Bawah Blog dengan Tombol Close

6/10/2016

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&callback=hn_start&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/AVvXsEjeyikRVah5T3nCATaSXvYypd3gw2IBh0MBTIzUqQ6JoZ-iOLk84JQabKpau6LMafRpBCBofLHS2lQu9E7A6FyMCHqUN5bYWSVLEXB4waCnU4_cfXYy2AEDn8W4u3fHEwgNtoIj9Q43C1aj/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("hn_headline").style.display="none""><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPgCSGKXHEKEjHkwrgmmth2eZjq5Cf9rCOl5JDtiN2OcGa1hZmcnyAISYnDjVgOE8pQ90cFBS8diAEHoZi-XelzAN_g7QSIwFaGK-i9-I7z5iA02vZq3Qg_DxEkjUHT1_LUkinkevpe24/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"graphical control element"+sid%3a"a24a8b23-950e-d82f-03da-597fe799c15d"" 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!

<!--
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2591855913-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY6T1izhhpXKkG-Sn1zPvUKH8eAw7g:1730442074906';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1967239390418511736','//siswasiana.blogspot.com/2016/06/membuat-headline-news-berjalan-di-bawah.html','1967239390418511736');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1967239390418511736', 'title': 'Siswasiana', 'url': 'https://siswasiana.blogspot.com/2016/06/membuat-headline-news-berjalan-di-bawah.html', 'canonicalUrl': 'https://siswasiana.blogspot.com/2016/06/membuat-headline-news-berjalan-di-bawah.html', 'homepageUrl': 'https://siswasiana.blogspot.com/', 'searchUrl': 'https://siswasiana.blogspot.com/search', 'canonicalHomepageUrl': 'https://siswasiana.blogspot.com/', 'blogspotFaviconUrl': 'https://siswasiana.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Siswasiana - Atom\x22 href\x3d\x22https://siswasiana.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Siswasiana - RSS\x22 href\x3d\x22https://siswasiana.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Siswasiana - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1967239390418511736/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Siswasiana - Atom\x22 href\x3d\x22https://siswasiana.blogspot.com/feeds/2329331704077438049/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/6eb7ce967db05cf0', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Share to Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '2329331704077438049', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8f6MVg9f0RJmBx3UM5HZ74y365PiJXvnxF2rvWs4cZLZFhIVGaM7K9FPF5iUW3z4VviaAI5afpYPZV5aZUGzf_OG11apQx0sgGyzb8WJv0jy3iajjFbp5PG9IEkskBwymt0oLzsb_qQ/s72-c/Headline+news.png', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8f6MVg9f0RJmBx3UM5HZ74y365PiJXvnxF2rvWs4cZLZFhIVGaM7K9FPF5iUW3z4VviaAI5afpYPZV5aZUGzf_OG11apQx0sgGyzb8WJv0jy3iajjFbp5PG9IEkskBwymt0oLzsb_qQ/s1600/Headline+news.png', 'pageName': 'Membuat Headline News Berjalan di Bawah Blog dengan Tombol Close', 'pageTitle': 'Siswasiana: Membuat Headline News Berjalan di Bawah Blog dengan Tombol Close', 'metaDescription': ''}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Membuat Headline News Berjalan di Bawah Blog dengan Tombol Close', 'description': 'SiswaSiana Informasi Seputar Dunia Pendidikan di Indonesia, Kumpulan Contoh Soal Pelajaran, Silabus, RPP, UNBK, UAN, Makalah \x26 Media Pembelajaran.', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8f6MVg9f0RJmBx3UM5HZ74y365PiJXvnxF2rvWs4cZLZFhIVGaM7K9FPF5iUW3z4VviaAI5afpYPZV5aZUGzf_OG11apQx0sgGyzb8WJv0jy3iajjFbp5PG9IEkskBwymt0oLzsb_qQ/s1600/Headline+news.png', 'url': 'https://siswasiana.blogspot.com/2016/06/membuat-headline-news-berjalan-di-bawah.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2329331704077438049}}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3386964323-lbx.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/13464135-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML996', 'iklan-atas', document.getElementById('HTML996'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML997', 'iklan-tengah1', document.getElementById('HTML997'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML998', 'iklan-tengah2', document.getElementById('HTML998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML999', 'iklan-bawah', document.getElementById('HTML999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'sidebar', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidebar', document.getElementById('Label1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'sidebar-sticky', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
</script>
</body>-->