Cara Membuat Recent Post Gambar Bergerak Di Blog
- Recent post adalah artikel posting yang paling terbaru dalam suatu
blog. Jadi pengunjung bisa lihat postingan terbaru dari kita, Adapun
artikel posting yang di tampilkan biasanya berupa judul saja dari
artikel maupun ada sedikit isi keterangan dari artikel yang kita
posting, namun hal itu bisa dirubah sesuai dengan keinginan kita.
Berikut gambar Recent Post yang akan kita pasang :
Pada recent post seperti gambar diatas dilengkapi dengan Efek marquee
atau slide berjalan dan gambar foto dengan judul postingan dengan
bergerak slide kebawah. Sobat bisa melihatnya pada Recent Post Bergerak pada slide samping kanan pada blog Software Mania PC ini. script ini saya dapatkan di google.com untuk sumbernya Cara Membuat Recent Post Gambar Bergerak Di Blog.
Jika sobat tertarik ingin membuat dan memasang widget recent post thumbnail gambar bergerak slide ke bawah seperti yang ada pada blog ini, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:
Cara Membuat Recent Post Gambar Bergerak Di Blog
- Masuk akun blog sobat
- Pilih Tata Letak
- Lalu Tambahkan Gadge pilih HTML/JavaScript
- Masukan kode di bawah ini kedalam kotak HTML/JavaScript :
<div style="margin-bottom: 15px;">Keterangan :
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</ul>
</div>
- kode yang warna Merah adalah kecepatan untuk berpindahnya post ke post lain,, jika perlu sobat bisa ubah kecepatannya..
- kode yang warna Biru adalah waktu berhentinya post/di pause.. bisa di ubah juga jika perlu..
- kode yang warna Hijau adalah jumlah post yang akan di tampilkan di recent post. sobat bisa mengubahnya sesuka hati.
Semuanya sudah saya coba dan berhasil, hehe sekarang gentian sobat untuk mencobanya. Sekian dulu Cara Membuat Recent Post Gambar Bergerak Di Blog. Jika sobat bingung bisa tinggalkan komentar dan tunggu jawabannya. Ok salam blogger dan good luck
Sumber : http://softwaremaniapc.blogspot.com
Artikel Terkait
Tips Blog
- Merubah Warna Background Blog Sesuai Keinginan Pembaca
- Cara Mudah Memasang Widget Revolver Maps
- Mengganti Background Blog Sesuai Resolusi Layar 100 % Work
- Cara Membuat Animasi Bergerak di Sudut Blog
- Cara Membuat Efek Foto Membesar di blog
- Cara membuat Banner Flash (swf) di Banner Maker
- Cara Upload Gambar Ekstensi Gif sekaligus pasang di Blog
- Membuat Ucapan Selamat Datang dan Selamat Tinggal di Blog
- Cara Mudah Mengganti Background Blog dengan Gambar
- Cara Membuat Scroll Box untuk Arsip Blog Sederhana
- Cara Upload dan mengetahui url / link Foto menggunakan Picasa ke Blog
- Cara Membuat Tulisan berjalan di Blog Keren
- Cara Membuat Slide Show Foto gampang di Blog
- Submit Sitemap Blog agar Terindex Bing dan Yahoo
- Cara Membuat Kotak Banner Iklan 125x125
- Cara Membuat Kotak Komentar Blog
- Cara Memasang Animasi di Blog
- Cara Membuat Dropdown Menu di Blogspot
- Cara Memasang Tombol Print pada Blog
- Cara Mudah Membuat Menu di Blog
- Cara Memasang Animasi di Blog
