Cara membuat Recents Posts yang berjalan Ala Pensil Ajaib

Hay sobat, kali ini pensil mau berbagi tips dengan sobat semua. Kali ini tips nya tentang membuat Recent Posts yang berjalan seperti punya pensil yang ada di bawah itu. Bagaimana sobat, menarik bukan ? Seperti kayak kita lihat televisi, dibawahnya ada sebuah iklan atau berita.

Nah, kalau sobat mau buat seperti itu, caranya ga susah koq. Tapi tunggu dulu, kali ini hanya untuk blogger yah. Untuk yang lain, sobat bisa cari cara yang lain . Oke langsung saja, kita simak penjelasan dari Pak Lurah.

Pak lurah " Baiklah warga pensil semua, kali ini saya akan menjelaskan sedikit tentang cara menampilkan recent posts pada blog blogger. Cara nya adalah :"

1. Login dulu ke blogger, kemudian dari dasbar, masuk ke setelan / settings. >> tata letak.
2. Kemudian tambah gadget, cari gadget nya "Html/Javascript" .
3. Setelah itu masukkan 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 == "top" || sDirection =="bottom")

{

//For left and right directions seperate the headilnes by two spaces.

sHeadlineTerminator = "  ";

}

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>




<div style="position:fixed;bottom:-1%;left:0%;height:25px;background:lightgreen;padding:5px;">

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

</div>

Setelah semuanya di tulis, tekan tombol save / simpan.




Sedikit tambahan dari Pak Lurah :

• Untuk peletakan, jika sobat ingin meletakkan posisinya tepat di bawah dan tidak bisa digeser, sobat bisa tambahin script yang berwarna biru tersebut. position:fixed adalah untuk menempatkan objek dengan posisi fixed, atau tetap. sementara bottom dan left untuk letak bawah dan kiri, atau bisa di ganti dengan right dan top untuk kanan dan atas.
• Untuk nScrollDelay itu adalah kecepatan teks nya, sobat bisa ganti sendiri.
• sOpenLinkLocation untuk link dari judul postingan sobat, value Y jika sobat mau membuka di jendela yang sama. Jika tidak, sobat bisa ganti N
• sBulletChar merupakan pemisah antara judul yang satu dengan yang lainnya. Sobat bisa menggantinya.
• http://pensil-ajaib.blogspot.com ini yang penting, ganti dengan alamat blog sobat masing-masing.

Bagaimana sobat pensil, kalian sudah paham bukan ? sekarang selamat mencoba dan berkreasi dengan blog masing-masing.

Kalau mau softcopy nya, silahkan klik disini. atau disini untuk download scriptnya .