Widget Random Post Marquee [Update]

Widget Random Post Marquee - Article kali ini saya akan membagikan tutorial cara membuat Widget Random Post Marquee seperti web Nekopoi.

Artikel ini saya buat berdasarkan request, namun fitur ini sudah ada lama saya simpan untuk template premium saja. Tapi, disini saya akan membagikannya secara gratis, untuk pratinjau/ demo bisa kalian lihat di bawah ini :

Demo

Sebelum itu cek jquery pada tema blog kalian, jika sudah ada script yang seperti ini abaikan, kalau belum ada, simpan script berikut di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'></script>

Widget Random Post Marquee

1. Buka Blogger > Tema > Edit HTML
2. Simpan Javascript berikut di atas </head>

<script type='text/javascript'>//<![CDATA[
document.write('<script type="text/javascript" src="https://rawcdn.githack.com/Arleth98/blog-orang/062ee46f54f4037263bcb3ffd7516e96dcfc661f/vTicker-arleth-desz.js"><\/script>');
document.write('<script type="text/javascript" src="https://cdn.staticaly.com/gh/Arleth98/2019/a8af104e/random-marquee.js"><\/script>');
var relatedTitles=new Array,relatedTitlesNum=0,relatedUrls=new Array,currentposturl="",maxresults=8;
//]]></script>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=random_post&amp;max-results=8' type='text/javascript'/>

Note!
/feeds/posts/default
/feeds/posts/default/-/LABEL-POST



3. Lalu, Simpan CSS berikut kedalam <b:skin>...</b:skin> atau <style>...</style>

/* Random Post Marquee - Arlethdesign
 ==================================== */
#-batazx{margin:10px auto;max-width:990px;max-height:31px;background:#FFF;overflow:hidden;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2)}
#-batazx h3{font-size:13px;float:left;overflow:hidden;margin:auto;margin-right:10px;padding:8px;background:#222;color:#ccc}
#-batazx #rec-post ul{margin:auto;padding:0;list-style:none}
#-batazx #rec-post ul li{margin:0;line-height:25px}



4. Selanjutnya untuk menampilkan widgetnya simpan Javascript & HTML berikut di atas <div id='outer-wrapper'> atau yang mirip seperti itu...

<div id='-batazx'><h3>Rekomendasi</h3>
<div id='rec-post'>
<script type='text/javascript'>
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</div>




5. Langkah terakhir simpan javascript berikut ini di atas </body>

<script type='text/javascript'>//<![CDATA[
$(function() {
  $('#rec-post').vTicker('init', {
    speed: 600, 
    mousePause: true,
    showItems: 1,
    height:30,
    padding:4});
});
//]]></script>

Note!
Untuk Mengatur tinggi & lebar silahkan edit Css yang sudah di tandai!

Untuk Mengatur tinggi silahkan samakan dengan javascript yang sudah ditandai.

Sekain artikel kali ini semoga bermanfaat, jika ada pertanyaan silahkan beri komentar & sampai jumpa ditutorial berikutnya, terima kasih.