5 Widget Recent Post Keren Untuk Blog

5 Widget Recent Post Keren Untuk Blog - Manfaat widget bagi blog adalah sebagai tools dalam mempermudah pengunjung memahami isi blog. Widget juga berfungsi sebagai alat mempercantik sebuah blog.

Widget adalah sekumpulan kode script yang dapat diintegrasikan ke dalam web/blog tanpa memerlukan tambahan kode atau prosedur lain. Tinggal copy paste saja.

Widget blog ada yang bawaan ada juga yang customize dan bisa kita pasang secara mudah dan gratis. Untuk widget yang bawaan kita bisa lihat di Tata Letak--> Tambah Gadget. Di situ bisa kita melihat dan memilihnya. Untuk yang customize biasanya banyak diberikan secara gratis oleh web-web penyedia widget, meski ada juga yang berbayar.

Di sini saya akan berbagi widget keren, menurut saya, yaitu widget Recent Post. Widget ini bisa digunakan oleh Sobat semua guna memperindah blog. Ada 5 gaya atau model, silahkan Sobat pilih mana yang cocok dan sesuai dengan karakter blog Anda.

Model 1

Widget Recent Post Model 1

<script type = "text / javascript">
showlatestpostswiththumbs fungsi (t) {document.write ( '<ul class = "baru-baru ini-posting-container">'); for (var e = 0; e <posts_no; e ++) { var r, n = t.feed.entry [e], i = n.title $ t;. if (e == t.feed.entry.length) break; for (var o = 0; o <n.link .length; o ++) {if ( "balasan" == n.link [o] .rel && "text / html" == n.link [o] .type) var l = n.link [o] .title, m = n.link [o] .href; if ( "alternatif" == n.link [o] .rel) {r = n.link [o] .href; break}} var p = n.published. $ t, f = p.substring (0,4), g = p.substring (5,7), v = p.substring (8,10), w = baruclass = "baru-baru ini-posting-daftar"> '), 1 == showpoststhumbs && document.write (' <a href="'+r+'"> <img class = "baru-baru ini-pasca-thumb" src = " '+ u +' "/> </a> '), document.write (' <div class =" baru-baru ini-post-title "> <a Target href="'+r+'" ="_top"> '+ i +" </ a > </ div> ")," isi "di n) var A = n.content $ t;. else if (" Ringkasan "di n) var A = n.summary $ t;. yang lain var A =" "; var y = A.lastIndexOf ( ""); A = A.substring (0, y), document.write (A + "...")} var _ = "", $ = 0; document.write ( '<br > <div class = "baru-baru ini-posting-rincian"> '), 1 == posts_date && (_ = _ + w [parseInt (g, 10)] + "" + v + "" + f, $ = 1), 1 == readmorelink && (1 == $ && (_ + = "|"), _ = _ + '<a href="'+r+'" class="url" Target ="_top"> Baca lebih lanjut </a> ', $ = 1), 1 == showcommentslink && (1 == $ && (_ + = "Situs"), "1 Komentar" == l && (l = "1 Comment"), "0 Comments" == l && (l = "Tidak ada Komentar"), l = '<a href = "' + m + '" Target type = "text / javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = false; var posts_date = true; var post_summary = true; var summary_chars = 70; </ script> <script style = "font-size: 9px; warna: #CECECE; margin-top: 10px;" href = "http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for- blogger.html "rel =" nofollow "> Recent Widget </a> <noscript> Browser Anda tidak mendukung JavaScript </ noscript>! <link href = 'http:? //fonts.googleapis.com/css keluarga = Ubuntu + Publikasi 'rel =' stylesheet 'type =' text / css '/> <style type = "text / css"> img.recent-post-thumb {width: 50px; height: 50px; float: right; margin: 5px -5px 0px 0px; -webkit-border-radius: 50%; - moz-border-radius: 50%; border-radius: 50%; padding: 3px; background: # fff} ul.recent-posting-kontainer { list-style-type: none; background: # fff; padding: 0px; font yang: 12px 'Ubuntu kental', sans-serif; margin: 5px 0px 5px 0px;} ul.recent-posting-kontainer li: n-anak ( 1n + 0) {background: # F49A9A; width: 100%} ul.recent-posting-kontainer li: n-anak (2n + 0) {background: # FCD092; width: 95%} ul.recent-posting-kontainer li: n-anak (3n + 0) {background: # FFF59E; width: 90%;} ul.recent-posting-kontainer li: n-anak (4n + 0) {background: # E1EFA0; width: 85%;} ul.recent-posting-kontainer li: n-anak (5n + 0) {background: # B1DAEF; width: 80%;} ul.recent-posting-kontainer li {padding: 5px 10px; list-style-type: none; margin: 0 0 -5px; color: # 777;} .recent-posting-wadah {text-decoration: none; } .recent-Posting-wadah: hover {color: # 222;} .post-date {color: # e0c0c6; font-size: 11px; } .recent-Post-judul {font-size: 14px; color: # 444; font-weight: bold;} .recent-post-title {padding: 6px 0px;} .recent-posting-detail a {color: # 222;}.recent-posting-rincian {padding: 5px 0px 5px; } </ Style>

Model 2

Widget Recent Post Model 2

<div class = "recentpoststyle">
<script type = "text / javascript">
showlatestposts fungsi (e) {for (var t = 0; t <posts_no; t ++) {var r, s = e.feed.entry [t ], n = s.title $ t;. if (t == e.feed.entry.length) break; for (var a = 0; a <s.link.length; ++ a) jika ( "alternatif" == s.link [a] .rel) {r = s.link [a] .href; break} n = n.link (r); var i = "... read more"; i = i.link (r );. var l = s.published $ t, o = l.substring (0,4), u = l.substring (5,7), c = l.substring (8,10), m = baru . s) var d = s.content $ t; else if ( "Ringkasan" di s) var d = s.summary $ t;. yang lain var d = ""; var v = / <\ S [^>] * > / g; if (d = d.replace (v, ""), document.write ( '<li class = "baru-baru ini-post-title">'), document.write (n), document.write ( ' </ li> <div f = d.lastIndexOf ( ""); d = d.substring (0, f), document.write (d + "" + i)} document.write ( "</ div>"), 1 == posts_date && document.write ( '<div class = "post-date">' + m [parseInt (u, 10)] + "" + c + "" + o + "</ div>")}}
</ script>
<script type = " text / javascript ">
var posts_no = 5; var posts_date = true; var post_summary = true; var summary_chars = 80; </ script>
<script
style = "font-size: 9px; warna: #CECECE; margin-top: 10px;" href = "http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for- blogger.html "rel =" nofollow "> Recent Widget </a>
<noscript> Browser Anda tidak mendukung JavaScript </ noscript>!
<style type =" text / css ">
.recentpoststyle {kontra-ulang: countposts; list-style-type: none;}
.recentpoststyle {text-decoration: none; color: # 49A8D1;}
.recentpoststyle a: hover {color: # 000;}
.recentpoststyle li: sebelum {content: counter (countposts, desimal ); kontra-increment: countposts; float: left; z-index: 1; position: relative; font-size: 15px; font-weight: bold; color: # fff; background: # 69B7E2; margin: 13px 5px 0px 5px; padding: 0;}
.recent-post-judul {color: # 444; text-decoration: none; font yang: 13px berani "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; }
.post-date {font-size: 11px; color: # 999; margin: 5px 0px 15px 32px;}
.recent-post-summ {border-left: 1px solid # 69B7E2; color: # 777; padding: 0px 5px 0px 20px; margin-left: 10px; font yang: 15px Garamond, Baskerville, "Baskerville Old Face", "Hoefler Teks", "Times New Roman", serif;}
</ style> </ div>

Model 3

Widget Recent Post Model 3

<script type = "text / javascript"> showlatestpostswiththumbs fungsi (t) {document.write ( '<ul class = "baru-baru ini-posting-container">'); for (var e = 0; e <posts_no; e ++) { var r, n = t.feed.entry [e], i = n.title $ t;. if (e == t.feed.entry.length) break; for (var o = 0; o <n.link .length; o ++) {if ( "balasan" == n.link [o] .rel && "text / html" == n.link [o] .type) var l = n.link [o] .title, m = n.link [o] .href; if ( "alternatif" == n.link [o] .rel) {r = n.link [o] .href; break}} var p = n.published. $ t, f = p.substring (0,4), g = p.substring (5,7), v = p.substring (8,10), w = baruclass = "baru-baru ini-posting-daftar"> '), 1 == showpoststhumbs && document.write (' <a href="'+r+'"> <img class = "baru-baru ini-pasca-thumb" src = " '+ u +' "/> </a> '), document.write (' <div class =" baru-baru ini-post-title "> <a Target href="'+r+'" ="_top"> '+ i +" </ a > </ div> ")," isi "di n) var A = n.content $ t;. else if (" Ringkasan "di n) var A = n.summary $ t;. yang lain var A =" "; var y = A.lastIndexOf ( ""); A = A.substring (0, y), document.write (A + "...")} var _ = "", $ = 0; document.write ( '<br > <div class = "baru-baru ini-posting-rincian"> '), 1 == posts_date && (_ = _ + w [parseInt (g, 10)] + "" + v + "" + f, $ = 1), 1 == readmorelink && (1 == $ && (_ + = "|"), _ = _ + '<a href="'+r+'" class="url" Target ="_top"> Baca lebih lanjut </a> ', $ = 1), 1 == showcommentslink && (1 == $ && (_ + = "Situs"), "1 Komentar" == l && (l = "1 Comment"), "0 Comments" == l && (l = "Tidak ada Komentar"), l = '<a href = "' + m + '" Target type = "text / javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = true; var posts_date = true; var post_summary = true; var summary_chars = 40; </ script> <script style = "font-size: 9px; warna: #CECECE; margin-top: 10px;" href = "http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for- blogger.html "rel =" nofollow "> Recent Widget </a> <noscript> Browser Anda tidak mendukung JavaScript </ noscript>! <link href = 'http:? //fonts.googleapis.com/css keluarga = Oswald 'rel =' stylesheet 'type =' text / css '/> <style type = "text / css">img.recent-post-thumb {padding: 2px; width: 65px; height: 65px; float: left; margin: 0px 10px 10px; border: 1px solid # 69B7E2;}.recent-posting-kontainer {font-family: 'Oswald', sans-serif; font-size: 12px;} ul.recent-posting-kontainer li {list -gaya-type: none; margin-bottom: 10px; font-size: 12px; float: kiri; width: 100%} ul.recent-posting-kontainer {kontra-ulang: countposts; list-style-type: none; padding: 0;} ul.recent-posting-kontainer li: sebelum {content: counter (countposts, desimal); kontra-increment: countposts; z-index: 1; position: absolute; left: 0px; font-size: 13px ; font-weight: bold; color: # fff; background: # 69B7E2; line-height: 25px; height: 25px; width: 25px; text-align: center; -webkit-border-radius: 50%; - moz- border-radius: 50%; border-radius: 50%;} .recent-posting-wadah {text-decoration: none;} .recent-post-title {margin-bottom: 5px;} .recent-post-title a {font-size: 12px; text-transform: huruf besar; color: # 2aace3;} .recent-posting-rincian {margin: 5px 0px 0px 92px; font-size: 11px;} .recent-posting-detail a {color: # 777;} </ style>

Model 4

Widget Recent Post Model 4

<script type = "text / javascript"> showlatestpostswiththumbs fungsi (t) {document.write ( '<ul class = "baru-baru ini-posting-container">'); for (var e = 0; e <posts_no; e ++) { var r, n = t.feed.entry [e], i = n.title $ t;. if (e == t.feed.entry.length) break; for (var o = 0; o <n.link .length; o ++) {if ( "balasan" == n.link [o] .rel && "text / html" == n.link [o] .type) var l = n.link [o] .title, m = n.link [o] .href; if ( "alternatif" == n.link [o] .rel) {r = n.link [o] .href; break}} var h = n.published. $ t, f = h.substring (0,4), w = h.substring (5,7), v = h.substring (8,10), A = baruclass = "baru-baru ini-posting-daftar"> '), 1 == posts_date && document.write (' <div class = "post-date"> '+ A [parseInt (w, 10)] + "" + v + "" + f + "</ div>"), 1 == showpoststhumbs && document.write ( '<a href="'+r+'"> <img class = "baru-baru ini-pasca-thumb" src = "' + u + '" /> < /a>'),document.write('<div class = "baru-baru ini-post-title"> <a Target href="'+r+'" ="_top"> '+ i + "</a> </ div > "); var g =" ", k = 0; document.write ( '<div class =" baru-baru ini-posting-rincian ">'), 1 == showcommentslink && (1 == k && (g + =" Situs ")," 1 Komentar "== l && (l =" 1 Comment ")," 0 Comments "== l && (l =" Tidak ada Komentar "), l = '<a href ="' + m + ' "target = "_top"> '+ l + "</a>", g + = l, k = 1), 1 == readmorelink && (1 == k && (g + = "|"), g = g +' <a class = "readmorelink "href =" '+ r +' "class =" url "target =" _ top "> Baca type = "text / javascript"> var posts_no = 5; var showpoststhumbs = false; var readmorelink = true; var showcommentslink = true; var posts_date = true; </ script> <script style = "font-size: 9px; warna: #CECECE; float: right; margin-top: 5px;" href = "http://helplogger.blogspot.com/2014/11/5-cool-recent-post- widget-untuk-blogger.html "> Recent widget </a> <noscript> Browser Anda tidak mendukung JavaScript </ noscript>! <link href = 'http:? //fonts.googleapis.com/css keluarga = Oswald 'rel =' stylesheet 'type =' text / css '/> <style type = "text / css"> img.recent-post-thumb {padding: 2px; width: 35px; height: 35px; float: right; margin yang : -14px 0px 0px 5px; border: 1px solid # cea5ac; border-radius: 10%;} .recent-posting-kontainer {font-family: 'Oswald', sans-serif; float: left; width: 100%; min-height: 70px; margin: 5px 0px 5px 0px; padding: 0; font-size: 12px;}ul.recent-posting-kontainer li {padding: 5px 0px; min-height: 65px; list-style-type: none; margin: 0px 10px 5px 35px;} ul.recent-posting-kontainer {kontra-ulang: countposts; list-style-type: none;} ul.recent-posting-kontainer li: sebelum {content: counter (countposts, desimal); kontra-increment: countposts; z-index: 2; position: absolute; kiri: 5px; font-size: 16px; color: # 4D4D4D; background: # F7F7F7; padding: 14px 9px; border: 1px #efefef padat;} .recent-posting-wadah {text-decoration: none; } .recent-Posting-wadah: hover {color: # 4DACE3;} .post-date {color: # e0c0c6; font-size: 11px; } .recent-Post-judul {font-size: 13px; text-transform: huruf besar; color: # 5C4D4D;} .recent-post-title {margin: 5px 0px; } .recent-Posting-rincian {border-top: 4px solid # AC707A; margin-top: 5px; padding-top: 5px;} .recent-posting-detail a {color: # 888;} a.readmorelink {color: # 4DACE3;} </ style>

Model 5

Widget Recent Post Model 5

<script type = "text / javascript"> showlatestpostswiththumbs fungsi (t) {document.write ( '<ul class = "baru-baru ini-posting-container">'); for (var e = 0; e <posts_no; e ++) { var r, n = t.feed.entry [e], i = n.title $ t;. if (e == t.feed.entry.length) break; for (var o = 0; o <n.link .length; o ++) {if ( "balasan" == n.link [o] .rel && "text / html" == n.link [o] .type) var l = n.link [o] .title, m = n.link [o] .href; if ( "alternatif" == n.link [o] .rel) {r = n.link [o] .href; break}} var h = n.published. $ t, f = h.substring (0,4), w = h.substring (5,7), v = h.substring (8,10), A = baruclass = "baru-baru ini-posting-daftar"> '), 1 == posts_date && document.write (' <div class = "post-date"> '+ A [parseInt (w, 10)] + "" + v + "" + f + "</ div>"), 1 == showpoststhumbs && document.write ( '<a href="'+r+'"> <img class = "baru-baru ini-pasca-thumb" src = "' + u + '" /> < /a>'),document.write('<div class = "baru-baru ini-post-title"> <a Target href="'+r+'" ="_top"> '+ i + "</a> </ div > "); var g =" ", k = 0; document.write ( '<div class =" baru-baru ini-posting-rincian ">'), 1 == showcommentslink && (1 == k && (g + =" Situs ")," 1 Komentar "== l && (l =" 1 Comment ")," 0 Comments "== l && (l =" Tidak ada Komentar "), l = '<a href ="' + m + ' "target = "_top"> '+ l + "</a>", g + = l, k = 1), 1 == readmorelink && (1 == k && (g + = "|"), g = g +' <a class = "readmorelink "href =" '+ r +' "class =" url "target =" _ top "> Baca type = "text / javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = true; var posts_date = true; </ script> <script src = "/ feed / posts / default orderby? = diterbitkan & alt = json-in-script & callback = showlatestpostswiththumbs "rel =" nofollow "> </ script> <style =" font-size: 9px; warna: #CECECE; float: right; margin-top: 5px; "href = "http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel = "nofollow"> Recent Widget </a> <noscript> Browser Anda tidak tidak mendukung JavaScript </ noscript>! <link href = 'http:? //fonts.googleapis.com/css keluarga = Lobster | Gloria + Haleluya' rel = 'stylesheet' type = 'text / css' /> <style type = "text / css">img.recent-post-thumb {width: 50px; height: 50px; float: right; margin: -4px -35px 0px 0px; border: 4px solid # FCD6CB; border-radius: 100%; } .recent-posting-kontainer {font-family: 'Gloria Hallelujah', kursif; float: left; width: 100%; min-height: 55px; margin: 5px 0px 5px 0px; padding: 0; font-size: 12px ;} ul.recent-posting-kontainer {kontra-ulang: countposts; list-style-type: none;background: # fff; } Ul.recent-posting-kontainer li: sebelum {content: counter (countposts, desimal); kontra-increment: countposts; z-index: 2; position: absolute; kiri: -20px; font-size: 16px; color: # 616662; background: # FCD6CB; padding: 14px 9px; border-radius: 100%; margin-top: 15px;} ul.recent-posting-kontainer li {padding: 5px 0px; min-height: 50px; list-style-type: none; margin: -2px 5px 5px 5px; border-top: 2px solid # FCD6CB;} ul.recent-posting-kontainer {border: 2px solid # FCD6CB; } .recent-Posting-wadah {text-decoration: none; } .recent-Posting-wadah: hover {color: # 222;} .post-date {color: # e0c0c6; font-size: 11px; } .recent-Post-judul {font-size: 14px; color: # 616662;} .recent-post-title {padding: 6px 0px;} .recent-posting-detail a {color: # 888;} .recent -posts-rincian {padding-bottom: 5px;} a.readmorelink {color: # 4DACE3;} </ style>

CARA MEMASANG WIDGET RECENT POST DI BLOG

Pemasangannya sangat mudah. Sobat ikuti langkah-langkahnya ya.

Masuk ke dasboard blog Anda
Klik Tata Letak/Layout
Klik Add a Gadget
Pilih HTML/JavaScript
Pastekan kode widget Recent Post yang Sobat pilih di atas
Simpan

Taraaaa...Widget Recent Post keren sudah terpasang.

Penggunaan widget dalam blog selain mempercantik blog, mempermudah pembaca, juga bisa meningkatkan kreatifitas si mpunya blog.

Meski begitu, saya belum menemukan fakta bahwa widget bisa membantu blog Anda menjadi page one di mesin pencari. Rutinlah update postingan, dan optimasi yang bisa mendongkrak blog Anda di mesin pencari.