Tutorial Cara Pasang Widget Artikel Terbaru Di Blog 2015
Selamat datang sahabat tutiroal--Izinkan saya sebagai admin untuk mengucapkan rasa terimakasih kepada sahabat tutorial di manapun berada yang sudah mau meluangkan waktu untuk berkunjung di blog info tutorial ini.
Hari ini saya akan memberikan sedikit tips atau "cara memasng widget artikel baru di blog" Jadi untuk melengkapi postingan tutorial ini saya ingin berbagi cara pasang terkait dengan artikel baru atau recent post. Karena widget ini berfungsi untuk menampilkan artikel post terbaru yang sudah kita buat.
Untuk membuat recent post ini cukup mudah, kita hanya menggunakan HTML dan posisi widget ini kita tempatkan pada sidebar pinggir blog. Cara membuat widget terkait artikel baru memang sudah banyak yang mempostingkan dengan beberapa cara yang berbeda, cara ini juga hasil dari link teman blogger
akan tetapi yang saya tutorialkan kali ini cukup simpel dan mudah dilakukan oleh blogger yang ingin menampilikan artikel baru pada sidebar dengan gambar. Sebenarnya untuk membuat artikel terkait di template blog sudah di sediakan.
Baiklah tanpa basa basi lagi yang belum memahami cara pasang widget untuk recent post kita simak saja caranya cukup mudah dan cepat.
1. Buka dulu blog anda2. Masuk ke menu Pilih ' tata letak ' selanjutnya klik tambahkan gadget posisi saya kembalikan kepada anda yang memiliki blog.
3. Selanjutnya, pada menu yang di tampilikan pilihlah HTML/javaScript
Perhatikan gambar di bawah.
4. Kalau sudah di klik HTML/javaScript langkah selanjutnya
Copas kode html di bawah dengan meletakan pada kolom konten
lihat gambar
Ini code HTML/JavaScript yang harus di letakan di kolom konten klik simpan dan lihat hasilnya.
<span style="font-weight:bold;"></span><div style="margin-bottom: 15px;">
<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 = 450;
var pause = 3600;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 8;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
Oke...cukup sekian dan semoga bermanfaat..selamat mencoba....