Cara Menciptakan Widget Artikel Terbaru Di Blogger

Tutorial Cara Memasang Widget Artikel Terbaru / Recent Post Di Blogger

Tutorial Membuat Widget Recent Post Atau Artikel Terbaru Di Sidebar Blogger. Tutorial Kali Ini akan membuatkan sebuah widget blogger untuk menampilkan artikel terbaru yang ada di blog kalian...

Mungkin sudah banyak yang share artikel tentnag cara menciptakan recent post ini d blog-blog populer :3 . Tapi di sini aku menciptakan tampilannya berbeda, tampilannya seolah-olah dengan Widget Recent Post by Label di blog saya.

Nah buat kalian yang ingin memasang widget artikel terbaru ini silahkan ikuti tutorial dibawh ini :)

Memasang Widget New Post di Blog

• Login ke blogger.com

• Setelah login pilih sajian Tataletak, Terus Tambahkan Widget, Cari HTML/Javascript, teladan lihat gambar

• Setelah Ketemu, Klik Tanda Plus Lalu Masukan Script Widget Artikel Terbaru Dibawh ini kedalamnya

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

numberofposts: 5, Jumlah Post Yang Akan Ditampilkan
imagesize: 300, Ukuran Gambar + Resolusi Gambar.
snippetsize: 100 Jumlah Deskripsi Yang Akan Ditampilkan.

• Nah mungkin cuma itu pengaturannya

• Kalo sudah, tinggal save widgetnya dan lihat hasilnya, Done

Cukup sekian dan terima kasih, biar artikel ihwal cara memasang widget artikel terbaru di blogger ini bermanfaat ya :)

Apabila ada yang tidak dimengerti, silahkan bertanya di kolom komentar :)