June 28, 2013

Cara Mencegah Link Aktif Dengan Menampilkan Salinan Komentar Pada Blog

Selamat siang...

Kali ini saya ingin berbagi tutorial yang rasanya cukup penting, meskipun sebelumnya saya sudah share tutorial yang mirip. Selain untuk tujuan berbagi tutorial, postingan ini juga saya buat untuk mengakomodir permintaan sahabat Dhestar Wirawan.



Jika sebelumnya kita hanya dapat menghapus link aktif yang disertakan dalam sebuah komentar seperti tutorial yang lalu, maka kali ini kita dapat menampilkan salinan dari komentar asli nya.


Kalau tertarik silahkan ikuti :

1. Login ke blogger.



2. Pilih Template - Edit HTML.



3. Cari kode </body> dan letakkan kode berikut ini diatas nya :

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            var salinan = content[i].innerHTML;
          content[i].innerHTML = "<div>Maaf, komentar Anda telah disembunyikan kemungkinan karena Anda menyisipkan link aktif yang tidak diperlukan oleh para pembaca. Berikut ini merupakan salinan dari komentar yang Anda berikan :</div><div><textarea>" + salinan + "</textarea> <div>Terima kasih atas perhatian Anda <div align='right'><img alt='no spam' src='http://2.bp.blogspot.com/-RZsMhoJUjs4/UczlQ0PEvdI/AAAAAAAABjE/JhA4CdVb_u0/s50/order.gif' style='border:0;'/></div></div>";
            content[i].className = "spammers";
        }
    }
}
// Jalankan fungsi!
blockLinks('comments', 'p');
//]]> 
</script>

4. Selanjutnya, cari kode ]]></b:skin> dan letakkan kode berikut diatas nya :

p .spammers {background-color:#A29A9A;color:white}
textarea {
 background-color:#F8D9B5;
 width:98%;
 height:80px;
 overflow:auto;
 display:block;
 margin:10px auto} 

5. Simpan Template.

6. Enjoy. smoke

Bagaimana sob? Kode-kode diatas dapat di edit sesuai dengan keinginan masing-masing termasuk warna dan kalimat mutiara nya.

Terima kasih dan semoga bermanfaat. :)

June 25, 2013

Alternatif Dari Google Drive Untuk Hosting Javascript

Halo, selamat siang sob...

Bagaimana kabarnya hari ini? Ga kerasa udah beberapa hari ga posting dan ga online bikin tangan jadi gatal untuk melakukan kegiatan ketik-mengetik... winds

Pada postingan kali ini saya ingin berbagi, sesuai judul, yaitu tempat hosting file javascript selain di google drive. Mungkin banyak dari kalian yang sudah tahu bahwa layanan google code, yang kebanyakan orang menggunakannya untuk hosting file-file javascript sudah mulai dikurangi omg dan para "javascript's uploader" (kita sebut saja begitu yah... :D ) disarankan untuk bermigrasi, transmigrasi, atau apalah istilahnya peace2 ke google drive.

Nah, selain google drive yang saya yakin tutorialnya sudah banyak di luar sana, saya ingin membuat tutorial upload file javascript di YourJavascript. Saya pikir upload file-file javascript disana lebih sederhana dan kita bisa membuatnya menjadi file private, yang hanya domain-domain "terpilih" saja yang bisa menggunakannya.

Ok, langsung saja :

1. Jalan-jalan dulu ke YourJavascript.

2. Cari file javascript yang ingin di upload, lalu centang pada opsi private jika ingin membuat file tersebut hanya digunakan pada domain yang ingin dipilih.





3. Masukkan email, ini berfungsi bagi yourjavascript untuk mengirimkan  link file javascript yang sudah berhasil di upload.

4. Masukkan kode verifikasi captcha yang ada lalu klik "Upload".


5. Tunggu sebentar, jika berhasil silahkan buka email yang telah dimasukkan sebelumnya.


6. Enjoy. smoke

Terima kasih dan semoga bermanfaat... :)

June 21, 2013

Membuat Efek Animasi Dan Warna Pada Sebuah Elemen

Selamat siang...



Pada postingan ini saya hanya ingin share cara membuat efek animasi dan warna pada sebuah elemen. Untuk demo nya bisa dilihat berikut ini :



Pertama, tambahkan javascript berikut ini :

<script>

$(function() {

var state = true;

$( "#button" ).click(function() {

if ( state ) {

$( "#effect" ).animate({

backgroundColor: "#D580FE",

color: "#fff",

width: 600

}, 1000 );

} else {

$( "#effect" ).animate({

backgroundColor: "#fff",

color: "#000",

width: 240

}, 1000 );

}

state = !state;

});

});

</script>


Lalu, tambahkan kode CSS agar tampilan dari elemen yang dimaksud menjadi lebih cantik. Disini saya coba menambahkan fungsi scroll agar tampilan default dari elemen nya tidak terlalu jatuh kebawah meskipun diisi dengan kalimat yang panjang, sehingga kode nya menjadi seperti ini :

.toggler { width: 500px; height: 200px; position: relative; }

#button { padding: .5em 1em; text-decoration: none;background:#FEBFBF }

#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; overflow:auto; }

#effect h3 { margin: 0; padding: 0.4em; text-align: center; background:#FEBFBF; }

Terakhir, eksekusi dengan kode HTML seperti dibawah ini :

<div class="toggler">

<div id="effect" class="ui-widget-content ui-corner-all">

<h3 class="ui-widget-header ui-corner-all">Lorem Ipsum</h3>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</p>

</div>

</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Click Here</a>


Untuk aplikasi pada blog, tinggal tambahkan javascript dan CSS tersebut dalam template dan letakkan kode HTML dimana temen-temen ingin efek seperti ini muncul, misalnya pada sebuah halaman statis atau pada halaman postingan.

Terima kasih dan semoga bermanfaat. :)

June 17, 2013

Design : Aiizahh Cheer Templates



Selamat sore...

Postingan kali ini saya mau berbagi template blog yang saya bikin sendiri, meskipun jelek, tapi ya ga papa lah namanya juga kreasi tangan newbie... :D


Template kali ini tidak jauh berbeda dengan template terakhir yang saya buat, meskipun ada beberapa perubahan kecil yang saya lakukan termasuk warna dasar template nya.


Terima kasih dan semoga bermanfaat.... smoke

June 14, 2013

Membuat Guest Book Berbeda Pada Blog

Selamat siang...

Postingan kali ini berhubungan dengan hal-hal yang klasik dari kegiatan ngeblog, yaitu blogwalking. Nah, tentu banyak dari blogger yang biasanya memasang buku tamu atau guest book pada blog nya agar para blogwalker bisa meninggalkan jejak dan kemudian saling ganti mengunjungi.


Kebanyakan dari blogger (termasuk saya dulu... :D ) lebih cenderung memasang guest book melayang, biasanya di sisi kanan halaman blog, meskipun tidak sedikit pula yang memasangnya seperti widget-widget statis lainnya di bagian sidebar.

Pada tutorial ini, saya ingin berbagi cara memasang guest book pada blog namun dengan tampilan yang sedikit berbeda, dan untuk guest book nya sendiri saya gunakan dari cbox jadi bila temen-temen menerapkan tutorial ini, saya anggap kode cbox nya sudah temen-temen miliki.


1. Login ke blogger.

2. Buka menu Template - Edit HTML.

3. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya :

.aii-guest-boox {

  font:normal normal 12px/1.4 Awesome;
  color:#333;
  width:auto;
  border:1px solid #D580FE;
  border-bottom:none;
  background-color:#FEBFBF;
  position:fixed;
  left:10px;
  bottom:0;
  z-index:9999;
  -webkit-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 5px rgba(0,0,0,.2);
  box-shadow:1px 1px 5px rgba(0,0,0,.2);
}
.aii-guest-boox > input[type="checkbox"] {
  display:block;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  left:0;
  width:100%;
  height:auto;
  z-index:4;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}
.aii-guest-boox > navibox {
  display:block;
  height:24px;
  line-height:24px;
  background-color:#D580FE;
  text-align:justify;
  color:#fff;
  font-weight:bold;
  padding:0 1em 1px;
}
.aii-guest-boox > navibox:before {content:attr(data-collapsed)}
.aii-guest-boox .aii-guest-boox-content {
  /* padding-bottom:10px; */
  display:none;
}
.aii-guest-boox > input[type="checkbox"]:hover + navibox {background-color:#FEBFBF}
.aii-guest-boox > input[type="checkbox"]:checked + navibox {background-color:#D580FE}
.aii-guest-boox > input[type="checkbox"]:checked + navibox:before {content:attr(data-expanded)}
.aii-guest-boox > input[type="checkbox"]:checked ~ .aii-guest-boox-content {display:block}


4. Simpan Template.

5. Lanjut, buka menu Tata Letak - Tambahkan Gadget - HTML/Javascript.

6. Letakkan kode berikut di dalam nya :
<div class="aii-guest-boox">
    <input type="checkbox" />
    <navibox data-expanded="Close Guest Book" data-collapsed="Open Guest Book"></navibox>
    <div class="aii-guest-boox-content">

<-- KODE GUEST BOOK -->

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

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

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

    </div>
</div>

7. Simpan.

8. Enjoy. smoke

Terima kasih dan jangan lupa tinggalkan komentar pada kotak komentar dibawah... :)

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 = "http://3.bp.blogspot.com/-0b8RdG8tb1g/UbVZqWANxiI/AAAAAAAABdM/QG6my2g1-j4/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... :)

June 4, 2013

Modifikasi Widget Followers Pada Blog



Selamat siang...

Postingan kali ini saya buat untuk membantu temen-temen yang ingin memodifikasi widget followers pada blog nya sehingga menjadi lebih menarik.

Sebenarnya, untuk memodifikasi warna dan lain sebagainya cukup hapus tanda centang pada bagian "Gunakan Gaya Template Default" saat kalian menambahkan widget followers bawaan blogger seperti gambar dibawah ini.



Namun, bukan hanya untuk alasan itu saja hal ini menjadi perlu untuk dilakukan, karena dengan memodifikasi nya pula maka blog akan lolos (pada bagian ini) saat validasi HTML 5. Jadi, bisa dikatakan kita melakukan satu hal untuk dua manfaat, hehehe...

Ok, langsung saja :

1. Login ke blogger.
2. Pilih Tata Letak - Tambahkan Gadget - HTML/Javascript.
3. Masukkan script dibawah ini :

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-13f90a5odka7x" style="width:auto;border:none;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#D580FE';
skin['ENDCAP_BG_COLOR'] = '#FEBFBF';
skin['ENDCAP_TEXT_COLOR'] = '#000';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#33FF00';
skin['CONTENT_BG_COLOR'] = '#FFFFFF';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#1919B3';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#FF0000';
skin['NUMBER_ROWS'] = '4';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-13f90a5odka7x',
   site: '14360626934896265745' },
  skin);
</script>


4. Simpan.
5. Enjoy. dad

Coba lihat kode yang saya beri warna ungu dan warna biru, yang mana kode tersebut dapat dilihat pada blog kalian dengan cara berikut :

1. Klik kanan dan pilih "View Page Source" atau dengan menekan CTRL+U.



2. CTRL+F dan cari kode " renderMembersGadget ".



3. Copy paste kode yang diberi kotak sesuai gambar dalam script diatas.

Terima kasih dan semoga bermanfaat...

June 3, 2013

Perubahan Pada Layanan Download Google Code


Selamat pagi...

Sebelumnya saya sudah pernah membuat sebuah postingan mengenai Cara Upload File Javascript Ke Google Code namun kemarin, beberapa pengunjung blog ini mengatakan bahwa tab download yang merupakan bagian dari tahap upload file ke Google Code sudah tidak ada.

Ternyata setelah saya coba, memang benar adanya dan mengapa itu terjadi telah terjawab di blog ini. Google memang telah menutup layanan download pada Google Code, baik untuk proyek-proyek yang baru dibuat maupun proyek-proyek yang sebelumnya sudah dibuat. Perbedaannya, untuk proyek-proyek yang baru dibuat, seperti yang terjadi, tidak akan ada lagi layanan download mulai akhir Mei kemarin, sedangkan untuk proyek-proyek yang sebelumnya sudah ada, masih tetap tersedia layanan download sampai tanggal 14 Januari 2014.

Hal ini sendiri terjadi, karena Google merasa telah terjadi peningkatan yang signifikan pada kekerasan akibat penyalahgunaan pelayanan, dan oleh karenanya, baik yang sebelumnya telah memiliki proyek pada Google Code maupun yang belum untuk segera berpindah ke Google Drive.