Cara Membuat Widget Newsticker/Breaking News Berjalan Di Blog

Cara Membuat Widget Newsticker/Breaking News Berjalan Di Blog - Hai sobat AS! Kali ini akan membagikan tutorial cara membuat widget breaking news berjalan atau Newsticker. Mungkin ada yang belum tahu apa itu widget breaking news? Widget ini biasanya teletak diatas/diheader. Fungsinya untuk memberitahu artikel terbaru atau lebih tepatnya seperti feed post/random post berjalan. Newsticker ini berbeda dengan newssticker yang lainnya. Newsticker ini berjalan dari kanan ke kiri,tidak seperti newsticker/breaking news lain yang bergerak dari ats kebawah/bergerak jatuh.

Kenapa juga disebut Breaking News? Mungkin karena fungsinya untuk memberitahu artikel-artikel yang lain. Atau mungkin karena widget ini sering diberi nama breaking news bukan artikel teebaru/latest post. tutorial ini cukup mudah,anda hanya perlu memasang beberapa kode html dan javascript yang akan saya berikat, Anda juga dapat mengkreasikan breaking news nya nanti karena dibuat dengan desin yang simple dan sederhana. Ok langsung saja ke tutorialnya.

Cara Membuat Breaking News/Newsticker

Langkah 1
Salin kode html/css dibawah ini lalu letakkan/pastekan diatas kode ]]></b:skin>

Kode HTML

/* Newsticker CSS */ #blanter-newsticker{margin:20px 0;position:relative} #recent_post{position:relative;border-bottom:1px solid #ddd;z-index:9;overflow:hidden;padding:8px;width:350px!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-width300px;margin:0 auto}

Langkah 2
Salin kode dibawah ini lalu letakkan diatas kode </head>

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

Ganti kode yang berwarna merah dengan URL alamat blog sobat

Langkah 3
Salin kode dibawah ini lalu letakkan diatas kode </body>

Kode HTML
<script src='https://cdn.rawgit.com/blanter/design/master/blanter-newsticker.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ document.getElementById("blanter-newsticker").appendChild(document.getElementById("recent_post")); //]]> </script>

Langkah terakhir silakan salin kode dibawah ini lalu letakkan ditempat breaking news/newsticker akan dimunculkan ( Biasanya diatas blog/header )

<div id='blanter-newsticker'/> 

Lalu jangan lupa untuk klik simpan...

Itulah tutorial cara membuat breaking news/newsticker yang bisa saya bagikan,semoga bisa bermanfaat bagi sobat AS.

Thanks to: www.idblanter.com