Adityas Blog View RSS

Membuat Gallery Image Menggunakan CSS3 24 Jun 2012 3:10 AM (12 years ago)

CSS Kode

#images-box {
 width: 560px;
 margin:120px auto 0;
 position: relative;
 height: 186px;
}

.holder {
 width: 250px;
 height: 166px;
 float: left;
 margin: 0 20px 0 0;
}

.image-lightbox img {
 width: inherit;
 height: inherit;
 z-index: 3000;
}

.image-lightbox {
 width: inherit;
 height: inherit;
 padding: 10px;
 box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
 background: #fff;
 border-radius: 5px;
 position: absolute;
 top: 0;
 font-family: Arial, sans-serif;
 -webkit-transition: all ease-in 0.5s;
 -moz-transition: all ease-in 0.5s;
 -ms-transition: all ease-in 0.5s;
 -o-transition: all ease-in 0.5s;
}

.image-lightbox span {
 display: none;
}

.image-lightbox .expand {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 z-index: 4000;
 background: rgba(0,0,0,0);
 left: 0;
}

.image-lightbox .close{
 position: absolute;
 width: 20px; height: 20px;
 right: 20px; top: 20px;
}

.image-lightbox .close a {
 height: auto; width: auto;
 padding: 5px 10px;
 color: #fff;
 text-decoration: none;
 background: #22272c;
 box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
 border-radius: 5px;
 font-weight: bold;
 float: right;
}

.image-lightbox .close a:hover {
 box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}

div[id^=image]:target {
 width: 450px;
 height: 300px;
 z-index: 5000;
 top: 50px;
 left: 200px;
}
div[id^=image]:target .close {
 display: block;
}

div[id^=image]:target .expand {
 display: none;
}

div#image-1:target, div#image-2:target{ left: 57px; }

div#image-1 { left: 0; }
div#image-2 { left: 290px; }

HTML Kode

<div id="images-box">
   <div class="holder">
      <div class="image-lightbox" id="image-1">
         <span class="close"><a href="#!">X</a></span>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCL1GFw6S6NKClug6cIhQzkXmG5oEG4lXU7Kix3faTw56UhenrbjtirWL5qAUWWHlHaOMrnYyNLUf94trEM_UcIsqIBK5mL5KQCIBaSWvC1Vna6Cq8tW5La3Gd4NuVJAXOKLarOfXrecov/s320/nokia_kinetic_1.jpg" />
            <a class="expand" href="#image-1"></a>
      </div>
   </div>
   <div class="holder">
      <div class="image-lightbox" id="image-2">
         <span class="close"><a href="#!">X</a></span>
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfCJthHd5osgmbBHMEKZueQ8yHfh7vQ31ogtRjrqE8eKsZkLd8lWxYLQBLFNAJlJo4RcHQeuvfkY_H68p-WsIapzgi2z16arwKbfL8qCvPZJmF65PKmfen3ukAdYYd-hD0wHya5Q3e4i8S/s320/nokia-lumia-800-wp7-review-0.jpg" />
            <a class="expand" href="#image-2"></a>
      </div>
   </div>
</div>

X

X

X

Memasang Animasi Loading di Blogspot 22 Jun 2012 11:31 PM (12 years ago)

Untuk kali ini Adityas Blog akan memberikan kode-kode yang diperlukan untuk memasang animasi loading yang sudah pernah saya bahas sebelumnya di sini --> Membuat Animasi Loading Dengan CSS3.

Karena dalam artikel animasi loading yang sebelumnya memiliki 2 jenis, jadi saya hanya memberikan kode yang diperlukan agar animasi loading tersebut bisa dipasang di dalam blog anda masing-masing.

Langkah 1

#loading{
 position:fixed;
 width:100%;
 height:100%;
 z-index:999999;
 top:0;
 left:0;
 font-family:arial;
 background:#222;
}

.cmsg table{
 color:#fff;
 margin:12em auto;
 text-align:center;
 font-weight:bold;
}

#loading a{
 color:#fff;
 text-decoration:none;
}

#loading a:hover{
 text-decoration:underline;
}

.bmsg {
 text-align: center;
 display: none;
 background: #FAE5B0;
 border: 1px solid #FAD163;
 padding: 10px;
 line-height: 1.6;
 font-weight:normal;
 color:#333;
 margin-top:30px;
}

#loading .cmsg .bmsg span.con-slow a {
 color: #007ACC;
 text-decoration: none;
}

#loading .cmsg .bmsg span.con-slow a:hover {
 text-decoration: underline;
}

.con-slow {
font-size: 80%;
}

[hg]/*******************************************************
***                                                  ***
***    TAMBAHKAN KODE CSS ANIMASI LOADING DI SINI    ***
***                                                  ***
*******************************************************/[/hg]

Langkah 2

<div id="loading">
 <div class="cmsg">
  <table>
   <tbody>
    <tr>
     <td>
[hg]     <!-- ISI DENGAN KODE HTML ANIMASI LOADING -->[/hg]
     </td>
    </tr>
    <tr>
     <td>Memuat Halaman<br/>"<b:if cond='data:blog.pageType != &quot;item&quot;'>
                     <data:blog.pageTitle/>
                     <b:else/>
                     <data:blog.pageName/>
                     </b:if>"</td>
    </tr>
    <tr>
     <td><div class="cmsg bmsg" id="slowConnection"><span class="con-slow">Tetap berusaha terhubung dengan <b><data:blog.title/></b><br/>Coba gunakan blog dalam <a href="?m=1">versi mobile</a> atau tekan <b>F5</b> untuk memuat ulang halaman.</span></div></td>
    </tr>
   </tbody>
  </table>
 </div>
 <div style="position:absolute;right:0;font-size:10px;font-weight:normal;color:#fff;padding:20px;bottom:0;">Koneksi lambat? || Gunakan blog dalam <a style="display:inline" href="?m=1">versi mobile</a></div>
</div>
<script type='text/javascript'>
function abLemot(){document.getElementById('slowConnection').style.display='block'}
var abLoadingLemot = setTimeout(abLemot, 20000);
</script>

Langkah 3

<script type='text/javascript'>
function abLoadingEnd(){document.getElementById('loading').style.display='none'}
if (window.attachEvent) {window.attachEvent('onload', abLoadingEnd);}
else if (window.addEventListener) {window.addEventListener('load', abLoadingEnd, false);}
else {document.addEventListener('load', abLoadingEnd, false);}
</script>

Memodifikasi Scrollbar Browser Menggunakan Webkit 22 Jun 2012 2:38 PM (12 years ago)

Tips kali ini Adityas Blog akan membagi cara memodifikasi scrollbar pada browser anda.
Memodifikasi scrollbar ini akan menggunakan -webkit-scrollbar yang terdapat pada CSS3.
Perlu untuk diketahui bahwa tidak semua browser bisa menggunakan tips ini karena browser yang berbasis webkit hanya digunakan oleh browser seperti Google Chrome, Safari dan sejenisnya.
Jadi, jika anda ingin melihat hasil modifikasi ini anda harus menggunakan browser seperti yang saya tulis di atas.

Di bawah ini adalah CSS yang digunakan dalam memodifikasi scrollbar.

Membuat Animasi Loading Dengan CSS3 2 Jun 2012 4:36 PM (12 years ago)

Tutorial kali ini adalah cara membuat animasi loading menggunakan CSS3. Perlu untuk diketahui bahwa tutorial ini murni menggunakan CSS3 tanpa melibatkan javascript, jQuery dan juga kita tidak perlu load gambar karena di sini kita hanya menggunakan trik animation yang terdapat di CSS3.

Tutorial Animasi loading ini ada 2 jenis, yang pertama adalah Animasi Loading Bar dan Animasi Loading Spin atau animasi loading memutar.

Berikut tutorial dalam animasi loading.

.abLoad{
 margin:0 auto;
 width: 67px;
 height: 35px;
}

.abLoadingBar {
 background-color:#007ACC;  
 background-image: -moz-linear-gradient(45deg, #007ACC 25%, #BFE4FD); 
 background-image: -webkit-linear-gradient(45deg, #007ACC 25%, #BFE4FD);
 border-left:1px solid #007ACC; border-top:1px solid #229cee; border-right:1px solid #007ACC; border-bottom:1px solid #229cee; 
 width:2px;
 height:10px;
 float:left;
 margin-left:5px;
        opacity:0.1;
 -webkit-transform: scale(0.7);
 -moz-transform: scale(0.7);
 -moz-animation:abLoading 1s infinite linear;
 -webkit-animation:abLoading 1s infinite linear;
}
#abBlock_1{
  -moz-animation-delay: .6s;
 -webkit-animation-delay: .6s;
 }
#abBlock_2{
  -moz-animation-delay: .5s;
 -webkit-animation-delay: .5s;
}
#abBlock_3{
  -moz-animation-delay: .4s;
 -webkit-animation-delay: .4s;
}
#abBlock_4{
  -moz-animation-delay: .3s;
 -webkit-animation-delay: .3s;
}
#abBlock_5{
  -moz-animation-delay: .4s;
 -webkit-animation-delay: .4s;
}
#abBlock_6{
  -moz-animation-delay: .5s;
 -webkit-animation-delay: .5s;
}
#abBlock_7{
  -moz-animation-delay: .6s;
 -webkit-animation-delay: .6s;
}
@-moz-keyframes abLoading{
 0%{-moz-transform: scale(1.3);opacity:1;}
 100%{-moz-transform: scale(0.7);opacity:0;}
}
@-webkit-keyframes abLoading{
 0%{-webkit-transform: scale(1.3);opacity:1;}
 100%{-webkit-transform: scale(0.7);opacity:0;}
}

<div class="abLoad"><div id="abBlock_1" class="abLoadingBar"></div>
<div id="abBlock_2" class="abLoadingBar"></div>
<div id="abBlock_3" class="abLoadingBar"></div>
<div id="abBlock_4" class="abLoadingBar"></div>
<div id="abBlock_5" class="abLoadingBar"></div>
<div id="abBlock_6" class="abLoadingBar"></div>
<div id="abBlock_7" class="abLoadingBar"></div></div>

.circle {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-right:5px solid rgba(0,0,0,0);
 border-left:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 35px #2187e7;
 width:50px;
 height:50px;
 margin:0 auto;
 -moz-animation:spinPulse 1s infinite ease-in-out;
 -webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
 background-color: rgba(0,0,0,0);
 border:5px solid rgba(0,183,229,0.9);
 opacity:.9;
 border-left:5px solid rgba(0,0,0,0);
 border-right:5px solid rgba(0,0,0,0);
 border-radius:50px;
 box-shadow: 0 0 15px #2187e7; 
 width:30px;
 height:30px;
 margin:0 auto;
 position:relative;
 top:-50px;
 -moz-animation:spinoffPulse 1s infinite linear;
 -webkit-animation:spinoffPulse 1s infinite linear;
 text-align: center;
 font-family: Segoe UI;
 font-size: 24px;
 font-weight: bolder;
 color: rgba(0, 183, 229, 0.9);
}
@-moz-keyframes spinPulse {
 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
 50% { -moz-transform:rotate(145deg); opacity:1; }
 100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
 0% { -moz-transform:rotate(0deg); }
 100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
 50% { -webkit-transform:rotate(145deg); opacity:1;}
 100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
 0% { -webkit-transform:rotate(0deg); }
 100% { -webkit-transform:rotate(360deg); }
}

<div class="circle"></div>
<div class="circle1"></div>

Thread Comment Blogspot Ver II + Animasi Emoticon 1 Jun 2012 4:25 PM (12 years ago)

Langkah 1

#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}

.cm_wrap {
clear: both;
margin-bottom: 15px;
float: right;
width: 100%;
}

#cm_block img {
margin-bottom: -4px;
}

.cm_head {
margin: 0;
width:60px;
float: left;
}

.cm_avatar, .cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
width: 35px;
height: 35px;
}

.cm_reply {
padding-top: 5px;
}

.cm_reply a {
display: inline-block;
border: 1px solid #ddd;
color: #424242 !important;
text-align: center;
text-decoration: none;
background: #EDEDED;
font: normal 11px sans-serif;
width: 42px;
}

.cm_reply a:hover {
text-decoration: none !important;
background: #ccc;
}

.cm_entry, .cm_entry_a {
padding:0;
overflow: hidden;
border-bottom: 1px dotted #DDD;
padding-bottom: 12px;
}

.cm_info {
margin-bottom: -12px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 3px;
}
.cm_info_a {
margin-bottom: -12px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 3px;
}

.cm_name, .cm_name_a {
font-size: 12px;
color: #666666 !important;
text-decoration:none;
float: left;
}

.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;

}
.cm_date_a {
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
}

.cm_entry p, .cm_entry_a p {
padding: 5px;
clear: both;
font-size: 11px;
color: #333;
word-wrap: break-word;
margin-left: 45px;
line-height: 2em;
text-align: left;
}

.cm_entry p {
border-left: 5px solid #f4f4f4;
}

.cm_entry_a p {
border-left: 5px solid #Dff0fa;
}

.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}

.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}

.cm_pagenavi a:hover {
text-decoration: underline
}

.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

.avatar-image-container {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-JfASUoXjbMpzCzn9KHlac9rH2w6Gg643czHXntT7lsVqzoNpc2wxsUZnk452OGyNP_F5cwOSscDL6102od_ezxmyQsoJ4kSU8x2ydULNNcDmx_sCjYtk-tD8qKG283XwIPvRGRq8GOWd/s80/none.jpg); 
width:35px;
height:35px;
background-size: 35px;
}

.avatar-image-container  img {
 border:none;
 }

Langkah 2

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h3 id='comment-post-message'>Tinggalkan Komentar Anda?</h3>
<data:blogCommentMessage/>
    <data:blogTeamBlogMessage/>
[hg]<!-- PASTE KODE EMOTICON DISINI -->[/hg]

<div style='padding-top:10px;padding-bottom:10px;text-align:center;font-weight:bold;color:#000;font-family:Consolas'>
<p><img src='https://lh3.googleusercontent.com/-VPFJ5upIUr8/T3xngKoCzOI/AAAAAAAAAz0/D7EkLYZ9mBM/s40/nangis.gif' width='20'/>
:a:
<img src='https://lh6.googleusercontent.com/-3RJT4NMWj88/T3xnZIgRTCI/AAAAAAAAAzQ/AuuMTIl40Qs/s40/80.gif' width='20'/>
:b:
<img src='https://lh6.googleusercontent.com/-4rZhB1CD3IM/T3xnFOPZ7GI/AAAAAAAAAww/dJKJFsqGYQk/s40/02.gif' width='20'/>
:c:
<img src='https://lh4.googleusercontent.com/-68KGBsXatAs/T3xnXZiG7fI/AAAAAAAAAy8/lhB4nok64_o/s43/77.gif' width='20'/>
:d:
<img src='https://lh6.googleusercontent.com/-Dl8yM83bKHg/T3xnSnk_jmI/AAAAAAAAAyk/6sgxqO_A9Dg/s43/48_002.gif' width='20'/>
:e:
<img src='https://lh3.googleusercontent.com/-LXzka_RPYgQ/TT2zPByhY-I/AAAAAAAAANw/AcYqSXLCMZI/s67/kaget.gif' width='20'/>
:f:<br/>
<img src='https://lh4.googleusercontent.com/-94tN1oyCYzg/T3xneURSxDI/AAAAAAAAAzg/0WG08Ap6X-I/s32/grrr.gif' width='20'/>
:g:
<img src='https://lh5.googleusercontent.com/-ac_eULIx1Jw/T3xnSKTsERI/AAAAAAAAAyg/qpsphdSP56c/s48/39_002.gif' width='20'/>
:h:
<img src='https://lh3.googleusercontent.com/-UpngvG3T1n8/T3xnIbjZ95I/AAAAAAAAAxU/OqmQ9Gv7oXM/s40/17_002.gif' width='27'/>
:i:
<img src='https://lh5.googleusercontent.com/-PGhZnP_3zZY/T3xnW4s9RnI/AAAAAAAAAy4/wqMUf3cX9O0/s58/51_002.gif' width='25'/>
:j: <br/><br/>
<a OnClick='window.open(&quot;http://adityas.vacau.com/&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes, width=550, height=520&quot;);return true' href='javascript:void(0);' rel='nofollow'>Emotion lainnya?</a></p></div>

Langkah 3

<script src='https://sites.google.com/site/adityameilaz/emo/a3yZzzyahDa902.js' type='text/javascript'/>
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
var _0x7bf4=[&quot;\x32\x20\x78\x3D\x31\x72\x2E\x31\x6E\x2E\x4A\x3B\x32\x20\x46\x3D\x77\x2E\x79\x28\x27\x31\x6D\x27\x29\x3B\x32\x20\x6D\x3D\x46\x2E\x75\x3B\x32\x20\x70\x3D\x5B\x5D\x3B\x32\x20\x37\x3D\x5B\x5D\x3B\x32\x20\x64\x3D\x5B\x5D\x3B\x32\x20\x6E\x3D\x30\x3B\x32\x20\x49\x3D\x27\x27\x3B\x32\x20\x4B\x3D\x27\x27\x3B\x32\x20\x45\x3D\x27\x27\x3B\x32\x20\x69\x3D\x30\x3B\x32\x20\x6A\x3D\x30\x3B\x32\x20\x6B\x3D\x30\x3B\x32\x20\x68\x3D\x30\x3B\x32\x20\x62\x3D\x27\x27\x3B\x32\x20\x42\x3D\x22\x22\x3B\x32\x20\x71\x3D\x22\x22\x3B\x31\x73\x20\x31\x31\x28\x29\x7B\x32\x20\x56\x3D\x2D\x31\x3B\x38\x28\x5A\x2E\x31\x79\x3D\x3D\x27\x31\x7A\x20\x31\x76\x20\x31\x75\x27\x29\x7B\x32\x20\x31\x65\x3D\x5A\x2E\x31\x77\x3B\x32\x20\x31\x30\x3D\x31\x78\x20\x31\x32\x28\x22\x31\x74\x20\x28\x5B\x30\x2D\x39\x5D\x7B\x31\x2C\x7D\x5B\x5C\x2E\x30\x2D\x39\x5D\x7B\x30\x2C\x7D\x29\x22\x29\x3B\x38\x28\x31\x30\x2E\x31\x41\x28\x31\x65\x29\x21\x3D\x31\x70\x29\x56\x3D\x31\x71\x28\x31\x32\x2E\x24\x31\x29\x7D\x31\x6F\x20\x56\x7D\x32\x20\x57\x3D\x31\x31\x28\x29\x3B\x38\x28\x57\x3D\x3D\x2D\x31\x7C\x7C\x57\x3E\x3D\x39\x29\x7B\x31\x34\x28\x6D\x2E\x66\x28\x27\x4C\x3D\x22\x63\x27\x29\x21\x3D\x2D\x31\x29\x7B\x69\x3D\x6D\x2E\x66\x28\x27\x4C\x3D\x22\x63\x27\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x2B\x34\x29\x3B\x69\x3D\x6D\x2E\x66\x28\x27\x22\x27\x29\x3B\x70\x5B\x6E\x5D\x3D\x6D\x2E\x65\x28\x30\x2C\x69\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x29\x3B\x37\x5B\x6E\x5D\x3D\x77\x2E\x79\x28\x70\x5B\x6E\x5D\x29\x2E\x75\x3B\x64\x5B\x6E\x5D\x3D\x30\x3B\x6E\x2B\x2B\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x2D\x31\x3B\x69\x2B\x2B\x29\x7B\x76\x28\x6A\x3D\x69\x2B\x31\x3B\x6A\x3C\x6E\x3B\x6A\x2B\x2B\x29\x7B\x38\x28\x37\x5B\x6A\x5D\x2E\x66\x28\x70\x5B\x69\x5D\x29\x21\x3D\x2D\x31\x29\x7B\x49\x3D\x70\x5B\x6A\x5D\x3B\x4B\x3D\x37\x5B\x6A\x5D\x3B\x64\x5B\x6A\x5D\x3D\x64\x5B\x69\x5D\x2B\x31\x3B\x45\x3D\x64\x5B\x6A\x5D\x3B\x76\x28\x68\x3D\x69\x2B\x31\x3B\x68\x3C\x6A\x3B\x68\x2B\x2B\x29\x7B\x38\x28\x64\x5B\x68\x5D\x3C\x45\x29\x7B\x31\x37\x7D\x7D\x76\x28\x6B\x3D\x6A\x3B\x6B\x3E\x68\x3B\x6B\x3D\x6B\x2D\x31\x29\x7B\x70\x5B\x6B\x5D\x3D\x70\x5B\x6B\x2D\x31\x5D\x3B\x37\x5B\x6B\x5D\x3D\x37\x5B\x6B\x2D\x31\x5D\x3B\x64\x5B\x6B\x5D\x3D\x64\x5B\x6B\x2D\x31\x5D\x7D\x70\x5B\x68\x5D\x3D\x49\x3B\x37\x5B\x68\x5D\x3D\x4B\x3B\x64\x5B\x68\x5D\x3D\x45\x7D\x7D\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x3B\x69\x2B\x2B\x29\x7B\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x40\x3C\x61\x20\x4A\x3D\x22\x23\x63\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x2B\x31\x29\x3B\x6A\x3D\x71\x2E\x66\x28\x27\x3C\x2F\x61\x3E\x27\x29\x3B\x71\x3D\x71\x2E\x65\x28\x6A\x2B\x34\x29\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x71\x7D\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x50\x3D\x22\x59\x22\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x29\x3B\x38\x28\x64\x5B\x69\x5D\x3E\x36\x29\x64\x5B\x69\x5D\x3D\x36\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x27\x74\x3D\x22\x31\x35\x3A\x27\x2B\x28\x31\x39\x2D\x64\x5B\x69\x5D\x2A\x35\x29\x2B\x27\x25\x22\x20\x27\x2B\x71\x7D\x62\x2B\x3D\x37\x5B\x69\x5D\x7D\x62\x2B\x3D\x27\x3C\x67\x20\x50\x3D\x22\x31\x66\x22\x3E\x3C\x2F\x67\x3E\x27\x3B\x46\x2E\x75\x3D\x62\x3B\x46\x2E\x74\x2E\x51\x3D\x27\x31\x62\x27\x3B\x32\x20\x4D\x3D\x77\x2E\x79\x28\x27\x31\x61\x27\x29\x2E\x75\x3B\x32\x20\x6F\x3D\x4F\x28\x4D\x29\x3B\x38\x28\x6F\x3E\x72\x29\x7B\x62\x3D\x27\x3C\x67\x20\x74\x3D\x22\x47\x3A\x31\x63\x22\x3E\x31\x64\x20\x27\x3B\x32\x20\x48\x3D\x28\x6F\x2D\x6F\x25\x72\x29\x2F\x72\x2B\x31\x3B\x32\x20\x73\x3D\x27\x27\x3B\x32\x20\x6C\x3D\x31\x3B\x69\x3D\x78\x2E\x66\x28\x27\x2E\x31\x6C\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x78\x2E\x65\x28\x30\x2C\x69\x2B\x35\x29\x7D\x7A\x7B\x73\x3D\x78\x7D\x69\x3D\x73\x2E\x66\x28\x27\x23\x44\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x73\x2E\x65\x28\x30\x2C\x69\x29\x7D\x69\x3D\x78\x2E\x66\x28\x27\x3F\x53\x3D\x27\x29\x3B\x38\x28\x69\x3D\x3D\x2D\x31\x29\x7B\x6C\x3D\x31\x7D\x7A\x7B\x6C\x3D\x4F\x28\x78\x2E\x65\x28\x69\x2B\x31\x33\x29\x29\x7D\x76\x28\x69\x3D\x31\x3B\x69\x3C\x3D\x48\x3B\x69\x2B\x2B\x29\x7B\x38\x28\x69\x3D\x3D\x6C\x29\x7B\x62\x2B\x3D\x27\x3C\x55\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x55\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x61\x20\x4A\x3D\x22\x27\x2B\x73\x2B\x27\x3F\x53\x3D\x27\x2B\x69\x2B\x27\x23\x44\x22\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x61\x3E\x27\x7D\x7D\x38\x28\x6C\x2A\x72\x3C\x3D\x6F\x29\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x28\x6C\x2A\x72\x29\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x6F\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x32\x20\x43\x3D\x77\x2E\x79\x28\x27\x31\x69\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x43\x3D\x77\x2E\x79\x28\x27\x31\x68\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x38\x28\x6C\x3C\x48\x29\x7B\x62\x3D\x27\x3C\x74\x20\x31\x67\x3D\x22\x31\x6B\x2F\x31\x6A\x22\x3E\x2E\x58\x20\x7B\x51\x3A\x20\x31\x38\x7D\x3C\x2F\x74\x3E\x27\x3B\x32\x20\x4E\x3D\x77\x2E\x79\x28\x27\x31\x36\x27\x29\x3B\x4E\x2E\x75\x3D\x62\x7D\x7D\x7D\x7A\x7B\x31\x34\x28\x6D\x2E\x66\x28\x27\x4C\x3D\x63\x27\x29\x21\x3D\x2D\x31\x29\x7B\x69\x3D\x6D\x2E\x66\x28\x27\x4C\x3D\x63\x27\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x2B\x33\x29\x3B\x69\x3D\x6D\x2E\x66\x28\x27\x3E\x27\x29\x3B\x70\x5B\x6E\x5D\x3D\x6D\x2E\x65\x28\x30\x2C\x69\x29\x3B\x6D\x3D\x6D\x2E\x65\x28\x69\x29\x3B\x37\x5B\x6E\x5D\x3D\x77\x2E\x79\x28\x70\x5B\x6E\x5D\x29\x2E\x75\x3B\x64\x5B\x6E\x5D\x3D\x30\x3B\x6E\x2B\x2B\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x2D\x31\x3B\x69\x2B\x2B\x29\x7B\x76\x28\x6A\x3D\x69\x2B\x31\x3B\x6A\x3C\x6E\x3B\x6A\x2B\x2B\x29\x7B\x38\x28\x37\x5B\x6A\x5D\x2E\x66\x28\x70\x5B\x69\x5D\x29\x21\x3D\x2D\x31\x29\x7B\x49\x3D\x70\x5B\x6A\x5D\x3B\x4B\x3D\x37\x5B\x6A\x5D\x3B\x64\x5B\x6A\x5D\x3D\x64\x5B\x69\x5D\x2B\x31\x3B\x45\x3D\x64\x5B\x6A\x5D\x3B\x76\x28\x68\x3D\x69\x2B\x31\x3B\x68\x3C\x6A\x3B\x68\x2B\x2B\x29\x7B\x38\x28\x64\x5B\x68\x5D\x3C\x45\x29\x7B\x31\x37\x7D\x7D\x76\x28\x6B\x3D\x6A\x3B\x6B\x3E\x68\x3B\x6B\x3D\x6B\x2D\x31\x29\x7B\x70\x5B\x6B\x5D\x3D\x70\x5B\x6B\x2D\x31\x5D\x3B\x37\x5B\x6B\x5D\x3D\x37\x5B\x6B\x2D\x31\x5D\x3B\x64\x5B\x6B\x5D\x3D\x64\x5B\x6B\x2D\x31\x5D\x7D\x70\x5B\x68\x5D\x3D\x49\x3B\x37\x5B\x68\x5D\x3D\x4B\x3B\x64\x5B\x68\x5D\x3D\x45\x7D\x7D\x7D\x76\x28\x69\x3D\x30\x3B\x69\x3C\x6E\x3B\x69\x2B\x2B\x29\x7B\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x40\x3C\x41\x20\x4A\x3D\x22\x23\x63\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x2B\x31\x29\x3B\x6A\x3D\x71\x2E\x66\x28\x27\x3C\x2F\x41\x3E\x27\x29\x3B\x71\x3D\x71\x2E\x65\x28\x6A\x2B\x34\x29\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x71\x7D\x6A\x3D\x37\x5B\x69\x5D\x2E\x66\x28\x27\x50\x3D\x59\x27\x29\x3B\x38\x28\x6A\x21\x3D\x2D\x31\x29\x7B\x42\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x30\x2C\x6A\x29\x3B\x71\x3D\x37\x5B\x69\x5D\x2E\x65\x28\x6A\x29\x3B\x38\x28\x64\x5B\x69\x5D\x3E\x36\x29\x64\x5B\x69\x5D\x3D\x36\x3B\x37\x5B\x69\x5D\x3D\x42\x2B\x27\x74\x3D\x22\x31\x35\x3A\x27\x2B\x28\x31\x39\x2D\x64\x5B\x69\x5D\x2A\x35\x29\x2B\x27\x25\x22\x20\x27\x2B\x71\x7D\x62\x2B\x3D\x37\x5B\x69\x5D\x7D\x62\x2B\x3D\x27\x3C\x67\x20\x50\x3D\x22\x31\x66\x22\x3E\x3C\x2F\x67\x3E\x27\x3B\x46\x2E\x75\x3D\x62\x3B\x46\x2E\x74\x2E\x51\x3D\x27\x31\x62\x27\x3B\x32\x20\x4D\x3D\x77\x2E\x79\x28\x27\x31\x61\x27\x29\x2E\x75\x3B\x32\x20\x6F\x3D\x4F\x28\x4D\x29\x3B\x38\x28\x6F\x3E\x72\x29\x7B\x62\x3D\x27\x3C\x67\x20\x74\x3D\x22\x47\x3A\x31\x63\x22\x3E\x31\x64\x20\x27\x3B\x32\x20\x48\x3D\x28\x6F\x2D\x6F\x25\x72\x29\x2F\x72\x2B\x31\x3B\x32\x20\x73\x3D\x27\x27\x3B\x32\x20\x6C\x3D\x31\x3B\x69\x3D\x78\x2E\x66\x28\x27\x2E\x31\x6C\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x78\x2E\x65\x28\x30\x2C\x69\x2B\x35\x29\x7D\x7A\x7B\x73\x3D\x78\x7D\x69\x3D\x73\x2E\x66\x28\x27\x23\x44\x27\x29\x3B\x38\x28\x69\x21\x3D\x2D\x31\x29\x7B\x73\x3D\x73\x2E\x65\x28\x30\x2C\x69\x29\x7D\x69\x3D\x78\x2E\x66\x28\x27\x3F\x53\x3D\x27\x29\x3B\x38\x28\x69\x3D\x3D\x2D\x31\x29\x7B\x6C\x3D\x31\x7D\x7A\x7B\x6C\x3D\x4F\x28\x78\x2E\x65\x28\x69\x2B\x31\x33\x29\x29\x7D\x76\x28\x69\x3D\x31\x3B\x69\x3C\x3D\x48\x3B\x69\x2B\x2B\x29\x7B\x38\x28\x69\x3D\x3D\x6C\x29\x7B\x62\x2B\x3D\x27\x3C\x55\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x55\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x61\x20\x4A\x3D\x22\x27\x2B\x73\x2B\x27\x3F\x53\x3D\x27\x2B\x69\x2B\x27\x23\x44\x22\x3E\x27\x2B\x69\x2B\x27\x3C\x2F\x61\x3E\x27\x7D\x7D\x38\x28\x6C\x2A\x72\x3C\x3D\x6F\x29\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x28\x6C\x2A\x72\x29\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x7A\x7B\x62\x2B\x3D\x27\x3C\x2F\x67\x3E\x3C\x67\x20\x74\x3D\x22\x47\x3A\x54\x22\x3E\x27\x2B\x28\x28\x28\x6C\x2D\x31\x29\x2A\x72\x29\x2B\x31\x29\x2B\x27\x20\x2D\x20\x27\x2B\x6F\x2B\x27\x20\x52\x20\x27\x2B\x6F\x2B\x27\x20\x44\x3C\x2F\x67\x3E\x27\x7D\x32\x20\x43\x3D\x77\x2E\x79\x28\x27\x31\x69\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x43\x3D\x77\x2E\x79\x28\x27\x31\x68\x27\x29\x3B\x43\x2E\x75\x3D\x62\x3B\x38\x28\x6C\x3C\x48\x29\x7B\x62\x3D\x27\x3C\x74\x20\x31\x67\x3D\x22\x31\x6B\x2F\x31\x6A\x22\x3E\x2E\x58\x20\x7B\x51\x3A\x20\x31\x38\x7D\x3C\x2F\x74\x3E\x27\x3B\x32\x20\x4E\x3D\x77\x2E\x79\x28\x27\x31\x36\x27\x29\x3B\x4E\x2E\x75\x3D\x62\x7D\x7D\x7D&quot;,&quot;\x7C&quot;,&quot;\x73\x70\x6C\x69\x74&quot;,&quot;\x7C\x7C\x76\x61\x72\x7C\x7C\x7C\x7C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x69\x66\x7C\x7C\x7C\x73\x74\x72\x6F\x75\x74\x7C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x4C\x65\x76\x65\x6C\x7C\x73\x75\x62\x73\x74\x72\x69\x6E\x67\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x64\x69\x76\x7C\x7C\x7C\x7C\x7C\x43\x6D\x5F\x43\x75\x72\x5F\x50\x61\x67\x65\x7C\x43\x6D\x5F\x42\x6C\x6F\x63\x6B\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x7C\x43\x6D\x5F\x4E\x75\x6D\x7C\x43\x6D\x5F\x54\x6F\x74\x61\x6C\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x49\x64\x7C\x73\x74\x72\x5F\x74\x32\x7C\x32\x30\x30\x7C\x4F\x72\x67\x5F\x55\x72\x6C\x5F\x54\x68\x72\x65\x61\x64\x43\x4D\x7C\x73\x74\x79\x6C\x65\x7C\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C\x7C\x66\x6F\x72\x7C\x64\x6F\x63\x75\x6D\x65\x6E\x74\x7C\x43\x75\x72\x5F\x55\x72\x6C\x5F\x54\x68\x72\x65\x61\x64\x43\x4D\x7C\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64\x7C\x65\x6C\x73\x65\x7C\x7C\x73\x74\x72\x5F\x74\x31\x7C\x43\x6D\x5F\x50\x61\x67\x65\x5F\x4F\x62\x6A\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x4C\x65\x76\x65\x6C\x5F\x54\x7C\x43\x6D\x5F\x42\x6C\x6F\x63\x6B\x7C\x66\x6C\x6F\x61\x74\x7C\x43\x6D\x5F\x50\x61\x67\x65\x5F\x4E\x75\x6D\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x49\x64\x5F\x54\x7C\x68\x72\x65\x66\x7C\x43\x6D\x5F\x49\x74\x65\x6D\x5F\x43\x6F\x6E\x74\x65\x6E\x74\x5F\x54\x7C\x69\x64\x7C\x43\x6D\x5F\x54\x6F\x74\x61\x6C\x5F\x4F\x62\x6A\x7C\x43\x6D\x5F\x52\x65\x70\x6C\x79\x43\x53\x53\x5F\x4F\x62\x6A\x7C\x70\x61\x72\x73\x65\x49\x6E\x74\x7C\x63\x6C\x61\x73\x73\x7C\x64\x69\x73\x70\x6C\x61\x79\x7C\x6F\x66\x7C\x63\x6F\x6D\x6D\x65\x6E\x74\x50\x61\x67\x65\x7C\x72\x69\x67\x68\x74\x7C\x73\x70\x61\x6E\x7C\x72\x76\x7C\x49\x45\x5F\x76\x65\x72\x7C\x63\x6D\x5F\x61\x75\x74\x68\x6F\x72\x5F\x72\x65\x70\x6C\x79\x7C\x63\x6D\x5F\x77\x72\x61\x70\x7C\x6E\x61\x76\x69\x67\x61\x74\x6F\x72\x7C\x72\x65\x7C\x67\x65\x74\x49\x6E\x74\x65\x72\x6E\x65\x74\x45\x78\x70\x6C\x6F\x72\x65\x72\x56\x65\x72\x73\x69\x6F\x6E\x7C\x52\x65\x67\x45\x78\x70\x7C\x7C\x77\x68\x69\x6C\x65\x7C\x77\x69\x64\x74\x68\x7C\x63\x6D\x5F\x72\x65\x70\x6C\x79\x5F\x63\x73\x73\x7C\x62\x72\x65\x61\x6B\x7C\x6E\x6F\x6E\x65\x7C\x31\x30\x30\x7C\x63\x6D\x5F\x74\x6F\x74\x61\x6C\x7C\x62\x6C\x6F\x63\x6B\x7C\x6C\x65\x66\x74\x7C\x50\x61\x67\x65\x7C\x75\x61\x7C\x63\x6C\x65\x61\x72\x7C\x74\x79\x70\x65\x7C\x63\x6D\x5F\x70\x61\x67\x65\x5F\x63\x6F\x70\x79\x7C\x63\x6D\x5F\x70\x61\x67\x65\x7C\x63\x73\x73\x7C\x74\x65\x78\x74\x7C\x68\x74\x6D\x6C\x7C\x63\x6D\x5F\x62\x6C\x6F\x63\x6B\x7C\x6C\x6F\x63\x61\x74\x69\x6F\x6E\x7C\x72\x65\x74\x75\x72\x6E\x7C\x6E\x75\x6C\x6C\x7C\x70\x61\x72\x73\x65\x46\x6C\x6F\x61\x74\x7C\x77\x69\x6E\x64\x6F\x77\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x4D\x53\x49\x45\x7C\x45\x78\x70\x6C\x6F\x72\x65\x72\x7C\x49\x6E\x74\x65\x72\x6E\x65\x74\x7C\x75\x73\x65\x72\x41\x67\x65\x6E\x74\x7C\x6E\x65\x77\x7C\x61\x70\x70\x4E\x61\x6D\x65\x7C\x4D\x69\x63\x72\x6F\x73\x6F\x66\x74\x7C\x65\x78\x65\x63&quot;,&quot;&quot;,&quot;\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65&quot;,&quot;\x72\x65\x70\x6C\x61\x63\x65&quot;,&quot;\x5C\x77\x2B&quot;,&quot;\x5C\x62&quot;,&quot;\x67&quot;];eval(function (_0x4f09x1,_0x4f09x2,_0x4f09x3,_0x4f09x4,_0x4f09x5,_0x4f09x6){_0x4f09x5=function (_0x4f09x3){return (_0x4f09x3&lt;_0x4f09x2?_0x7bf4[4]:_0x4f09x5(parseInt(_0x4f09x3/_0x4f09x2)))+((_0x4f09x3=_0x4f09x3%_0x4f09x2)&gt;35?String[_0x7bf4[5]](_0x4f09x3+29):_0x4f09x3.toString(36));} ;if(!_0x7bf4[4][_0x7bf4[6]](/^/,String)){while(_0x4f09x3--){_0x4f09x6[_0x4f09x5(_0x4f09x3)]=_0x4f09x4[_0x4f09x3]||_0x4f09x5(_0x4f09x3);} ;_0x4f09x4=[function (_0x4f09x5){return _0x4f09x6[_0x4f09x5];} ];_0x4f09x5=function (){return _0x7bf4[7];} ;_0x4f09x3=1;} ;while(_0x4f09x3--){if(_0x4f09x4[_0x4f09x3]){_0x4f09x1=_0x4f09x1[_0x7bf4[6]]( new RegExp(_0x7bf4[8]+_0x4f09x5(_0x4f09x3)+_0x7bf4[8],_0x7bf4[9]),_0x4f09x4[_0x4f09x3]);} ;} ;return _0x4f09x1;} (_0x7bf4[0],62,99,_0x7bf4[3][_0x7bf4[2]](_0x7bf4[1]),0,{}));
--&gt;&lt;/script&gt;

Langkah 4

<b:includable id='comments' var='post'>
   <!-----------------------------------------
     -----------------------------------------
     ---- HAPUS SEMUA KODE DALAM AREA INI ----
     -----------------------------------------
     ----------------------------------------->
</b:includable>

<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
        <h4>
          <b:if cond='data:post.numComments == 0'>
            Belum Ada Komentar
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> Respon Komentar
          </b:if>
        </h4>
        
        <div id='cm_reply_css'/>
        
        <div class='cm_pagenavi' id='cm_page'/>
        
        <div id='cm_block'>
<script type='text/javascript'>
jml = 0;
</script>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>
                
                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/> 

<b:if cond='data:comment.author == data:post.author'>
                               <div class='cm_head'>
                                <div class='cm_avatar_a'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>                        
                                </div>
                                <div class='cm_reply'>
                                    [hg]<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=GANTI-DENGAN-ID-BLOG-ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#comment-msg&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>[/hg]
                                </div>
                            </div>
<b:else/>

                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>                        
                                </div>
                                <div class='cm_reply'>
                                    [hg]<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=GANTI-DENGAN-ID-BLOG-ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#comment-msg&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>[/hg]
                                </div>
                            </div>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
                                <div class='cm_entry_a'>
                                <div class='cm_info_a'>
                                    <div class='cm_name_a'>
                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>, said...
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>, said...
                                        <b:else/>
                                            <data:comment.author/>, said...
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/> 
                                            </b:if>                                   
                                </div>  
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p class='adityas-blog-thread-comments'><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p class='adityas-blog-thread-comments'><data:comment.body/></p>
                                 </b:if> 
                            </div>
                        

<b:else/>

                            <div class='cm_entry'>
                                <div class='cm_info'>
                                    <div class='cm_name'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                      <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>, said...
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>, said...
                                        <b:else/>
                                           <data:comment.author/>, said...
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/> 
                                            </b:if>                                   
                                </div>  
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p class='adityas-blog-thread-comments'><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p class='adityas-blog-thread-comments'><data:comment.body/></p>
                                 </b:if> 
                            </div>
</b:if>
                        </div>
                    </div>
                </b:if>              
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'/>

    <b:if cond='data:post.embedCommentForm'>
            <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='comment-form'/>
            <b:else/>
                <data:post.noNewCommentsText/>
            </b:if>
            <b:else/>
            <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
            </b:if>
    </b:if>

  </b:if>
  </div>

Perhatikan kode yang sudah di tandai. Di sana anda akan menemukan tulisan GANTI-DENGAN-ID-BLOG-ANDA. Ganti tulisan tersebut dengan ID BLOG anda.
Untuk mengetahui ID BLOG, perhatikan gambar dibawah ini. Misalkan anda sedang membuka halaman Edit Template.

Dalam kotak berwarna merah merupakan ID BLOG anda.

Langkah 5

          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>

<b:include data='post' name='comments'/>

Full Spesifikasi Sony Xperia Acro S dan Harga 30 May 2012 3:25 PM (12 years ago)

Spesifikasi Sony Xperia Acro S

Nokia Lumia 900 Mengalahkan HTC One X 18 May 2012 11:08 AM (12 years ago)

Spesifikasi dan Harga Nokia Lumia 900 18 May 2012 10:55 AM (12 years ago)

Berikut ini adalah info spesifikasi dan harga Nokia Lumia 900, si handset terbaru Nokia untuk seri Lumia. Kelebihan paling kentara Nokia Lumia 900 ialah fasilitas 4G LTE yang tidak di miliki iPhone 4s, meskipun sangat diharapkan. Selain itu, Nokia dan Microsoft menaruh harapan besar akan kesuksesan ponsel yang gunakan OS Windows Phone terbaru yakni WP 7.5 si Mango.
Kehadiran Nokia Lumia 900 telah menaikan derajat OS Windows Phone ke level lebih tinggi yakni mulai diperhitungkan sebagai kandidat terkuat pesaing iOS milik Apple dan Android milik Google. Namun begitu, ia belumlah menjadi pesaing tangguh karena masih perlu banyak optimisasi.

Dan setelah membaca sejumlah review, saya dapati hal paling banyak disayangkan yang kemudian tumbuh menjadi kekecewaan ialah besaran resolusi untuk kamera yang cuma 8MP. Mereka mengharapkan Nokia akan memberikan besaran proporsional atau paling tidak sesuai keinginan. Langsung saja meluncur ke spesifikasi Nokia Lumia 900 dan harganya.

Copy Text to Clipboard Menggunakan Javascript 10 May 2012 5:06 PM (12 years ago)

Setelah browsing dan nanya sama mbah google, saya akhirnya menemukan cara mengcopy text to clipboard menggunakan javascript.
Cara ini menggunakan javascript library yang disebut dengan ZeroClipBoard, gabungan dari javascript dan actionscript pada Adobe Flash.

Contoh Script dalam HTML

<!--lokasi javascript zeroclipboard -->
<script type="text/javascript" src="ZeroClipboard.js"></script>
<textarea name="box-content" id="box-content" rows="5" cols="70">
        Copy text ke clipboarad menggunakan ZeroClipBoard
</textarea>
<br /><br />
<p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p>

Contoh dalam JavaScript

//pilih tempat atau lokasi dimana anda menyimpan file SWF dari zeroClipBoard.
ZeroClipboard.setMoviePath('ZeroClipboard.swf');

var clip = new ZeroClipboard.Client();
//event
clip.addEventListener('mousedown',function() {
 clip.setText(document.getElementById('box-content').value);
});
clip.addEventListener('complete',function(client,text) {
 alert('copied: ' + text);
});
clip.glue('copy');

Demo

Membuat Program Google Pagerank Menggunakan Javascript 8 May 2012 4:45 AM (12 years ago)

Apa itu pagerank?

Menurut Wikipedia pagerank adalah sebuah algoritma yang telah dipatenkan yang berfungsi menentukan situs web mana yang lebih penting/populer. PageRank merupakan salah satu fitur utama mesin pencari Google dan diciptakan oleh pendirinya, Larry Page dan Sergey Brin yang merupakan mahasiswa Ph.D. Universitas Stanford.

1. Graph (Grafik)
2. Adjacency Matrix
3. Row Stochastic Matrix
4. Eigenvector Centrality
5. Power Iteration

1. Graph

2. Adjacency Matrix

adjacencyMatrix = $M([
    [0,0,0,0,0,0,0,0,0,0,0],
    [0,0,1,0,0,0,0,0,0,0,0],
    [0,1,0,0,0,0,0,0,0,0,0],
    [1,1,0,0,0,0,0,0,0,0,0],
    [0,1,0,1,0,1,0,0,0,0,0],
    [0,1,0,0,1,0,0,0,0,0,0],
    [0,1,0,0,1,0,0,0,0,0,0],
    [0,1,0,0,1,0,0,0,0,0,0],
    [0,1,0,0,1,0,0,0,0,0,0],
    [0,0,0,0,1,0,0,0,0,0,0],
    [0,0,0,0,1,0,0,0,0,0,0]
]);

3. Row Stochastic Matrix

Matrix.prototype.row_stochastic = function(damping_factor) {
 
    var row_length = this.elements[0].length;
[hg]    var d = (1 - damping_factor) / row_length;[/hg]
 
    var row_total = [];
 
[hg]    for (var x = 0; x < row_length; x++) {
        row_total.push(0);
        for (y = 0; y < row_length; y++) {
            row_total[x] += this.elements[x][y];
        }
    }[/hg]
 
    var a1 = this.elements.clone();
 
[hg]    for (var x = 0; x < row_length; x++) {
        for (var y = 0; y < row_length; y++) {
            if (row_total[x] > 0) {
                a1[x][y] = a1[x][y]/row_total[x] + d;
            }
            else {
                a1[x][y] = (1/row_length) + d;
            }
        }
    }[/hg]
 
    return $M(a1);
}

4. Eigenvector Centrality

Power Iteration

1. Kita mulai dengan vektor. Hal ini dapat menggunakan vektor apapun dengan setidaknya satu elemen tidak nol.
2. Kita mengalikan vektor ini dengan matriks.
3. Kita mengambil vektor yang dihasilkan, menormalkan, dan kemudian kalikan dengan matriks lagi.
4. Kita ulangi langkah 3 sampai kita mencapai jumlah yang diterima toleransi untuk kesalahan.
5. Vektor yang dihasilkan adalah pendekatan dari vektor eigen yang kita cari.

Vector.prototype.normalize = function() {
 
    var row_length = this.elements.length;
    var t = 0;
 
    for (var i = 0; i < row_length; i++) {
        t += this.elements[i];
    }
 
    return this.multiply((1.0/t));
}

Matrix.prototype.eigenvector = function() {
 
    var tolerance = 0.000001;
 
    var row_length = this.elements[0].length;
 
    var a = [];
 
    for (var i = 0; i < row_length; i++) {
        a.push(1);
    }
 
    var x = $V(a);
 
    var c_old = 0;
 
    for (var i = 0; i < 100; i++) {
        var x_new = x.normalize()
        var c_new = x_new.elements[0];
 
        var e = 100 * (c_new - c_old)/c_new;
        if (Math.abs(e) < tolerance) {
            break;
        }
 
        x = this.multiply(x_new);
        c_old = c_new;
    }
 
    return $V(x);
 
}

Matrix.prototype.pagerank = function() {
    var damping_value = Pages.dampingFactor;
    var row_stochastic_matrix = this.row_stochastic(damping_value);
    var transposed_matrix = row_stochastic_matrix.transpose();
    var eigenvector = transposed_matrix.eigenvector();
    var normalized_eigenvector = eigenvector.normalize();
    return normalized_eigenvector.elements;

Sharing Bookmark Dock OS X Dengan jQuery dan CSS3 4 May 2012 3:43 PM (12 years ago)

Memasang Widget Sharing Bookmarks

div#adityasBlogContainer {
 position: fixed;
 bottom: 113px;
 height: 0px;
 text-align: center;
 left:0;
 width:100%;
 line-height: 1;
 z-index: 100;
}

ul.adityasBlog-dock li span{
 font-weight: normal;
 font-style: normal;
 font-size: 100%;
 line-height: 1;
 font-family: inherit;
 text-align: left;
}

div.cap.left {
 position: absolute;
 bottom: 0px;
 left: 0px;
}

div.auth{
font-size:9px;
margin:-6px 0 0;
width:98%;
position:absolute;
}

div.cap {
 display: block;
 height: 100px;
 width: 40px;
 background: url(https://lh6.googleusercontent.com/-Bh5rPsfrrhQ/T6P8IEPGTHI/AAAAAAAABDE/5ag9gxVUEFA/s1000/adityasBlogDock.png) bottom left no-repeat;
}

div#adityasBlogwrapper:hover {
 bottom:0;
}

div#adityasBlogwrapper {
 width: auto;
 display: inline-block;
 position: relative;
 border-bottom: solid 2px rgba(255, 255, 255, .35);
 line-height: 0;
 bottom:-40px;
 -webkit-transition:all 0.2s ease-in;
 -moz-transition:all 0.2s ease-in;
 -o-transition:all 0.2s ease-in;
}

Inherited from div#adityasBlogContainer
div#adityasBlogContainer {
text-align: center;
line-height: 1;
}

ul.adityasBlog-dock { 
 display: inline-block; 
 height: 110px; 
 padding: 0 40px 0 0; 
 background: url(https://lh6.googleusercontent.com/-Bh5rPsfrrhQ/T6P8IEPGTHI/AAAAAAAABDE/5ag9gxVUEFA/s1000/adityasBlogDock.png) no-repeat right bottom; 
 overflow: hidden; 
 margin: 0 0 0 40px; 
}

ul.adityasBlog-dock li {
 display: block;
 position: relative;
 float: left;
 width: 40px;
 height: 60px;
 margin: 53px 0 0 0;
 -webkit-transition: 0.175s linear;
 -webkit-transition-property: -webkit-transform margin;
 -moz-transition: 0.175s linear;
 -moz-transition-property: -moz-transform margin;
 -o-transition: 0.175s linear;
 -o-transition-property: -o-transform margin;
 text-align: center;
}
  
ul.adityasBlog-dock li a {
 display: block;
 height: 29px;
 padding: 0 1px;
 -webkit-transition: 0.15s linear;-moz-transition: 0.15s linear;
 -webkit-transition-property: -webkit-transform margin;
 -moz-transition-property: -moz-transform margin;
 -o-transition-property: -o-transform margin;
 margin: 0;
 -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
}

ul.adityasBlog-dock li a img { 
 width: 35px; 
width: 35px;
padding: 0;
border: 0;
background: transparent;
}
  
ul.adityasBlog-dock li:hover { 
 margin-left: 9px; margin-right: 9px;
 z-index: 200;
}

ul.adityasBlog-dock li:hover a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.6);
 -moz-transform-origin: center bottom;
 -moz-transform: scale(1.6);
 -o-transform-origin: center bottom;
 -o-transform: scale(1.6);
}

ul.adityasBlog-dock li.nearby { 
 margin-left: 6px; margin-right: 6px;
 z-index: 100;
}

ul.adityasBlog-dock li.nearby a { 
 -webkit-transform-origin: center bottom;
 -webkit-transform: scale(1.35);
 -moz-transform-origin: center bottom;
 -moz-transform: scale(1.35);
 -o-transform-origin: center bottom;
 -o-transform: scale(1.35);
}

ul.adityasBlog-dock li span { 
 background: rgba(0,0,0,0.75); 
 position: absolute; 
 bottom: 80px; 
 margin: 0 auto; 
 display: none; 
 width: auto; 
 font-size: 11px; 
 font-weight: bold; 
 padding: 3px 6px; 
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 border-radius: 6px; 
 color: #fff; 
}

ul.adityasBlog-dock li:hover span { 
 display: block; 
}

[hg]<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>[/hg]
<script type='text/javascript' src='https://sites.google.com/site/adityameilaz/file-adityas-blog/adityasBlogTipsy.js'></script>
<script type='text/javascript'>
  $(document).ready(function(){
   $("a[rel=tipsy]").tipsy({fade: true, gravity: "s"});

    $("ul.adityasBlog-dock li").each(function (type) {
        $(this).hover(function () {
          $(this).prev("li").addClass("nearby");
          $(this).next("li").addClass("nearby");
        },
        function () {
          $(this).prev("li").removeClass("nearby");
          $(this).next("li").removeClass("nearby");
        });
      });
  });
</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
         <data:post.body/>

<div id='adityasBlogContainer'>
 <div id='adityasBlogwrapper'>
  <div class='cap left'></div>
   <ul class='adityasBlog-dock'>
    <li class='active'>
     <span>Stumbleupon</span>
     <a target='_blank' rel='nofollow' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '><img src='https://lh6.googleusercontent.com/-FAxgPuexrl8/T6PBICnaJ9I/AAAAAAAABCc/0MxCQ2PTCMM/s64/stumbleupon.png'/></a>
    </li>
    <li>
     <span>Delicious</span>
     <a target='_blank' rel='nofollow' expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '><img src='https://lh3.googleusercontent.com/-jy7YmNk-XWk/T6PBEj1BQ8I/AAAAAAAABBw/LKBgadKc8c8/s64/delicious.png'/></a></li>
    <li>
     <span>Digg</span>
     <a target='_blank'  expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><img src='https://lh4.googleusercontent.com/-KJJQosOJ1nA/T6PBFBpQdaI/AAAAAAAABB0/qwAjfNU1x2E/s64/digg.png'/></a></li>
    <li>
     <span>facebook</span>
     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='javascript:window.open(this.href,&apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&apos;);return false;' rel='nofollow'><img src='https://lh6.googleusercontent.com/-ZVkbzYCMbJM/T6PBFQEtfhI/AAAAAAAABCA/hfET4MK-g5Y/s64/facebook.png'/></a></li>
    <li>
     <span>Google</span>
     <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&apos;);return false;' rel='nofollow'><img src='https://lh3.googleusercontent.com/-_0U5JepAjrc/T6PBGfUCGgI/AAAAAAAABCE/ilh410_fo5o/s64/google.png'/></a></li>
    <li>
     <span>Linkedin</span>
     <a target='_blank'  expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow'><img src='https://lh4.googleusercontent.com/-joK50DBKGh0/T6PBG4NlocI/AAAAAAAABCM/3TeBX-exTNs/s64/linkedin.png'/></a></li>
    <li>
     <span>Technorati</span>
     <a target='_blank'  expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow'><img src='https://lh5.googleusercontent.com/-Tstl-feeBfA/T6PBJAs5fCI/AAAAAAAABCg/hrAJA23tisw/s64/technorati.png'/></a></li>
    <li>
     <span>Twitter</span>
     <a target='_blank'  expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow'><img src='https://lh3.googleusercontent.com/-pt7TokaVluM/T6PBJ2R08dI/AAAAAAAABCs/TBwcGDFV1hQ/s64/twitter.png'/></a></li>
    <li>
     <span>RSS</span>
     <a target='_blank'  expr:href='data:blog.homepageURL + &quot;/feeds/posts/default&quot;'><img src='https://lh4.googleusercontent.com/-h6CXSXo-rvM/T6PBHQEfJBI/AAAAAAAABCY/jud8_XJ_e4c/s64/rss.png'/></a></li>
   </ul>
 </div>
</div>

Google Page Rank Updated 2012 3 May 2012 6:19 PM (12 years ago)

Animasi Hover Effect Keren Dengan Webkit 28 Apr 2012 1:19 AM (12 years ago)

Hari ini saya mau memperlihatkan animasi dari CSS3, tips ini saya dapatkan dari http://www.marcofolio.net/.
Di sana banyak sekali tips tricks CSS dan lumayan juga untuk menjadi referensi kita dalam mempelajari CSS3.

Tetapi tutorial yang ini hanya bisa menggunakan browser webkit (Google Chrome dan Safari), selain dari itu animasi dari tutorial ini kurang sempurna.

ul h3, ul p, ul a {
 padding:0;
 margin:0;
}

#animasiwebkit { 
 list-style:none; 
 margin:100px 0; 
 height:550px; 
}

#animasiwebkit li {
 display:inline; 
 float:left;
 -webkit-perspective: 500;
 -moz-transform: skew(10deg);
 -o-transform: skew(10deg); 
 -webkit-transform-style: preserve-3d;
 -webkit-transition-property: perspective;
 -o-transition-property: perspective;
 -moz-transition-property: perspective; 
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -o-transition-duration: 0.5s; 
}

#animasiwebkit li:hover { 
 -webkit-perspective: 5000;
 -moz-transform: skew(0deg);
 -o-transform: skew(0deg);
 z-index:9;
 margin:0px; 
}
 
#animasiwebkit li img { 
 border:10px solid #fcfcfc; 
 -webkit-transform: rotateY(30deg);
 -o-transform: rotateY(30deg);
 -moz-transform: rotateY(30deg);
 -moz-box-shadow:0 3px 10px #888;
 box-shadow:0 3px 10px #888;
 -webkit-box-shadow:0 3px 10px #888;
 -webkit-transition-property: transform;
 -webkit-transition-duration: 0.5s;
 -o-transition-property: transform; 
 -o-transition-duration: 0.5s;
 -moz-transition-property: transform; 
 -moz-transition-duration: 0.5s;
 width:160px;
 height:310px; 
}

#animasiwebkit li:hover img { 
 -webkit-transform: rotateY(0deg);
 -moz-transform: rotateY(0deg);
 -o-transform: rotateY(0deg); 
}

.info { 
 border:10px solid #fcfcfc; 
 padding:7px; 
 width:93px; 
 height:165px; 
 background-color:#deddcd; 
 margin:-195px 0 0 55px; 
 position:absolute;
 -moz-box-shadow:0 20px 40px #888;
 box-shadow:0 20px 40px #888; 
 -webkit-box-shadow:0 20px 40px #888;
 -webkit-transform: translateZ(30px) rotateY(30deg);
 -moz-transform: translateZ(30px) rotateY(30deg);
 -o-transform: translateZ(30px) rotateY(30deg);
 -webkit-transition-property: transform, box-shadow, margin; 
 -webkit-transition-duration: 0.5s;
 -moz-transition-property: transform, box-shadow, margin; 
 -moz-transition-duration: 0.5s;
 -o-transition-property: transform, box-shadow, margin; 
 -o-transition-duration: 0.5s; 
 line-height:normal;
}
 
#animasiwebkit li:hover .info { 
 -webkit-transform: rotateY(0deg);
 -moz-transform: rotateY(0deg);
 -o-transform: rotateY(0deg); 
 -webkit-box-shadow:0 5px 10px #888;
 box-shadow:0 5px 10px #888;
 -moz-box-shadow:0 5px 10px #888;
 margin:-175px 0 0 30px; 
}
 
.info h3 { 
 color:#7a3f3a; 
 font-variant: small-caps; 
 font-family:Georgia,serif,Times; 
 text-align:center; 
 padding-bottom:15px; 
}

.info p { padding-bottom:15px; }

.info a { 
 background-color:#7a3f3a; 
 padding:5px; 
 color:#eee; 
 text-decoration:none; 
 display:block; 
 width:84px; 
 text-align:center; 
 margin:0 auto;
 -moz-border-radius:5px; 
 -webkit-border-radius:5px;border-radius:5px; 
}

.info a:hover, .info a:focus { 
 background-color:#6a191f; 
 color:#fff; 
}

<ul id="animasiwebkit">
 <li>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs-4ZxHNmUXNgrJJaKZTcEe2DinBqqKu7R6_4tK6Ym8P_-0VIlNqc7V0RbN1BPno7KDxVJ9QnvB3h3-LP-2Cn7jYatWd_oxGkMpMq7IHDgeLIgwngCPAcMYxIq_DhWJKMSAdJuZaTeERVR/s1600/blogg_1.jpg" alt="Subscribe Email" />
  <div class="info">
   <h3>Subscribe Email</h3>
   <p>Salam Blogger.! Hari ini...</p>
   <a href="http://adityameilaz.blogspot.com/2012/03/memasang-widget-subscribe-email-untuk.html" target="_blank" title="Subscribe Email">Selengkapnya</a>
  </div>
 </li>
 <li>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF4an13ewBekA6UkLEMkrCp4ACr4N-qj3mB6CiXOweWdBg7_WOX7v8wfAdzAOsNol_SU1nNs17fWoZX9JFjZhK73OgUGo6lvcJtxOdvdc01rC94tnALHqkqANGBU1FmYNcsIEfi8AR8LUP/s1600/facebook.png" alt="Komentar facebook" />
  <div class="info">
   <h3>Komentar facebook</h3>
   <p>Ternyata saya sudah...</p>
   <a href="http://adityameilaz.blogspot.com/2011/03/kotak-komentar-facebook-versi-terbaru.html" target="_blank" title="Komentar facebook">Selengkapnya</a>
  </div>
 </li>
 <li>
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoALp6hg_qAZsbMcI3zFBPb79LvqDSNOi514TfUfUmmiOVGQzgigcWPhRXg8B0NtSCP_s0w62PB-uNnaS0cGvKRed59HoueO2x0pzrkxUJVbi0f4b045lCSA4LflO3ZXgk47BqilknNxXL/s1600/twitter-icon.png" alt="Widget Twitter" />
  <div class="info">
   <h3>Widget Twitter</h3>
   <p>Dalam artikel saya yang...</p>
   <a href="http://adityameilaz.blogspot.com/2012/03/memasang-widget-tweet-twitter-di-blog.html" target="_blank" title="Widget Twitter">Selengkapnya</a>
  </div>
 </li>
</ul>

Related Post Animasi Untuk Blogger atau Blogspot 27 Apr 2012 3:55 AM (12 years ago)

Bismillahirrahmanirrahim,
Jika anda ingin membuat isi dari postingan blognya selalu dibaca oleh pengunjung atau membuat mereka merasa betah dengan blog anda. Saya akan membagikan salah satu wdiget yang akan menampilkan sebagian dari artikel atau postingan yang terkait atau juga lebih dikenal dengan Related Post untuk anda yang ingin mencobanya.

Perbedaan dari widget saya yang satu ini adalah dilengkapi animasi dengan menggunakan CSS3. Bagi saya dengan tambahan animasi seperti ini akan mudah menarik perhatian si pengunjung, atau mungkin penasaran untuk mencoba memilih salah satu link dari artikel anda.

Berikut contoh dari widget Related Postnya.

Langkah Pemasangan Related Post

<link href='https://sites.google.com/site/adityameilaz/file-adityas-blog/snap.css' rel='stylesheet' type='text/css'/>

<div class='post-footer-line post-footer-line-3'>
<!------------ Paste Kode di Area ini ------------>
</div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Related Post</h3>
<div class='adityasBlogRelated' style='background:#fff'>
<script type='text/javascript'>
 var defaultnoimage='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh88N62nAbQlE92f_neV-FJ5OrSXmtc6I0Qj-2z7OmcocvbKLERuhSUeBj2InaRBQa_NmdgyHh-AdG6ZhIfwuK4U6F5nyU03HbqKi95xxP83wjvLlDk5mGpQEOHFTUSkSDdz4Ews24V4SuQ/';
 var maxresults=4;
</script>
<script type='text/javascript'>
//<![CDATA[
 var relatedTitles = new Array();
 var relatedTitlesNum = 0;
 var relatedUrls = new Array();
 var thumburl = new Array();
 function related_results_labels_thumbs(json) {
  for (var i = 0; i < json.feed.entry.length; i++) {
  var entry = json.feed.entry[i];
  relatedTitles[relatedTitlesNum] = entry.title.$t;
   try
    {thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
   catch (error){
    s=entry.content.$t;
    a=s.indexOf("<img");
    b=s.indexOf("src=\"",a);
    c=s.indexOf("\"",b+5);
    d=s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
     thumburl[relatedTitlesNum]=d;
    }
    else {
     if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; 
     else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbIJs0HR7DU9K_dmbUvimGzBsi-yIaWX9khCHkk5bVEOMh_OQnVbkZFSE4-NPCKnhNXtEcMTMK1xsJLT41ToK-8m2Cw0SUnWi0hscImCysszuyiMdEzdC6sOo5o6GEF3xo-C3gAEGhE0Y/s400/noimage.png";
    }
   }
   if(relatedTitles[relatedTitlesNum].length>44) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
   for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
     relatedUrls[relatedTitlesNum] = entry.link[k].href;
     relatedTitlesNum++;
    }
   }
  }
}

function removeRelatedDuplicates_thumbs() {
 var tmp = new Array(0);
 var tmp2 = new Array(0);
 var tmp3 = new Array(0);
 for(var i = 0; i < relatedUrls.length; i++) {
  if(!contains_thumbs(tmp, relatedUrls[i])){
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp3.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];
   tmp3[tmp3.length - 1] = thumburl[i];
  }
 }
 relatedTitles = tmp2;
 relatedUrls = tmp;
 thumburl=tmp3;
}

function contains_thumbs(a, e) {
 for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
 return false;
}

function printRelatedLabels_thumbs(current) {
 var splitbarcolor;
 if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#d4eaf2";
 for(var i = 0; i < relatedUrls.length; i++){
  if((relatedUrls[i]==current)||(!relatedTitles[i])){
   relatedUrls.splice(i,1);
   relatedTitles.splice(i,1);
   thumburl.splice(i,1);
   i--;
  }
 }
 var r = Math.floor((relatedTitles.length - 1) * Math.random());
 var i = 0;

[hg] var adityasBlogRlt = 25;[/hg]
 if(relatedTitles.length>0)
 document.write('<div id="content" class="items hfeed" style="margin-top: 12px;">');
 while (i < relatedTitles.length && i < 20 && i<maxresults) {
 if (thumburl[r].indexOf("/s72-c/") != -1) {
      thumburl[r] = thumburl[r].replace("/s72-c/", "/s200-c/")
    }
  document.write('<a href="'+ relatedUrls[r] +'" title="Baca : '+relatedTitles[r]+'"><div class="item hentry" style="left: '+adityasBlogRlt+'px; top: 0px; width: 125px; height: 118px; "><div class="card "><div class="front" style="background-image: url('+thumburl[r]+');"><div class="overlay"></div></div><div class="back"><div class="overlay"><div class="title entry-title">'+relatedTitles[r]+'</div><span class="bubble  comments-count "><span class="bubble-content">Baca</span><span class="bubble-tail"></span></span></div></div></div></div></a>');

[hg]  adityasBlogRlt = adityasBlogRlt + 150;[/hg]
  i++;
  if (r < relatedTitles.length - 1) {
   r++;
  } 
  else {
   r = 0;
  }
 }
 document.write('</div>');
 relatedUrls.splice(0,relatedUrls.length);
 thumburl.splice(0,thumburl.length);
 relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
        <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:label.isLast != &quot;true&quot;'>
   </b:if>
   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'></script>
        </b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>

Update Status facebook via Blog ver II 18 Apr 2012 12:28 AM (12 years ago)

Menambahkan Widget Status facebook

1. Pada form Id facebook, isi dengan id facebook anda.
   Untuk mengetahui id facebook anda, silahkan klik link berikut ini Graph API Explorer dan perhatikan gambar seperti di bawah ini.
   
   
   Bagian yang sudah ditandai merupakan id facebook anda.
   
2. Pada form Id Aplikasi, isi dengan id aplikasi facebook anda
3. Tekan button "Tambahkan!" untuk mengaktifkan widget Update Status facebook via Blog ver II ini

Live Streaming Global TV Online 16 Apr 2012 7:07 PM (12 years ago)

Live Streaming RCTI Online 16 Apr 2012 5:09 PM (12 years ago)

Memasang Recent Comment Langsung Dengan Avatar di Blog 28 Mar 2012 4:41 AM (13 years ago)

Install Widget Recent Comments

Memasang Widget Tweet Twitter di Blog atau Blogspot 26 Mar 2012 5:41 AM (13 years ago)

Cara Menambahkan Widget Tweets

1. Masukkan id user twitter anda pada form di bawah.
   (tidak menggunakan symbol @ pada username).
2. Masukkan jumlah banyaknya tweets yang akan di tampilkan (max 5 tweets)
3. Tekan tombol "Tambahkan!" untuk memuat script widget.

Enable Fiture Blogger SEO Search Preferences Untuk Blogspot 25 Mar 2012 2:47 AM (13 years ago)

1. Search Meta Tag Description
2. Custom Post Meta Description
3. Custom 404 error page
4. Redirect
5. Custom Robots.txt
6. Custom Robots Header Tags
7. Alt dan Title Tag untuk Gambar

Aktifasi Search Preferences

1. Search Meta Tag Description

2. Custom Post Meta Description

3. Custom 404 error page

4. Redirect

5. Custom Robots.txt

6. Custom Robots Header Tags

7. Alt dan Title Tag untuk Gambar

1. Upload Gambar ke post editor.
2. Klik pada gambar yang anda ingin atur Alt tag dan Title.
3. Sebuah menu kecil muncul di atas / bawah Image, Pilih Option Properties.
4. Pada prompt Popup, masukkan Judul dan Alt Tags untuk gambar.

Chat Box atau Buku Tamu dengan Animasi jQuery 23 Mar 2012 8:43 PM (13 years ago)

[hg]<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js' type='text/javascript'></script>[/hg]
<script src='https://sites.google.com/site/adityameilaz/file-adityas-blog/jquery.slidePanel.fx.js' type='text/javascript'></script>

Memasang Widget Chat Box

1. Copy paste kode CSS di atas pada form di bawah ini.
2. Copy paste kode Buku Tamu anda pada form kedua.
3. Pilih tombol "Tambahkan!" untuk mengaktifkan widget Chat Box

Memasang Widget Subscribe Email Untuk Blogger atau Blogspot 21 Mar 2012 10:41 PM (13 years ago)

<script src='https://sites.google.com/site/adityameilaz/file-adityas-blog/jquery.js?m=1352653157g&amp;ver=1.7.1' type='text/javascript'></script>
<link href='https://sites.google.com/site/adityameilaz/file-adityas-blog/follow_rool.css' id='loggedout-subscribe-css' media='all' rel='stylesheet' type='text/css'/>
<script src='https://sites.google.com/site/adityameilaz/file-adityas-blog/follow_rool.js?m=1354470057g&amp;ver=20120215' type='text/javascript'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var LoggedOutFollow = {'invalid_email':'Maaf, email yang anda masukkan salah. Cobalah memasukkan alamat email yang benar.'};
/* ]]> */
</script>

<div class='loggedout-follow-normal' id='bit'>
   <a class='bsub' href='javascript:void(0)'><span id='bsub-text'>Berlangganan</span>
   <span id='bsub-text'/></a>
   <div id='bitsubscribe'>
      <h3><label for='loggedout-follow-field'>Follow <data:blog.title/></label></h3>
      <form action='http://feedburner.google.com/fb/a/mailverify' id='loggedout-follow' method='post' target='popupwindow'>
      <p>Berlangganan artikel terbaru dari <data:blog.title/>.</p>
      <p id='loggedout-follow-error' style='display: none;'/>
      <p><input id='loggedout-follow-field' name='email' onblur='this.value=(this.value==&quot;&quot;) ? &quot;Masukkan alamat email&quot; : this.value;' onfocus='this.value=(this.value==&quot;Masukkan alamat email&quot;) ? &quot;&quot; : this.value;' style='width: 95%; padding: 1px 2px' type='text' value='Masukkan alamat email'/></p>

[hg]      <input name='uri' type='hidden' value='blogspot/adityasblog'/>[/hg]
      <input name='loc' type='hidden' value='en_US'/>
      </form>
<p style='margin:0px 0 4px 0'>
[hg]<a href='http://feeds.feedburner.com/blogspot/adityasblog' target='_blank'>
<img alt='' height='26' src='http://feeds2.feedburner.com/%7Efc/blogspot/adityasblog?bg=d3d3d3&amp;fg=202931&amp;anim=1&amp;label=listeners' style='border:0' width='88'/>
</a>[/hg]<br/>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Post (RSS)</a> | <a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments (RSS)</a></p>
   </div>
</div>

Memasang Emotion Animasi Lucu di Kotak Komentar Thread Comment Blogspot 19 Mar 2012 12:46 PM (13 years ago)

Buat sobat blogger yang ingin memasang emotion lucunya di kotak komentar terbaru ala blogspot mungkin dengan membaca artikel saya kali ini bisa sedikit membantu para blogger untuk menghiasi kotak komentarnya dengan kumpulan emotion-emotion lucu.

Sebenarnya artikel ini adalah update-an dari artikel saya yang sebelumnya, di sana juga membahas cara memasang emoticon di kotak komentar (kotak komentar versi jadulnya). Dan emoticon animasinya juga sedikit ada perbedaan dari yang sebelumnya.

Bagi yang ingin mencoba bisa mengikuti langkah-langkah di bawah ini.

Langkah 1

Langkah 2

<div style='background-color:#fff;border:1px solid #d3d3d3;-webkit-border-radius:8px;padding-top:10px;padding-bottom:10px;'>
<center>
   <p style='color:#000'>
      <b>
         <img src='http://adityas.vacau.com/emotion/nangis.gif' width='20'/>:a:
         <img src='http://adityas.vacau.com/emotion/80.gif' width='20'/>:b:
         <img src='http://adityas.vacau.com/emotion/02.gif' width='20'/>:c:
         <img src='http://adityas.vacau.com/emotion/77.gif' width='20'/>:d:
         <img src='http://adityas.vacau.com/emotion/48_002.gif' width='20'/>:e:
         <img src='http://adityas.vacau.com/emotion/67.gif' width='20'/>:f:<br/>
         <img src='http://adityas.vacau.com/emotion/grrr.gif' width='20'/>:g:
         <img src='http://adityas.vacau.com/emotion/39_002.gif' width='20'/>:h:
         <img src='http://adityas.vacau.com/emotion/17_002.gif' width='27'/>:i:
         <img src='http://adityas.vacau.com/emotion/51_002.gif' width='25'/>:j:
      </b>
      <br/>
      <br/>
      <a OnClick='window.open(&quot;http://adityas.vacau.com/&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes, width=550, height=520&quot;);return true' href='javascript:void(0);' rel='nofollow'>Emotion lainnya?</a>
   </p>
</center>
</div>

<p class='comment-footer'>
   <b:if cond='data:post.embedCommentForm'>

   <!----------- PASTE DI SINI ----------->

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

   <!----------- PASTE DI SINI ----------->

Langkah 3

Menambahkan CSS Untuk Thread Comment di Blogspot (Custome Threaded Comment Blogspot) 18 Mar 2012 11:15 PM (13 years ago)

Untuk kesekian kalinya saya ngebahas lagi tentang Threaded Comment Blogspot tapi untuk yang kali ini insya Allah berbeda dengan artikel saya yang sebelumnya.
Di artikel saya ini akan mencoba bagi tips custom threaded comment blogspot dengan CSS.
Nah, dengan menambahkan CSS ini sobat bisa merubah dari segi tampilan kotak komentar blognya supaya sedikit berbeda dari tampilan sebelumnya atau juga berbeda dari kotak  komentar teman-teman blogger lainnya.

Saya rasa pengantarnya sudah cukup.
Oh iya, bagi yang belum Enable Thread Comment Blogspot bisa lebih dulu mengikuti langkah-langkah di bawah ini.
Bagi yang sudah mengaktifkan bisa langsung ke tahap pemasangan CSSnya.

Cara mengaktifkan thread comment ini juga berbeda dari yang sebelumnya.
Cara yang satu ini manual (Edit HTML).
Tapi bagi sobat blogger yang tidak mau dibikin pusing sama kode HTML bisa langsung ke artikel yang sebelumnya cukup klik link berikut Aktivasi Thread Comment Blogspot.


Langkah 1 (Aktivasi Thread Comment)
Sebelumnya saya sarankan template sobat di backup terlebih dulu, ini cuma sebagai anti-wanti kalo seandainya ada error saat pengeditan nanti.

Masuk ke Edit HTML >> Expand Widget Content kemudian temukan kode id='comment-form-thread' persis seperti tag yang sudah di highlight di bawah ini

<b:includable id='comment-form' var='post'>
  <div class='comment-form' id='comment-form-thread'>

  .....kita tidak akan menghapus kode di area ini.....

  </div>
</b:includable>

<b:loop values='data:post.comments' var='comment'>
 
............................

</b:loop>

<b:if cond='data:comment.inReplyTo'>
<!--FIX-->
<b:else/>

<div class='replies-container'>
<b:loop values='data:post.comments' var='childComment'>
<b:if cond='data:childComment.inReplyTo == data:comment.id'>
  <div class='comment-replies' expr:id='data:childComment.id'>

              <div expr:class='&quot;comment-author-thread &quot; + data:childComment.authorClass' expr:id='data:childComment.anchorName'>
              <b:if cond='data:childComment.favicon'>
                <img expr:src='data:childComment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:childComment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:childComment.authorAvatarImage/>
              </b:if>
              </div>

          <div class='reply-to'>
            <b:if cond='data:childComment.authorUrl'>
              <a expr:href='data:childComment.authorUrl' rel='nofollow'><data:childComment.author/></a>
            <b:else/>
              <data:childComment.author/>
            </b:if>
            replied...

          <div class='comment-body-thread'>
            <b:if cond='data:childComment.isDeleted'>
              <span class='deleted-comment'><data:childComment.body/></span>
            <b:else/>
              <p><data:childComment.body/></p>
            </b:if>
          </div>

          <div class='comment-footer-thread'>
            <span class='comment-timestamp'>
              <a expr:href='data:childComment.url' title='Comment permalink'>
                <data:childComment.timestamp/>
              </a>
              <b:include data='childComment' name='commentDeleteIcon'/>
            </span>
          </div>
          </div>
  </div>
</b:if>
</b:loop>
</div>

<b:if cond='data:post.allowNewComments'>
<b:if cond='data:post.numComments &lt; 200'>
<a class='reply-action' expr:onclick='&quot;reply(&apos;&quot; + data:comment.id + &quot;&apos;);return false;&quot;' href='#'>Reply</a><br/>
<b:else/>
<script type='text/javascript'>
var indexc = &#39;<data:post.numComments/>&#39;
var indexcomment = &#39;<data:comment.id/>&#39;
//<![CDATA[
 var indexpage = indexc/200;
 indexpage = Math.ceil(indexpage);
 var indexl = window.location.href;
 indexl = indexl.indexOf("commentPage=" + indexpage + "");
 var replyAction = "<a class='reply-action' onclick='reply(&quot;" + indexcomment + "&quot;);return false;' href='#'>Reply</a><br/>";
if(indexl!=-1)if(indexc<indexpage*200)document.write(replyAction);
//]]>
</script>
</b:if>
<div class='contenedorreply' expr:id='&quot;contenedorreply-&quot; + data:comment.id'/>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>var flagItem = 0;</script>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<script type='text/javascript'>var flagItem = 1;</script>
</b:if>
<script type='text/javascript'>
  
var indexa = &#39;<data:top.id/>&#39;;
var indexb = &#39;<data:post.id/>&#39;;
//<![CDATA[
 
  flagItem="0"==flagItem?"&postID=":"&pageID=";

function replyOriginal() {

 var b = document.getElementById("comment-editor").getAttribute("src"), a = b.indexOf("#"), b = b.substring(a), a = document.getElementById("comment-editor");

  a.parentNode.removeChild(a);
  a = document.getElementById("replypost");
  a.parentNode.removeChild(a);

  b = "http://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb + b) + "";
  a = document.createElement("iframe");
  a.setAttribute("id", "comment-editor");
  a.setAttribute("name", "comment-editor");
  a.setAttribute("src", b);
  a.setAttribute("height", "250px");
  a.setAttribute("width", "100%");
  a.setAttribute("frameBorder", "0");
  a.setAttribute("allowtransparency", "true");
  document.getElementById("comment-form-thread").appendChild(a)
}
function reply(b) {
  var a = document.getElementById("comment-editor").getAttribute("src"), c = a.indexOf("#"), a = a.substring(c), c = document.getElementById("comment-editor");

  c.parentNode.removeChild(c);

  a = "http://www.blogger.com/comment-iframe.g?blogID=" + (indexa + flagItem + indexb) + "&parentID=" + (b + a) + "";
  c = document.createElement("iframe");
  c.setAttribute("id", "comment-editor");
  c.setAttribute("name", "comment-editor");
  c.setAttribute("src", a);
  c.setAttribute("height", "250px");
  c.setAttribute("width", "100%");
  c.setAttribute("frameBorder", "0");
  c.setAttribute("allowtransparency", "true");
  document.getElementById("contenedorreply-" + b + "").appendChild(c);

  document.getElementById("replypost") || (b = document.createElement("a"), b.innerHTML = "Add a comment", b.setAttribute("id", "replypost"), b.setAttribute("href", "javascript:void(0)"), b.setAttribute("class", "LoadMore"), document.getElementById("comment-form-thread").appendChild(b));
  var clickOn = document.getElementById("replypost");
  clickOn.addEventListener ? clickOn.addEventListener("click", replyOriginal, !1) : clickOn.attachEvent("onclick", replyOriginal);
}
//]]>
</script>

.comment-replies {margin:1.3em 0;line-height: 1.2em;padding: 12px;}
.comment-author-thread {float:left;}
#comments .replies-container .avatar-image-container {position:static;}
.replies-container {margin-left:50px;}
.comment-body-thread {padding:0.5em 0;margin-bottom:0.4em;}
.comment-body-thread p {margin:0;word-wrap: break-word;}
.comment-footer {margin: 0.5em 25px 1em;}
.reply-action {display:block;font-weight:bold;}
#comment-editor {border:0;}

Mengaktifkan Fitur Reply Komentar di Blogspot 10 Mar 2012 10:38 AM (13 years ago)

1. Blogger Dashboard >> Pilih blog yang ingin sobat gunakan (jika memiliki lebih dari satu blog).
2. Masuk ke Setting >> Posts and Comments.
3. Rubah pilihan pada Comment Location menjadi Embedded.

4. Setting >> Other
5. Pilih pilihan pada Allow Blog Feed menjadi Full.

1. Masuk ke Design >> Edit HTML.
2. Klik Revert widget templates to default.
3. Save Template.
4. Cek form komentarnya.