Tutorial Menciptakan Widget Recent Post Animasi Bergambar

Halo teman kaliitu saya mau membagikan trik tutor membikin widget recent post animasi .bagi teman nan ingin mempercantik tampilan Recent Postnya. kaliitu admn mau share code nya.Fungsi dari widget Animasi Bergambar yaitu widget nan dibentuk dengan tujuan mengatakan postingan terakhir di suatu blog ataupun website sobat, apabila sebuah artikel nan di posting memuat suatu gambar makanya widgetitu pun mau menampilkan gambar nan telah di muat artikel itu dengan ukuran yg kecil pastinyanya, belomsama dengan ukuran gambar aslinya di didalem posting. 

Dengan adanya Recent Post membikin tampilan blog kami jadinya menarik juga membikin pengunjung ingin melihat artikel postingan kami nan lainnya.Selain itu fungsinya sanggup juga jadi pemberitahu apa nan tersedia dipostingan terakhir teman selain itu juga jadi rujukan agan sanggup lihat di sidebar blog milik saya. Karna saya juga memasangnya hehee.Kelebihan dari recent postitu selain sanggup bergerak ataupun animasi ialah, dilengkapi dengan gambar, judul post juga cuplikan isi post.

Nah bagaimana tertarikah teman sebagai membikinnya eksklusif saja ikuti langkah langkah berikutitu :

Cara Membuat Widget Recent Post Animasi Bergambar

Silahkan Ikuti Langkah-langkah berikut :

1. Silahkan login akun Blog Anda https://draft.blogger.com/

2. Jika rampung Pilih hidangan Rancangan juga Pilih Elemen Laman ataupun Tata Letak

3. Setelah itu pilih Tambah Gadget (diposisi nan teman inginkan)

4. Kemudian Tambahkan HTML/JavaScript

5. Dan Copy juga aba-aba di bawah ini:

<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 = 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>

Keterangan :

width:60px;height:65px diatas yaitu ukuran sebagai gambar di Recent Post.var speed = 400; var pause = 3500; diatas yaitu kecepatan Slide gambar Recent Postvar numposts = 10; var numchars = 60; diatas yaitu 10 Jumlah posting nan mau di tampilkan di Recent Post juga 60 yaitu Huruf ataupun deskripsi postingan nan ditampilkan di Recent Post.

6. Pastekan scriptnya

7. Dan Lihat akibatnya !! sanggup kan ?? itu sebagai agan nan ingin edit di rancangan tata letak, bila agan ingin edit di htmlitu kodenya :

<div style="BORDER: #cccccc 1px dashed; PADDING: 5px; WIDTH: 95%; BACKGROUND: #f0f0f0; COLOR: #000000; FONT-SIZE: 12px; OVERFLOW: auto; height:auto"><pre>&lt;div style=&quot;margin-bottom: 15px;&quot;&gt; &lt;style type=&quot;text/css&quot;&gt; #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;} &lt;/style&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot; src=&quot;http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js&quot;&gt;&lt;/script&gt; &lt;script type=&quot;text/javascript&quot;&gt; var speed = 400; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); &lt;/script&gt; &lt;ul id=&quot;rp_plus_img&quot;&gt; &lt;script style=&quot;text/javascript&quot;&gt; var numposts = 10; var numchars = 60; &lt;/script&gt; &lt;script src=&quot;/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt&quot;&gt;&lt;/script&gt; &lt;/ul&gt; &lt;/div&gt;</pre></div>

8. baiklah sekian tutorial dari saya biar berfungsi yah hehee..