About Me

Foto Saya
Development of Information Technology
Lihat profil lengkapku

BLOGGER n FB

Cinta itu seputih salju :)

5 ARTIKEL POPULER

Followers

Trik cara membuat recent post berjalan

Share this article on :


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.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGT6oamyM95NMdETMw79q9AQMsB86QOzo4NCu64hIrWAOdNlZYrqyxQhABFT230PhCmEoTBApTSRkfZfPlrFcV4r67C7-dL8v3ipvSncMbEQk1gkOY_xPGDOWHHfOE7S7ub7-tlF7U8MvS/s400/22.jpg
  
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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3h0K_XPvq6mn3QlQsJV-7iGbE1a1l6JX2JStfTQiAIbFH0hJK1xjhc43-2ZmdBjaCLj85fP8HomQmZ1p8T-g2RiBMocGxxwDlijr_eV-Z5p2nskn2nb20zXWSlqp4XZc9EkUMYK4xN9Jr/s1600/23.jpg

·         3. Setelah terbuka Laman rancangan Klik Tambah Gadget

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2oDKS1x7J2NiU9pHO-_FtPUoeBttp3j7zL6m2O7SkeP4W6BnFbPhzmwYxKb-c7f1zxfC4qo5BUvnUZUCEVugHt2P4m-y1HMbLHpa67ajq8iRuP4bVzWfJQYdJeGNxkb5MZFL1U7wRvuNX/s320/24.jpg
 
 ·         4. Lalu pilih Widget HTML/JavaScript

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4BOlo3MmHiSHss6VDz3Nuz8mlpNjX092THy4nfKpqwVn8dqVDIObubBN6HRQ4iK_S4ozDaZbzhtykbLbkcQKBS8wSofmNSrrqdQxhvLAWWDzyJb6CxsiPxAxX9oFGO636fVDoN-P2rQYl/s320/25.jpg

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

0 komentar — Skip to Comment

Posting Komentar — or Back to Content