Adityas Blog

Showing posts with label Blogger. Show all posts

Beranda » Menampilkan artikel dari Blogger

Memasang Animasi Loading di Blogspot

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.

Pilih salah satu dari 2 jenis animasi loading dari artikel sebelumnya, kemudian lengkapi beberapa kode yang kosong di bawah ini dari kode yang terdapat dalam animasi loading yang anda pilih

Langkah 1

Temukan kode <b:skin><![CDATA[ lalu paste CSS di bawah ini di bagian bawah kode tersebut.

#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

Temukan kode <body> lalu paste kode di bawah ini pada bagian bawah kode <body> tersebut.

<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

Langkah terakhir, temukan kode </body> lalu paste javascript di bawah ini tepat pada bagian atas kode </body> tersebut.

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

Selesai dan semoga bermanfaat.

Selengkapnya →

Beranda » Menampilkan artikel dari Blogger

Memodifikasi Scrollbar Browser Menggunakan Webkit

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.

Anda dapat langsung merubah isi dalam CSS ini seperti merubah warna background atau menambahkan style yang lain

Dalam merubah isi CSS di bawah ini, jangan gunakan baris baru atau menekan tombol Enter karena anda tidak akan dapat melihat hasil preview dari modifikasi scrollbar

Jika anda sudah selesai dalam merubah isi CSS di atas, temukan kode <b:skin><![CDATA[ pada template anda kemudian copy paste CSS tersebut di bawah kode <b:skin><![CDATA[

Semoga Bermanfaat.

Selengkapnya →

Beranda » Menampilkan artikel dari Blogger

Membuat Animasi Loading Dengan CSS3

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.

Demo Animasi Loading Bar

Start Animasi

CSS3 Animasi Loading Bar

.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;}
}

HTML Animasi Loading Bar

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

Demo Animasi Loading Spin

Start Animasi

CSS3 Animasi Loading Spin

.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); }
}

HTML Animasi Loading Spin

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

Selamat belajar dan selamat mencoba trik Animation dari CSS3.

Jika anda ingin memasang animasi loading seperti di atas ke dalam blog anda, silahkan baca tutorialnya di sini --> Memasang Animasi Loading untuk Blogspot

Selengkapnya →

Beranda » Menampilkan artikel dari Blogger

Thread Comment Blogspot Ver II + Animasi Emoticon

Sebenarnya saya tidak ada keinginan untuk membuat artikel tentang thread comment blogspot yang satu ini, karena saya rasa tutorial untuk memasang thread comment blogspot ini sudah terlalu banyak yang membahasnya. Tetapi karena ada permintaan dari salah satu pasien Adityas Blog akhirnya tutorial kotak komentar ini akhirnya ikut nangkring juga di Adityas Blog.
Perlu diketahui sebelumnya bahwa thread comment ini bukan thread comment resmi (not official) dari blogspot.

Sebagai pembeda dari tutorial yang lainnya, di dalam kotak komentar ini langsung saya aplikasikan dengan kumpulan emoticon lucu-lucu untuk menghiasi setiap komentar dari anda maupun dari pengunjung blog anda.
Jadi jika ada yang ingin mencobanya, silahkan mengikuti tahap-tahap pemasangan seperti di bawah ini.

Langkah 1

Buka template anda, kemudian temukan kode ]]></b:skin>, lalu copy paste kode CSS di bawah ini tepat dibagian atas dari kode tersebut.

#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

Untuk langkah ke-2 ini merupakan kode untuk memasang animasi emoticonnya.
Jika anda tidak berminat, langkah 2 ini bisa anda lewatkan.

Temukan kode dibawah ini.

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

Kemudian paste kode emoticonnya pada bagian yang sudah ditandai dari kode di atas.

<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

Temukan kode </body>,lalu letakkan kode di bawah ini pada bagian atas kode </body> tersebut.

<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

Temukan kode seperti di bawah ini.

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

Setelah anda menghapus kode yang berada dalam bagian yang ditandai lalu paste kode dibawah ini.

<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

Coba anda temukan kode seperti di bawah ini.

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

Jika anda menemukan kode di atas (biasanya terdapat 4 kode sama), ganti ke-4 kode tersebut dengan kode di bawah ini

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

dan sebaliknya jika anda tidak menemukan kode tersebut, anda dapat menyimpan template anda.

Terkahir, simpan template.
Good Luck.!

Selengkapnya →

Beranda » Menampilkan artikel dari Blogger

Sharing Bookmark Dock OS X Dengan jQuery dan CSS3

Kali ini saya akan membagikan sebuah widget sharing bookmark keren untuk para blogger. Sharing bookmark ini saya buat hampir seperti Dock pada OS dan tentunya sangat menarik jika widget ini ikut nimbrung di blog anda.

Dengan memasang sharing bookmark ini blog anda akan lebih mudah lagi untuk mendapatkan traffic, karena mungkin saja salah satu artikel anda dibagikan oleh pengunjung ke beberapa situs social media seperti facebook, twitter dsb.

Berikut penampakan dari widget sharing bookmarks ini

Stumbleupon
Delicious
Digg
facebook
Google
Linkedin
Technorati
Twitter
RSS

Widget ini tidak dalam posisi static seperti contoh di atas, tetapi widget sharing bookmarks ini akan berada pada posisi floating atau berpindah-pindah mengikuti perpindahan posisi pada bagian bawah halaman.

Memasang Widget Sharing Bookmarks

Untuk pemasangannya anda cukup mengikuti tahap-tahap sederhana seperti di bawah ini.
Pertama kali temukan kode ]]></b:skin> lalu copy paste CSS di bawah ini tepat di atas kode tersebut

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

Selanjutnya copy paste jQuery di bawah ini di atas kode </head>
Jika ditemplate anda sudah terpasang jQuery, bagian yang dihighlight anda abaikan saja.

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

Langkah terakhir, temukan kode seperti di bawah ini

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

lalu letakkan code di bawah ini setelah tag <data:post.body/> dari kode yang anda cari tersebut

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

Simpan dan selesai!
Kalau ada masalah jangan sungkan-sungkan untuk bertanya, saya siap membantu

Selengkapnya →

Beranda » Menampilkan artikel dari Blogger

Google Page Rank Updated 2012

Kabar bagus buat para blogger, karena pada tanggal 4 Mei 2012 pukul 3 pagi tadi Mbah Google mengupdate pagerank untuk website. Perubahan pagerank ini ternyata berimbas juga kepada blog sederhana ini (Adityas Blog).

Saya rasa penambahan pagerank ini tidak hanya Adityas Blog saja melainkan semua blog yang pernah saya kunjungi dan saya cek ternyata ada peningkatan juga dari pageranknya.

Saran saya buat sobat blogger lainnya adalah sobat cek kembali pagerank blog masing-masing kemungkinan blog sobat juga mendapatkan hadiah pagerank dari mbah Google.
Jika pagerank masih belum berubah, coba dicek kembali tahun depan

Tapi sobat blogger jangan berkecil hati jika memang sobat belum mendapatkan pagerank Google, kabar bagusnya lagi sobat bisa mengecek kembali pada tanggal dan bulan di bawah ini.

Bulan/Tahun	Tanggal Page Rank Update
Desember 2012	Perkiraan 30 Des – 5 Jan 2013
September 2012	Perkiraan 25 Sep – 5 Okt, 2012
Juni 2012	Perkiraan 30 Jun – 5 Juli, 2012
April 2012	Konfirmasi 4 Mei 2012

Dari data tabel di atas tidak begitu dapat dipercaya, tetapi masih ada kemungkinan pagerank akan update pada tanggal seperti yang ada dalam tabel.

Saya doakan juga buat sobat blogger lainnya mudah-mudahan bernasib sama seperti Adityas Blog ini.
Happy Blogging.

Selengkapnya →

Beranda » Menampilkan artikel dari Blogger

Langkah Pemasangan Related Post

Pertama kali anda copy paste link CSS nya di dalam tag <head>

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

Temukan kode seperti di bawah ini.

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

Copy paste kode dibawah ini pada bagian yang sudah ditandai dari kode di atas.

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

Lihat pada bagian yang sudah dihighlight.
Angka 25 dan 150 merupakan angka pengatur rata kiri setiap item.
Jadi anda bisa menyesuaikannya untuk jenis template anda.

Jika anda merubah nilai 25 menjadi 30, anda juga wajib merubah nilai 150 menjadi 155 (masing-masing ditambah dengan nilai 5)

Sekian dan enjoy it.!!

Selengkapnya →

Beranda » Menampilkan artikel dari Blogger

Update Status facebook via Blog ver II

Dalam artikel ini Adityas Blog ingin berbagi widget yang keren banget bagi anda penggila facebook, apalagi anda yang exist dalam update status di facebook.

Artikel ini pernah saya bikin sebelumnya di Update Status facebook via Blog, pastinya widget yang satu ini berbeda dari yang sebelumnya. Di sini saya menambahkan satu fitur lagi, seseorang langsung bisa menambahkan anda sebagai teman di facebook tanpa perlu masuk ke facebook terlebih dulu.

Berikut penampakannya dan anda bisa langsung mencoba menambahkan saya sebagai teman di facebook atau mencoba update status dengan widget ini

Update statusmu

Add me as friend

Menambahkan Widget Status facebook

Silahkan anda isi form di bawah ini dengan ketentuan sebagai berikut :

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.
Pada form Id Aplikasi, isi dengan id aplikasi facebook anda
Tekan button "Tambahkan!" untuk mengaktifkan widget Update Status facebook via Blog ver II ini

Selengkapnya →

Beranda » Menampilkan artikel dari Blogger

Memasang Recent Comment Langsung Dengan Avatar di Blog

Biasanya kalau kita masuk ke blog pertama kali, pasti kita penasaran kalau mungkin ada pengunjung yang mengomentari salah satu artikel kita.
Untuk mengecek kabar terbaru dari komentar biasanya kita masuk ke bagian Dashboard terlebih dulu kemudian memilih Blog, terakhir baru ke bagian Comment Published.

Saya rasa langkah seperti di atas memang rumit + banyak menggunakan tab pada browser.
Untuk membuat para bloggeres merasa lebih nyaman dan tidak merasa ribet dengan cara-cara di atas, saya mau membagi satu widget yang cukup keren.

Widget yang satu akan menampilkan kabar komentar terbaru atau bisa juga di sebut Recent Comments di bagian panel blog.
Tidak hanya menampilkan isi komentar saja tetapi juga menampilkan gambar Avatar dari yang berkomentar.
Berikut saya perlihatkan penampakan dari widget ini.

Untuk memasang widget ini tidaklah sulit. Bagi anda yang berminat bisa mengisi form yang ada di bawah ini.

Install Widget Recent Comments

Silahkan mengisi form yang ada di bawah ini:

Jangan lupa tinggalkan komentarnya ya gan kalo berhasil. :)

Selengkapnya →

Beranda » Menampilkan artikel dari Blogger

Memasang Widget Tweet Twitter di Blog atau Blogspot

Dalam artikel saya yang satu ini, saya ingin mencoba berbagi widget buat sobat blogger.
Widget ini berfungsi untuk menampilkan kabar tweet akun twitter anda di dalam blog. Seperti yang banyak kita temui di blog-blog lainnya, tetapi untuk yang satu ini saya rasa berbeda.

Apalagi kalau anda termasuk orang yang exist di twitter, sepertinya akan terasa lebih ramai jika anda mencoba untuk memasangnya di blog anda.

Dengan adanya widget ini, anda akan pasti akan bisa lebih di kenal lagi oleh para pengunjung blog anda.
Saya rasa tidak ada salahnya jika anda hanya sekedar mencobanya.

Untuk tampilan widget ini, anda bisa melihat contohnya di bawah ini

Follow me @aditya_m_r

Cara Menambahkan Widget Tweets

Jika anda tertarik dengan widget yang satu ini, silahkan ikuti langkah-langkah seperti di bawah ini:

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

Semoga bermanfaat kawan! :)

Selengkapnya →

Beranda » Menampilkan artikel dari Blogger

Enable Fiture Blogger SEO Search Preferences Untuk Blogspot

Saya punya kabar baik bagi para penggila blogspot. Baru-baru ini blogger.com menambah fiture search preferences, ini merupakan sesuatu hal yang baik bagi pengguna blog yang ingin blognya terindex oleh search engine seperti google, alexabot dsb.
Selain dari itu, blogspot juga menambahkan hal baru lainnya seperti:

Search Meta Tag Description
Custom Post Meta Description
Custom 404 error page
Redirect
Custom Robots.txt
Custom Robots Header Tags
Alt dan Title Tag untuk Gambar

Saya akan menjelaskan satu persatu fungsi dari tambahan fitur blogspot di atas.

Aktifasi Search Preferences

Pertama kali anda harus mengaktifkan fitur ini.

Search preferences ini hanya tersedia untuk UI Dashboard yang terbaru.

Untuk mengaktifkan UI dashboard terbaru ini, anda bisa mengikuti langkah-langkah berikut:
Pilih New Blogger Dashboard >> Pilih blog anda.
Selanjutnya pilih Setting >> Search Preferences.

1. Search Meta Tag Description

Ini adalah deskripsi umum halaman utama, Optimalkan Home page blog dengan Deskripsi ini.
Deskripsi ini di isi dengan uraian singkat tentang blog dan max 150 karakter.

2. Custom Post Meta Description

Ini adalah meta description postingan atau artikel anda. Anda dapat mengatur dan menyesuaikan keterangan setiap postingan.
Anda dapat melihatnya pada bagian panel kanan halaman edit postingan.

3. Custom 404 error page

Blogger menambahkan pesan error/404 untuk halaman yang tidak ditemukan. Pesan error/404 biasanya terlihat di bagian pesan bar Blogger.
Anda dapat merubah halaman pesan error/404 dengan tag HTML bahkan dengan gambar juga bisa.

Preview:

4. Redirect

Ini juga sebuah pilihan besar baru dari Blogger.
Untuk redirect halaman satu ke halaman lain, anda dapat menggunakan option ini untuk menredirect dengan mudah.
Redirection adalah 302 Temporary Redirection dan redirection dikirim melalui HTTP Headers.

5. Custom Robots.txt

Blogger telah menyediakan option untuk merubah dan menyesuaikan robots.txt file. Ini adalah file utama untuk Robot Search Engine.
Menggunakan robots.txt anda dapat izinkan atau menghalangi Robot Search Engine untuk Crawl / mengindeks halaman.
Biasanya setiap website memiliki robots.txt . Anda dapat mengakses robots.txt file menggunakan url http://namabloganda.blogspot.com/robots.txt

Peringatan! Mengubah atau memodifikasi file robot.txt harus sesuai dengan visibilitas search engine!

Sebelum anda memodifikasi robots.txt ini, kunjungi halaman ini untuk berjaga-jaga jika terjadi kesalahan dalam memodifikasi.

6. Custom Robots Header Tags

Ini adalah robot tag untuk kontrol Robot Search Engine. Tag ini biasanya ditetapkan dalam (X) halaman HTML atau dikirim melalui HTTP Headers untuk diterima atau menghalangi Robot.
Dalam kasus Blogger tag ini dikirim melalui header HTTP.

Peringatan! Mengubah atau memodifikasi Robot header harus sesuai dengan visibilitas search engine!

Anda dapat mengatur tag Robots ke halaman beranda blog, arsip / label halaman, halaman posting pada crawler dan bagian pengindeksan di tab pencarian preferensi.

7. Alt dan Title Tag untuk Gambar

Alt dan title tag untuk gambar merupakan bantuan dalam pengindeksan gambar. Gambar anda dengan mudah diindeks oleh Bots Google Image atau Gambar Bots lain dengan Alt dan Title tag.
Untuk mengatur Alt tag dan title untuk Images, berikut langkah-langkahnya:

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

Saya harap postingan saya kali ini bermanfaat bagi blogger lainnya.

Selengkapnya →

Widget Title
Link Blog
Menampilkan avatar?
Border radius avatar?
Ukuran Gambar Avatar
Jumlah komentar (max 5)
Jumlah karakter komentar
Default link avatar
Menampilkan link More?
More Text

Id user twitter
Jumlah tweets yang di tampilkan

Langkah 1

Langkah 2

Langkah 3

Demo Animasi Loading Bar

CSS3 Animasi Loading Bar

HTML Animasi Loading Bar

Demo Animasi Loading Spin

CSS3 Animasi Loading Spin

HTML Animasi Loading Spin

Langkah 1

Langkah 2

Langkah 3

Langkah 4

Langkah 5

Memasang Widget Sharing Bookmarks

Langkah Pemasangan Related Post

Menambahkan Widget Status facebook

Install Widget Recent Comments

Cara Menambahkan Widget Tweets

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

Popular Posts

Artikel Terbaru

Kategori

Recent Comments