Memuat Halaman "Adityas Blog"
Koneksi lambat? | Gunakan blog dalam versi mobile.
Tetap berusaha terhubung dengan Adityas Blog
Coba gunakan blog dalam versi mobile atau tekan F5 untuk memuat ulang halaman.

Membuat Gallery Image Menggunakan CSS3

Gallery Image Menggunakan CSS3
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

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

Selengkapnya →

Memasang Animasi Loading di Blogspot

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

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

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

Langkah 1

Temukan kode <b:skin><![CDATA[ lalu paste CSS di bawah ini di bagian bawah kode tersebut.
#loading{
 position:fixed;
 width:100%;
 height:100%;
 z-index:999999;
 top:0;
 left:0;
 font-family:arial;
 background:#222;
}

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

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

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

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

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

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

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

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

Langkah 2

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

Langkah 3

Langkah terakhir, temukan kode </body> lalu paste javascript di bawah ini tepat pada bagian atas kode </body> tersebut.
<script type='text/javascript'>
function abLoadingEnd(){document.getElementById('loading').style.display='none'}
if (window.attachEvent) {window.attachEvent('onload', abLoadingEnd);}
else if (window.addEventListener) {window.addEventListener('load', abLoadingEnd, false);}
else {document.addEventListener('load', abLoadingEnd, false);}
</script>

Selesai dan semoga bermanfaat.
Selengkapnya →

Memodifikasi Scrollbar Browser Menggunakan Webkit

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

Di bawah ini adalah CSS yang digunakan dalam memodifikasi scrollbar.
Anda dapat langsung merubah isi dalam CSS ini seperti merubah warna background atau menambahkan style yang lain
Dalam merubah isi CSS di bawah ini, jangan gunakan baris baru atau menekan tombol Enter karena anda tidak akan dapat melihat hasil preview dari modifikasi scrollbar

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

Semoga Bermanfaat.
Selengkapnya →

Membuat Animasi Loading Dengan CSS3

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

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

Berikut tutorial dalam animasi loading.

Demo Animasi Loading Bar

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

CSS3 Animasi Loading Spin

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

HTML Animasi Loading Spin

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

Selamat belajar dan selamat mencoba trik Animation dari CSS3.

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

Thread Comment Blogspot Ver II + Animasi Emoticon

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

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

Langkah 1

Buka template anda, kemudian temukan kode ]]></b:skin>, lalu copy paste kode CSS di bawah ini tepat dibagian atas dari kode tersebut.
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}

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

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

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

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

.cm_reply {
padding-top: 5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Langkah 2

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

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

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

Langkah 3

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

Langkah 4

Temukan kode seperti di bawah ini.
<b:includable id='comments' var='post'>
   <!-----------------------------------------
     -----------------------------------------
     ---- HAPUS SEMUA KODE DALAM AREA INI ----
     -----------------------------------------
     ----------------------------------------->
</b:includable>

Setelah anda menghapus kode yang berada dalam bagian yang ditandai lalu paste kode dibawah ini.
<div class='comments' id='comments'>
  <a name='comments'/>
  <b:if cond='data:post.allowComments'>
        <h4>
          <b:if cond='data:post.numComments == 0'>
            Belum Ada Komentar
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> Respon Komentar
          </b:if>
        </h4>
        
        <div id='cm_reply_css'/>
        
        <div class='cm_pagenavi' id='cm_page'/>
        
        <div id='cm_block'>
<script type='text/javascript'>
jml = 0;
</script>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>
                
                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/> 

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

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

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

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

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

                                            <b:else/>

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

<b:else/>

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

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

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

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

                                            <b:else/>

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

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

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

  </b:if>
  </div>
Perhatikan kode yang sudah di tandai. Di sana anda akan menemukan tulisan GANTI-DENGAN-ID-BLOG-ANDA. Ganti tulisan tersebut dengan ID BLOG anda.
Untuk mengetahui ID BLOG, perhatikan gambar dibawah ini. Misalkan anda sedang membuka halaman Edit Template.
Dalam kotak berwarna merah merupakan ID BLOG anda.

Langkah 5

Coba anda temukan kode seperti di bawah ini.
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
Jika anda menemukan kode di atas (biasanya terdapat 4 kode sama), ganti ke-4 kode tersebut dengan kode di bawah ini
<b:include data='post' name='comments'/>
dan sebaliknya jika anda tidak menemukan kode tersebut, anda dapat menyimpan template anda.

Terkahir, simpan template.
Good Luck.!
Selengkapnya →

Full Spesifikasi Sony Xperia Acro S dan Harga

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.
Selengkapnya →

Nokia Lumia 900 Mengalahkan HTC One X

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.
Selengkapnya →

Spesifikasi dan Harga Nokia Lumia 900

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

Copy Text to Clipboard Menggunakan Javascript

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

Membuat Program Google Pagerank Menggunakan Javascript

google pagerank calculation
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:
  1. Graph (Grafik)
  2. Adjacency Matrix
  3. Row Stochastic Matrix
  4. Eigenvector Centrality
  5. 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.
  1. Kita mulai dengan vektor. Hal ini dapat menggunakan vektor apapun dengan setidaknya satu elemen tidak nol.
  2. Kita mengalikan vektor ini dengan matriks.
  3. Kita mengambil vektor yang dihasilkan, menormalkan, dan kemudian kalikan dengan matriks lagi.
  4. Kita ulangi langkah 3 sampai kita mencapai jumlah yang diterima toleransi untuk kesalahan.
  5. Vektor yang dihasilkan adalah pendekatan dari vektor eigen yang kita cari.
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.
Selengkapnya →