Cara Membuat Widget Recent Post Bergerak dan bergambar di Blog – Para blogger terbaru, kali ini kita akan membahas mengenai cara membuat widget recent post bergerak dan bergambar di blog. sebelumnya, kita juga sudah membahas cara membuat widget recent post di blog tanpa gambar. Mungkin, ada beberapa blogger – blogger yang suka simple tanpa gambar atau ada sebagian blogger yang menyukai widget recent post bergerak atau berjalan dengan ada gambarnya.
Cara Membuat Recent Post Bergerak Di Blog |
Dengan memasang widget recent post bergerak dan bergambar di blog kita. Maka, postingan – postingan terbaru kita akan ditampilkan dan membuat pengunjung akan betah berlama – lama di blog kita. Jadi, tidak rugi dech kalau masang widget recent post bergerak dan bergambar ini.
Baiklah, langsung saja kita akan membahas cara membuat widget recent post bergerak dan bergambar di blog. berikut adalah langkah – langkahnya :
- Pastikan kita terhubung dengan internet.
- Selanjutnya, kita login ke blogger.com.
- Setelah itu kita pilih Tata Letak.
Cara Membuat Recent Post Bergerak Di Blog (1) - Kemudian, klik Tambah Gedget.
Cara Membuat Recent Post Bergerak Di Blog (2) - Setelah itu, kita Pilih mode HTML/JavaScript.
Cara Membuat Recent Post Bergerak Di Blog (3) Cara Membuat Recent Post Bergerak Di Blog (4) - Selanjutnya, kita masukkan kode di bawah ini pada kolom konten.
<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#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 #00000;width:55px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.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://hafifurrahmancoy.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
<small><a href="http://regibrader-free.blogspot.com/search/label/Widget%20Blog" target="_blank">Blogger Widget</a></small>
<small><a href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-recent-posts.html" target="_blank">Get This Widget</a></small>
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#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 #00000;width:55px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.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://hafifurrahmancoy.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
<small><a href="http://regibrader-free.blogspot.com/search/label/Widget%20Blog" target="_blank">Blogger Widget</a></small>
<small><a href="http://regibrader-free.blogspot.com/2013/05/cara-membuat-widget-recent-posts.html" target="_blank">Get This Widget</a></small>
keterangan :
a. kode yang berwarna hijau adalah banyaknya artikel yang di tampilkan.
b. kode yang berwarna merah adalah alamat blog kita masing - masing.a. kode yang berwarna hijau adalah banyaknya artikel yang di tampilkan.
7. Pada kolom judul kita bisa isi dengan sesuka hati kita.
8. Jika sudah selesai. Kita klik Simpan atau Save.
9. Kita bisa lihat hasilnya di blog kita masing – masing.
10. Selesai.
# Baca Juga : Cara Mudah Mengedit HTML Pada Blog Terbaru
Itulah langkah – langkah cara membuat widget recent post bergerak dan bergambar di blog. mudah – mudahan dapat bermanfaat bagi kita semua. Jangan lupa like fanspagenya di paling bawah. Jadi, jangan ragu untuk memasang widget ini. Sekian Terima kasih.
3 komentar:
makasih bnayak buat tutornya,, ijin coba yaa...
http://toko-greenworld.com/
Terimakasih banyak sob, mantab nih tutornya.. siip
Terimakasih buat tutorialnya bos, mantab sekali..
Post a Comment