Tuesday 26 June 2012

Blogger Emoticons

Berikut Beberapa Blogger Emoticons untuk berekspresi dalam setiap postingmu.
hehe....


Blogger Emoticons


<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif">


<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif">

Selamat menghiasi postingannya...

Sumber :

DAFTAR ISI

Mmbuat Text Area


Apa itu text area?.
Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="6" cols="20"> INI ADALAH TEMPAT ANDA MENULISKAN TEXT/KODE YANG INGIN ANDA TAMPILKAN DALAM TEXT AREA. TULISAN AKAN DI TAMPILKAN DALAM SEBUAH KOLOM TERSENDIRI ...................

 </textarea></p>

Hasilnya seperti berikut :




Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.

Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Text Area plus Tombol HighLight

variasi lain dari membuat text area, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalam jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan/kode anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Sebagai contoh :




Agar lebih memahami kode di atas, Berikut sedikit uraian. Kode di atas mempunyai dua elemen, 1.elemen kode untuk membuat tombol Highlight All, 2.elemen kode untuk membuat text area.

Elemen tombol highlight All :


  1. <div align="center"> --> kata center menjdikan posisi tombol berada di tengah, jadi jika ingin posisi tombol berada di tepi kiri, ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, ganti dengan kata right.


  2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.


  3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan seperti Select All dan lainya.
Element text area :


  1. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
  2. <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"


  3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.
Silahkan mencoba....

Sumber :

DAFTAR ISI

Sunday 24 June 2012

CSS3 Pelangi

CSS

a.rainbow {
  color:white;
  text-decoration:none;
  -webkit-animation:rainbow 2s linear infinite alternate;
  -moz-animation:rainbow 2s linear infinite alternate;
  -ms-animation:rainbow 2s linear infinite alternate;
  -o-animation:rainbow 2s linear infinite alternate;
  animation:rainbow 2s linear infinite alternate;
}

@-webkit-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@-moz-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@-ms-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@-o-keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}
@keyframes rainbow {
    0%   {color:red;        }
    10%  {color:orange;     }
    20%  {color:gold;       }
    30%  {color:yellow;     }
    40%  {color:yellowgreen;}
    50%  {color:green;      }
    60%  {color:cyan;       }
    70%  {color:blue;       }
    80%  {color:violet;     }
    90%  {color:magenta;    }
    100% {color:indigo;     }
}

HTML

<a class="rainbow" href="#">CSS3 Pelangi</a>
<hr class="rainbow" color="white" size="5px" width="100%" />

CSS3 Pelangi



Sumber :

DAFTAR ISI

Tuesday 12 June 2012

Menampilkan Dan Menyembunyikan Widget Pada Halaman Tertentu


Alizainsyahab Blog : Membuat tampilan yang berbeda pada setiap halaman blog, tentu akan memberi ciri dari blog tersebut supaya lebih terlihat bagus dan tentu saja inovatif karena halamanya berbeda-beda, memodifikasi bentuk dan tampilan blog bagi seorang blogger adalah kerjaan yang mamakan waktu dan biaya, tapi dilain pihak juga merupakan kerjaan yang mengasyikan dan menyenangkan, kadang sampai lupa waktu, lupa mandi. Selain mengasyikan juga sambil mengasah otak supaya tidak cepat tumpul.

Untuk menampilkan atau meyembunyikan widget sidebar caranya sama seperti ulasan yang dahulu mengenai Menampilkan Widget Hanya Muncul Pada Halaman Utama atau pada HomePage saja. Untuk mengetahui kode penyembunyi atau kode untuk memunculkan widget pada halaman tertentu lainnya adalah sebagai berikut :

1. Menampilkan Widget Hanya Pada Homepage/Halaman Utama :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
=====
</b:if>

2. Menampilkan Widget selain Pada Homepage/Halaman Utama :

<b:if cond='data:blog.url != data:blog.homepageUrl'>
=====
</b:if>

3. Menampilkan Widget hanya Pada Itempages/Post :

<b:if cond='data:blog.pageType == "item"'>
=====
</b:if>

4. Menampilkan Widget selain Pada Itempages/Post :

<b:if cond='data:blog.pageType != "item"'>
=====
</b:if>

5. Menampilkan Widget hanya Pada Archivepages :

<b:if cond='data:blog.pageType == "archive"'>
=====
</b:if>

6. Menampilkan Widget selain Pada Archivepages :

<b:if cond='data:blog.pageType != "archive"'>
=====
</b:if>

7. Menampilkan Widget hanya Pada Staticpages :

<b:if cond='data:blog.pageType == "static_page"'>
=====
</b:if>

8. Menampilkan Widget selain Pada Staticpages :

<b:if cond='data:blog.pageType != "static_page"'>
=====
</b:if>

9. Menampilkan Widget pada URL Postingan Tertentu :

<b:if cond='data:blog.url == "Alamat Postingan"'>
=====
</b:if>

10. Menampilkan Widget selain di URL Postingan Tertentu :

<b:if cond='data:blog.url != "Alamat Postingan"'>
=====
</b:if>

Untuk "alamat postingan", ganti dengan url/alamat postingan

Untuk cara pemasangan bisa melihat pada posting terdahulu mengenai Menampilkan Widget Hanya Muncul Pada Homepage Blog, selamat mencoba.

Tunggu apalagi, waktunya untuk memodifikasi template kalian dengan tampilan yang berbeda tentunya.

Semoga bermanfaat,

http://situseo.blogspot.com/
Sumber :

DAFTAR ISI

Menampilkan Widget Hanya Muncul Pada HomePage Blog


Alizainsyahab Blog : Pada dasarnya bila kita menambahkan widget pada blog, secara default akan tampil pada bagian homepage dan tampil juga pada bagian halaman halaman post lainnya. Untuk memilah widget hanya tampil pada halaman utama atau homepage saja, perlu penambahan kode perintah supaya widget tersebut hanya muncul pada halaman utama atau homepage.

Kode perintah tersebut kita sisipkan pada bagian widget yang kita ingin tampilkan pada halaman utama atau homepage, dibawah ini langkah dan kode yang perlu ditambahkan adalah sebagai berikut.
  • Loggin ke akun blogger kalian kemudian masuk menu Design - Edit HTML/Edit Template
  • Ceklist expand template widget
  • Sebelum melakukan penambahan didalam template, sebaiknya backup dulu template kalian, gunanya untuk mengembalikan template kepada keadaan semula bila terjadi kesalahan, caranya dengan mendownload full template
Selanjutnya pilih widget yang akan kita munculkan pada bagian homepage saja, saya ambil contoh widget "Recent Comment" setelah ketemu sisipkan 2 baris kode sebagai perintah supaya hanya muncul pada halaman utama atau homepage saja. Untuk jelasnya perhatikan baris kode widget recent comment, kode yang berwarna merah adalah kode untuk memunculkan widget supaya hanya muncul di homepage.

<b:widget id='HTML2' locked='false' title='recent comment' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Kemudian save template, sekarang widget hanya akan muncul pada halaman utama atau homepage, bila kita masuk ke salah satu halam post widget tersebut tidak akan muncul

Untuk mengetahui posisi widget yang akan kita tampilkan atau akan kita sembunyikan, seperti contoh diatas yaitu Recent Comment, perhatikan bagian awal dari baris kode widget tersebut yaitu <b:widget id='HTML2' locked='false' title='recent comment' type='HTML'> Recent Comment yang tertulis dalam baris kode tersebut adalah judul dari widget sewaktu kita menambah widget dalam layout/page elements itu yang menjadi patokan untuk mencari posisi widget dalam template yang ingin kita temukan.

Untuk menampilkan widget atau menyembunyikan widget pada halaman tertentu lainnya, bisa membaca caranya pada Cara Menampilkan Dan menyembunyikan Widget Pada Halaman Tertentu

Semoga bermanfaat

http://situseo.blogspot.com/
Sumber :

DAFTAR ISI

Memasang Button Count Sosial Media Pada Post


share button count facebook twitter google plus stumbleupon
Alizainsyahab Blog : Button count berfungsi untuk menghitung jumlah post yang di share oleh pengunjung blog kepada jejaring sosial akun mereka, seperti facebook, google plus, twitter dan StumbleUpon, button count yang akan kita pasang sekarang ini adalah gabungan dari kesemuanya.

Untuk tampilan button count seperti screen shot diatas atau live-nya seperti yang saya pergunakan pada bagian bawah post (kalau belum saya rubah). Script yang akan kita pasang ini merupakan script yang saya ambil dari tiap developer masing-masing sosial media, baik itu button share count facebook like, button share count twitter, button share count google plus dan button share count stumbleupon.

Dibawah ini adalah script yang akan menampilkan button atau tombol-tombol share count sosial media, Untuk pemasangan pada bagian posting, berikut ini adalah caranya :
  1. Masuk Design - Edit HTML
  2. Ceklist Expand Widget Templates
  3. Jika perlu lakukan backup template, dengan cara mendownload full template untuk menghindari kesalahan yang dilakukan.
  4. Copy kode sibawah ini dan letakan dibawah <div class='post-header-line-1'/> atau diatas kode <data:post.body/> jika ingin ditampilkan dibawah judul post atau diatas bagian posting, untuk menempatkan dibawah bagian post, letakan kode tersebut dibawah kode <data:post.body/>
  5. Untuk penempatan posisi kanan atau kiri, kalian ganti kode yang berwarna hijau dengan left atau right

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div style='float:right;padding:5px;'>
<table border='0'><tbody><tr>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
<td><a class='twitter-share-button' href='https://twitter.com/share'>Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script></td>
<td><su:badge layout='1'/><script type='text/javascript'> 
(function() { 
var li = document.createElement(&#39;script&#39;); li.type = &#39;text/javascript&#39;; li.async = true; 
li.src = &#39;https://platform.stumbleupon.com/1/widgets.js&#39;; 
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(li, s); 
})(); 
</script>
</td>
</tr></tbody></table></div></b:if>

Spesial untuk menampilkan button share count google plus, kalian harus menambahkan kode dibawah ini diatas kode </head>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Save template kalian dan lihat hasilnya.

Jika sebelumnya pernah memasang tombol google plus 1 pada template blog kalian, sebaiknya dihapus dulu, untuk mengetahui posisi button plus 1 yang dipasang terdahulu, kalian bisa membaca post Memasang Tombol Plus 1 Pada Post dengan cara meng-klik link tersebut.

Semoga bermanfaat,
http://situseo.blogspot.com/
Sumber :

DAFTAR ISI

Memasang Tombol Google Plus 1 Pada Halaman Post


memasang google plus 1


Alizainsyahab Blog : Tombol Plus One merupakan tombol share, yang juga merupakan tombol penilaian terhadap situs kita, seberapa populer situs tersebut di media sosial google plus. Bagi kalian yang memiliki situs atau blog tidak ada salahnya untuk memasang tombol google plus one untuk mempermudah pengunjung merekomendasikan situs kita kepada teman atau rekan mereka.

Bagaimana cara memasangnya dan letaknya dimana?
  1. Masuk ke Akun Blogger
  2. Pilih Design atau Rancangan, kemudian pilih Edit HTML
  3. Ceklist Expand Widget Template (Sebelum melakukan perubahan penambahan atau pengurangan kode dalam template, sebaiknya melakukan backup template dengan cara mendownload full template)
  4. Cari kode </head>
  5. Letakkan kode dibawah ini tepat diatas kode </head>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

atau yang ingin dengan berbahasa Indonesia, memakai kode yang ini :

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'id'}</script>

dan letakan kode dibawah ini pada tempat yang kalian inginkan

<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;padding:5px;'>
<g:plusone expr:href='data:post.url' size='medium'/>
</div>
</b:if>

bila kalian akan meletakan tombol google plus 1 dibawah judul postingan, letakan kode tersebut dibawah kode ><div class='post-header-line-1'/> bila ingin meletakan diatas atau dibawah postingan, letakan kode tersebut diatas atau dibawah kode <data:post.body> atau <p><data:post.body/></p>

Bila kalian menemukan ada beberapa kode <data:post.body> dalam template atau kalian sudah memasang related post, pilih <data:post.body> yang kedua dan bila kalian ingin menempatkan posisi tombol google plus 1 dikanan atau kiri halaman post, ganti kode <div style='float:right'> menjadi left dan bila kalian ingin merubah ukuran tombol google plus 1 dan melihat bentuknya seperti apa, kalian bisa langsung mengunjungi Google Plus 1 Button

Untuk menampilkan tombol google plus 1 hanya tampil di halaman tertentu lainnya, kalian bisa melihat kodenya pada cara Menampilkan Widget pada Halaman Tertentu.

Semoga bermanfaat,
http://situseo.blogspot.com/
Sumber :

DAFTAR ISI

Sunday 10 June 2012

Macam Efek Hover Animasi Dengan CSS3

 Membuat efek hover animasi dengan css3 berikut contohnya, selain mudah dalam penggunaan, css3 mempunyai keunggulan lain yaitu dalam bidang efek hover, selain lebih variatif, efek-efek hover ini berjalan mulus dan halus, sayangnya keberadaan css3 dengan efek-efeknya, terutama efek animasinya, belum didukung penuh oleh browser-browser yang ada. Untuk menikmati secara maksimal efek animasi css3, saya sarankan untuk mengunakan google chrome sebagai browser yang sudah mendukung efek animasi css3.

Dibawah ini beberapa contoh efek hover dengan mengunakan css3 beserta kode-kode yang menghasilkan efek tersebut, sebagai acuan untuk mengkobinasikan efek-efek yang ada sehingga menghasilkan efek-efek yang lebih unik.






DALANG ERROR 1


.animasi_dalang1 {
color: #666;
width: 250px;
height: 50px;
font-size: 18px;
text-align: center;
background: #808080;
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.animasi_dalang1:hover {
-webkit-transform:translate(0px, -20px);
-moz-transform:translate(0px, -20px);
-o-transform:translate(0px, -20px);
-transform:translate(0px, -20px);
}

Dengan animasi ini bisa menghasilkan efek kesegala arah, baik kanan, kiri, atas, bawah, serong atas, kiri, atas, bawah hanya dengan merubah bagian angka (0px, -20px) untuk lebih jelasnya bisa lihat contohnya disini. Untuk kode css selanjutnya, saya tidak menampilkan kode css yang berwarna biru, saya anggap sudah termasuk dalam kode (biar tidak terlalu panjang)





DALANG ERROR 2


.animasi_dalang2 {
-kode css lainnya-
}
.animasi_dalang2:hover {
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
transform:rotate(-180deg);
}

ini merupakan efek putar, kalian bisa menyesuikan putarannya, apakah mau penuh (360deg) atau hanya setengah putaran, untuk merubah arah putaran bisa tambahkan tanda minus - untuk perputarannya

Untuk efek selanjutnya, browser Opera belum suport hanya bisa berjalan baik dengan browser Chrome dan Firefox





DALANG ERROR 3


.animasi_dalang3 {
-kode css lainnya-
}
.animasi_dalang3:hover {
-webkit-transform:scale(-1.0);
-moz-transform:scale(-1.0);
transform:scale(-1.0);
}

dengan efek ini bisa menghasilkan efek membesar (zoom) atau sebaliknya mengecil hanya dengan merubah scale-nya





DALANG ERROR 4


.animasi_dalang4 {
color: #666;
width: 250px;
height: 50px;
font-size: 18px;
text-align: center;
background: #808080;
}
.animasi_dalang4:hover {
animation: blur 1s infinite;
-moz-animation: blur 1s infinite;
-webkit-animation: blur 1s infinite;
}
@-webkit-keyframes blur {
0%   {-webkit-box-shadow: 0px 0px 50px #fff;}
25%  {-webkit-box-shadow: 0px 0px 50px #808080;}
50%  {-webkit-box-shadow: 0px 0px 50px #000;}
75%  {-webkit-box-shadow: 0px 0px 50px #808080;}
100% {-webkit-box-shadow: 0px 0px 50px #fff;}}
@-moz-keyframes blur {
0%   {-moz-box-shadow: 0px 0px 50px #fff;}
25%  {-moz-box-shadow: 0px 0px 50px #808080;}
50%  {-moz-box-shadow: 0px 0px 50px #000;}
75%  {-moz-box-shadow: 0px 0px 50px #808080;}
100% {-moz-box-shadow: 0px 0px 50px #fff;}}
@-keyframes blur {
0%   {box-shadow: 0px 0px 50px #fff;}
25%  {box-shadow: 0px 0px 50px #808080;}
50%  {box-shadow: 0px 0px 50px #000;}
75%  {box-shadow: 0px 0px 50px #808080;}
100% {box-shadow: 0px 0px 50px #fff;}}





DALANG ERROR 5


.animasi_dalang4 {
color: #666;
width: 250px;
height: 50px;
font-size: 18px;
text-align: center;
background: #808080;
}
.animasi_dalang5:hover {
animation: border 5s infinite;
-moz-animation: border 5s infinite;
-webkit-animation: border 5s infinite;
}
@-webkit-keyframes border {
0%   {-webkit-border-radius: 0px;}
20%  {-webkit-border-radius: 0 0 0 25px;}
40%  {-webkit-border-radius: 0 25px 0 25px;}
60%  {-webkit-border-radius: 0 25px 25px 25px;}
80%  {-webkit-border-radius: 25px;}
100% {-webkit-border-radius: 0px;}}
@-moz-keyframes border {
0%   {-moz-border-radius: 0px;}
20%  {-moz-border-radius: 0 0 0 25px;}
40%  {-moz-border-radius: 0 25px 0 25px;}
60%  {-moz-border-radius: 0 25px 25px 25px;}
80%  {-moz-border-radius: 25px;}
100% {-moz-border-radius: 0px;}}
@keyframes border {
0%   {border-radius: 0px;}
20%  {border-radius: 0 0 0 25px;}
40%  {border-radius: 0 25px 0 25px;}
60%  {border-radius: 0 25px 25px 25px;}
80%  {border-radius: 25px;}
100% {border-radius: 0px;}}





DALANG ERROR 6





.animasi_dalang6 {
color: #666;
width: 250px;
height: 50px;
font-size: 18px;
text-align: center;
background: #808080;
position: relative;
}
.animasi_dalang6:hover {
animation: border 5s infinite;
-moz-animation: border 5s infinite;
-webkit-animation: border 5s infinite;
}
@-webkit-keyframes gobig {
0%   {top:0px;width:250px; background:#808080;}
25%  {top:0px;width:300px;background:#333;}
50%  {top:50px; width:300px;background:#ccc;}
75%  {top:0px;width:300px;background:#ccc;}
100% {top:0px;width:250px;background:#808080;}}
@-moz-keyframes gobig {
0%   {top:0px;width:250px; background:#808080;}
25%  {top:0px;width:300px;background:#333;}
50%  {top:50px; width:300px;background:#ccc;}
75%  {top:0px;width:300px;background:#ccc;}
100% {top:0px;width:250px;background:#808080;}}
@keyframes gobig {
0%   {top:0px;width:250px; background:#808080;}
25%  {top:0px;width:300px;background:#333;}
50%  {top:50px; width:300px;background:#ccc;}
75%  {top:0px;width:300px;background:#ccc;}
100% {top:0px;width:250px;background:#808080;}}

Saya kira cukup contoh-contoh efek hover animasi menggunakan css3, bagaimana cara pengaplikasiannya terhadap template blog? sebagai gambaran, kalian bisa membaca disini.

Semoga bermanfaat,
http://situseo.blogspot.com/
Sumber :

DAFTAR ISI

Menerapkan Efek Hover Animasi Css Pada Template Blog

Menerapkan efek hover animasi css3 pada template blog, JQuery sudah tidak diragukan lagi dalam hal efek animasi, kehalusan dan kemulusan efek animasinya bisa membuat tampilan blog menjadi lebih menarik, jquery yang merupakan turunan dari javascript yang sudah bertahta cukup lama dalam efek animasi dan sekarang mulai mendapat saingan yang cukup seimbang dengan hadirnya Efek Animasi Css3.

Seiring berkembangnya teknologi, css yang dulunya belum bisa menghadirkan efek animasi, sekarang dengan hadirnya css3, efek animasi sudah bisa dibuat, efek animasi yang dihasilkan dari css3 tidak kalah halus dengan efek animasi jquery. Dengan alasan tersebut saya lebih memilih penggunaan css untuk efek animasinya, walaupun begitu saya juga tidak menutup kemungkinan menggunakan efek animasi jquery sebagai efek animasi dalam blog untuk mempercantik tampilan.

Pada posting sebelumnya pernah dicontohkan beberapa efek hover animasi dengan css3, jika pada postingan tersebut agak kesulitan dalam menerapkannya pada template blog, saya akan sedikit memberikan gambaran, sebagai contoh saya ambil contoh script kode css seperti ini :

.contoh {
color: #666;
font-size: 30px;
font-family: 'Niconne', cursive;
text-shadow: 0px 1px 0px #A6A6A6;
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.contoh:hover {
-webkit-transform:translate(60px, 0px);
-moz-transform:translate(60px, 0px);
-o-transform:translate(60px, 0px);
transform:translate(60px, 0px); 
}

Pada script css tersebut akan menghasilkan efek pergeseran objek kearah kanan sebesar 60px, sebagai contoh untuk menerapkannya pada template blog, kita akan menerapkan efek tersebut untuk judul post, hal pertama yang dicari pada template adalah bagian css yang membentuk style pada judul post tersebut, biasanya kode css untuk judul post menggunakan kode .post h3 {, pada .post h3 { sebelum kode penutup } akan ada kode css yang membentuk style judul post, tambahkan kode transition sebagai efek pelembut perpindahan objek(jarak waktu diukur dengan second(s)), sehingga kode .post h3 nya menjadi seperti ini :

.post h3 {
-kode style css yang terdapat pada template kalian-
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}

Setelah ditambahkan kode transition pada bagian style css judul post, belum menghasilkan efek apa-apa ketika mouse mengarah pada judul post. Untuk menghasilkan efek ketika mouse mengarah pada judul post, kita tambahkan perintah hover pada .post h3 { dan tambahkan style efek yang akan dihasilkan (sebagai contoh menggunakan script diatas), sehingga kodenya menjadi seperti ini :

.post h3:hover {
-webkit-transform:translate(60px, 0px);
-moz-transform:translate(60px, 0px);
-o-transform:translate(60px, 0px);
transform:translate(60px, 0px); 
}

transform:translate adalah efek yang dihasilkan ketika mouse mengarah pada judul post, pada script tersebut akan bergeser kearah kanan sebesar 60px. Pada template nantinya akan ada 2 .post h3 { dan yang satu lagi dengan tambahan perintah hover, sehingga kode keseluruhan style css judul post akan menjadi seperti ini :

.post h3 {
-kode style css yang terdapat pada template kalian-
-webkit-transition: all 0.65s ease-in-out;
-moz-transition: all 0.65s ease-in-out;
-o-transition: all 0.65s ease-in-out;
transition: all 0.65s ease-in-out;
}
.post h3:hover {
-webkit-transform:translate(60px, 0px);
-moz-transform:translate(60px, 0px);
-o-transform:translate(60px, 0px);
transform:translate(60px, 0px); 
}

Dan hasil dari efek hover untuk judul post akan menjadi seperti ini : (coba arahkan mouse kearah kalimat dibawah ini)


Sample


Semoga penjelasan yang singkat dan sederhana ini bisa membantu dalam penerapan efek hover pada template blog kalian.

Semoga bermanfaat,
http://situseo.blogspot.com/
Sumber :

DAFTAR ISI

Two Reasons why IPS is a "Must Have" for your Network

Introduction This is the third in my Security Series of Connect articles.  For more information on how to keep your enterprise environm...