2 Cara Praktis Membuat Recet Post Keren dengan Gambar-Hello sob kali ini saya mau menyebarkan widget yang tidak kalah keren dan tentunya menjadi salah satu cara untuk menambah navigasi blog, sehingga pengunjung yang sedang membaca artikel tau ada konten baru. Baca Juga: Cara Membuat iklan Melayang Dengan Tombol Close Di Blogger
Maksud saya dengan menambah widget recent post atau widget artikel atau postiungan gres maka saat ada pengunjung blog yang tiba dari mesin pencarian pribadi menuju halaman postingan (Buka halaman depan/Home Page) ia akan tau bila ada konten gres yang mungkin ia belum baca tanpa harus membuka halaman depan. Baca Juga: Cara Membuat Recent Comments DI Blogger
Selain memudahkan pengunjung mengetahui konten baru, memasang widget recent post juga akan menawarkan efek yang bagus dan rapih tentunya, ada dua cara untuk menciptakan widget recent post yang pertama saya akan kasi recent post memakai gambar atau thumbnail dan yang ke 2 saya akan memakai cara dari bawaan widget blog tanpa gambar atau hanya judul saja.
Membuat Recent Post dengan Thumbnail
- Pertama login terlebih dahulu ke akun blogger Anda
- Pada halaman dashboard pilih Tata Letak
- Pilih Tambah Gadget
- Cari HTML/JavaScript
- Copy dan paste instruksi dibawah ini pada HTML/JavaScript
<style scoped='' type='text/css'>
/* Recent Post Widget */
#recentpostnav{width:100%;border:1px solid #585858;margin:0 auto}
#borpbox{margin:0}
.recentposarea{display:block;background:#fff;height:79px;border:1px solid #ddd;margin:5px 0;padding:10px}
.recentposarea img{float:left;background:#fff;border:1px solid #ddd;margin-right:8px;padding:4px;height:70px;width:70px}
.recentposarea h6,.recentposarea h6 a{text-decoration:none;margin:0;color:#111;font-size:13px!important;font-weight:700!important;}
.recentposarea:hover{background-color:#fefefe}
.recentposarea p{text-align:left;font-size:12px;margin:5px 0;color:#555;line-height:normal}
#loadrecentpost{font-family:Tahoma;color:#888;font-size:100px;letter-spacing:-10px;text-shadow:-5px 0 1px #444;text-align:center;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuVM4EBKBFdZumilcXBxQwgRSeNJJ5ZpMBQ8FqxNcT08Djt2xjQIv4fmVqvmoX-H8Up-PqfqAtYoxAF0XZqbjosbwVSlIiTL9o8GphR3P1PzRlsB1pMJBubHQyYYoUlmffn8O0sRPD5m8-/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#rpnavigation{color:#bbb;border:1px solid #ddd;font-family:Verdana;text-align:center;font-size:12px;margin:0}
#rpnavigation:hover{background-color:#fefefe}
#rpnavigation a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#rpnavigation span{padding:5px 10px}
#rpnavigation .next{float:right}
#rpnavigation .previous{float:left}
#rpnavigation .home{text-align:center}
#rpnavigation a:hover,#rpnavigation span.noactived{color:transparant!important}
</style>
<script type='text/j4vascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://WWW.GIRIBIG.com/";
var charac = 40;
var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB3j8YLfmf05yaYtfh1yVyU2VT-frx3eykugFVBVdaJN73wil4W-BCKYU5dvis3YOgLtt7kjSkQY_GIiqRkqmp7UnvLQGp7VJTBBR_nUpAhaU4XDKwdV6m6rnKe8ascwRjrl1c2vP2EPe3/s1600/no-image.png",s+="<div class='recentposarea'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("borpbox").innerHTML=s,s="",s+=urlprevious?"<a href='j4vascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='j4vascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='j4vascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("rpnavigation").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("borpbox").innerHTML="<div id='loadrecentpost'></div>",document.getElementById("rpnavigation").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/j4vascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id="borpbox"></div>
<div id="rpnavigation"></div>
- Terakhir simpan
Note:
Kode yang berwarna hijau yaitu jumlah artikel yang tampil, silahkan sesuaikan dengan kebutuhan dan instruksi yang berwarna merah silahkan ganti dengan alamat blog Anda
Membuat Recent Post Tanpa Thumbnail
- Login ke akun blogger Anda
- Pada halaman dashboard pilih Tata Letak
- Klik Tambah Gadget
- Pilih Feed
- Masukkan alamat Feed Anda, teladan aciknadzirah.blogspot.comfeeds/posts/default (gantu instruksi yang bernwarna merah dengan URL blog Anda) kemudian klik Lanjut
- Nah kini Anda yanggal mengatur tampilan nya sesuai yang diinginkan
- nah selanjutnya tinggal lihat deh hasilnya, teladan punya saya menyerupai ini:
Bagaiman berdasarkan Anda bagusan yang mempunyai gambar atau tampilan default dari blogger sendiri? Semuanya tergantu Anda mana yang cocok untuk tema Anda tentunya. Jika masih ada pertanyaan silahkan olok-olokan pertanyaan Anda pada kotak komentar dibawah ini.
Untuk Anda yang ingin berguru menciptakan blog biar blog Anda populer dan mendapat banyak penghasilan setiap bulannya, silahkan kunjungi halaman Panduan Membuat Blogger Dan Cara Optimasi SEO
Dan untuk Anda yang ingin mempunyai tampilan blog menjadi lebih keren dan menarik dimata pengunjung supaya pengunjung Anda betah berlama-lama tinggal di blog Anda, silahkan kunjungi halaman Kumpulan Widget Keren Untuk Mempercantik Blog
Sumber http://www.giribig.com/
