Membuat Widge Recent Post Ringan Dan Keren

MEMBUAT WIDGE RECENT POST  RINGAN DAN KEREN. memilik tampilan wigde yang keren, indah dan menarik adalah keinginan semua blogger. ini semua dimaksudkan supaya para penggunjung blog yang kita miliki akan terpersona dan akan betah berlama-lama ketika mengunjungi blog/situs yang kita miliki. Maka tak jarang kita melihat jika sebagian besar para blogger mencoba hal-hal yang terbaru dalam mengotak atik baik template ataupun tampilan blog yang mereka miliki dengan tujuan supaya membuat pengunjung blog mereka tertarik untuk berkunjung kembali ke situs mereka dimasa yang lain. Sebanranya memiliki pengunjung yang tetap dan berkunjung dengan waktu yang lama juga merupakan salah satu syarat jika blog kita akan mendapatkan posisi yang bagus di mesin pencarian Google tersebut, siapa yang tidak menginginkan blog mereka selalau muncul di urutan pertama mesin pencarian milik Google. 

Baiklah para blogger semua, kali ini saya akan memberikan sedikit tutorial tentang cara membuat wadge recent post yang ringan dan keren, sehingga memudahkan loading pada saat blog kita di ases oleh pengunjung kita. Recent post yang saya maksudkan disini adalah tampilan widge yang menayangkan beberapa tampilan artikel yang baru kita posting di blog/laman web kita sehingga pengunjung blog kita akan tertarik melanjutkan bacaan untuk postingan artikel lainnya tanp harus mencari lagi dari menu ataupun label-label yang kita gunakan di template blog kita. Disini saya akan memberikan dua jenis tampilan widge recent post dimana yang satu tayang secara bergantian/bergiliran sedangkan yang satu lagi (janis yang kedua) tampilannya berada dalam dalam posisi stable (tetap). Walaupun demikian kedua widge recent post ini ringan dan sangat menarik, ringan yang saya maksudkan disini adalah ketika halaman kita di loading maka dengan otomatis tampilan wadge ini akan muncul dengan sendirinya tanpa memperlambatmeperberat proses loading halaman website kita yang terkadang hal ini juga sangat membuat para penggunjung kita terganggu dan lari ke blog yang lain jika proses loadingnya memakan waktu yang lama. Kita tahu bahwasanya widge recent psot disini selain untuk mempercantik tampilan blog kita juga untuk memudahkan penggunana dalam mengakses artikel kita sehingga mereka akan betah berlma-lama dalam mengingjungi web/blog kita, karena artikel yang kita sajikan akan muncul dengan sendirinya di widge recent post. Siapa tahu saja salah satu tayangan artikel kita di widge recent post dapat menarik minat mereka untuk melanjutkan memngujungi artikel selanjutnya.

 Cara Membuat Widge Recent Post Ringan dan Keren

(Baca Cara Membuat Menu Dropdown Pada Toolbar Blog)

Sebenarnya untuk mempercantik tampilan recent post pada blog kita sangat mudah, disini saya akan memberikan beberapa tahapan-tahapan untuk anda lakukan/ikuti sebagai tutorial supaya tampilan widge recent post pada blog anda jadi menarik. Untuk lebih mudahnya, mari di simak tahapan-tahapan pemasangan recent post pada blog anda berikut ini.

1. Login ke dashboard blog anda kemudian
2. Klik menu tata letak/lay out pada blog kita, lalu dilanjutkan 
3. Klik menu tambah gadge di lay out anda dan pilih menu html/javascript.
4. terakhir anda Kopy kode salah satu kode berikut ini, tergantung pilihan mana yang anda sukai dari kedua jenis kode tersebut, kalau ingin melihat tampilannya tidak salah jikalau anda mencoba kedua kode ini lalu putuskan kemudian mana yang lebih cocok tampilan dari keduannya menurut selera anda:

A. Recent Post Berganti tayang

<style type="text/css">

#rp_bsu_img{height:290px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}

#rp_bsu_img ul{list-style-type:none;margin:0;padding:0}

#rp_bsu_img li{border:0; margin:0; padding:0; list-style:none;}

#rp_bsu_img li{height:70px;padding:1px;list-style:none;}

#rp_bsu_img a{color:#55acee;}

#rp_bsu_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:13px;}

#rp_bsu_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}

#rp_bsu_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #f5f5f5;width:75px;height:65px;}

</style>

<script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript"

src="https://googledrive.com/host/0By_AtKYt5PKPWWFZUXoyQ0N6b3c/"></script>

<script type="text/javascript">

var speed = 1000;

var pause = 3500;

$(document).ready(function(){

rpnewsticker();                

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_bsu_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>

B. Recent Post Statis (Tetap)

<style scoped='' type='text/css'>

ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0;padding:10px 0;transition:all .3s linear;}

ul.recent_posts_arlina li:last-child {border:0;}

.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 10px 0 0;overflow:hidden;z-index:2;position:relative;width:90px;height:62px;float:left}

ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}

.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}

ul.recent_posts_arlina li a{color:#2b427d;font-size:13px;font-weight:700;line-height:normal}

ul.recent_posts_arlina li a:hover{color:#138be6}

.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}

</style>

<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>

<script style='text/javascript'>

var numposts=5,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;

</script>

<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

5. Pastekan salah satu Kode Script diatas kedalam widge html/java script dan kemudian tekan timbol simpan

6. ketika anda sudah memastekan kode script diatas berarti anda  sudah menyelesaikan semua tahapan yang diperlukan tingga lihat tempilan blog anda dengan menekan tombol view blog.

Sekian saja gambaran/tutorial singkat tentang cara memasang widge recent post yang menarik dan ringan di blog anda semoga bisa widge ini mempercatik tampilan blognya. Semoga bermanfaat dan selamat mencoba dan terimakasih atas kunjungannya.

 Sumber Kode Script Arlina Design Simplify 2