Sunday, November 22, 2015

Kostumisasi Recent Post Blogger Widget

recent post blogger widget
Modifikasi design widget blogger menjdi lebih atraktif tentunya membuat daya tarik tersendiri untuk sebuah blog agar terus dikunjungi. Nah untuk membuat design blog berbeda dengan yang lain kita bisa mengatur beberapa element yang ada di blogger terutama sekali adalah widget. Karena yang paling umum dipasang dalam sebuah halaman depan blog kebanyakan adalah widget, baik itu popular post, recent post, label de el el.

Dengan menambahkan sedikit sentuhan saja pada CSS tanpa harus merubah fungsi javascript yang ada pada widget blogger kita sudah bisa membuat tampilan menjadi sedikit berbeda dan cantik. Nah untuk artikel kali ini saya akan memberikan contoh modifikasi widget recent post ala samsury blog.

Baca Juga :
Popular Post Efek Animasi Number
Popular Post Efek Snippet Sliding
Random Post Efek Modal Jquery UI

DEMO


img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background:#fafafa}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; border:5px solid rgba(255,255,255,0.5);width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; border:5px solid rgba(255,255,255,0.5); width: 100%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; border:5px solid rgba(255,255,255,0.5); width: 100%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; border:5px solid rgba(255,255,255,0.5); width: 100%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF;border:5px solid rgba(255,255,255,0.5); width: 100%;}
ul.recent-posts-container li:nth-child(6n+0) {background: #A2DED0;border:5px solid rgba(255,255,255,0.5); width: 100%;}
ul.recent-posts-container li:nth-child(7n+0) {background: #68C3A3;border:5px solid rgba(255,255,255,0.5); width: 100%;}
ul.recent-posts-container li:nth-child(8n+0) {background: #90C695;border:5px solid rgba(255,255,255,0.5); width: 100%;}
ul.recent-posts-container li:nth-child(9n+0) {background: #95A5A6;border:5px solid rgba(255,255,255,0.5); width: 100%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #555;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }

<script style="text/javascript" src="https://googledrive.com/host/0B0QTgfBgnob0QWgwcGpIV1BtMnc"></script>
<script style="text/javascript">
var posts_no = 9;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="https://url.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">


NOTE :
  • 1. var posts_no: 9; mengatur jumlah artikel yang akan ditampilkan
  • 2. var summary_chars = 70; Untuk mengatur jumlah karakter snippet yang ditampilkan
  • 3. url.blogspot.com ganti dengan url blog anda
  • 4. untuk mengubah ukuran widget sesuai sidebar yang anda gunakan silakan ganti ukuran width 100%  pada .recent-posts-container sesuai keinginan.