Cara Membuat Widget Recent Posts Slider di Blog

Cara Membuat Widget Recent Posts Slider di Blog
TULISKAN.com - Dalam mempromosikan konten-konten terbaru blog, sebenarnya ada berbagai macam cara yang dapat kita tempuh, seperti misalnya membagikanya ke social media, memperkenalkanya ke forum-forum, namun terkadang cara-cara seperti itu ada yang ampuh ada juga yang nihil hasilnya, nah, pada kesempatan kali ini saya juga ingin membagikan sebuah widget yang berguna untuk mempromosikan konten-konten terbaru di blog kita, agar banyak pengunjung yang sedang membaca post lawas mebacanya.


Widget tersebut adalah recent posts slider, jadi widget ini adalah widget artikel terbaru yang menapilkan setiap postingan-postingan terbaru di blog kita, selain itu, widget ini juga bersifat slider, jadi tidak terlalu memakan space atau tempat yang besar di blog. Seperti apa itu slider? misalnya kita ingin menampilkan 10 post terbaru di blog kita, nah, dengan widget ini kita hanya membutuhkan 4 kolom post, jadi tidak usah 10 kolom post, karena nantinya akan muncul secara slide show vertikal kebawah.

Cara Membuat Widget Artikel Terbaru Slider di Blog

1. Login Ke Blogger.

2. Masuk Dashboard.

3. Pilih Template.

4. Klik Edit HTML

5. Pastikanlah jika kode jQuery yang mirip seperti kode biru dibawah ini sudah ada pada template anda (versi berapapun), jika belum ada, pasang kode dibawah ini tepat diatas </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
</script>

6. Klik "Save/Simpan Template".

7. Selanjutnya anda pergi ke laman Tata Letak.

8. Klik Add/Tambahkan gadget.

9. Pilih "HTML/JavaScript".

10. Letakkan kode berikut ini kedalamnya

<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="https://farhanshare.googlecode.com/files/recentpost%20%281%29.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="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small><a href="http://betelm.blogspot.com/2012/04/cara-membuat-slider-artikel-terbaru.html" target="_blank">Get This!</a></small>

Keterangan5 adalah jumlah post yang ingin ditampilkan

11. Klik "Save/Simpan", dan selesai.

Demikian informasi terbaru seputar tutorial dan tips trik blogging tentang Cara Membuat Widget Recent Posts Slider di Blog, semoga bermanfaat, dan selamat mencoba.

Share this

Related Posts

Previous
Next Post »