Cara Membuat Recent Posts Bergerak Vertical/Horozontal di Blog

Membuat Recent Posts Bergerak Vertical/Horozontal  - Pada edisi kali ini akan menunjukkan bagaimana? Membikin Recent Post/postingan terbaru dengan efek animasi bergerak-gerak secara otomatis (marquee) kebawah/samping (Vertikal/Horozontal), bergeser, muncul berjalan top/down, atau istilah lainya running pada sidebar atau header blog.

Recent Posts pada bahasa Indonesia artinya memberikan informasi berisi Artikel terahir, terbaru, teranyar, berita terkini, berfungsi mudah dilihat Visitor yang menurut informasi pada widget situs.

Widget Recent Post bergerak disebut juga mode Briking News seperti di TV berupa drop down gambar atau efek berjalan (running text) di web/blog keren.

Dengan cara fix kita dapat seting desain tampilan rondom, var, jumlah post, warna (background-color) secara acak maupun per kategori, dan apapun agar membantu navigasi bagi pengunjung mencari postingan terbaru.

Penasaran seperti apa? Berikut contoh recent post tampilan running teks dan gambar thumbnail lengkap pada blog:

Contoh 1

Contoh 2

Recent Posts Bergerak Vertical di Blog 

Inilai cara membuat widget Recent  Post Bergerak di Blog

Untuk membuat widget Postingan Terbaru versi Briking News di blogger sangat gampang sekali cukup memasang widget / Add Gadget dengan Menambahkan komponen elemen JavaScript.

Langkahnya:

1. Login ke Blog, pada Dash Board -> silahkan kesettingan Tata Letak
2. Klik + Add Gadget/tambahkan gadget
3. Pilih komponen HTML/JavaScript
4. Isi judul widget dengan Recent Post, Postingan Terbaru dan semacamnya -> Copas kode dibawah pada kolom Konten ganti Link/url dan setting komponen lain
5. Klik Simpan.

#. Kode untuk versi tampilan Headlines Horozontal / Running Text

(seperti contoh 1) Copas pada kolom Konten:

<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> var nMaxPosts = 20; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar=" Baca Post Terbaru"; </script> <script src="https://mudahrizki.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2"></script>

Keterangan:

• Baca Post Terbaru : ajakan kepada pengunjung, ubah sesuaikan.
• https://mudahrizki.blogspot.com : ganti dengan Link/url blog anda.

#. Kode untuk membuat Widget Recent Post Bergerak Vertical

(Tampilannya contoh 2) copas kode dibawah pada kolom konten HTML/JavaScript:

<style type="text/css">
    #rp_plus_img{height:355px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:oldlace;
    border:solid 1px #FFFAFA;}
    #rp_plus_img a{color:crimson;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:15px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:65px;height:65px;}

</style><br />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script><br />
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script><br />
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });

</script><br />
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;

</script>     <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script>     </ul>
<small></small>

Keterangan Script:

• oldlace : Background
• crimson : Warna Judul
• 15px : size judul artikel
• 1500 : kecepatan animasi gerak
• 5 : jumlah Postingin yang ditampilkan
• Atur semua atau sesuaikan warna silahkan cari kode warna pada (Daftar Kode Warna HTML Untuk Website)

Bagaimana Mudah sekali bukan membuat Widget Recent Posts efek bergerak Vertical/horizontal di blog?

Kesimpulan untuk memasang widget Artikel terbaru pada blog

Mudah mudahan tutorialnya dapat membantu Sobat blogger semua. Semoga dengan adanya widget Recent Post bergerak sebagai cara mempermudah untuk meningkatkan trafik blog sobat dari setiap anda memosting baru, atau pembaca datang dari postingan terlama.