Hover Gallery

Hover Gallery
Memasang gambar zoom dengan kode efek hover
sekaligus sebagi tombol menuju satu postingan berikut cara penerapannya serta kode tersebut

Login ke akun blog klik entri halaman baru HTML copy kode dibawah ini pastekan kedalam halaman baru terdebut dan klik simpan selesai

<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>
<div class="hovergallery">
<a href="http://Your Link" target="_blank" title="Mys2010">
<img src="https://Link Gambar" /> </a>
</div>

Penjelasan :
Ganti Link tujuan dan link gambar yang berwarna biru dengan link sobat

Sumber : Dynamic Drive
Edited by. Myscript2010

DEMOSHOW

Loading Animation CSS3

Loading Animation CSS3
Memasang Loading animasi
menggunakan CSS3 pada postingan dihalaman blog, Fungsi Loading adalah untuk melewati halaman blog yang kosong dalam waktu singkat, selain itu loading dapat memperindah interface blog, berikut cara penerapan serta kode loading animsi

Login ke akun blog klik halaman baru HTML, copy kode dibawah ini pastekan dihalaman baru tersebut dan klik simpan selesai

<style type="text/css">
body {
    font-size: 14px;
    font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #333;
text-align: center;
margin-top: 100px;
}
span {
display: block;
margin: 0 auto;
}
span[class*="l-"] {
    height: 4px; width: 4px;
    background: #000;
    display: inline-block;
    margin: 12px 2px;
  
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
  
    -webkit-animation: loader 4s infinite;
    -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -webkit-animation-fill-mode: both;
    -moz-animation: loader 4s infinite;
    -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -moz-animation-fill-mode: both;
    -ms-animation: loader 4s infinite;
    -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -ms-animation-fill-mode: both;
    animation: loader 4s infinite;
    animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    animation-fill-mode: both;
}

span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}

@-webkit-keyframes loader {
    0% {-webkit-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-webkit-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
@-moz-keyframes loader {
    0% {-moz-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-moz-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
@-keyframes loader {
    0% {-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
@-ms-keyframes loader {
    0% {-ms-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-ms-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
</style>

<span>Loading</span>
<span class="l-1"></span>
<span class="l-2"></span>
<span class="l-3"></span>
<span class="l-4"></span>
<span class="l-5"></span>
<span class="l-6"></span>

Penjelasan :
Tambahkan <span class="l-7"></span> sesuai nomor urut jika diperlukan

Edited by. Myscript2010
Sumber by. Kode Player / Daniel Eden

DEMOSHOW