Membuat 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

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

X

X

X

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

Start Animasi

CSS3 Animasi Loading Bar

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

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

HTML Animasi Loading Bar

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

Demo Animasi Loading Spin

Start Animasi

CSS3 Animasi Loading Spin

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

HTML Animasi Loading Spin

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

Selamat belajar dan selamat mencoba trik Animation dari CSS3.

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

Selengkapnya →

Thread Comment Blogspot Ver II + Animasi Emoticon

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

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

Langkah 1

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

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

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

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

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

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

.cm_reply {
padding-top: 5px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Langkah 2

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

Temukan kode dibawah ini.

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

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

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

Langkah 3

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

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

Langkah 4

Temukan kode seperti di bawah ini.

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

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

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

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

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

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

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

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

                                            <b:else/>

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

<b:else/>

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

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

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

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

                                            <b:else/>

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

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

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

  </b:if>
  </div>

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

Dalam kotak berwarna merah merupakan ID BLOG anda.

Langkah 5

Coba anda temukan kode seperti di bawah ini.

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

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

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

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

Terkahir, simpan template.
Good Luck.!

Selengkapnya →

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

Copy text ke clipboarad menggunakan ZeroClipBoard

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

Semoga bermanfaat.!

Selengkapnya →

Sharing Bookmark Dock OS X Dengan jQuery dan CSS3

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

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

Berikut penampakan dari widget sharing bookmarks ini

• 
  Stumbleupon
  
  
• 
  Delicious
  
• 
  Digg
  
• 
  facebook
  
• 
  Google
  
• 
  Linkedin
  
• 
  Technorati
  
• 
  Twitter
  
• 
  RSS
  

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

Memasang Widget Sharing Bookmarks

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

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

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

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

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

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

div#adityasBlogwrapper:hover {
 bottom:0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

Langkah terakhir, temukan kode seperti di bawah ini

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

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

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

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

Selengkapnya →

Google Page Rank Updated 2012

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

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

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

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

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

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

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

Selengkapnya →

Animasi Hover Effect Keren Dengan Webkit

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!

Selengkapnya →

Update Status facebook via Blog ver II

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

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

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

Update statusmu

Add me as friend

Menambahkan Widget Status facebook

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

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

Widget Title
Id facebook
Id Aplikasi

Selengkapnya →

Enable Fiture Blogger SEO Search Preferences Untuk Blogspot

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

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

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:

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

Saya harap postingan saya kali ini bermanfaat bagi blogger lainnya.

Selengkapnya →