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 dampak 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, info terkini, berfungsi praktis dilihat Visitor yang berdasarkan informasi pada widget situs.

Widget Recent Post bergerak disebut juga mode Briking News menyerupai di TV berupa drop down gambar atau dampak 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 biar membantu navigasi bagi pengunjung mencari postingan terbaru.

Penasaran menyerupai apa? Berikut tumpuan 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 tumpuan 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 : seruan kepada pengunjung, ubah sesuaikan.
• https://mudahrizki.blogspot.com : ganti dengan Link/url blog anda.

#. Kode untuk menciptakan Widget Recent Post Bergerak Vertical

(Tampilannya tumpuan 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 dampak 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 teman dari setiap anda memosting baru, atau pembaca tiba dari postingan terlama.