Adityas Blog

Membuat Gallery Image Menggunakan CSS3

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sun, 24 Jun 2012 18:10:00 +0700

Kembali lagi dengan tips dari CSS3, untuk tips kali ini Adityas Blog akan membagikan tutorial membuat gallery image yang hanya menggunakan CSS3.
Ini akan terlihat seperti lightbox pada umumnya tetapi di sini kita hanya menggunakan trik di dalam CSS3 tanpa menggunakan javascript dan sebagainya.

Untuk melihat hasil kerja dari tutorial ini, tekan button DEMO

DEMO

CSS Gallery ini dapat anda kembangkan kembali sesuai dengan kebutuhan
Bagi anda yang ingin berkreasi silahkan di copy paste kode CSSnya di bawah ini.

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>

Selamat Belajar dan Semoga Bermanfaat Bagi Kawan Blogger Indonesia

Memasang Animasi Loading di Blogspot

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sat, 23 Jun 2012 14:31:00 +0700

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.

Memodifikasi Scrollbar Browser Menggunakan Webkit

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sat, 23 Jun 2012 05:38:00 +0700

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.

Membuat Animasi Loading Dengan CSS3

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sun, 3 Jun 2012 07:36:00 +0700

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

Thread Comment Blogspot Ver II + Animasi Emoticon

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sat, 2 Jun 2012 07:25:00 +0700

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

Full Spesifikasi Sony Xperia Acro S dan Harga

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Thu, 31 May 2012 06:25:00 +0700

Xperia acro S menggunakan layar berukuran 4,3 HD Reality display dengan resolusi 720p. Kamera belakangnya dapat 'menangkap' gambar berukuran 12 megapiksel berkat diaplikasikannya sensor Exmor R dengan aperture f/2.4 dan dapat merekam video kualitas HD 1080p FullHD dan kamera depan memiliki ukuran 1,3 megapiksel serta dapat merekam video dengan resolusi 720p.

Prosesornya sendiri dari Qualcomm Snapdragon 'dual-core' dengan kecepatan 1,5GHz dan OS Android 4.0 (Ice Cream Sandwich), RAM 1 GB serta memori internal 16 GB.

Untuk layanan lokasi menawarkan fitur GPS dengan tambahan teknologi augmented yang didukung GLONASS satellite positioning system. Xperia acro S juga memiliki port HDMI dan mendukung teknologo NFC. Tersedia dalam tiga pilihan warna yaitu putih, hitam dan pink.

Spesifikasi Sony Xperia Acro S

Network
2G GSM 850, 900, 1800, 1900 MHz
3G HSPA/UMTS 900, 2100 MHz
HSPA/UMTS 850,1900, 2100 MHz

System Properties
Operating System Google Android 4.0 Ice Cream Sandwich OS
CPU 1.5GHz Qualcomm MSM8260 Snapdragon Dual-Core Processor
GPU Yes
RAM 1GB

Display
Type LED-backlit HD Reality Display
Size 4.3-inch
Colors & Resolution 16M Colors & 1280 X 720 Pixels
Pixel Density 342 PPI (approx.)

Design
Form Factor Candybar
Dimensions 126 x 66 x 11.9 mm
Weight 147 grams

Input / User Interface
Input – Sony Mobile Bravia Engine
- Timescape UI
- Accelerometer
- Proximity Sensor
- Touch Sensitive Controls

Camera
Primary (Rear-Facing) – 12 Megapixels
- 4000×3000 pixels
- LED Flash
- Sony Exmor R
- Aperture F/2.4
- Auto focus
- Face detection
- Smile detection, Digital zoom
- Geo tagging, 3D Sweep Panorama, Scenes
Video Recording Capability – 1080 HD Video Recording Capability
- 1920×1080 pixels
Secondary (Front-Facing) – 1.3 Megapixels

Memory
Internal Storage 16GB Internal Storage
Expandable Storage – Up To 32GB
- microSD Card Slot Support

Connectivity
Bluetooth 2.1 + A2DP, EDR
USB microUSB 2.0
HDMI No
WLAN – 802.11 Wi-Fi b/g/n
- Wi-Fi Hotspot
- DLNA
GPS Yes
3G Yes
NFC No
Radio FM Radio with RDS
Headset 3.5mm Audio Jack

Browser & Messaging
HTML 5. WAP 2.0, Adobe Flash
SMS, MMS, Email, Push Email, IM

Battery
Capacity Li-Ion 1910mAh Standard Battery
Standby Time Up To 290 Hours (2G)
Up To 310 Hours (3G)
Talk Time Up To 6 Hours 40 Mins (2G)
Up To 7 Hours 10 Mins (3G)
Video Playback Time Up To 6 Hours
Music Playback Time Up To 23 Hours

Music & Video
Audio Formats MP3, AAC, AAC+, WAV
Video Formats MP4, H.264, H.263

Other Features
Google Play Store
IP55/IP57 Rating Certified – Protected Against Dust-Limited To Ingress
Facebook Inside Xperia
Xperia Timescape
TrackID music recognition
xLoud
Sony 3D Surround Sound Audio Technology
Google Talk, Gmail, Google Maps, Google +
Facebook, MySpace, Twitter
Text to Speech, Google Voice Search
Adobe Flash
Digital Compass

Colors
Black, White, Pink

Untuk saat ini perkiraan harga Sony Xperia Acro S adalah Rp 5.800.000.
Sony Xperia Acros S ini juga akan masuk dalam pasaran pada kuartal 3 tahun 2012.

Nokia Lumia 900 Mengalahkan HTC One X

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sat, 19 May 2012 02:08:00 +0700

Setelah dipuji oleh pendiri Apple, Steve Wozniak, ponsel Windows Phone (WP) Nokia, Lumia 900 terus menambah rentetan keberhasilannya. Terkini, Nokia Lumia 900 dalam hal penjualan, dilaporkan berhasil mengalahkan smartphone unggulan Android, HTC One X

Alhasil dengan penjualan yang gemilang, handset WP Nokia tersebut berhasil menggenjot kedudukannya dalam persaingan smartphone. Menurut laporan ITPortal, Nokia Lumia 900 berhasil menduduki posisi kedua dibelakang iPhone 4S.

Dilansir dari T3, Sabtu (12/5/2012), penelitian tentang penjualan smartphone tersebut dilakukan oleh analis Travis McCourt, Raymond James bersama dengan Pierre Ferragu dari Bernstein Research. Tapi, diungkapkan Ferragu, ia percaya sukses luar biasa Nokia Lumia 900 akan berumur pendek

Mengenai penelitian kedua analis, mereka melakukan berdasarkan data penjualan yang diambil dari 15 toko AT & T dan 15 pengecer Inggris secara terpisah, yang mengklaim penjulaan Nokia Lumia 900 cukup baik di Amerika Serikat (AS) dan tidak menunjukkan tanda-tanda melambat.

Tentunya, ini merupakan kabar baik bagi Nokia, mengingat perusahaan Finlandia tersebut sedang mempersiapkan pembelaan terhadap gugatan hukum yang diajukan beberapa pemegang saham. Para pemegang saham itu mengklaim, Nokia menyesatkan mereka untuk mempercayai bahwa dengan mengadopsi WP akan membalikkan kemunduran perusahaan di sektor smartphone.

Spesifikasi dan Harga Nokia Lumia 900

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sat, 19 May 2012 01:55:00 +0700

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.

Spesifikasi Nokia Lumia 900

GENERAL	2G Network	GSM 850 / 900 / 1800 / 1900
	3G Network	HSDPA 850 / 1900 / 2100
	4G Network	LTE 700 MHz Class 17 / 1700 / 2100
	Announced	2012, January
	Status	Available. Released 2012, April

BODY	Dimensions	127.8 x 68.5 x 11.5 mm, 90 cc
BODY	Weight	160 g

DISPLAY	Type	AMOLED capacitive touchscreen, 16M colors
	Size	480 x 800 pixels, 4.3 inches (~217 ppi pixel density)
	Multitouch	Yes
	Protection	Corning Gorilla Glass
		- Nokia ClearBlack display

SOUND	Alert types	Vibration; MP3, WAV ringtones
	Loudspeaker	Yes
	3.5mm jack	Yes

MEMORY	Card slot	No
MEMORY	Internal	16GB storage, 512 MB RAM

DATA	GPRS	Class 33
	EDGE	Class 33
	Speed	HSDPA, 21 Mbps; HSUPA, 5.76 Mbps, LTE, Cat3, 50 Mbps DL, 25 Mbps UL
	WLAN	Wi-Fi 802.11 b/g/n
	Bluetooth	Yes, v2.1 with A2DP, EDR
	NFC	No
	USB	Yes, microUSB v2.0

CAMERA	Primary	8 MP, 3264×2448 pixels, Carl Zeiss optics, autofocus, dual-LED flash
	Features	Geo-tagging
	Video	Yes, 720p@30fps, video stabilization
	Secondary	Yes, 1.3 MP, VGA@30fps

FEATURES	OS	Microsoft Windows Phone 7.5 Mango
	Chipset	Qualcomm APQ8055 Snapdragon
	CPU	1.4 GHz Scorpion
	GPU	Adreno 205
	Sensors	Accelerometer, gyro, proximity, compass
	Messaging	SMS (threaded view), MMS, Email, Push Email, IM
	Browser	HTML5
	Radio	Stereo FM radio with RDS
	GPS	Yes, with A-GPS support
	Java	No
	Colors	Matte black, cyan
		- MicroSIM card support only - SNS integration - Active noise cancellation with dedicated mic - MP3/WAV/eAAC+/WMA player - MP4/H.264/H.263/WMV player - Document viewer/editor - Video/photo editor - Voice memo/command/dial - Predictive text input

BATTERY		Standard battery, Li-Ion 1830 mAh (BP-6EW)
	Stand-by	Up to 300 h
	Talk time	Up to 7 h
	Music play	Up to 60 h

Harga Nokia Lumia 900 adalah Rp.5.800.000

Copy Text to Clipboard Menggunakan Javascript

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Fri, 11 May 2012 08:06:00 +0700

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');

Berikut ini adalah demo dari script di atas, sangat simple sekali bukan.?

Demo

Untuk informasi lebih lengkap silahkan anda kunjungi link berikut ini
https://github.com/jonrohan/ZeroClipboard

Semoga bermanfaat.!

Membuat Program Google Pagerank Menggunakan Javascript

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Tue, 8 May 2012 19:45:00 +0700

Dalam artikel kali ini saya akan menjelaskan definisi dari google pagerank menggunakan program dari javascript agar lebih mudah dimengerti bagaimana si om google memberikan nilai pagerank terhadap suatu website atau blog.
Mudah-mudahan dengan program ini, anda bisa lebih mengerti lagi tentang google pagerank.

Saya akan menjelaskan sistem kerja program ini secara bertahap-tahap.

Apa itu pagerank?

Mungkin banyak dari anda yang mengerti tentang pagerank, tapi tidak salah juga jika saya akan mengulas kembali artian dari google 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.

Sebelumnya, kita harus memahami beberapa metode yang akan digunakan seperti:

Graph (Grafik)
Adjacency Matrix
Row Stochastic Matrix
Eigenvector Centrality
Power Iteration

1. Graph

Grafik/graph adalah representasi abstrak dari satu set objek yang dihubungkan dengan garis. Obyek disebut sebagai node (atau vektor) dan koneksi mereka sebagai ujungnya.
Ada dua jenis utama dari grafik. Grafik yang tidak diarahkan dan grafik yang diarahkan. Sebuah grafik yang diarahkan adalah salah satu tempat tepi antara dua node dianggap sama.

Hubungan antara grafik dengan Pagerank
PageRank adalah properti matematika tertentu dari grafik yang menggambarkan jaringan halaman dan link mereka. Kita tidak bisa benar-benar memahami konsep ini kecuali kita langsung terlibat dalam matematika.
Ada sejumlah cara matematis setara dengan memecahkan PageRank dari grafik mewakili struktur link dari jaringan halaman web. Pendekatan yang lebih mudah dipahamai adalah dengan menggunakan matriks.
Bila menggunakan matriks untuk menghitung PageRank kita mengukur sentralitas vektor eigen dari matriks dimodifikasi berdasarkan jaringan.

2. Adjacency Matrix

Untuk melakukan perhitungan apapun kita harus menjelaskan jaringan halaman web saling terhubung dalam semacam bahasa matematis. Antara lain, kita akan menggunakan bahasa matriks. Cabang matematika yang berhubungan dengan matriks disebut aljabar linear .

Apa itu matriks?
Secara sederhana, matriks adalah array persegi panjang elemen. Memiliki jumlah baris dan jumlah kolom. Matriks digunakan untuk sejumlah tujuan yang berbeda dan merupakan landasan matematika komputasi. Hampir setiap topik lanjutan dalam ilmu komputer, dari grafis 3D, AI, untuk analisis jaringan seperti PageRank melibatkan matriks.
Matriks dimulai sebagai cara untuk memecahkan sistem persamaan linear tetapi sesekali matriks itu sendiri dikembangkan dan terpisah dan diperluas untuk aplikasi lain.
Ini jelas berkaitan dengan algoritma PageRank.

Berikut adalah contoh matriks 11 x 11 yang akan dicontohkan dalam jaringan suatu website atau blog dalam pemberian nilai pagerank.

X	1	2	3	4	5	6	7	8	9	10	11
1	0	0	0	0	0	0	0	0	0	0	0
2	0	0	1	0	0	0	0	0	0	0	0
3	0	1	0	0	0	0	0	0	0	0	0
4	1	1	0	0	0	0	0	0	0	0	0
5	0	1	0	1	0	1	0	0	0	0	0
6	0	1	0	0	1	0	0	0	0	0	0
7	0	1	0	0	1	0	0	0	0	0	0
8	0	1	0	0	1	0	0	0	0	0	0
9	0	1	0	0	1	0	0	0	0	0	0
10	0	0	0	0	1	0	0	0	0	0	0
11	0	0	0	0	1	0	0	0	0	0	0

Sebagai contoh dari data tabel di atas, halaman 1 tidak memiliki link ke halaman manapun, sedangkan halaman 2 memberikan link kepada halaman 3 atau juga sebaliknya.

Grid ini disebut sebagai matriks adjacency dari grafik yang menggambarkan jaringan halaman web.
Dari data tabel di atas sekarang kita akan menerjemahkannya ke bahasa pemrograman komputer. Dalam contoh ini kita menggunakan javaScript library yang disebut Sylvester. Ia memiliki sejumlah kelas yang memungkinkan kita untuk membentuk matriks dan vektor di sejumlah dimensi.

Dalam istilah pemrograman, matriks mirip dengan array dari array.

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

Untuk sisa artikel ini, kita akan menambahkan fungsi ke dalam Matriks Sylvester.

3. Row Stochastic Matrix

PageRank juga dapat dianggap sebagai representasi dari seberapa besar kemungkinan itu adalah bahwa seseorang secara acak mengklik link baik berada pada halaman tertentu, kita perlu mengkonversi matriks ke representasi yang mewakili probabilitas.
Misalnya, sejak Halaman 5 memiliki 3 link di atasnya, ada 1 di 3 kemungkinan bahwa kita akan secara acak klik pada salah satu link tersebut.

Jenis matriks ini dikenal sebagai matriks stokastik , dan dalam kasus ini kita akan mencari matriks stokastik baris. Artinya, kita ingin setiap baris untuk menambahkan hingga 1. Kita akan kembali merepresentasi dari jaringan link di atas ke bentuk yang mengambil ke akun probabilitas bahwa pengguna acak akan browse ke halaman tertentu.

X	1	2	3	4	5	6	7	8	9	10	11
1	0	0	0	0	0	0	0	0	0	0	0
2	0	0	1.00	0	0	0	0	0	0	0	0
3	0	1.00	0	0	0	0	0	0	0	0	0
4	0.50	0.50	0	0	0	0	0	0	0	0	0
5	0	0.30	0	0.30	0	0.30	0	0	0	0	0
6	0	0.50	0	0	0.50	0	0	0	0	0	0
7	0	0.50	0	0	0.50	0	0	0	0	0	0
8	0	0.50	0	0	0.50	0	0	0	0	0	0
9	0	0.50	0	0	0.50	0	0	0	0	0	0
10	0	0	0	0	1.00	0	0	0	0	0	0
11	0	0	0	0	1.00	0	0	0	0	0	0

Namun, apa yang terjadi jika ada halaman yang bertindak sebagai penyerap, yaitu tidak memiliki link keluar atau disebut juga outbound links? Bagaimana halaman ini dapat terpengaruh dari perhitungan?

Jika kita secara acak tersandung di halaman web langka yang tidak memiliki link ke halaman lain kita akan mengasumsikan bahwa kita memiliki probabilitas yang sama di salah satu halaman web lain dalam jaringan. Artinya, kita akan mengasumsikan bahwa ada link ke setiap halaman dari halaman yang tidak memiliki link.
Agar adil buat halaman lainnya yang memiliki link, acak transisi ini ditambahkan ke semua halaman di jaringan, dengan peluang sisa tambahan yang disebut faktor redaman.

Faktor redaman disertakan untuk meningkatkan kemungkinan bahwa kita akan berakhir di halaman dengan sentralitas jaringan yang lebih dan melawan beberapa pelanggaran yang bisa spammer gunakan untuk permainan algoritma ini.
Baik penyesuaian yang dibuat untuk halaman menjuntai atau faktor redaman diperlukan untuk menghitung sentralitas jaringan.

Berikut adalah fungsi yang menghitung matriks stokastik baris:

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

Perhatikan bagian yang sudah saya highlight, disana akan menghitung probabilitas tambahan bergerak dari satu halaman ke halaman lain sebagai variabel yang disebut d, yang didasarkan pada faktor redaman dan jumlah total halaman web.
Selanjutnya, kita iterasi melalui setiap baris dan menyimpan array jumlah semua elemen dalam baris, seperti yang terlihat pada bagian pengulangan for pertama yang telah di highlight.

Selanjutnya kita kembali iterasi setiap baris, kali ini membagi setiap elemen dengan total baris program, memenuhi persyaratan stokastik kita. Kita juga menambahkan variabel d tidak hanya untuk halaman yang tidak memiliki outbound link (karena itu diasumsikan link ke semua halaman. Agar adil bagi halaman yang memiliki link cara ini akan dilakukan pada fungsi for kedua yang telah di highlight.

Bila menggunakan faktor redaman dengan nilai 0.825 matriks yang dihasilkan adalah:

X	1	2	3	4	5	6	7	8	9	10	11
1	0.11	0.11	0.11	0.11	0.11	0.11	0.11	0.11	0.11	0.11	0.11
2	0.02	0.02	1.02	0.02	0.02	0.02	0.02	0.02	0.02	0.02	0.02
3	0.02	1.02	0.02	0.02	0.02	0.02	0.02	0.02	0.02	0.02	0.02
4	0.52	0.52	0.02	0.02	0.02	0.02	0.02	0.02	0.02	0.02	0.02
5	0.02	0.32	0.02	0.32	0.02	0.32	0.02	0.02	0.02	0.02	0.02
6	0.02	0.52	0.02	0.02	0.52	0.02	0.02	0.02	0.02	0.02	0.02
7	0.02	0.52	0.02	0.02	0.52	0.02	0.02	0.02	0.02	0.02	0.02
8	0.02	0.52	0.02	0.02	0.52	0.02	0.02	0.02	0.02	0.02	0.02
9	0.02	0.52	0.02	0.02	0.52	0.02	0.02	0.02	0.02	0.02	0.02
10	0.02	0.02	0.02	0.02	1.02	0.02	0.02	0.02	0.02	0.02	0.02
11	0.02	0.02	0.02	0.02	1.02	0.02	0.02	0.02	0.02	0.02	0.02

4. Eigenvector Centrality

PageRank adalah ukuran sentralitas jaringan dengan beberapa tweak yang dibuat khusus untuk web browsing, seperti yang kita bahas di atas. Karena kita cukup banyak berurusan dengan matriks pada titik ini kita akan lihat sebagai sentralitas vektor eigen.
Sentralitas vektor eigen adalah properti dari grafik awal dari jaringan halaman web.

Apa itu vektor?
Pada tingkat yang paling abstrak, vektor lebih dari anggota ruang vektor apapun.
Sebuah vektor pada ruang vektor 2D, yang disebut vektor euclidean adalah objek geometri yang memiliki besar dan arah. Dalam kasus komputer grafis 2D hubungan pixel satu sama lain dalam foto dapat dianggap vektor.
Vektor ditindaklanjuti oleh matriks. Kita bisa memikirkan jika matriks seperti fungsi yang bisa kita terapkan untuk ruang vektor.

Berikut adalah matriks 2x2. Ini adalah contoh dari pemetaan geser.
Matriks digunakan dalam banyak tujuan yang berbeda. Mereka banyak digunakan dalam grafis 2D dan 3D.
Font italic juga contoh dari pemetaan geser!
Salah satu cara yang digunakan adalah matriks untuk melakukan transformasi linear.

Jika anda pernah menggunakan transformasi di Photoshop, anda akan melihat aljabar linear dalam operasi tersebut.

Hal ini merupakan hasil dari penerapan matriks 2D di atas untuk satu set piksel dalam ruang vektor. Matriks selalu diterapkan pada ruang vektor.
Apakah yang dimaksud dengan vektor eigen?
Ketika kita menerapkan matriks untuk satu set piksel, itu semua skala dari pixel ke kanan dengan faktor 1,25. Perhatikan bahwa hubungan horizontal piksel tidak berubah sama sekali atau dengan kata lain gambar akan diskala dengan 1,25 sepanjang sumbu-x dan meninggalkan sama di sumbu y.

Vektor Eigen adalah vektor-vektor dalam ruang bahwa ketika ditindak lanjuti oleh matriks hanya besarnya mereka terpengaruh, dan tidak ke arah mereka. Sekali lagi dalam hal piksel, hubungan antara piksel tidak terpengaruh dalam arah horisontal, tetapi segala arah.
Secara teknis, vektor eigen adalah vektor yang memenuhi persamaan Ax = λx

Bagaimana kita menghitung vektor eigen?
Ada beberapa pendekatan yang dapat kita gunakan untuk memecahkan untuk dicari setelah vektor eigen dari matriks kita. Ada yang lebih akurat, ada yang lebih cepat, beberapa akan menemukan vektor eigen yang lebih dari yang lain.
Kali ini kita hanya mencari vektor eigen yang terkait dengan nilai eigen dominan. Kita tidak perlu tahu tentang salah satu vektor eigen unit lain. Kita ingin menemukan vektor eigen secepat mungkin.

Power Iteration

Metode power iteration adalah algoritma sederhana namun kuat.

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

Hal ini tampak sederhana, tetapi dapat kita lihat bagaimana kaitannya dengan konsep kita tentang vektor eigen.

Apa yang di representasikan oleh vektor ini? Mereka mewakili kemungkinan berada di sebuah halaman web dan berakhir di halaman web lain. Mengapa? Karena itulah bagaimana kita mengatur segalanya. Kita mulai dengan deskripsi jaringan website/blog. Kita membuat grafik yang menghubungkan diantaranya. Kita kemudian mengubah bahwa grafik untuk mewakili probabilitas mengklik link secara acak. Kita sekarang mengambil bahwa seluruh struktur dan sekaligus mencari tahu di mana ia menunjuk.

Mengapa kita ingin menormalkan vektor kita? Kita ingin mereka menambahkan hingga 1 sehingga kita dapat komunikasi dengan mereka sebagai pecahan dari satu keseluruhan, sesuatu yang cenderung kita temukan.

Bagaimana kita menormalkan vektor?
Sebuah vektor ternormalisasi jika vektor yang dibagi dengan panjangnya menciptakan vektor satuan. Ini bisa dikatakan bahwa semua elemen dalam vektor menambahkan hingga 1.

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

Mengapa menggunakan power iteration?
Metode power iteration hanya akan menemukan vektor eigen yang terkait dengan nilai eigen terbesar secara absolut. Selain itu, akan gagal jika matriks tersebut cukup jarang. Untungnya, istilah-istilah tersebut sesuai dengan kebutuhan kita saat ini dengan sempurna. Dibandingkan dengan eigensolvers lain, metode daya komputasi kurang intensif daripada melakukan dekomposisi penuh.

Berikut kodenya:

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

Kode yang terakhir, ini merupakan persamaan yang akan membawa semua langkah yang terpisah menjadi satu:

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;

Saya rasa penjelasan dalam membuat program untuk mencari nilai google pagerank sudah cukup.
Di bawah ini saya akan memberikan link untuk mendownload contoh programnya dan bisa digunakan supaya anda lebih mengerti kembali penjelasan dari metode yang digunakan.

Dongdut via Mediafire
password : adityasblog

Semoga bermanfaat.

Sharing Bookmark Dock OS X Dengan jQuery dan CSS3

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sat, 5 May 2012 06:43:00 +0700

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

Google Page Rank Updated 2012

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Fri, 4 May 2012 09:19:00 +0700

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.

Animasi Hover Effect Keren Dengan Webkit

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sat, 28 Apr 2012 16:19:00 +0700

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.

Subscribe Email
Salam Blogger.! Hari ini...
Selengkapnya
Komentar facebook
Ternyata saya sudah...
Selengkapnya
Widget Twitter
Dalam artikel saya yang...
Selengkapnya

Jika anda ingin mencobanya silahkan copy kode CSS nya di bawah ini.

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

Berkiut kode HTML nya.

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

Semoga Bermanfaat!

Update Status facebook via Blog ver II

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Wed, 18 Apr 2012 15:28:00 +0700

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

Live Streaming Global TV Online

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Tue, 17 Apr 2012 10:07:00 +0700

Streaming Global TV by Adityas Blog

Live Streaming RCTI Online

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Tue, 17 Apr 2012 08:09:00 +0700

Streaming RCTI by Adityas Blog

Memasang Recent Comment Langsung Dengan Avatar di Blog

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Wed, 28 Mar 2012 19:41:00 +0700

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. :)

Memasang Widget Tweet Twitter di Blog atau Blogspot

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Mon, 26 Mar 2012 20:41:00 +0700

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! :)

Enable Fiture Blogger SEO Search Preferences Untuk Blogspot

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sun, 25 Mar 2012 17:47:00 +0700

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.

Chat Box atau Buku Tamu dengan Animasi jQuery

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sat, 24 Mar 2012 11:43:00 +0700

Dalam artikel ini, saya ingin berbagi widget chatbox menggunakan animasi jQuery buat sobat blogger yang ingin blognya terasa lebih ramai akan pengunjung.
Yah, dengan chat box atau buku tamu ini, pengunjung bisa meninggalkan lapak atau kesan pesan buat blog sobat.

ChatBox yang satu ini sedikit berbeda dari chatbox sebelumnya yang pernah saya singgung. Contohnya sobat bisa melihat chatbox yang berada di sebelah kanan halaman.
Chatbox tersebut saya aplikasikan dengan jQuery dan tambahan CSS yang membuat tampilan widget ini terlihat begitu menarik.

Selain itu, saya juga menambahkan fitur edit CSS langsung di sini beserta contoh preview dari hasil edit supaya sobat blogger bisa merubah segi penampilannya tanpa ribet-ribet, sekaligus ini merupakan salah satu media pembelajaran bagi yang ingin belajar CSS.

Berikutnya langsung saja ke tahap pemasangan ChatBox nya.
Bagi sobat yang belum memiliki widget buku tamu, sobat bisa daftar di CBOX secara gratis dengan klik link ini.
Pertama kali copy script jQuery di bawah ini dan letakkan sebelum atau di atas tag </head>

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

Catatan: Jika di dalam template anda sudah terpsang jQuery, script pada bagian yang dihighlight dapat anda abaikan

Rubah style CSS di bawah ini dengan style gaya yang diinginkan dan lihat hasil preview pada chatbox yang ada di samping kanan halaman ini.

Dilarang menekan tombol Enter pada saat memodifikasi CSS. Gunakan sisa space yang masih ada jika ingin menambahkan attribute dalam CSS.

Memasang Widget Chat Box

Jika anda sudah selesai dalam pengeditan CSS di atas. Ikuti langkah seperti yang ada di bawah ini.

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

Enjoy Gan!
Chat Box

Memasang Widget Subscribe Email Untuk Blogger atau Blogspot

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Thu, 22 Mar 2012 13:41:00 +0700

Salam Blogger.!
Hari ini saya dapat tips memasang static widget subscribe by email untuk para penggila blog.

Fungsi dari subscribe email ini adalah membuat pengunjung setia blog kita selalu menerima informasi terbaru melalui email secara gratis jika terdapat artikel terbaru.

Nah, tips memasang widget ini merupakan langkah awal jika sobat blogger ingin mendapatkan fans banyak dari pengunjung yang pernah mampir di blog kita.
Cara memasangnya juga tidak begitu sulit.

Sebelumnya saya mau kasih lihat penampakannya dulu aja neh barang kali ada yang mau nyobain setelah melihatnya.
Atau anda bisa melihat pada bagian kanan bawah halaman ini.

Jika tertarik dengan penampakan di atas, silahkan ikuti langkah-langkah di bawah ini:

Langkah 1
Masuk ke Dashboar >> Template.
Copy paste kode dibawah ini di bagian atas kode </head>.

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

Langkah 2
Temukan kode </body> dan tempatkan kode di bawah ini di bagian atas kode </body> tersebut.

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

NB: Perhatikan bagian yang sudah disorot, lalu lihat ID feed yang sudah ditandai dengan warna merah.

blogspot/adityasblog merupakan id feed dari Adityas Blog
Ganti id feed tersebut dengan id feed milik anda.

Langkah 3
Simpan template anda dan enjoy!

Jangan lupa komentarnya yah sob kalau artikel ini bermanfaat.

Follow "Adityas Blog"

Post (RSS) | Comments (RSS)

Memasang Emotion Animasi Lucu di Kotak Komentar Thread Comment Blogspot

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Tue, 20 Mar 2012 03:46:00 +0700

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

Pastikan sobat blogger sudah mengaktifkan fitur thread comment blognya. Bagi yang belum memasangnya bisa lihat di sini.

Langkah 2

Copy kode emoticon di bawah ini

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

Anda akan meletakkan kode di atas didua tempat yang berbeda. Dan silahkan anda simak langkah-langkah selanjutyna

Selanjutnya temukan kode seperti di bawah ini

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

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

Paste kode yang sudah di copy pada bagian yang sudah diberi tanda.

Temukan kembali kode seperti dibawah ini

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

Paste kembali kode emoticonnya pada bagian yang sudah ditandai.

Langkah 3

Temukan kode </body> kemudian tambahkan script javascript di bawah ini di atas tag </body> tersebut.

Simpan templatenya dan selesai.

Bagi yang merasa ada masalah dengan emotion ini, silahkan sobat tinggalkan keluhan atau masalahnya dengan berkomentar.
Semoga bermanfaat!

Menambahkan CSS Untuk Thread Comment di Blogspot (Custome Threaded Comment Blogspot)

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Mon, 19 Mar 2012 14:15:00 +0700

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>

Langkah 2
Temukan kode loop diantara kode di atas.

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

</b:loop>

Tambahkan kode di bawah ini setelah kode <b:loop values='data:post.comments' var='comment'>

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

selanjutnya tambahkan kode di bawah ini di atas kode </b:loop>

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

Langkah 3
Tambahkan kode javascript di bawah ini setelah kode <b:includable id='comments' var='post'>

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

Sobat bisa mengganti nilai 250px pada bagian yang sudah di sorot untuk ukuran yang sesuai dengan template sobat.

Langkah 4
Tambahkan kode CSS di bawah ini di bagian CSS template sobat.

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

Simpan template dan selesai!

Selamat mencoba fitur thread comment blognya :)

Mengaktifkan Fitur Reply Komentar di Blogspot

adityamr15@gmail.com (Aditya Meilaz Rahmanto) — Sun, 11 Mar 2012 02:38:00 +0700

Kemarin saya sudah mengulas tentang Thread Comment Blogspot dan untuk artikel yang satu ini adalah lanjutan dari artikel yang sebelumnya.

Tidak perlu banyak bercakap-cakap, langsung saja kita ke tahap Mengaktifkan Thread Comment Blogspot.Com ini.

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

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

Bagaimana?
Masih tetap belum aktif Thread Comment-nya?

Jika masih belum aktif coba ikuti langkah terakhir ini.
Tetapi sebelumnya lebih baik sobat backup dulu templatenya karena kita akan merubah settingan template menjadi default (settingan standar blogspot).

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

Untuk info lebih jelas. Silahkan kunjungi Blogger Official Announcement klik di sini.

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

X	1	2	3	4	5	6	7	8	9	10	11
1	0	0	0	0	0	0	0	0	0	0	0
2	0	0	1	0	0	0	0	0	0	0	0
3	0	1	0	0	0	0	0	0	0	0	0
4	1	1	0	0	0	0	0	0	0	0	0
5	0	1	0	1	0	1	0	0	0	0	0
6	0	1	0	0	1	0	0	0	0	0	0
7	0	1	0	0	1	0	0	0	0	0	0
8	0	1	0	0	1	0	0	0	0	0	0
9	0	1	0	0	1	0	0	0	0	0	0
10	0	0	0	0	1	0	0	0	0	0	0
11	0	0	0	0	1	0	0	0	0	0	0

Id user twitter
Jumlah tweets yang di tampilkan

X	1	2	3	4	5	6	7	8	9	10	11
1	0	0	0	0	0	0	0	0	0	0	0
2	0	0	1	0	0	0	0	0	0	0	0
3	0	1	0	0	0	0	0	0	0	0	0
4	1	1	0	0	0	0	0	0	0	0	0
5	0	1	0	1	0	1	0	0	0	0	0
6	0	1	0	0	1	0	0	0	0	0	0
7	0	1	0	0	1	0	0	0	0	0	0
8	0	1	0	0	1	0	0	0	0	0	0
9	0	1	0	0	1	0	0	0	0	0	0
10	0	0	0	0	1	0	0	0	0	0	0
11	0	0	0	0	1	0	0	0	0	0	0

Adityas Blog

Membuat Gallery Image Menggunakan CSS3

CSS Kode

HTML Kode

Memasang Animasi Loading di Blogspot

Langkah 1

Langkah 2

Langkah 3

Memodifikasi Scrollbar Browser Menggunakan Webkit

Membuat Animasi Loading Dengan CSS3

Demo Animasi Loading Bar

CSS3 Animasi Loading Bar

HTML Animasi Loading Bar

Demo Animasi Loading Spin

CSS3 Animasi Loading Spin

HTML Animasi Loading Spin

Thread Comment Blogspot Ver II + Animasi Emoticon

Langkah 1

Langkah 2

Langkah 3

Langkah 4

Langkah 5

Full Spesifikasi Sony Xperia Acro S dan Harga

Spesifikasi Sony Xperia Acro S

Nokia Lumia 900 Mengalahkan HTC One X

Spesifikasi dan Harga Nokia Lumia 900

Copy Text to Clipboard Menggunakan Javascript

Contoh Script dalam HTML

Contoh dalam JavaScript

Demo

Membuat Program Google Pagerank Menggunakan Javascript

Apa itu pagerank?

1. Graph

2. Adjacency Matrix

3. Row Stochastic Matrix

4. Eigenvector Centrality

Power Iteration

Sharing Bookmark Dock OS X Dengan jQuery dan CSS3

Memasang Widget Sharing Bookmarks

Google Page Rank Updated 2012

Animasi Hover Effect Keren Dengan Webkit

Subscribe Email

Komentar facebook

Widget Twitter

Related Post Animasi Untuk Blogger atau Blogspot

Langkah Pemasangan Related Post

Update Status facebook via Blog ver II

Menambahkan Widget Status facebook

Live Streaming Global TV Online

Live Streaming RCTI Online

Memasang Recent Comment Langsung Dengan Avatar di Blog

Install Widget Recent Comments

Memasang Widget Tweet Twitter di Blog atau Blogspot

Cara Menambahkan Widget Tweets

Enable Fiture Blogger SEO Search Preferences Untuk Blogspot

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

Chat Box atau Buku Tamu dengan Animasi jQuery

Memasang Widget Chat Box

Memasang Widget Subscribe Email Untuk Blogger atau Blogspot

Follow "Adityas Blog"

Memasang Emotion Animasi Lucu di Kotak Komentar Thread Comment Blogspot

Langkah 1

Langkah 2

Langkah 3

Menambahkan CSS Untuk Thread Comment di Blogspot (Custome Threaded Comment Blogspot)

Mengaktifkan Fitur Reply Komentar di Blogspot

X	1	2	3	4	5	6	7	8	9	10	11
1	0	0	0	0	0	0	0	0	0	0	0
2	0	0	1	0	0	0	0	0	0	0	0
3	0	1	0	0	0	0	0	0	0	0	0
4	1	1	0	0	0	0	0	0	0	0	0
5	0	1	0	1	0	1	0	0	0	0	0
6	0	1	0	0	1	0	0	0	0	0	0
7	0	1	0	0	1	0	0	0	0	0	0
8	0	1	0	0	1	0	0	0	0	0	0
9	0	1	0	0	1	0	0	0	0	0	0
10	0	0	0	0	1	0	0	0	0	0	0
11	0	0	0	0	1	0	0	0	0	0	0