Cara Menciptakan Recent Posts Bergerak Vertical/Horozontal Di Blog

Baca Juga

Membuat Recent Posts Bergerak Vertical/Horozontal  - Pada edisi kali ini akan memperlihatkan 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 memperlihatkan informasi berisi Artikel terahir, terbaru, teranyar, gosip terkini, berfungsi praktis dilihat Visitor yang berdasarkan informasi pada widget situs.

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

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

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

Contoh 1

Contoh 2

Recent Posts Bergerak Vertical di Blog 

Inilai cara menciptakan widget Recent  Post Bergerak di Blog

Untuk menciptakan widget Postingan Terbaru versi Briking News di blogger sangat praktis 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 instruksi dibawah pada kolom Konten ganti Link/url dan setting komponen lain
5. Klik Simpan.

#. Kode untuk versi tampilan Headlines Horozontal / Running Text

(seperti pola 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 : undangan kepada pengunjung, ubah sesuaikan.
• https://mudahrizki.blogspot.com : ganti dengan Link/url blog anda.

#. Kode untuk menciptakan Widget Recent Post Bergerak Vertical

(Tampilannya pola 2) copas instruksi 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 instruksi warna pada (Daftar Kode Warna HTML Untuk Website)

Bagaimana Praktis sekali bukan menciptakan Widget Recent Posts efek bergerak Vertical/horizontal di blog?

Kesimpulan untuk memasang widget Artikel terbaru pada blog

Praktis mudahan tutorialnya sanggup membantu Sobat blogger semua. Semoga dengan adanya widget Recent Post bergerak sebagai cara mempermudah untuk meningkatkan trafik blog sahabat dari setiap anda memosting baru, atau pembaca tiba dari postingan terlama.