» » Cara Membuat Recent Post Responsive, Keren, Simple dengan Thumbnail Bergerak Dari Atas Kebawah

Cara Membuat Recent Post Responsive, Keren, Simple dengan Thumbnail Bergerak Dari Atas Kebawah

Cara Membuat Recent Post Responsive, Keren, Simple dengan Thumbnail Bergerak Dari Atas Kebawah - Hai Teman, Kali ini saya mau berbagi Tutorial Menarik cara agar membuat Recent Post Yang Responsive karena Didukung Oleh Jquery yang dapat membuat Tampilan Blog Sahabat menjadi lebih menarik dan Responsive tentunya.

Cara Membuat Recent Post Responsive, Keren, Simple dengan Thumbnail Bergerak Dari Atas Kebawah
KAIBHI
Untuk mendapatkan Jquery yang Update / Terbaru, Kamu bisa mendapatkannya disini https://developers.google.com/speed/libraries/


Kembali Kepembahasan, Kelebihan Widget ini bukan hanya Responsive tetapi ia juga Keren, Simple dan memiliki Fitur  Thumbnail yang dapat Bergerak Dari atas Kebawah.
Berikut SS contoh Gambar :
Cara Membuat Recent Post Responsive, Keren, Simple dengan Thumbnail Bergerak Dari Atas Kebawah
Baiklah, Selanjutnya Bagaimana Cara Membuat Recent Post Responsive Keren ?
Berikut Ini Caranya :
1. Login Ke Akun Blogger kamu.
2. Pilih Blog yang akan dibuatkan Widget Responsive ini
3. Klik Tata Letak, dan Klik lagi Tambah Gadget dan Pilih HTML/JavaScript
4. Masukkan Script Dibawah ini Ke dalam HTML/JavaScript Tersebut

<style type="text/css">
#rp_bsu_img{height:290px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_bsu_img ul{list-style-type:none;margin:0;padding:0}
#rp_bsu_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_bsu_img li{height:70px;padding:1px;list-style:none;}
#rp_bsu_img a{color:#55acee;}
#rp_bsu_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:13px;}
#rp_bsu_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_bsu_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #f5f5f5;width:75px;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://yourjavascript.com/77161122610/bsurecentpost.js"></script>
<script type="text/javascript">
var speed = 1000;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_bsu_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

5. Kemudian Klik Save dan Klik Simpan Tata Letak.
6. Agar Widget ini dapat ditampilkan di Blog, Maka kita Harus memasang JQuery di atas <Body>, Apabila ternyata didalam Template anda sudah ada Jquary lewati Langkah ini.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.1/jquery.min.js"></script>
7. Klik Save Template dan Lihat Hasilnya.
Credit : Blogsejutaumat.com
Bagimana? Mudahkan cara Membuat Recent Post Responsive terbaru ini, Serima Kasih.
loading...
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Related Post:

Back To Top