Cara Membuat Widget Artikel Terbaru Di Blogger

Cara Membuat 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 Mas Tamvan akan berbagi sebuah widget blogger untuk menampilkan artikel terbaru yang ada di blog kalian...

Mungkin sudah banyak yang share artikel tentnag cara membuat recent post ini d blog-blog terkenal :3 . Tapi di sini saya membuat tampilannya berbeda, tampilannya mirip 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 menu Tataletak, Terus Tambahkan Widget, Cari HTML/Javascript, contoh lihat gambar

  • Gambar Tataletak Widget Html / Javascript
  • 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, semoga artikel tentang cara memasang widget artikel terbaru di blogger ini bermanfaat ya :)

Apabila ada yang tidak dimengerti, silahkan bertanya di kolom komentar :)
9 komentar
  1. Gan request recent post by label donk.. https://4.bp.blogspot.com/-Esnsl-X6uVQ/V-yo3lsxe8I/AAAAAAAAAV8/9h_IjIrGQugOLiihfjC9HNJ36JMvS_ZuwCLcB/s1600/wq.png

    ReplyDelete
    Replies
    1. Nanti Muncul D tutorial Berikutnya gan :)

      Delete
    2. soalnya cara di atas gak berfungsi

      Delete
    3. Sudah ada gan, silakan cari dengan judul

      Cara Memasang Widget Recent Post By Label Di Blog

      Delete
  2. gan kalau membuat widget artikel populer,artikel terbaru, lebel jadi satu widget gimananya?

    ReplyDelete
    Replies
    1. Multi Tab Widget?
      Sudah ada gan d blog saya, coba aja cari.
      Multi Tab Widget.

      Delete
  3. deskripsi dan judul gak keluar mas, skalian kalo mengatur lebar sesuai sidebar yg diganti apa?

    ReplyDelete
    Replies
    1. Coba bisa saya liat linknya?

      Itu udah otomatis bak, saya kasih width:100%. Akan menyesuaikan lebar dari sidebrnya..

      Delete
    2. Kalo pengen di atur widthnya, coba cari kode dibawah ini

      #new_post{width:100%;margin:0 auto;position:relative;background:white;padding:8px;overflow:hidden;border:1px solid #f0f0f0}>

      Tinggal sesuaikan
      width:100%

      Delete