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 ^_^





Artikel Terkait

Cara Membuat Recent Post Berjalan
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email

31 comments

24 April 2011 14.36 delete

sipp... boleh gan infonya..

Reply
avatar
25 April 2011 19.24 delete

Silahkan jgan sungkan2 xixixi :D

Reply
avatar
11 Juni 2011 09.44 delete

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

Reply
avatar
16 Juli 2011 05.10 delete

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

Reply
avatar
25 September 2011 21.06 delete

terimakasih ilmunya sobat..

Reply
avatar
25 November 2011 20.40 delete

ijin untuk dipraktekkan, nice share brada ...

Reply
avatar
29 Desember 2011 08.42 delete

Saya juga gak berhasil gan.

Reply
avatar
4 Januari 2012 20.54 delete

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

Reply
avatar
11 Januari 2012 10.06 delete

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

Reply
avatar
26 Januari 2012 08.24 delete

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

Reply
avatar
2 Februari 2012 23.08 delete

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

Reply
avatar
23 Februari 2012 09.16 delete

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

Reply
avatar
19 Maret 2012 23.34 delete

gimana? kok gak muncul ya di blog ku?

Reply
avatar
22 Maret 2012 10.02 delete

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

Reply
avatar
5 April 2012 14.42 delete

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

Reply
avatar
13 April 2012 09.12 delete

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

Reply
avatar
23 April 2012 13.54 delete

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

Reply
avatar
5 Juni 2012 19.10 delete

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

Reply
avatar
9 Juni 2012 16.38 delete

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

Reply
avatar
18 Juni 2012 12.35 delete

Trims banget infonya, langsung diterapkan di blog :)

Reply
avatar
17 Juli 2012 08.41 delete

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

Reply
avatar
8 Oktober 2012 16.46 delete

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

Reply
avatar
19 November 2012 12.12 delete

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

Reply
avatar

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 ^_^