Widget Recent Posts atau posting terbaru merupakan wiget penting karena berfungsi sebagai penunjang navigasi blog. dengan adanya daftar posting terbaru, pengunjung yangg masuk tidak dari halaman utama (homepage) dapat langsung mengetahui beberapa posting terbaru dari sebuah blog. selain itu, widget recent posts dapat menjadi sebuah tawaran bagi pengunjung blog untuk mengetahui isi posting-posting lain dari blog tersebut.
Melalui HTML/JavaScript :
Oke saya rasa tidak perlu panjang lebar, ayo di mulai...
Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.
Ikutilah langkah-langkah di bawah ini :
1. Klik Tata Letak.
2. Klik Tambah Gadget.
3. Pilih Gadget HTML/Javascript.
4. Kemudian (copy & paste Kode di bawah ini untuk memasukkan widget ini pada blog kamu).
<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#3eb5da;
border:solid 1px #00ff00;}
#rp_plus_img a{color:#000000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #000000;width:55px;height:55px;}
</style>
<script src="https://sites.google.com/site/tutorialblogeno/javascript/cara-membuat-widget-recent-posts-bergerak-di-blog-bagian-1.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/tutorialblogeno/javascript/cara-membuat-widget-recent-posts-bergerak-di-blog-bagian-2.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 5;
var numchars = 0;
</script> <script src="http://tutorial-blog-eno.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-recent-posts-bergerak-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#3eb5da;
border:solid 1px #00ff00;}
#rp_plus_img a{color:#000000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #000000;width:55px;height:55px;}
</style>
<script src="https://sites.google.com/site/tutorialblogeno/javascript/cara-membuat-widget-recent-posts-bergerak-di-blog-bagian-1.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/tutorialblogeno/javascript/cara-membuat-widget-recent-posts-bergerak-di-blog-bagian-2.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 5;
var numchars = 0;
</script> <script src="http://tutorial-blog-eno.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script>
<small><a href="http://tutorial-blog-eno.blogspot.com/2015/01/cara-membuat-widget-recent-posts-bergerak-di-blog.html" target="_blank">Mau Seperti Ini?</a></small>
Keterangan :
- {height:377px;}adalah ukuran tinggi, silahkan kamu ganti dengan selera yang kamu mau.
- Warna purple adalah kode warna, silahkan kamu ganti dengan selera yang kamu mau.
- Agar lebih mudah menemukan kode warna yang kamu inginkan : Klik Di Sini
- Warna orange adalah link kode "JavaScript" blog.
- var numposts = 5; adalah jumlah posting, silahkan kamu ganti dengan selera yang kamu mau.
- Silahkan kamu ganti http://tutorial-blog-eno.blogspot.com/ dengan URL blog kamu sendiri.
5. Simpan Pengaturan.
Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.
█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno
Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.
█████████████████████████████████████████████████████████████████
Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno
Ditulis Oleh : Tutorial Blog Eno » Di Sini Adalah Inspirasi Untuk Sobat Blogger Semua.
Saat ini kamu sedang membaca artikel tentang Cara Membuat Widget Recent Posts Bergerak Di Blog. silahkan kamu Copy-Paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link di bawah ini sebagai sumbernya. INGAT : saling menghargai kreatifitas sesama sobat blogger oke.
Terimakasih banyak sob, mantab nih tutornya.. siip
BalasHapushttp://obatasliindonesia.com/obat-herbal-migren-sehat-alami/