Cara Membuat Recent Post Dengan Gambar Dan Efek Berputar

Widget recent post keren dan cantik dengan efek gambar berputar - 

Setelah postingan terdahulu tentang cara membuat daftar isi efek jquery Accordion keren dan otomatis. Kali ini saya akan membagikan sebuah widget yang berfungsi untuk menampilkan postingan secara up to date atau berdasarkan urutan tanggal publikasinya. Yup namanya adalah Recent Post.

Apabila pengunjung sedang berada di suatu artikel posting kita namun dia ingin mengetahui Postingan terbaru tanpa melalui halaman Homepage maka pengunjung akan mencari keberadaan Recent Posts yang terpasang di salah satu Widget Anda. Jadi pengunjung setia blog anda tidak akan ketinggalan info bisnis, produk, tutorial ataupun berita terbaru dari blog anda. Hal ini tentunya juga akan menambah pageviews dan menaikan nilai SEO blog anda karena penayangan halaman postingan yang merata.

Recent post keren dan cantik ini akan membuat tampilan pada blog Anda semakin keren dan bagus. Karena Recent Post ini ditambahi dengan thumbnail berbentuk bulat dan efek bisa berputar ketika sebuah mouse digeser kearahnya maka gambar tersebut akan berputar... Untuk live demonya lihat aja langsung widget Entri Terbaru blog ini. 

Bagaimana cara membuat recent post ini? langkahnya pun sangat cepat dan mudah tanpa mengedit template. Ikuti saja langkah-langkah di bawah ini dengan benar.

• Login Ke akun Blogger
• Klik Tata Letak --> Tambah Gadget --> HTML/Javascript.
• Copy paste Code di bawah ini :

<style type="text/css"> /*<![CDATA[*/ img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px} img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6} .label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px} .label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none} .label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888} #mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important} #mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important} #mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px} #mdjumplink a:hover{color:#888!important;text-decoration:none} #mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800} #mdcomments:hover{background:#F4A557;text-decoration:none} /*]]>*/ </style> <script type='text/javascript'> //<![CDATA[ var numposts = 4; var showpostthumbnails = true; var displaymore = true; var displayseparator = true; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 80; //]]> </script> <script type="text/javascript" src=" http://yourjavascript.com/12103314717/recent-post-cantik.js"></script> <script src='http://obatherbal-2u.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>

• Kustomisasi:

Keistimewaan dari widget ini anda bisa merubah tampilan recent-post disesuaikan dengan kebutuhan Anda dengan mudah, tinggal mengganti karakter true/ false, atau jumlahnya. 

var numposts = 4; (Jumlah postingan yang akan ditampilkan)
var showpostthumbnails = true; (Gambar postingan)
var displaymore = true; (More Button)
var showcommentnum = false; (Jumlah komentar)
var showpostdate = false; (Tanggal postingan)
var showpostsummary = false; (Ringkasan postingan)
var numchars = 80; (jumlah karakter dalam ringkasan posting)

• Ganti http://obatherbal-2u.blogspot.com  dengan URL blog anda.
• Jika ingin menampilkan recent post berdasarkan kategori/ label tertentu ganti http://obatherbal-2u.blogspot.com/feeds/posts/default dengan URL blog anda/feeds/posts/default/-/NAMA LABEL
• Terakhir tinggal Anda Save dan lihat hasilnya.

Itulah tadi cara pembuatan recent posts keren, cepat dan mudah. Semoga dapat bermanfaat dan selamat mencoba !

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: