Cara Membuat Widget Artikel Terbaru di Blog

ALFA ARTS - Cara Membuat Widget Artikel Terbaru di Blog Widget artikel terbaru di blog adalah salah satu widget penting untuk meningkatkan jumlah views, ditambahlagi jika blog sobat adalah blog 1 niche ( 1 topik yang terkait saja) pasti pengunjung akan semakin betah berlama lama di blog sobat.

Nah fungsi lain dari widget ini adalah sebagai pengganti related post yang biasanya tidak muncul pada blog, widget ini mirip dengan related post hanya saja yang ditampilkan adalah artikel terbaru bukan artikel yang terkait saja.

Ada banyak cara untuk membuat widget artikel terbaru ini, yaitu dengan menggunakan script, javascript, html/php, dan juga bawaan dari blog sendiri, disini saya akan memberikan dua contoh saja cara untuk memasang widget artikel terbaru pada blog, dan hasilnya kurang lebih seperti ini.

CARA 1. Dengan Feed Bawaan Blogger

#Langkah 1

Pastikan blog sobat telah terdaftar di feed google, jika belum silahkan daftar terlebih dahulu, setelah terdaftar masuk ke blogger seperti biasa.

#Langkah 2
Masuk ke Tata Letak > Tambah Gedget, dan cari menu Feed.

#Langkah 3
Masukan URL Feed sobat, dan klik Lanjutkan.

#Langkah 4
Silahkan atur widget sesuai yang sobat inginkan, bisa juga menambahkan tanggal dan pembuat, terkahir klik simpan.

CARA 2. Dengan HTML JavaScript

#Langkah 1
Masuk ke Blogger > Tata Letak > HTML/Java Script.

#Langkah 2
Copy dan Pastekan Script dibawah ini.

 
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('J.19=B(){6 a=B(a){6 b=a||{},c=b.1a||"",d=b.1b||5,e=b.1c||"#1d",f=b.1e||1f,g=b.1g||1h,h=b.1i||"1j",i=b.1k||"P",j=b.1l||"1m",k=b.1n||"Q P",l=b.1o||["1p","1q","1r","1s","1t","1u","1v","1w","1x","1y","1z","1A"],m=b.1B||" 1C:1D/1E;1F,1G=";$(e).1H(h);6 n=c;""===c&&(n=J.R.1I+"//"+J.R.1J),$.1K({T:n+"/1L/1M/1N?U=1O-E-1P&1Q=V&1R-1S="+d,W:"1T",1U:"1V",1W:B(a){6 b,c,d,n,o,p,q,r,s,t,u,v="",w=a.1X.1Y;K(1Z 0!==w){v="<X 3=\'20\'>";L(6 x=0;x<w.F;x++){L(6 y=0;y<w[x].A.F;y++)K("21"==w[x].A[y].Y){b=w[x].A[y].M;Z}L(6 z=0;z<w[x].A.F;z++)K("22"==w[x].A[z].Y&&"23/G"==w[x].A[z].W){d=w[x].A[z].C.24(" ")[0];Z}o="11"E w[x]?w[x].11.$t:"12"E w[x]?w[x].12.$t:"",p="13$14"E w[x]?w[x].13$14.T.15(/\\/s[0-9]+\\-c/g,"/s"+f):m,n=0===d?\' <2 3="N">\'+k+"</2>":1===d?\' <2 3="N">\'+d+" "+j+"</2>":\' <2 3="N">\'+d+" "+i+"</2>",o=o.15(/<\\S[^>]*>/g,""),o.F>g&&(o=o.D(0,g)+"..."),c=w[x].C.$t,q=w[x].V.$t.D(0,10),r=q.D(0,4),s=q.D(5,7),t=q.D(8,10),u=l[25(s,10)-1],v+=\'<16 3="26" ><H 3="27"><a C="\'+c+\'" M="\'+b+\'" 17="18"><28 C="\'+c+\'" U="\'+c+\'"29="\'+p+\'"/></a></H><I 3="2a"><a C="\'+c+\'" M="\'+b+\'" 17="18">\'+c+\'</a></I><H 3="2b"><2 3="2c"><2 3="2d">\'+t+\'</2> <2 3="2e">\'+u+\'</2> <2 3="2f">\'+r+"</2></2>"+n+"</H><p>"+o+"</p></16>"}v+="</X>",$(e).G(v).O(h)}2g $(e).G("<2>Q 2h!</2>").O(h)},2i:B(){$(e).G("<I>2j 2k 2l!</I>").O(h)}})};2m B(b){a(b)}}();',62,147,'||span|class|||var||||||||||||||||||||||||||||||link|function|title|substring|in|length|html|div|strong|window|if|for|href|komen|removeClass|Comments|No|location||url|alt|published|type|ul|rel|break||content|summary|media|thumbnail|replace|li|target|_blank|new_post|url_blog|numberofposts|id_contain|isina|imagesize|40|snippetsize|100|loadingClass|tungguan|commentstext|firstcmtext|Comment|NoCmtext|MonthNames|Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec|pBlank|data|image|png|base64|iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAA1JREFUCJljOHPmzH8ACDADZKbltQ8AAAAASUVORK5CYII|addClass|protocol|host|ajax|feeds|posts|default|json|script|orderby|max|results|get|dataType|jsonp|success|feed|entry|void|post_baru|alternate|replies|text|split|parseInt|jerona|gambar|img|src|judulna|tglncomen|date|dd|dm|dy|else|result|error|Error|Loading|Feed|return'.split('|'),0,{}))
//]]>
</script>
<style type="text/css">
#new_post{width:100%;margin:0 auto;position:relative;background:white;padding:8px;overflow:hidden;border:1px solid #f0f0f0}
#new_post .post_baru{width:100%;padding:0;margin:0 auto;position:relative}
#new_post .post_baru .jerona{font-size:12px;min-height:50px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #f0f0f0;overflow:hidden;color:black;list-style:none}
#new_post .post_baru .jerona .judulna a{color:#333;line-height:1.4em;font-weight:500!important}
#new_post .post_baru .jerona p{font-size:12px;line-height:1.4em;font-weight:400;color:#333}
.date,.komen{display:inline-block;margin-right:8px}
.date:before{content:"\f073";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px}
.komen:before{content:"\f086";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px}
#new_post .post_baru .jerona:nth-child(1) .gambar{width:100%;max-width:300px;max-height:250px;padding:0;margin:0 auto;position:relative;overflow:hidden}
#new_post .post_baru .jerona:nth-child(1) .gambar img{width:100%;padding:0;margin:0 auto;position:relative}
#new_post .post_baru .jerona:nth-child(1) .judulna{display:block;width:100%;text-align:center;font-size:20px;margin:0 0 5px}
#new_post .post_baru .jerona:nth-child(1) .tglncomen{background:transparent;display:block;font-size:11px;font-weight:bold;color:#8D8D8D;text-transform:uppercase;text-align:center}
#new_post .post_baru .jerona:nth-child(n+2) .gambar{max-width:60px;max-height:60px;padding:0;margin:3px 8px 0 0;overflow:hidden;float:left;clear:both}
#new_post .post_baru .jerona:nth-child(n+2) .gambar img{width:60px;height:60px}
#new_post .post_baru .jerona:nth-child(n+2) .judulna{display:block;width:100%;font-size:15px;margin:0 0 5px}
#new_post .post_baru .jerona:nth-child(n+2) p{width:0;height:0;font-size:0;overflow:hidden;display:block;position:relative}
</style>
<div id="new_post"></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  new_post({
    numberofposts: 5,
    id_contain: "#new_post",
    commentstext: "Comments",
    imagesize: 300,
    snippetsize: 100
  });
});
//]]>
</script>. 

#Langkah 3
Klik simpan, untuk pengaturan widget seperti penjelasan dibawah ini :

numberofposts = 5, Jumlah Post Yang Akan Ditampilkan
imagesize = 300, Ukuran dan Resolusi Gambar.
snippetsize = 100, Ukuran widget.

Nah itulah tadi cara memasang widget artikel terbaru, semoga dapat menambah wawasan tentang blogging sobat semua, terimakasih sudah berkunjung.

Share this post, please!

Cara Membuat Widget Artikel Terbaru di Blog

4/ 5

Oleh mayuf

mayuf 8:36 AM Komentar