Cara Membuat Recent Post Berjalan


Mungkin kita sering melihat Recent Post disetiap blog bentuknya sama yaitu berbentuk vertikal nah bagaimana jika kita ingin membuat beda misal dengan efek Marquee.

Disini saya akan memberikan cara bagaimana membuat recent post berjalan atau yang kita kenal dengan Marquee seperti yang ada di blog saya ini.

  
Cara membuatnya sangatlah mudah untuk jelasnya ikuti langkah dibawah ini :


·         1. Login dulu ke Akun Blogspot anda

·         2. Lalu pada halaman Dasbord Pilih dan Klik Rancangan


·         3. Setelah terbuka Laman rancangan Klik Tambah Gadget

 
 ·         4. Lalu pilih Widget HTML/JavaScript


·         5. Copy script berikut :
 
  <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 = 10; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="รข&#65533;¢"; </script> <script style="text/javascript" src="http://BLOGKAMU.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>

·         6. Terakhir klik SAVE
Ca 
Catatan :
nMaxPosts = 10                   : merupakan banyaknya post yang akan ditampilkan.
nScrollDelay = 180              : merupakan kecepatan marquee semakain kecil semakin lambat.
;http://BLOGKAMU.com    : ganti dengan alamat blog mu.


Nah itu tadi caranya mudahkan selamat mencoba ^_^





31 komentar:

  1. Silahkan jgan sungkan2 xixixi :D

    BalasHapus
  2. Eh.. mau tanyak! kalau cara buat Artikel terbaru yg bisa kayak blogroll mu tuw gmana..??
    di tunggu yaa jawababnya..!!

    BalasHapus
  3. @news-gadget : masa si gan coba di coba lagi :D

    BalasHapus
  4. ijin untuk dipraktekkan, nice share brada ...

    BalasHapus
  5. gan koq di blog q ada apa2xnya gan....??? gimana tuchh tolong beri pencerahannya...!!!

    BalasHapus
  6. saya rasa recent post berjalan sangat keren sob..nice sharing sukses selalu :)

    BalasHapus
  7. Thanks infonya...
    tapi kok di blog ane gak bisa ya...?

    BalasHapus
  8. thanks sharenya.
    mampir juga ya di www.hendruazzam.blogspot.com

    BalasHapus
  9. mantap bos. saya mau nyoba dulu. tapi kira-kira ini mempengaruhi waktu loading blog gak?

    BalasHapus
  10. gimana? kok gak muncul ya di blog ku?

    BalasHapus
  11. Makasih mas buat tutorial cara bikin recent post nya, sudah saya coba dan berhasil.

    BalasHapus
  12. Thanks infonya...
    tapi kok di blog ane gak bisa ya...?

    BalasHapus
  13. scripnya gak bekerja mas... apa ada yang salah ya..

    BalasHapus
  14. wah... sama, di blog saya juga nda bisa ka... mohon pencerahannya ya kak....
    terimakasih.

    BalasHapus
  15. pertamax
    jangan lupa ke blog saya sogaats.blogspot.com
    ok....

    BalasHapus
  16. ini dia yg saya cari. makin cantik skrg blog saya. makasih gan

    BalasHapus
  17. Trims banget infonya, langsung diterapkan di blog :)

    BalasHapus
  18. Ini nih yang ane cari2 tutorialnya,., thnks gan dah dishare tutorialnya,., ^_^

    BalasHapus
  19. saya coba dulu mas

    BalasHapus
  20. tamks gan infonya
    visit back ya :) http://achsanarea23.blogspot.com

    BalasHapus
  21. Cukup mudah, tinggal di copas kedalam widget ya ?
    terima kasih aats ulasannya, sangat mencerahkan

    BalasHapus

Berikan Pendapat Anda!!!

Ada yang salah dengan artikel diatas? Atau anda punya opini sendiri? Atau mungkin ada pertanyaan yang mengganjal dalam pikiran anda? Berikanlah sebutir kata dan komentar. Karena ilmu itu harus digali dan di bagi kepada sesama. Oleh karena itu utarakan semua yang ada dibenak anda. Jangan hanya diam dan terpaku.

Caution!!!
1. Sampaikan Komentar anda sekarang!!! Mumpung saya lagi ada waktu nge-reply ^_^

2. Komentar berbau SPAM tidak akan kami tampilkan. Jadi jangan heran kalau komentar anda tidak tampil setelah di submit ^_^