Popular Posts Slide Down Valid HTML5

Popular Posts Slide Down Valid HTML5, pihak blogspot sudah menyediakan beberapa widget  di setiap blog, dan salahsatunya adalah popularpost, tujuan untuk popular post ini adalah agar memudahkan pengunjung mengeteahui dari setiap postingan terpopuler, namun perlu anda ketahui bahwa widget popular post standart belum valid HTML5, untuk cara memperbaikinya atau agar widget popular post menjadi valid HTML5 anda bisa membaca tentang Cara Membuat Popular Post dengan Gambar Valid HTML5. 

Kembali pada pembahasan judul di atas yaitu membuat widget popular post bergerak kebawah, hal ini hanya memberikan cindera mata untuk pengunjung blog agar terlihat berbeda dari sebelumnya yang hanya berdiam pada posisi yang sudah ditentukan, selain itu juga dengan membuat widget ini bergerak, popular post ini valid HTML5 dan akan menjadi nilai lebih untuk blog yang anda punya agar pengunjung tidak terlalu bosan berdiam diri dan terus berselancar di setiap ada pergerakan pada blog yang anda punya.

Untuk cara pembuatan widget tersebut, anda bisa mengikuti pada langkah-langkah di bawah ini :

Langkah Pertama, silahkan Login  ke blog anda, atau bisa juga klik URL www.blogger.com

Langkah Kedua, arahkan mouse anda lalu klik dibagian More Option, setelah itu pilih Tata Letak atau Layout.

Langkah Ketiga, tambahkan Widget atau Add a Gadget, lalu plih HTML/JavaScript.

Langkah Keempat, menyimpan kode popular post slide down di bagian widget yang sudah ditambahkan tadi, selanjutnya copy kode dibawah ini lalu pastekan dibagian kolom yang kosong.

<div style="margin-bottom: 15px;">
<style scoped="scoped" 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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js" type="text/javascript"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<br />
<ul id="rp_plus_img">
<script>
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"></script>
</ul>
</div>

setelah kode diatas sudah di letakkan, hasilnya akan seperti gambar di bawah ini :

selanjutnya klik Save atau Simpan.

Langkah Kelima, menghapus kode <b:include name='quickedit'>, untuk cara menghapusnya Pilih Template, lalu klik  Edit HTML, anda bisa melakukannya dengan cara menekan CTRL + F lalu paste kode tersebut, atau bisa juga dengan cara pilih Jump To Widget yang sudah ditambahkan tadi,, lalu hapus kode yang sudah ditandai pada gambar di bawah ini :

selanjutnya jika sudah menghapus kode tersebut, lalu Save Template atau Simpan Template.

Langkah Keenam, Selesai.

Nah, jika langkah-langkahnya sudah selesai di lakukan, sekarang anda bisa melihat hasilnya pada blog yang anda punya, untuk mengetahui widget popular post yang di buat tadi Valid HTML5, anda bisa langsung ke HTML5 Validator, semoga postingan tentang cara membuat Popular Posts Slide Down Valid HTML5 ini bermanfaat..

Share this post