Cara Memasang Widget Newsticker Berjalan

JejakSeru.com - Kali ini saya akan membahas Cara Memasang Widget Newsticket Berjalan. Newsticker atau yang biasa disebut Breaking News adalah sebuah widget yang biasa kita temukan pada template berita atau yang sering disebut template magazine. Perbedaan widget Newsticker ini dengan yang lain adalah karena ini menggunakan efek bergerak dari kanan kekiri dan memunculkan beberapa link sekaligus.



Cara Membuat Widget Newsticker Berjalan


Langkah 1 : Letakan CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Newsticker CSS */
#riani-newsticker{margin:20px 0;position:relative}
#recent_post{position:relative;border-bottom:1px solid #ddd;z-index:9;overflow:hidden;padding:8px;width:100%!important}
#recent_post a{margin:0 15px;line-height:2}
.newstitle{float:left;background:#1b77ea;color:#fff;padding:7px 10px;font-weight:bold;border-radius:4px;text-transform:uppercase}
#recent_post .wrapper{width:1120px;max-width:100%;margin:0 auto}
@media screen and (max-width:684px){
.newstitle{font-size:14px;padding:3px 10px!important}#recent_post{top:60px!important;padding:0!important}#recent_post marquee{width:67%!important;line-height:2}}

Langkah 2 : Letakan kode di bawah ini tepat di atas kode </head>

<script type='text/javascript'>
var blog_url = "http://www.jejakseru.com";
var latest_post = 4;
var scrolling_speed = "5";
var close_button = false;
var info_text = true;
</script>


Ganti http://www.jejakseru.com dengan link blog kamu.

Langkah 3 : Letakan JavaScript di bawah ini tepat di atas kode </body>

<script src='https://cdn.rawgit.com/JejakSeru/RianiDesign/ef44aeba/rianidesign-newsticker.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("riani-newsticker").appendChild(document.getElementById("recent_post"));
//]]>
</script>

Langkah 4 : Kamu letakan HTML berikut ini di tempat yang kamu inginkan.

<div id='riani-newsticker'/>

Langkah 5 : Simpan dan lihat hasilnya.

Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.

Blogger
Disqus
Pilih Sistem Komentar Yang Kamu Suka

No comments