Mungkin sangat banyak sekali cara untuk supaya membuat sebuah widget Artikel Terbaru/Recent Post yang kini sudah cukup banyak blogger - blogger terkenal.
untuk membuat postingan terbarunya supaya tampil muncul seperti rekomendasi ke pengunjung supaya membaca artikel terbarunya ketika membaca artikel yang sedang dibacanya.
Menampilkan Widget Artikel Terbaru/Recent Post
Pertama sobat bisa menampilkan Artikel terbaru bisa memasangnya dengan widget bawaan blogger Caranya:
- Pergi ke Layout>Add Gadget/Widget>sobat pilih Feed
- Sobat masukan URL blog sobat masing - masing >Continue
- Ubah judulnya sesuai selera sobat seperti Postingan Terbaru/Artikel Terbaru
- Save
Kemudian Kedua menampilkannya dengan sebuah judul dan gambar/thumbnail
Seperti gambar saya di Paragraph pertama
Penasaran bagaimana cara memasangnya? langsung simak caranya berikut..
- Pergi ke Layout>Add Gadget>HTML Javascript Isi Judul "Artikel Terbaru" Kemudian copas kode berikut:
<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-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("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(p){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJmqiunxLTfn37scVPlHwNqk37nDEdygcu511-o8G73Ux61o_yI4eBHEHmFPXY0y0g-pUxLcpp1iTFIV4TlH-4wiPL6U8HvMEfJLi6tqGTm10d8kFcIyo3iTWjKlWIRzxHAc3ot3LYWMl/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="recent-posts-list">'),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="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),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">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://avistauser.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html"></a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
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:none{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:hover{color: #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;}
</style>
Jangan lupa tuk mengganti kode yang berwarna biru ganti dengan alamat url web sobat.
Jika sobat ingin menampilkan widget tersebut dengan berupa Kategori atau Label Tertentu berarti kodenya
<script src="/feeds/posts/default/-/label?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
- Sobat harus menambahkan Label kedalam HTML tersebut
- Kemudian Langkah terakhir sobat tinggal klik Save
Dan jika sobat kurang puas dengan tampilan tersebut sobat kunjungi aja di Blogger Guide dan Help Logger disana sobat akan menemukan beberapa jenis dan tampilan widgetnya beserta reviewnya
Selesai sudah Tutorial kita kali ini semoga dapat bermanfaat dan menambah wawasan anda mengenai tentang ilmu dan pengetahuan seputar blogger dan apabila sobat masih kurang mengerti mengenai artikel dan penjelasan saya ini sobat bisa langsung komplen melalui kolom komentar berikut atau bisa juga melalui Contact pribadi saya diatas header.. :-)
Wassalamualaikum Warrahmatullah
8 Comments
mantap tutor, ijin ane pasang di blog
ReplyDeleteWahh .. keren. Scriptnya masih work gan ^_^
ReplyDeletekeren mas, nice infonya tapi kalo label nya diganti nanti tampil gitu dan itu hanya dipasang dalam artikel yahkedua script diatas??
ReplyDeletekalo saya rubah template nya saya enggak bisa
salam kenal dari bunda ya
kunjungan dan ijin lihat lihat blognya.. dan ditunggu visitnya bareng bunda
Pasang kodenya di tata letak om bukan di artikel :)
DeleteKeren gan widgetnya
ReplyDeletecara ini ga work pak untuk wordpress
ReplyDeleteMantap, harus dicoba nih...
ReplyDeleteWelcome Bonus - Casino Promo Code 2021 | JTHub
ReplyDeleteThe Casino Bonus 서울특별 출장마사지 is the ultimate bonus code 대전광역 출장안마 for all new 고양 출장샵 online players. It offers you a 100% match bonus of up to $500 on the first deposit. It 아산 출장샵 includes a 창원 출장샵
Berkomentarlah Dengan Baik
Jangan Berbuat Tidak Sopan
Otomatis Akan Saya Spam
#Dilarang Pasang Link Aktif Apabila Mau Pasang Link Blog Sobat bisa dengan mengubah opsi commentnya ke NAMA/URL kemudian pasang nama dan URL web sobat, yang relevan pasti saya kunjung balik