Auto Scrolling Recent Posts Widget

Cara Buat Auto Scrolling Recent Posts Widget Untuk Blogger/Blogspot

Ada sesetengah pengguna blogspot sentiasa mahu mengubah atau menghias blog mereka dengan kaedah yang berbeza. Begitu juga, ada diantaranya menggunakan teknik auto untuk mengemaskini update kepada pelawat blog mereka. Widget ini juga dikenali sebagai marquee. Hari ini saya nak berkongsi sedikit menambah kod untuk membuat penggiliran automatik untuk recent post blog anda.

Dengan cara ini, menambah post blog tersebut dan memaparkan siaran itu pada sidebar. So, jika anda ingin menambah widget ini ke dalam blog blogspot anda, ikuti langkah berikut dengan betul.

Langkah 01: Hanya masuk ke papan pemuka blogger anda dan pergi ke susunatur blogger.
Langkah 02: Sekarang klik pada menambah pautan widget.
Langkah 03: Tambah beberapa kod berikut dan simpannya.

Jika anda mempunyai banyak post dalam blog, atau jika ingin menunjukkan kepada semua orang senarai post kegemaran anda, cuma sedikit ruang dalam widget sidebar ini. Siaran ini menerangkan bagaimana untuk menambah catatan automatik (marquee) terkini Widget di bahagian bawah header blog blogspot anda. Ini sama juga dengan paparan post terkini di bahagian  sidebar, tetapi ia  mempunyai tenda dalam widget ini. Sekiranya anda ingin mempamerkan dalam blog dengan cara ini, sama ada di bahagian atas atau bawah blog anda, maka boleh menggunakan widget baru ini:

Cara Pasang Widget ini untuk Blogger

Pergi ke Blogger -> Layout -> Add Gadget -> Pilih Alat HTML / JavaScript

Salin kod dibawah dan tampal di dalam widget HTML / JavaScript (letak dibawah blog Header):


<script type='text/javascript'>
var jnWidth="100";

var jnScrollAmount="10";
var jnScrollDelay="50";
var jnDirection="left";
var jntargetlink="yes";
var jnnumPosts="10";
var jnBulletchar =">>>";
var jnimagebullet="yes";
var jnimgurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5WZFStEHfQSNsTZ3GX67O4ch7kA97GVpNsQoK1qeRf-R7KLQ6k6G7t2IPjI08qLT1iniz0RYY37opm-vxtpGa84YUBAwQMBA1tTeaVFkghrqUiHLiGT1LfTofY76dYmImAx2n6DZbiWI/s1600/arrowe.gif";

var jnfontsize="16";
var jnbgcolor="FFFFFF";
var jnlinkcolor="FF0000";
var jnlinkhovercolor="3366CC";
</script><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script type='text/javascript' src='http://24work-new.googlecode.com/svn/trunk/24work-blogspot/scrolling-recent/scrolling-recent-v3-ycode.js' ></script>
<script type='text/javascript' src="http://akupakarblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>



Sekarang tukar URL http://akupakarblog.blogspot.com dengan URL blog anda (alamat blog anda).



-> Kemudian klik Simpan (Save).



Nota: - Pilih Bullet Imej yang sesuai atau Ikon yang mempunyai latar belakang lurus dan Saiz kecil

ScrollAmount:
10
(0 = Tiada Skrol)
ScrollDelay:
50
(0 = MaxScrollSpeed)

*Anda hanya boleh mengubah kod dengan warna merah (pembolehubah) mengikut keperluan anda, untuk ex. dalam hal "var w2bScrollDelay", menurunkan nombor, lebih tinggi kelajuannya.