Selasa, 28 Juni 2016

Widget Recent Post atau Artikel Terbaru Responsive

Widget mrupakan sebuah elemen yang ada di dalam sebuah situs . widget bisa berupa CSS,HTML maupun javascript . di blogger sobat dapat mengakses widget itu sendiri di bagian tata letak.jika sebelumnya sobat sudah memiliki blog maka tentunya sobat ingin blog nya tampak cantik dan tersedia beberapa elemen yang memudahkan pengunjung dalam menjelajah blog sobat.disini saya akan membagikan sebuah widget Recent Post , dimana di dalam widget itu sendiri terdapat daftar artikel terbaru dari blog sobat.Widget Recent post ini merupakan buatan dari Arlina Design yang kemudian saya jadikan tutorial di blog ini agar bagi kalian yang kebingungan bagaimana sih cara membuat widget artikel terbaru atau Recent Post di blogger tidak kebinguungan lagi karena adanya tutorial ini. Oke langsung saja tutorial memasnag Widget Recent Post atau Artikel Terbaru Responsive :

  • Pastikan sobat sudah login akun google terlbih dahulu kemudian klik tata letak

  • kemudian klik tambahkan gadget dimana posisi yang kalian inginkan ( misalkan sobat ingin memasang di sidebar maka klik tambahkan gadget pada bagian sidebar di tata letak )
  •  maka akan muncul jendela baru , isilah data data seperti judul widget . untuk konten isi dengan Script di bawah ini :



<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;margin:0;padding:10px 0;position:relative;width:100%}
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:62px;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;}
.recent_posts_arlina strong {font-size:13px;}
ul.recent_posts_arlina li a{color:#000;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://rawgit.com/bloggercss/bcss/master/recentpost'></script>
<script style='text/javascript'>
var numposts=5,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!0,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>



  • Kemudian klik Simpan . Maka lihat lah di blog sobat jika berhasil sesuai prosedur maka akan tampil seperti ini


Sekian Tutorial Cara Membuat Widget Recent Post atau Artikel Terbaru Responsive . Kurang lebih nya saya mohon maaf. Apabila ada perntayaan silahkan komentar di bawah ini.
Request Tutorial ?
Email us : atbcss@gmail.com
Dengan subject Request Tutorial

#SalamBlogger

Blogger CSS Tutorial merupakan sebuah situs blog yang menyediakan Tutorial dan Tips Nge Blog gratis. disajikan dalam bentuk artikel disertai dengan gabar dan video agar mudah di pahami.

Aturan Berkomentar :
[-] Berkomentar Sesuai Topik
[-] Berkata Sopan
[-] Tidak Menyinggung SARA/Pornografi/kekerasan
[-] Tidak Menaruh Link Aktif
EmoticonEmoticon