™Galery™

Untuk Contohnya bisa dilihat disini

Demo

Setelah sebelumnya saya postingkan Recent posts with thumbnail and simple spy, untuk kali ini masih sama tentang Recent post, yang berbeda recent post kali ini menggunakan Efek Marquee atau efek Teks berjalan. Untuk penempatannya bisa di sesuaikan dengan kreatifitas kita, bisa di bawah posting, ataupun pada bagian main-wrapper. dan untuk sekarang biar mudah kita terapkan pada Gadget saja.

Langsung saja untuk cara membuatnya ikuti langkah-langkah berikut:

1. Login blogger
2. Rancangan, Elemen Laman
3. Tambah Gadget, Pilih Html/Java script, dan
4. Simpan kode Html 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 = 20; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://loxside.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>

Untuk yang berwarna biru, ganti dengan alamat blog kalian.
5. Simpan dan lihat hasilnya