Tutorial Blog

Tutorial Simple Membuat Recent Post Unik di Blogger

Setiap tutorial Blog pada saat ini sangat membantu sekali terutama untuk pemula yang mulai menyukai dunia Blogger. Terlebih banyak Tutorial SEO Friendly yang memanjakan pembacanya. Seperti halnya Tutorial Membuat Recent Post, Menulis Artikel SEO Friendly, SEO Friendly Images, Template SEO Friendly dan masih banyak lagi SEO Friendly lainnya. Sebelumnya kita cari tahu dulu tentang apa itu SEO Friendly?.

OK gan kali ini saya akan sedikit menjelaskan Arti dari SEO Friendly ini khusus buat yang belum tahu kepastiannya nya ya hee. Ada dua kata SEO dan Friendly Ok untuk arti dari SEO merupakan singkatan dari search engine optimization. Yaitu salah satu teknik yang digunakan dan diterapkan pada blog, maka hasilnya blog akan lebih mudah dan cepat terindeks di mesin pencarian.

Bahkan kalau diterapkan dengan benar dan tepat, hasilnya tentu menempati halaman teratas. Dan di urutan pertama di Search Engine Result Page. Arti kata Friendly yang dimaksud adalah ramah dan baik terhadap search engine. Jadi pada intinya SEO dan Friendly tidak dapat di pisahkan satu sama lainnya saling melengkapi dan membuat blog anda lebih baik tentunya.

Ok kali ini saya akan  membagikan tutorial simple membuat Recent Post unik di blogger. Cara berikut sangat simple gan anda nanti saya akan kasih link download yang berisikan  HTML/JavaScript. JavaScript tersebut bisa anda langsung pasang di Blog sobat jadi anda sebaiknya siapkan saja blogger seboat untuk nanti percobaannya.

Berikut Tutorial simple Membuat Recent Post unik di blog anda

Sebelum anda masuk di pembahasan lengkapnya terlebih dahulu mengetahui tentang Recent Post berikut. Recent post merupakan salah satu widget yang menampilkan artikel terbaru pada sebuah blog. Pada dasarnya blogspot tidak memiliki widget recent post bawaan. Jadi untuk anda yang ingin menampilkan artikel terbaru di blog, Anda perlu menambahkan widget recent post secara manual. Agar recent post bisa muncul di blogspot Anda wajib memasang widget tersebut.

Ada dua Cara Untuk Menampilkan Recent Post di dalam Blog Anda

Ada dua cara untuk membuat recent post, yang pertama anda bisa membuatnya langsung yaitu dengan Gadget Feed dan yang terakhir menggunakan code script. Yang dapat membedakan hanyalah dari segi tampilan yang menggunakan code script lebih unik dan untuk recent post Feed tampilannya sederhana. Untuk lebih lengkapnya simak tutorialnya di bawah ini sudah saya bahas mulai dari recent post feed hingga yang menggunakan code script.

1# Tutorial simple membuat Recent post dengan Gadget  Feed

Membuat rcent post

 

Pertama yang mesti anda lakukan adalah masuk ke akun google, dan masuk di situs blogger.com.

  • Setelah masuk di halaman blog anda selanjutnya anda klik bagian tata letak Blog.
  • Lalu klik tambahkan Gadget disini anda cari Gadget  Feed untuk membuat recent post anda.
  • Setelah anda menemukannya anda klik dan isikan link blogger anda.
  • Untuk pemasangan link bisa anda inputkan di bagian URL Feed klik lanjutkan untuk masuk di halaman selanjutnya.

Untuk konfigurasi Feed anda tentukan mulai dari judul dan jumlah halaman yang akan di tampilkan, di halaman konfigurasi terserah anda mau atur sesuai keinginan anda. Setelah konfigurasi feed selesai langkah terakhir anda klik simpan untuk melihatnya bisa anda masuk di blog sobat dan lihat hasilnya recent feed sudah tampil.

Loading...

Anda bisa melihat post terbaru anda di halaman recent post ini semua artikel akan tersusun sesuai jadwal tayang artikel anda.

2#Tutorial simple Membuat Recent Post dengan Code Script

recent-post-code-script

Untuk cara yang kedua ini sebenarnya sangat mudah dan simple anda gunakan, disini anda dapat memilih salah satu script yang anda sukai dan pastinya membuat tampilan recent post anda menjadi unik. Untuk cara memasangnya anda tinggal masuk di halaman tambahkan  Gadget selanjutnya anda klik di bagian HTML/JavaScript. Disini anda tinggal inputkan mulai dari judul dan isi Scriptnya, untuk script dapat anda isi dengan Script code di bawah ini berikut codenya.

 

Start of code

<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(h){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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),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>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),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 = false;
  var posts_date = true;
  var post_summary = true;
  var summary_chars = 70;
  </script>
  <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
  <a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://archivecomputer.blogspot.co.id/" rel="nofollow">Recent Posts Widget</a>
  <noscript>Your browser does not support JavaScript!</noscript>
  <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' 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-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-deta

ils {padding: 5px 0px 5px; }
  </style>

End Of Code

Untuk anda tinggal copy paste code script di atas dan anda bisa ganti di bagian link yang berwarna orange dengan link blog milik anda. Untuk anda yang ingin menampilkan hanya salah satu recent post yang tampil anda harus mengisi link lengkap artikel yang sudah anda tayangkan.
Begitu mudah bukan memasang recent post di blog anda dengan code script, terakhir anda simpan kodenya dengan klik simpan lihat hasilnya seperti gambar yang saya tampilkan di atas.

Berikut salah satu koleksi code script recent post unik yang sudah saya coba sebelumnya, disini bisa anda pilih salah satu yang tentunya cocok untuk blog yang anda gunakan:

1#Style

Membuat Recent Post

<div class="recentpoststyle">
  <script type="text/javascript">
  function showlatestposts(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++)if("alternate"==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=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var 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 src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
  </script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="http://archivecomputer.blogspot.co.id/" rel="nofollow">Recent Posts Widget</a>
  <noscript>Your browser does not support JavaScript!</noscript>
  <style type="text/css">
  .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-title{margin-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;}
  </style></div>

 

2#Style

Membuat Recent Post

<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(h){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://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),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>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),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;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://archivecomputer.blogspot.co.id/" rel="nofollow">Recent Posts Widget</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: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 li{list-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 a{text-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 a{color: #777;}

</style>

 

 3#Style

Membuat Recent Post

 <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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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" rel="nofollow"></script>
  <a style="font-size: 9px; color: #CECECE; float: right; margin-top: 5px;" href="http://archivecomputer.blogspot.co.id/a" rel="nofollow">Recent Posts Widget</a>
  <noscript>Your browser does not support JavaScript!</noscript>
  <link href='http://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah' 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-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;}
  </style>

 

Kesimpulan

Membuat Recent Post di blogger sangat mudah dan bisa dilakukan oleh pemula sekalipun, adapun caranya yaitu ada dua cara untuk menampilkan Recent Post di blog anda. Antara lain adalah dengan cara otomatis tanpa code script dengan Gaget Feed langsung di dashboard blogger anda. dan yang kedua dengan menggunakan HTML/Java Script yang bisa anda pasang langsung di blog anda tanpa ribet dan hanya perlu mengedit sedikit.

Untuk pemula bisa anda lakukan sendiri, karena saya juga sudah mencobanya dan hasilnya sudah kelihatan sangat mudah anda terapkan di blog anda. Salah satu fungsi utama membuat recent post adalah untuk menampilkan postingan artikel anda yang baru saja di tayangkan. Umumnya setiap template kalau anda membelinya terkadang sudah di pasang recent post tetapi untuk anda yang ingin mencoba dari awal bisa menerapkan tutorial simple membuat recent post ini.

Jadi buat agan-agan bisa di terapkan langsung ke blog sobat yang belum ada recent post nya, karena saya disini sudah membahas recent post yang unik untuk memperindah tampilan blog anda secara maksimal. Ok semoga bermanfaat untuk pembahasan tutorial simple membuat recent post unik ini, terimakasih.



Loading...

Tags
Baca selengkapnya

"Setiap step adalah ilmu dan saya sangat senang bisa berbagi ilmu dengan anda semua"

Arti