20 June 2010

Membuat Recent Post Berjalan Kiri/Kanan

Maksud dari membuat recent post berjalan adalah menjadikan/mengelompokan suatu judul postingan dalam label blog Sobat pada sebuah gadget blospot (HTML/JavaScript), yang bisanya berjejer ke bawah dibuat menjadi berjalan dari sebelah kiri dan bisa juga dari sebelah kanan.

Mungkin Sobat blog tertarik dan ingin mencobanya. Recent post berjalan ini sangat bagus ditempatkan dibawah header ataupun bisa juga di footer dengan lebar gadget maximal seperti lebar halaman weblog Sobat.

Apabila ingin lebih detailnya Sobat bisa melihat contoh dari recent post berjalan dibawah ini,,,




Langsung saja cara membuatnya adalah sebagai berikut :

  • Masuk ke halaman Dasboard > Tata Letak (Rancangan) > Elemen Laman
  • Tambah gadget elemen HTML/JavaScript
  • Copy kode berikut dan paste pada elemen HTML/JavaScript tersebut

<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 == "top" || sDirection =="bottom")
{
//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="top"; var sOpenLinkLocation="Y"; var sBulletChar="รข�¢"; </script> <script style="text/javascript" src="http://namablogSOBAT.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>


Keterangan :

  • Ganti kode yang berwarna merah dengan alamat blog sobat.
  • var nMaxPosts = 20 adalah jumlah postingan terakhir.
  • var nScrollDelay = 180 adalah kecepatan text.
  • var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan "right" jika ingin text tersebut berjalan dari kiri ke kanan.
  • var sOpenLinkLocation="Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).
  • var sBulletChar="•" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.


Selamat Mencoba.


Membuat Recent Post Berjalan Kiri/Kanan Rating: 4.5 Diposkan Oleh: Sarifa Marwa

17 komentar:

  1. kok saya sdh lakukan caranya, tetep gak ada hasil y?

    ReplyDelete
  2. maaf Ini Bukan Spamm !!..


    ini hanya sekedar Blog Walking..
    Visit Back Please..


    ^Bocah Edan™ ..
    ^DEEVRO™ IS CRIME !!
    ^Hacker Blitar Sejati™..
    ^NEO DEEVRO™..
    ^BACEMGAKURE™..
    ^BLITAR™ WAE..


    tHnKz 4 Visit.. ^_^
    salam Damai dari Blogger BLITAR..
    Untuk Tukar LINK silahkan Klik Link INI..

    ReplyDelete
  3. Salam kenal, saya sudah coba dan alhamdulillah bisa, terimakasih banyak sudah memberikan info ini, semoga trik2 yang lain bisa saya terima dari sobat nantinya setelah saya follow blognya :)

    ReplyDelete
  4. Maturnuwun Mas... Monggo Mampir di Warung Kulo...

    ReplyDelete
  5. bagus artikelnya kalau yang ada tumbnailnya gmna ya

    ReplyDelete
  6. makasih banyak gan.. info nya cukup bermanfaat..

    ReplyDelete
  7. cara ganti warna huruf di mana mas bro...??

    ReplyDelete
  8. wah.. terimaksih banyak infonya..!! nice!! saya udah pake,, :D

    ReplyDelete
  9. coba di tambah dengan gambar pasti lebih bagus. terima kasih infonya monggo mampir di Blog saya

    ReplyDelete

Komentar Spam, Link Aktif, dan URL Blog Takkan Muncul. Tidak semua pertanyaan sempat/bisa dijawab.