» » » Membuat Text Berjalan Recent Posts

Membuat Text Berjalan Recent Posts

Sudah tahukah anda dengan yang saya maksud?... Bagi yang sudah tahu saya ucapkan selamat dan khusus buat anda yang belum tahu silahkan simak ulasan versi saya berikut ini.
Membuat Text Berjalan Recent Posts yang saya maksud disini adalah sebuah menu yang berisi postingan terbaru yang berjalan dari arah kanan ke kiri maupun sebaliknya yang fungsinya untuk menunjukkan kepada pengunjung blog bahwa yang muncul pada menu bergerak ini adalah postingan terbaru sehingga memudahkan pengunjung untuk mengetahuinya. Kalau masih belum jelas juga silahkan lihat gambar berikut:


Gambar diatas adalah sekilas tampilan dari menu ini dan gambar diatas adalah Blog Iklan Gratis milik saya silahkan jika sobat mau pasang iklan disana, gak usah kuatir gratis kok, hehehe... (masih promo: mode on).

Jika sobat berminat Recent Post Dengan Thumbnail silahkan klik disini.

Kembali ke pokok bahasan, untuk memasangnya silahkan sobat copas code dibawah ini

<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="&#8226;"; </script> <script style="text/javascript" src="http://blitar-ads.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>


selanjutnya silahkan menuju ke menu tata letak pada dasbor blogger lalu klik add gadget pilih Html/Javascript nah paste deh kodenya disana trus simpan

Selesai dan lihat hasilnya


Keterangan :
  • Ganti http://blitar-ads.blogspot.com dengan URL blog sobat.
  • var nMaxPosts = 20 jumlah postingan terakhir  yang akan ditampilkan.
  • var nScrollDelay = 180 kecepatan text berjalan.
  • var sDirection="left" text berjalan dari kanan ke kiri, ganti dengan right jika ingin text berjalan dari kiri ke kanan.
  • var sOpenLinkLocation="Y" untuk membuka link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).
  • var sBulletChar="•" icon kecil pada bagian depan setiap link, Jika mau silahkan ganti dengan selera sobat.

Selamat mencoba!...

0 Komentar untuk "Membuat Text Berjalan Recent Posts"