Tips Membuat Widget Received Posting Unik Dan Simpel

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?.

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.

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

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.

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

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.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfgveXcBk_arP-82hYUwz3VrvOOY7O9fMCxrGtF3VrZkZ3ipgFX__wsmzAUDLU-T5BLS6KINCeoK0hL_EuTBnQRqsYW05GhQsA0GSYxfGa4bVmatfklz7ZvSOtsWqGbvhiVv3mgmQ2cp4t/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="https://www.idniez.com/" 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>

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.

(Baca ; Script Recent post tampilan berbeda)

 

Baca juga: