HTML

Cara Gampang Menciptakan Recent Post Ringan Dan Responsive Di Blog


Cara Membuat Recent Post di Blog - recent post merupakan widget yang berada di sisi kiri atau kanan blog yang menampilkan beberapa list artikel terbaru sobat..

Saya rasa setiap blog niscaya memiliki widget ini alasannya dari sisi SEO widget cukup ampuh untuk meningkatkan page view blog..

tidak lupa juga di dalam blog ijo gading aku juga memasang widget recent post yang aku letakan di bawah postingan..

Sebenarnya apa saja fungsi dari widget recent post dan seberapa besar pengaruhnya untuk meningkatkan skor SEO di blog.

Fungsi Recent Post Di Dalam Blog

Recent post berfungsi untuk meningkatkan page view dari sebuah blog, kita membutuhkan sesuatu yang menarik biar pengunjung blog bisa membuka lebih banyak lagi artikel yang kita buat.

dalam meningkatkan page view artikel yang kita buat maka kita tidak bisa lepas dengan yang namanya recent post atan yang bisa desebut artikel terbaru...

artikel terkait atau recent post ini sangat efektif untuk mengurangi skor bounce rate yang terlalu besar alasannya dengan bounce rate yang terlalu besar maka kualitas blog akan turun di mata google.

maka dari itu kita di tuntut bisa menyediakan list recent post artikel yang di mana tujuannya biar memudahkan pengunjung melihat artikel terbaru kita dan dibutuhkan akan membuka artikel tersebut...
jadi disini aku harapkan teman bisa untuk menciptakan sesuatu yang unik dan judul yang menggoda..

nah untuk menciptakan recent post tersebut kita memerlukan yang namannya widget sidebar yang biasa berada di kiri atau kanan blog...

setiap blog yang ada akan menampilkan majemuk widget biar tampilan blog terlihat yummy dan pastinya tidak membingungkan pengunjung.

Cara Membuat widget recent post di blog

pastikan teman sudah login di blog masing-masing..
  • pilih tata letak dan tambah gadget
  • pilih html/java script
  • silahkan isi nama dan copy script di bawa ini masukan ke dalam html/javascript dan simpan
 <div class="recentpoststyle"> <!--<script src="https://cdn.rawgit.com/Brando07/share/newbe/recent-post-seocips-1.js"></script>--> <script type='text/javascript'> function showlatestposts(a){for(var b=0;b<posts_no;b++){var e,c=a.feed.entry[b],d=c.title.$t;if(b==a.feed.entry.length)break;for(var f=0;f<c.link.length;f++)if("alternate"==c.link[f].rel){e=c.link[f].href;break}d=d.link(e);var g="... read more";g=g.link(e);var h=c.published.$t,i=h.substring(0,4),j=h.substring(5,7),k=h.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in c)var m=c.content.$t;else if("summary"in c)var m=c.summary.$t;else var m="";var n=/<\S[^>]*>/g;if(m=m.replace(n,""),document.write('<li class="recent-post-title">'),document.write(d),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(m.length<summary_chars)document.write(m);else{m=m.substring(0,summary_chars);var o=m.lastIndexOf(" ");m=m.substring(0,o),document.write(m+" "+g)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+l[parseInt(j,10)]+" "+k+" "+i+"</div>")}} </script> <script> 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> <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: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;} li.recent-post-title { padding: 5px 0px;} .recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;} .recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;} .post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;} .recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;} </style></div> 

dari script di atas, bab yang aku beri warna kuning tersebut yakni bab yang harus teman sesuaikan dengan kebutuhan...

bab tersebut yakni jumlah artikel yang ingin di tampilkan di bab sidebar...

sajian recent post ini memakai script yang tidak terlalu berat dan dan tidak terlalu memakan waktu untuk meng load nya..

jadi kecepatan blog teman tidak terganggu..
Baca : Cara mengetahui kecepatan tempalate blog
baiklah demkian tutorial tentang Cara Membuat Recent Post di Blog hari ini..

jikalau terdapat kesalahan dan pertanyaan silahkan jangan ragu untuk bertanya di kolom komentar..

semoga berhasil dan happy blogging

Subscribe to receive free email updates:

0 Response to "Cara Gampang Menciptakan Recent Post Ringan Dan Responsive Di Blog"

Posting Komentar