.jpg)
Jumat, 14 Juni 2013
Welcome... Untuk artikel kali ini Ane akan coba bagi-bagi trik dengan Ente-ente semua. Di sini Ane akan membuat sebuah Widget Pos Keren dengan tampilan Slide. Sesuai dengan judulnya, Recent Post berarti terakhir posting atau postingan terkhir. Dengan memanfaatkan Widget ini, pengunjung blog Ente dapat melihat daftar postingan terakhir Ente. Lebih jelasnya Ente dapat melihat di sidebar Ane. Untuk membuat Widget ini, silahkan simak ulasan di bawah ini:
1. Untuk yang pertama ini, silahkan Ente login ke akun Blogger
2. Pilih Tata Letak => Tambah Gadget => HTML/JavaScript
3. Copy kode di bawah ini dan paste-kan ke dalam kotak Gadget tadi
4. Klik simpan.
Keterangan :
Untuk Warna background, tulisan ukuran Ente bisa edit sesuai Undang-undang yang berlaku.
Jika Widgetnya tidak berfungsi, coba periksa kode jquery pada kode di atas dan ente bisa menghafusnya.
Sekian cara membuat Widget Recent Post di Blog dengan Slide. Perkara ada apa-apa, silahkan tinggalkan jejak di kotak komentar!
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #ecf88a;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 .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://yourjavascript.com/9011035172/ajaxslider.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 = 10;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #ecf88a;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:# 9dff33;}#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://yourjavascript.com/9011035172/ajaxslider.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 = 10;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
