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, 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 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 biar membantu navigasi bagi pengunjung mencari postingan terbaru.
Penasaran menyerupai apa? Berikut referensi recent post tampilan running teks dan gambar thumbnail lengkap pada blog:
Contoh 1
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 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 biar membantu navigasi bagi pengunjung mencari postingan terbaru.
Penasaran menyerupai apa? Berikut referensi 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:
- Login ke Blog, pada Dash Board -> silahkan kesettingan Tata Letak
- Klik + Add Gadget/tambahkan gadget
- Pilih komponen HTML/JavaScript
- Isi judul widget dengan Recent Post, Postingan Terbaru dan semacamnya -> Copas arahan dibawah pada kolom Konten ganti Link/url dan setting komponen lain
- Klik Simpan.
#. Kode untuk versi tampilan Headlines Horozontal / Running Text
(seperti referensi 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 = " ";}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&callback=RecentPostsScrollerv2"></script>
Keterangan: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 = " ";}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&callback=RecentPostsScrollerv2"></script>
- Baca Post Terbaru : permintaan kepada pengunjung, ubah sesuaikan.
- https://mudahrizki.blogspot.com : ganti dengan Link/url blog anda.
#. Kode untuk menciptakan Widget Recent Post Bergerak Vertical
(Tampilannya referensi 2) copas arahan 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>
#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 arahan warna pada (Daftar Kode Warna HTML Untuk Website)
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.