June 10, 2013

Cara Mengubah Widget Arsip Blog Menjadi Kalender

Selamat siang...

Postingan kali ini saya ingin membagi tutorial mengenai bagaimana mengubah widget arsip blog menjadi tampilan kalender.



Sebenarnya, secara default ada tiga opsi gaya yang diberikan blogger untuk mengkonfigurasikan arsip blog, yaitu hierarki, daftar flat, dan menu dropdown. Namun, seperti nya ketiga tampilan tersebut terlihat "biasa saja" dan lebih menarik kalau kita sedikit memodifikasi nya.

Bila tertarik memodifikasi nya, coba ikuti cara dibawah ini :

1. Login ke blogger.

2. Masuk menu Tata Letak - Tambahkan Gadget dan pilih "Arsip Blog" / "Blog Archieve".

3. Ganti opsi-opsi yang ada saat mengkonfigurasikan widget Arsip Blog tersebut dan Simpan.



4. Selanjutnya, masuk menu Template - Edit HTML.

5. Cari kode yang kurang lebih seperti ini :

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'>

...................................

...................................

................................... 

</b:widget>


6. Lalu ganti kode tersebut diatas dengan kode berikut ini :

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
            <b:includable id='main'> 
  <b:if cond='data:title'> 
    <h2><data:title/></h2> 
  </b:if> 
  <div class='widget-content'> 
  <div id='ArchiveList'> 
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'> 
    <b:if cond='data:style == &quot;HIERARCHY&quot;'> 
     <b:include data='data' name='interval'/> 
    </b:if> 
    <b:if cond='data:style == &quot;FLAT&quot;'> 
      <b:include data='data' name='flat'/> 
    </b:if> 
    <b:if cond='data:style == &quot;MENU&quot;'> 
      <b:include data='data' name='menu'/> 
    </b:if> 
  </div> 
  </div> 
  <b:include name='quickedit'/> 
  </div> 
</b:includable>
            <b:includable id='flat' var='data'> 
<div id='bloggerCalendarList'> 
  <ul> 
    <b:loop values='data:data' var='i'> 
      <li class='archivedate'> 
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) 
      </li> 
    </b:loop> 
  </ul> 
</div> 
<div id='blogger_calendar' style='display:none'> 
<table id='bcalendar'><caption id='bcaption'> 
</caption> 
<!-- Table Header --> 
<thead id='bcHead'/> 
<!-- Table Footer --> 
<!-- Table Body --> 
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr> 
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr> 
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr> 
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr> 
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr> 
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr> 
</tbody> 
</table> 
<table id='bcNavigation'><tr> 
<td id='bcFootPrev'/> 
<td id='bcFootAll'/> 
<td id='bcFootNext'/> 
</tr></table> 
<div id='judul' style='underline; text-align:center;'>Baca Artikel :</div>  
<div id='calLoadingStatus' style='display:none; text-align:center;'> 
<script type='text/javascript'>bcLoadStatus();</script> 
</div> 
  <div id='calendarDisplay'/>
</div> 
<script type='text/javascript'> initCal();</script> 
</b:includable>
            <b:includable id='interval' var='intervalData'> 
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
</b:includable>
            <b:includable id='menu' var='data'> 
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
</b:includable>
            <b:includable id='posts' var='posts'> 
<!-- posts not needed for Calendar --> 
</b:includable>
            <b:includable id='toggle' var='interval'> 
  <!-- Toggle not needed for Calendar --> 
</b:includable>
          </b:widget>


7. Selanjutnya letakkan kode berikut ini diatas kode </head> :

<script type='text/javascript'> 
//<![CDATA[ 
var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTFn3qfyCAzF6FtebIGm3nXSEaAEwDNZqqeNOkBLHTRFgPhg2mrM-bks3dQR-jruSQfALB8NOlsXIgmHieCxalO9FnWr0L2wNDCp4fIgF5Kfi5MbmC5_h6AdjKPV29HMTQqPbB-PLF3M3R/s1600/ajax-loader(2).gif"; 
var bcArchiveNavText = "Lihat Arsip Blog"; 
var bcArchiveNavPrev = '◄'; 
var bcArchiveNavNext = '►'; 
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"]; 
// Nothing to configure past this point ---------------------------------- 
var timeOffset; 
var bcBlogID; 
var calMonth; 
var calDay = 1; 
var calYear; 
var startIndex; 
var callmth; 
var bcNav = new Array (); 
var bcList = new Array (); 
//Initialize Fill Array 
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"]; 
function openStatus(){ 
   document.getElementById('calLoadingStatus').style.display = 'block'; 
   document.getElementById('calendarDisplay').innerHTML = ''; 
  } 
function closeStatus(){ 
   document.getElementById('calLoadingStatus').style.display = 'none'; 
  } 
function bcLoadStatus(){ 
   cls = document.getElementById('calLoadingStatus'); 
   img = document.createElement('img'); 
   img.src = bcLoadingImage; 
   img.style.verticalAlign = 'middle'; 
   cls.appendChild(img); 
   txt = document.createTextNode(bcLoadingMessage); 
   cls.appendChild(txt); 
  } 
function callArchive(mth,yr,nav){ 
// Check for Leap Years 
  if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) { 
      fill[2] = '29'; 
   } 
  else { 
      fill[2] = '28'; 
   } 
   calMonth = mth; 
   calYear = yr; 
   if(mth.charAt(0) == 0){ 
      calMonth = mth.substring(1); 
      } 
   callmth = mth; 
   bcNavAll = document.getElementById('bcFootAll'); 
   bcNavPrev = document.getElementById('bcFootPrev'); 
   bcNavNext = document.getElementById('bcFootNext'); 
   bcSelect = document.getElementById('bcSelection'); 
   a = document.createElement('a'); 
   at = document.createTextNode(bcArchiveNavText); 
   a.href = bcNav[nav]; 
   a.appendChild(at); 
   bcNavAll.innerHTML = ''; 
   bcNavAll.appendChild(a); 
   bcNavPrev.innerHTML = ''; 
   bcNavNext.innerHTML = ''; 
   if(nav <  bcNav.length -1){ 
      a = document.createElement('a'); 
      a.innerHTML = bcArchiveNavPrev; 
      bcp = parseInt(nav,10) + 1; 
      a.href = bcNav[bcp]; 
      a.title = 'Previous Archive'; 
      prevSplit = bcList[bcp].split(','); 
      a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;}; 
      bcNavPrev.appendChild(a); 
      } 
   if(nav > 0){ 
      a = document.createElement('a'); 
      a.innerHTML = bcArchiveNavNext; 
      bcn = parseInt(nav,10) - 1; 
      a.href = bcNav[bcn]; 
      a.title = 'Next Archive'; 
      nextSplit = bcList[bcn].split(','); 
      a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;}; 
      bcNavNext.appendChild(a); 
     } 
   script = document.createElement('script'); 
   script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive'; 
   document.getElementsByTagName('head')[0].appendChild(script); 
} 
function cReadArchive(root){ 
// Check for Leap Years 
  if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) { 
      fill[2] = '29'; 
   } 
  else { 
      fill[2] = '28'; 
   } 
    closeStatus(); 
    document.getElementById('lastRow').style.display = 'none'; 
    calDis = document.getElementById('calendarDisplay'); 
    var feed = root.feed; 
    var total = feed.openSearch$totalResults.$t; 
    var entries = feed.entry || []; 
    var fillDate = new Array(); 
    var fillTitles = new Array(); 
    fillTitles.length = 32; 
    var ul = document.createElement('ul'); 
    ul.id = 'calendarUl'; 
    for (var i = 0; i < feed.entry.length; ++i) { 
      var entry = feed.entry[i]; 
      for (var j = 0; j < entry.link.length; ++j) { 
       if (entry.link[j].rel == "alternate") { 
       var link = entry.link[j].href; 
       } 
      } 
      var title = entry.title.$t; 
      var author = entry.author[0].name.$t; 
      var date = entry.published.$t; 
      var summary = entry.summary.$t; 
      isPublished = date.split('T')[0].split('-')[2]; 
      if(isPublished.charAt(0) == '0'){ 
         isPublished = isPublished.substring(1); 
         } 
      fillDate.push(isPublished); 
      if (fillTitles[isPublished]){ 
          fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title; 
          } 
      else { 
          fillTitles[isPublished] = title; 
          } 
      li = document.createElement('li'); 
      li.style.listType = 'none'; 
      li.innerHTML = '<a href="'+link+'">'+title+'</a>'; 
      ul.appendChild(li); 
      } 
   calDis.appendChild(ul); 
   var val1 = parseInt(calDay, 10) 
   var valxx = parseInt(calMonth, 10); 
   var val2 = valxx - 1; 
   var val3 = parseInt(calYear, 10); 
   var firstCalDay = new Date(val3,val2,1); 
   var val0 = firstCalDay.getDay(); 
   startIndex = val0 + 1; 
  var dayCount = 1; 
  for (x =1; x < 38; x++){ 
      var cell = document.getElementById('cell'+x); 
      if( x < startIndex){ 
          cell.innerHTML = ' '; 
          cell.className = 'firstCell'; 
         } 
      if( x >= startIndex){ 
          cell.innerHTML = dayCount; 
          cell.className = 'filledCell'; 
          for(p = 0; p < fillDate.length; p++){ 
              if(dayCount == fillDate[p]){ 
                  if(fillDate[p].length == 1){ 
                     fillURL = '0'+fillDate[p]; 
                     } 
                  else { 
                     fillURL = fillDate[p]; 
                     } 
                  cell.className = 'highlightCell'; 
                  cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>'; 
                 } 
              } 
          if( dayCount > fill[valxx]){ 
             cell.innerHTML = ' '; 
             cell.className = 'emptyCell'; 
             } 
          dayCount++; 
         } 
      } 
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1; 
    if(visTotal >35){ 
        document.getElementById('lastRow').style.display = ''; 
       } 
  } 
function initCal(){ 
   document.getElementById('blogger_calendar').style.display = 'block'; 
   var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
   var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
   document.getElementById('bloggerCalendarList').style.display = 'none'; 
   calHead = document.getElementById('bcHead'); 
   tr = document.createElement('tr'); 
   for(t = 0; t < 7; t++){ 
       th = document.createElement('th'); 
       th.abbr = headDays[t]; 
       scope = 'col'; 
       th.title = headDays[t]; 
       th.innerHTML = headInitial[t]; 
       tr.appendChild(th); 
      } 
   calHead.appendChild(tr); 
  for (x = 0; x <bcInit.length;x++){ 
     var stripYear= bcInit[x].href.split('_')[0].split('/')[3]; 
     var stripMonth = bcInit[x].href.split('_')[1]; 
     bcList.push(stripMonth + ','+ stripYear + ',' + x); 
     bcNav.push(bcInit[x].href); 
     } 
  var sel = document.createElement('select'); 
  sel.id = 'bcSelection'; 
  sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
  q = 0; 
  for (r = 0; r <bcList.length; r++){ 
       var selText = bcInit[r].innerHTML; 
       var selCount = bcCount[r].innerHTML.split('> (')[1]; 
       var selValue = bcList[r]; 
       sel.options[q] = new Option(selText + ' ('+selCount,selValue); 
       q++ 
       }                   
   document.getElementById('bcaption').appendChild(sel); 
   var m = bcList[0].split(',')[0]; 
   var y = bcList[0].split(',')[1]; 
   callArchive(m,y,'0'); 
} 
function timezoneSet(root){ 
   var feed = root.feed; 
   var updated = feed.updated.$t; 
   var id = feed.id.$t; 
   bcBlogId = id.split('blog-')[1]; 
   upLength = updated.length; 
   if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";} 
   else {timeOffset = updated.substring(upLength-6,upLength);} 
   timeOffset = encodeURIComponent(timeOffset); 
} 
//]]> 
</script> 
<script src='/feeds/posts/summary?max-results=0&amp;amp;alt=json-in-script&amp;callback=timezoneSet'/>


8. Kemudian, letakkan kode CSS* berikut ini diatas kode ]]></b:skin> :


/* Start of Post Navigator (Black n White Theme) ------ */

#calendarDisplay{display:block;}
/* div that holds calendar */

#blogger_calendar{margin:0 auto 0 0;width:100%}
/* Table Caption - Holds the Archive Select Menu */

#bcaption{border:1px solid #FFFFFF;padding:2px;margin:10px 0 0;background:#000000;font:bold 100% Tahoma,Arial,Sans-serif}
/* The Archive Select Menu */

#bcaption select{background:#ffff;border:0 solid #FFFFFF;color:#000000;font-weight:bold;text-align:center;width:75%}
/* The Heading Section */

table#bcalendar thead{}
/* Head Entries */

table#bcalendar thead tr th{width:70px;text-align:center;padding:3px;border:1px solid #FFFFFF;font:bold 100% Tahoma,Arial,Sans-serif;background:#000000;color:#fff}
/* The calendar Table */

table#bcalendar{border:1px solid #000000;border-top:0;margin:0 0 0;width:100%;background:#fff;text-align:center}
/* Links in Calendar */

table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
/* First Row Empty Cells */

td.firstCell{visibility:visible}
/* Cells that have a day in them */

td.filledCell{background:#fff}
td.filledCell:hover{background:#FFFFFF}
/* Cells that are empty,after the first row */

td.emptyCell{visibility:hidden}
/* Cells with a Link Entry in them */

td.highlightCell{background:#000000;border:2px solid #FFFFFF}
td.highlightCell:hover{background:#FFFFFF;border:1px solid #000000}
/* Table Footer Navigation */

table#bcNavigation{width:100%;background:#000000;border:1px solid #FFFFFF;border-top:0;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcNavigation a:link{text-decoration:none;color:#fff}
table#bcNavigation a:hover{text-decoration:none;color:#FFFFFF}
td#bcFootPrev{width:10px}
td#bcFootAll{text-align:center}
td#bcFootNext{width:10px}
ul#calendarUl{margin:5px auto 0!important}
ul#calendarUl li a:link{}
#judul{text-decoration:none;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif;background:#000000;border:2px solid #FFFFFF;width:auto;margin-top:5px}
#calLoadingStatus img{display:block;width:auto;height:auto;margin:10px auto}
/* End of of Post Navigator (Black n White Theme) ------ */


9. Simpan Template.

10. Enjoy. smoke

*)Tema lain yang dapat digunakan :





/* Start of Post Navigator (Chocolate Theme) ------ */

#calendarDisplay{display:block;}
/* div that holds calendar */

#blogger_calendar{margin:0 auto 0 0;width:100%}
/* Table Caption - Holds the Archive Select Menu */

#bcaption{border:1px solid #ffffff;padding:2px;margin:10px 0 0;background:#D38F37;font:bold 100% Tahoma,Arial,Sans-serif}
/* The Archive Select Menu */

#bcaption select{background:#ffff;border:0 solid #ffffff;color:#D38F37;font-weight:bold;text-align:center;width:75%}
/* The Heading Section */

table#bcalendar thead{}
/* Head Entries */

table#bcalendar thead tr th{width:70px;text-align:center;padding:3px;border:1px solid #ffffff;font:bold 100% Tahoma,Arial,Sans-serif;background:#D38F37;color:#fff}
/* The calendar Table */

table#bcalendar{border:1px solid #D38F37;border-top:0;margin:0 0 0;width:100%;background:#fff;text-align:center}
/* Links in Calendar */

table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
/* First Row Empty Cells */

td.firstCell{visibility:visible}
/* Cells that have a day in them */

td.filledCell{background:#fff}
td.filledCell:hover{color:#ffffff;text-decoration:none;background:#D38F37}
/* Cells that are empty,after the first row */

td.emptyCell{visibility:hidden}
/* Cells with a Link Entry in them */

td.highlightCell{background:#D38F37;border:2px solid #ffffff}
td.highlightCell:hover{background:#ffffff;border:1px solid #D38F37}
/* Table Footer Navigation */

table#bcNavigation{width:100%;background:#D38F37;border:1px solid #ffffff;border-top:0;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcNavigation a:link{text-decoration:none;color:#fff}
table#bcNavigation a:hover{text-decoration:none;color:#ffffff}
td#bcFootPrev{width:10px}
td#bcFootAll{text-align:center}
td#bcFootNext{width:10px}
ul#calendarUl{margin:5px auto 0!important}
ul#calendarUl li a:link{}
#judul{text-decoration:none;color:#fff;font:bold 100% Tahoma,Arial,Sans-serif;background:#D38F37;border:2px solid #ffffff;width:auto;margin-top:5px}
#calLoadingStatus img{display:block;width:auto;height:auto;margin:10px auto}
/* End of of Post Navigator (Chocolate Theme) ------ */


Tips : Coba lihat URL berwarna hijau, Anda dapat menggantinya dengan URL loader lain seperti dibawah ini.

Klik kanan lalu "Copy Image Location"

Klik kanan lalu "Copy Image Location"

Klik kanan lalu "Copy Image Location"


Bagaimana hasil modifikasi widget arsip blog nya???
Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar ya... :)

53 comments

  1. Kira2 apa nadak tambah berat loadingnya Tuan?
    Maaf masih Newbie soal ginian :D

    ReplyDelete
    Replies
    1. ahh masa newbie si mba... spoiled
      ga nambah berat kok, saya juga gunakan ini tapi perubahan dalam hal loading blog nya ga besar... cheer

      Delete
  2. Wow.. saya baru tau kalo arsip bisa dibikin kalender begini..
    aakk.. kereenn mbak :))))

    ReplyDelete
  3. mba alya pandai otak atik ,,,,
    bookmark dlu mb,,,,,
    masih newbie

    ReplyDelete
    Replies
    1. saya juga masih newbie mba, lagi belajar kok... :)

      Delete
  4. trmksih banyak mas infonya sangat membantu juga bisa mengingat tanggl postingan'y mas

    ReplyDelete
  5. Model seperti ini baru pertama kali saya temukan di internet. Bagus buat referensi bagi yang suka otak-atik blog. :D

    ReplyDelete
  6. Wah keren skli mab, ijin copas code nya

    ReplyDelete
  7. Apa malah gak bikin susah buat yg masih awam buat mengeksplor isi blog kita mbak?

    ReplyDelete
    Replies
    1. menurut saya ga gan, karena sebenarnya ga jauh berbeda dengan arsip blog model hierarki yang melihat judul posting berdasarkan bulan terbit, hanya menurut saya tampilan nya jauh lebih menarik bisa agan coba di sidebar blog ini... pleased

      Delete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. sip, tambah praktis. tp aku lebih suka kalender jd 1 sama widget jam

    ReplyDelete
    Replies
    1. kalau saya kurang tertarik widget jam maupun kalender di blog sepertinya kurang penting... shake

      Delete
  10. wah keren nie gan...mbak aliah ini memang kreatif! thanks

    ReplyDelete
  11. waow keren sangat mbak widgetnya jadi keliatan lebih dinamis :) hehehe

    ReplyDelete
    Replies
    1. pleased kebanyakan orang menggunakan gaya hierarki untuk arsip blog nya dan memang dengan memodifikasi seperti ini menjadi lebih menarik...

      Delete
  12. wach kapan kapan bisa untuk dicoba nie gan cheer

    ReplyDelete
  13. ya ampyuuuun itu pas ngatur scriptnya ga puyeng ya mba ?? spoiled
    mesti banyak belajar nih sama mba alya , ayo ajarin mba cheer

    ReplyDelete
    Replies
    1. yang penting tampilan blog nya lebih bagus ga papa deh puyeng2 dikit mba, hehehehe....

      Delete
  14. wah ini tutorial yang benar benar keren dan bermanfaat sobat,
    saya sangat senang mendapat pengetahuan ini
    terima kasih sudah berbagi pengetahuan

    ReplyDelete
  15. wah keren tuh mas.. tampilan berbeda kayaknya pleased

    ReplyDelete
  16. wah keren nih, bisa ternyata yaaa,, dad

    ReplyDelete
    Replies
    1. iya bisa gan, asal tertarik untuk mengedit... pleased

      Delete
  17. Whehehehh keren ni arsipnya.... Oya mungkin akan lebih keren menggunakan jQuery UI.... :D

    ReplyDelete
    Replies
    1. saya masih ga paham gan, yang biasa aja dulu... :D :D :D

      Delete
  18. nice article.i really enjoyed it.Thanks

    ReplyDelete
  19. thanks for providing nice articles.I hope it helps to my site

    ReplyDelete
  20. Asyikkk langsung coba ah..trims ya mbak.

    ReplyDelete
  21. Mantabss,.. keren, dapet ilmu lagi sayah,.. makasih ya Sis,..

    ReplyDelete
  22. Kerrren,.. Artikelnya Bu,.. Blognya juga cantik,.. hehehehe,..

    ReplyDelete
  23. kapan-kapan aja mbak saya coba

    ReplyDelete