Memasang Text Berjalan Recent Posts di Blog

Fp002 Widget recent post biasa kita jumpai dengan model dan bentuk yang rata-rata sama, dengan kode http://miscah.blogspot.com/feeds/posts/default maka widget default recent posts dengan mudah terpasang di blog. Ada pula widget recent posts yang disertai thumbnail atau gambar dari postingan dan beberapa widget recent posts lainnya yang bisa kita jumpai di beberapa blog yang berisi tutorial blog.

 

Agak berbeda dengan recent posts pada umumnya, recent post berikut adalah recent posts atau postingan terakhir dari blog yang berjalan atau biasa kita sebut dengan marquee. Contoh demonya bisa sobat lihat disini. Tertarik ingin memasangnya? berikut langkah singkat dan padatnya, tidak perlu backup template karena kita akan meletakkannya langsung di elemen halaman.

 

  • Pada Elemen Halaman, klik Tambah Gadget.

     

    image
  • Kemudian pilih yang HTML/Javascript.
  • Masukkan kode berikut kedalamnya :

    <script type='text/javascript'>
    //<![CDATA[
    function RecentPostsScrollerv2(json)
    {
                var sHeadLines;
                var sPostURL;
                var objPost;
                var sMoqueeHTMLStart;
                var sMoqueeHTMLEnd;
                var sPoweredBy;
                var sHeadlineTerminator;
                var sPostLinkLocation;
                try
                {           
                sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";           
                if( nWidth)
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
                }
                else
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
                }

                if( nScrollDelay)
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
                }
                if(sDirection)
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
                    if(sDirection == "left" || sDirection =="right")
                    {
                        //For left and right directions seperate the headilnes by two spaces.
                        sHeadlineTerminator = "&nbsp;&nbsp;";
                    }
                    else
                    {
                        //For down and up directions seperate headlines by new line
                        sHeadlineTerminator = "\<br/\>";
                    }
                }
                if(sOpenLinkLocation =="N")
                {
                    sPostLinkLocation = " target= \"_blank\" ";
                }
                else
                {
                    sPostLinkLocation = " ";
                }
                sMoqueeHTMLEnd = "\</MARQUEE\>"
                sHeadLines = "";
                for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
                {
                    objPost = json.feed.entry[nFeedCounter];
                    for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
                       {
                        if (objPost.link[nCounter].rel == 'alternate')
                        {
                              sPostURL = objPost.link[nCounter].href;
                              break;
                        }
                    }

    sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">"  + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
                }           
                document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
                }
                catch(exception)
                {
                    alert(exception);
                }
    }
    //]]>
    </script>

    <script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://miscah.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>

  • Simpan.

 

Keterangan :

  1. Ganti kode yang berwarna merah dengan alamat blog sobat.

     

  2. var nMaxPosts = 20 adalah jumlah postingan terakhir.

     

  3. var nScrollDelay = 180 adalah kecepatan text.

     

  4. var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan right jika ingin text tersebut berjalan dari kiri ke kanan.

     

  5. var sOpenLinkLocation="Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).

     

  6. var sBulletChar="•" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.

 

Semoga bermanfaat.

Berlangganan artikel terbaru via Email
Artikel Lainnya :

18 comments

5 Juni 2010 00.42

Kayaknya keren juga nich...
Coba dulu ahhh...

5 Juni 2010 00.44

Wahhh... kodenya banyak banget ya...

5 Juni 2010 00.46

Oiya sob, kolom komentarku koq gak bisa di taruh di bawah postingan seperti ini ya?

5 Juni 2010 05.42

wah . . .tambah beratngga nih

5 Juni 2010 10.36

@ Rock : coba cek di pengaturan komentar sob

5 Juni 2010 10.38

@ Damar : iya agak berat, namanya juga javascript pasti membutuhkan load lebih

6 Juni 2010 00.08

terima kasih atas info2nya

7 Juni 2010 07.10

udah pasang neh Kang, emang apik n dinamis

11 Juni 2010 23.02

nice hack...:D

16 Agustus 2010 16.21

Mantabb

23 Agustus 2010 09.39

boz,,, kalo mo nambahin tulisan diakhir tu gmna bang???
tolong ksh petunjuk..

23 Agustus 2010 11.24

@gratis4download : tulisan yang mana sob?

6 Januari 2011 00.46

cara gnti warnanya gmna gan? coz warna dasrnya hitam n warna fonnya biru tua jd g tampak terlihat..

21 April 2011 12.21

waduh nice inponya...
sukses selalu ne blog

25 April 2011 21.59

klw dari bawah ke atas gamana ? mohon pencereahannya..klw yang aku coba, yang jadi dari kanan ke kiri..

25 April 2011 22.09

hallo mas,, sudah aku temukan solusinya buat teks berjalan dari bawah ke atas,, pada (var sDirection="left") diganti dengan (var sDirection="up") sukses selalu...

20 Februari 2012 19.40

Good job, Mr.Farial, Sir.

11 Oktober 2012 10.15

Ini yang saya cari He3... Maturnuwun Infonya Monggo mampir di Blog saya...

Poskan Komentar

Reader Community

Recent Comments