11 Koleksi Menciptakan Script Widget Recent Post/ Postingan Terbaru Responsive Untuk Blogger

11 Koleksi Membuat Script Widget Recent Post/ Artikel Terbaru Responsive Untuk Blogger ini kami kumpulkan dari aneka macam sumber saat berburu script-script keren dan menarik, tidak eksklusif kami pakai mentah-mentah, tetapi dengan sedikit modifikasi sesuai cita-cita dan template blog kami, koleksi script widget Recent Post ini aku simpan, dan biasa saya pakai untuk mempercantik tampilan blog klien . Selain hal itu, widget recent posting /postingan terbaru ini juga dapat berfungsi menampilkan daftar postingan yang baru diterbitkan. Dengan begitu pengunjung blog anda akan mudah menyaksikan dan mengakses daftar artikel terbaru yang ada pada blog anda. Koleksi script Widget Recent Post keren, responsive dan  mewah    yang akan saya bagikan dalam artikel ini berjumlah 11 koleksi, untuk penerapannya pada blog sangatlah gampang, anda tinggal pilih rancangan widget Recent Post sesuai cita-cita, salin/copy script widget yang kami sediakan untuk ditempelkan di gadget HTML/JavaScript pada sidebar blog. Berikut 11 (sebelas) membuat Script Widget Recent Post/ Artikel Terbaru Responsive Untuk Blogger: 1. Script Widget Recent Post Keren ke-1 Oke, jikalau kami perkenalkan yang pertama, silahkan gunakan Script Widget Recent Post/ Artikel Terbaru berikut. Agar performa artikel modern blog anda dilihat pengunjung. Jika template anda banyak texture garis, coba deh gunakan isyarat ini. #recent-postswidth:auto;padding:0 10px;margin:0 auto;border:1px solid #ddd#recent-posts ul,#recent-posts limargin:5px;list-style-type: disc;list-style-position: inside;text-indent: -1em;#recent-posts atext-decoration:none #recent-posts a:hovertext-decoration:none;color:#d6d4d4#recent-posts liborder-top:0px solid #ddd;padding:0px#recent-posts li:first-childborder-top:none 2. Script Widget Recent Post Keren ke-2 Anda boleh memberi warna template blog dengan menggunakan instruksi yang satu ini.                     img.recent-post-thumbpadding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;    .recent-posts-container font-family:'Oswald', sans-serif;font-size:12px;    ul.recent-posts-container lilist-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%    ul.recent-posts-container counter-reset: countposts;list-style-type:none;padding:0;    ul.recent-posts-container li:before content: counter(countposts,decimal);counter-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-posts-container atext-decoration:none;    .recent-post-title margin-bottom:5px;    .recent-post-title a font-size:12px; text-transform: uppercase; color: #2aace3;    .recent-posts-details margin: 5px 0px 0px 92px;font-size:11px;    .recent-posts-details acolor: #777;    3. Script Widget Recent Post Keren ke-3 Koleksi ke-3 kami adalah Script Widget Recent Post/ Artikel Terbaru berikut ini, lumayan bisa dipakai untuk memperindah performa side kafe blog.                     img.recent-post-thumbwidth: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-posts-container list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;    ul.recent-posts-container li:nth-child(1n+0) background: #F49A9A; width: 100%    ul.recent-posts-container li:nth-child(2n+0) background: #FCD092; width: 95%    ul.recent-posts-container li:nth-child(3n+0) background: #FFF59E; width: 90%;    ul.recent-posts-container li:nth-child(4n+0) background: #E1EFA0; width: 85%;    ul.recent-posts-container li:nth-child(5n+0) background: #B1DAEF; width: 80%;    ul.recent-posts-container li padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;    .recent-posts-container a text-decoration:none;     .recent-posts-container a:hover color: #222;    .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;     4. Script Widget Recent Post Keren ke-4 Siapa yang tidak menggemari Script Widget Recent Post/ Artikel Terbaru ini? Saya pasti menyukainya, dan telah saya gunakan diblog saya lainnya.                   .recentpoststyle counter-reset: countposts;list-style-type: none;    .recentpoststyle a text-decoration: none;color: #49A8D1;    .recentpoststyle a:hover color: #000;    .recentpoststyle li:before content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;li.recent-post-titlemargin-bottom: 5px;padding: 0;    .recent-post-title a color: #444;text-decoration: none;font: bold 13px "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: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;    5. Script Widget Recent Post Keren ke-5 Jangan anggap remeh Script Widget Recent Post/ Artikel Terbaru yang satu ini. Sekali anda terapkan di blog, woo, blog anda akan mantul, elok betul. #hlrpsb a color: #000000;font-size:13px;text-transform:capitalize; .rctitles2 padding: 5px;margin-bottom: 5px;border-bottom: 1px dotted #cccccc;background:#fdaeae;border-radius: 10px; 6. Script Widget Recent Post Keren ke-6 Tidak ada kata tidak pada Script Widget Recent Post/ Artikel Terbaru nomor enam ini. Pasalnya, sangat mewah dan responsive. img.recent-post-thumb width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%; .recent-posts-container font-family: 'Gloria Hallelujah', cursive;  float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px; ul.recent-posts-container counter-reset: countposts;list-style-type: none; background: #fff; ul.recent-posts-container li:before content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px; ul.recent-posts-container li padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;  border-top: 2px solid #FCD6CB; ul.recent-posts-container border: 2px solid #FCD6CB; .recent-posts-container a text-decoration:none; .recent-posts-container a:hover color: #222; .post-date color:#e0c0c6; font-size: 11px; .recent-post-title a font-size: 14px;color: #616662; .recent-post-title padding: 6px 0px; .recent-posts-details a color: #888; .recent-posts-details padding-bottom: 5px; a.readmorelink color: #4DACE3; 7. Script Widget Recent Post Keren ke-7 Oke, bila kurang puas lagi, silahkan Script Widget Recent Post/ Artikel Terbaru berikut. Biar mantap tampilan blog anda dilihat pengunjung. Jika template anda banyak texture garis, coba deh gunakan arahan ini. img.recent-post-thumb padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%; .recent-posts-container font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px; ul.recent-posts-container li padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px; ul.recent-posts-container counter-reset: countposts;list-style-type: none; ul.recent-posts-container li:before content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef; .recent-posts-container a text-decoration:none; .recent-posts-container a:hovercolor: #4DACE3; .post-date color:#e0c0c6; font-size: 11px; .recent-post-title a font-size: 13px; text-transform: uppercase; color: #5C4D4D; .recent-post-title margin: 5px 0px; .recent-posts-details border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px; .recent-posts-details a color: #888; a.readmorelink color: #4DACE3; 8. Script Widget Recent Post Keren ke-8 Anda mampu menggunakan Script Widget Recent Post/ Artikel Terbaru koleksi nomor delapan kami ini. Blog anda akan terlihat bagus betul. Sebaiknya anda terapkan pada template yang warnanya rame. img.recent-post-thumbnailfloat:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff ul.recent-posts-wrap background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif; ul.recent-posts-wrap li:nth-child(1n+0) background: #FCD092; width: 94% ul.recent-posts-wrap li:nth-child(2n+0) background: #FFE0B4; width: 94% ul.recent-posts-wrap li:nth-child(3n+0) background: #FFF59E; width: 94%; ul.recent-posts-wrap li:nth-child(4n+0) background: #E1EFA0; width: 94%; ul.recent-posts-wrap li:nth-child(5n+0) background: #B1DAEF; width: 94%; ul.recent-posts-wrap li padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777; .recent-posts-wrap a text-decoration:none; .recent-posts-wrap a:hover color: #222; .post-date color:#e0c0c6; font-size: 11px; .recent-post-title a font-size: 14px;font-weight: bold;color: #444; .recent-post-title padding: 6px 0px; .recent-posts-details a color: #222; .recent-posts-details padding: 5px 0px 5px; Your browser does not support JavaScript! 9. Script Widget Recent Post Keren ke-9 (Model Gallery) Jika anda sedang Script Widget Recent Post/ Artikel Terbaru dengan penampilan yang mantap dan menarik, silahkan gunakan kode berikut. Kode ini cocok untuk blog anda yang magazine. /* CSS Recent Post Gallery Widget */.recent-grid padding:0;clear:both; .recent-grid:after content:"";clear:both;display:table; .recent-grid .galleryviewposition:relative;display:inline-block;margin:6px 0;overflow:hidden; .recent-grid .galleryview atext-decoration:none;float:left;position:relative;margin:0 6px .recent-grid .galleryview .ptitledisplay:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s .recent-grid .galleryview:hover .ptitlevisibility:visible;opacity:1 .recent-grid a imgbackground:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s .recent-grid a:hover img border-color:#bbb; 10. Script Widget Recent Post Keren ke-10 Script nomor sepuluh Widget Recent Post/ Artikel Terbaru dari kami ini, pantas buat anda terapkan diblog anda. Kode yang satu ini bisa nyambung dengan template yang minimalis. #hlrpsb a color: #000000;font-size:13px;text-transform:capitalize;.rctitles2 padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc; 11. Script Widget Recent Post Keren ke-11 Koleksi terakhir kami Script Widget Recent Post/ Artikel Terbaru sangat sesuai untuk anda. Kode yang satu ini cocok untuk template blog yang secara umum dikuasai putih, seperti Median UI, Viomagz Putih, Dll #hlrpsb a color: #000000;font-size:13px;text-transform:capitalize; .rctitles2 padding: 5px;margin-bottom: 5px;border-bottom: 1px dotted#cccccc;background:#f2f2f2; Demikian uraian lengkap 11 Koleksi Membuat Script Widget Recent Post/ Artikel Terbaru Responsive Untuk Blogger , supaya goresan pena ini berfaedah.
Sumber https://pakgalingging.blogspot.com