Cara membuat gambar tertarik keluar menggunakan keyframe animasi CSS3

Animasi CSS3 dapat diatur/diselaraskan dengan baik dan dipecah menjadi "frame (bingkai)", terima kasih banyak kita ucapkan kepada@keyframe. Efek animasi ini bekerja ketika mouse kita gerakan/gulirkan ke gambar. Saat ini support dengan browser chrome, safari, firefox dan mungkin IE 10.

View Demo

LANGKAH-LANGKAH:

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS berikut tepat diatas kode ]]></b:skin> 

.pulloutimage{ position: relative; } .pulloutimage img{ position: absolute; /* absolute position and stack images inside container */ left: 0; } .pulloutimage img.ondemand{ /*CSS for image shown on demand */ opacity: 0; visibility: hidden; /* hide it initially (mainly for legacy browsers) */ } .pulloutimage img.original{ z-index: 1; /* set base z-index of initially shown image */ } @-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */ 0%{ /* Start of animation */ z-index: -1; opacity: 0; } 50%{ /* Half way point, move image to right edge of container */ opacity: 1; z-index: -1; left: 100%; box-shadow: none; } 51%{ /* 51% point, stack animating image on top of original image */ z-index: 2; } 100%{ /* Final point, move animating image back so it's on top of original */ left: 0; box-shadow: 8px 8px 15px gray; } } @-moz-keyframes revealfromright{ 0%{ z-index:-1; opacity:0; } 50%{ opacity:1; z-index:-1; left:100%; box-shadow: none; } 51%{ z-index:2; } 100%{ left:0; box-shadow: 8px 8px 15px gray; } } @-ms-keyframes revealfromright{ 0%{ z-index:-1; opacity:0; } 50%{ opacity:1; z-index:-1; left:100%; box-shadow: none; } 51%{ z-index:2; } 100%{ left:0; box-shadow: 8px 8px 15px gray; } } .pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */ -webkit-animation-name:revealfromright; /* specify animation keyframe */ -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -moz-animation-name:revealfromright; -moz-animation-duration: 1s; -moz-animation-iteration-count: 1; -ms-animation-name:revealfromright; -ms-animation-duration: 1s; -ms-animation-iteration-count: 1; animation-name:revealfromright; animation-duration: 1s; animation-iteration-count: 1; visibility:visible; opacity:1; box-shadow: 8px 8px 15px gray; z-index:2; } .pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */ opacity:0.5; }

KODE HTML 

• Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
• Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.

<!--keyframe animasi CSS3 by jalu-pangna.blogspot.com -->

<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="http://i1087.photobucket.com/albums/j479/jalupangna/prabusiliwangi.jpg" />
<img class="ondemand" src="http://i1087.photobucket.com/albums/j479/jalupangna/prabusiliwangi.jpg" />
</div>

<br />
<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu3.jpg" />
<img class="ondemand" src="http://i1087.photobucket.com/albums/j479/jalupangna/ratukidul.jpg" />
</div>  
<!--keyframe animasi CSS3 by jalu-pangna.blogspot.com -->

KETERANGAN: 

Silahkan ganti link gambar1 pada warna kuning dan gambar2 pada warna hijau diatas dengan link gambar anda.

Happy Blogging...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 03.38

Cara membuat menu spotlight dengan CSS3 di blog

Menu Spotlight memanfaatkan properti radius-border CSS3 dan transisi untuk menambahkan latar belakang bulat ke item menu ketika mouse diarahkan ke item menu masing-masing. Hasilnya adalah seperti flash (menyala seperti kilatan cahaya).

View Demo

KODE CSS 
 

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}


.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}

• Silahkan masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template -> Backup template anda terlebih dahulu -> Edit HTML  

• Cari tag/kode ]]></b:skin> tekan CTR+F untuk memudahkan pencarian
• Pastekan kode CSS tepat diatas tag  ]]></b:skin> 
• Simpan template... 

 KODE HTML 

<div class="spotlightmenu">
<ul>
<li><a href="http://jalu-pangna.blogspot.com"><span>Home</span></a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_14.html"><span>Site map</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog"><span>Tips dan trik blog</span></a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS"><span>CSS</span></a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript"><span>JQueryJavaScript</span></a></li>
  <li><a href="http://jalu-pangna.blogspot.com/search/label/widget"><span>Gadget/widget</span></a></li>
</ul>
</div>

• Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript 
• Pastekan kode di atas didalamnya

CATATAN: 

• Silahkan Ganti link warna kuning dengan URL/Link anda
• Ganti judul Menu sesuai dengan menu yang anda inginkan
• Simpan gadget, selesai... 

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 20.52

Cara membuat slider gambar memudar / menghilang dengan CSS3 di blog

Hari ini saya akan share kepada Anda bagaimana membuat slider gambar yang bagus dan mulus menggunakan css3. Slider ini menggunakan efek fade (menghilang) untuk beralih ke slide berikutnya. Plus anda bisa menggunakan teks promo khusus di setiap slide. Kita tidak perlu mengklik untuk ganti slide, semuanya otomatis (animasi CSS3).

View Demo

KODE HTML 

• Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
• Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.

 <div class="slides">
    <ul> <!-- slides -->
        <li><img src="http://i1087.photobucket.com/albums/j479/jalupangna/pic1.jpg" alt="image01" />
            <div>Man jadda wa jada</div>
        </li>
        <li><img src="http://i1087.photobucket.com/albums/j479/jalupangna/pic2.jpg" alt="image02" />
            <div>Hidup sekali,hiduplah yang berarti</div>
        </li>
        <li><img src="http://i1087.photobucket.com/albums/j479/jalupangna/pic3.jpg" alt="image03" />
            <div>Hidup mulia atau mati syahid</div>
        </li>
        <li><img src="http://i1087.photobucket.com/albums/j479/jalupangna/pic4.jpg" alt="image04" />
            <div>Akhlaq jelek itu menular</div>
        </li>
    </ul>
</div> 

KETERANGAN: 

• Silahkan ganti link gambar pada warna kuning diatas dengan link gambar anda.
• Ganti teks promo dengan teks yang anda inginkan.

KODE CSS 

/* fade slider */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:900px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* css3 animation */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

LANGKAH BERIKUTNYA : 

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS diatas tepat diatas kode ]]></b:skin>  
• Simpan template...

 Semoga bermanfa'at.

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 03.52

Cara membuat animasi keyframe berayun di blog

Dengan menggunakan CSS3 animasi keyframe, kita bisa mengontrol sytle waktu yang tepat dari element kapan saja. Di sini kita menggunakan keyframes untuk menciptakan efek berayun. Dengan memodifikasi rotasi elemen secara bertahap seiring berjalannya waktu sampai posisi istirahat, atau 0 derajat.

DEMO ( Gambar akan berayun setiap 5 detik sekali)

View Demo

LANGKAH-LANGKAHNYA SEBAGAI BERIKUT : 

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS berikut tepat diatas kode ]]></b:skin> 

.swing{ -webkit-animation:swinging 10s ease-in-out 0s infinite; -moz-animation:swinging 10s ease-in-out 0s infinite; animation:swinging 10s ease-in-out 0s infinite; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; transform-origin:50% 0; } @-webkit-keyframes swinging{ 0% { -webkit-transform: rotate(0); } 5% { -webkit-transform: rotate(10deg); } 10% { -webkit-transform: rotate(-9deg); } 15% { -webkit-transform: rotate(8deg); } 20% { -webkit-transform: rotate(-7deg); } 25% { -webkit-transform: rotate(6deg); } 30% { -webkit-transform: rotate(-5deg); } 35% { -webkit-transform: rotate(4deg); } 40% { -webkit-transform: rotate(-3deg); } 45% { -webkit-transform: rotate(2deg); } 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */ 100% { -webkit-transform: rotate(0); } } @-moz-keyframes swinging{ 0% { -moz-transform: rotate(0); } 5% { -moz-transform: rotate(10deg); } 10% { -moz-transform: rotate(-9deg); } 15% { -moz-transform: rotate(8deg); } 20% { -moz-transform: rotate(-7deg); } 25% { -moz-transform: rotate(6deg); } 30% { -moz-transform: rotate(-5deg); } 35% { -moz-transform: rotate(4deg); } 40% { -moz-transform: rotate(-3deg); } 45% { -moz-transform: rotate(2deg); } 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */ 100% { -moz-transform: rotate(0); } } @keyframes swinging{ 0% { transform: rotate(0); } 5% { transform: rotate(10deg); } 10% { transform: rotate(-9deg); } 15% { transform: rotate(8deg); } 20% { transform: rotate(-7deg); } 25% { transform: rotate(6deg); } 30% { transform: rotate(-5deg); } 35% { transform: rotate(4deg); } 40% { transform: rotate(-3deg); } 45% { transform: rotate(2deg); } 50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */ 100% { transform: rotate(0); } }


KODE HTML

• Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
• Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.

<img class="swing" src="http://i1087.photobucket.com/albums/j479/jalupangna/PrabuSiliwangi-1.jpg" />


<img class="swing" src="http://i1087.photobucket.com/albums/j479/jalupangna/PrabuSiliwangi-1.jpg" style="
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
    "
/>


<img class="swing" src="http://i1087.photobucket.com/albums/j479/jalupangna/PrabuSiliwangi-1.jpg" style="
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
    "
/>  

KETERANGAN: 

Silahkan ganti link gambar pada warna kuning diatas dengan link gambar anda.

Happy Blogging...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 21.33

Bagaimana cara menampilkan setiap postingan dalam kotak terpisah cantik dan keren di blog

Salah satu bagian utama desain  web adalah membuat desain sejelas mungkin dalam hal pemanfa'atan. Sebagai contoh, pembaca harus dapat dengan mudah mengidentifikasi bahwa ini adalah sidebar dan ini adalah kolom utama di mana semua posting ditampilkan.

Umumnya semua postingan Blog berada dalam kotak besar tunggal dengan hanya Border di bagian bawah setiap postingan di homepage. Border yang digunakan untuk membuat pembaca mengetahui bahwa posting berikutnya adalah posting terpisah. 

Hal itu sebenarnya sangat normal dan mendasar untuk memisahkan tulisan. Postingan Hari ini kita akan membuat tulisan lebih jelas bagi pembaca dengan menampilkan masing-masing dalam style kotak terpisah. Hal yang paling utama adalah Anda akan belajar bagaimana melakukannya sehingga dapat lebih menyesuaikan.  

Sebagian besar dari sobat blogger/para master mungkin tahu bagaimana melakukan hal ini, tetapi mungkin ada beberapa pemula menunggu untuk mempelajari beberapa trik dasar. Silahkan lihat demo...

View Demo

(LIHAT GAMBAR DIATAS)

LANGKAH-LANGKAHNYA SEBAGAI BERIKUT :

• Masuk ke akun blogger anda -> Klik Drop down menu 
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

 

• Cari tag / kode .post { atau .post{ Gunakan CTRL+F untuk memudahkan pencarian

Ini adalah kode selektor CSS yang biasanya digunakan di sebagian besar template blogger. Jika anda tidak menemukan kode dibawah cari kode yang mirip seperti kode ini, karena struktur template masing-masing sedikit berbeda. Silahkan lihat screenshoot kode berikut:

Silahkan ganti kode tersebut dengan kode berikut dibawah ini:

    margin: 10px 10px 40px 7px;
    padding: 15px;
    border: 1px solid #CCCCCC;
    -webkit-border-radius: 0 20px 0 20px;
    border-radius: 0 20px 0 20px;
    background: #FEFFE6;
    -webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);
    box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

Kode anda akan terlihat seperti kode pada screenshoot berikut:

Simpan template dan silahkan di cek blog anda..

STYLE BLOK HOVER PADA POSTINGAN BLOG 

Silahkan tambahkan kode blok efek hover berikut ini: 

.post:hover {
    -webkit-border-radius: 20px 0 20px 0;
    border-radius: 20px 0 20px 0;
    background: #fff;
}

Sehingga akhir kode yang anda tambahkan seperti screen shoot berikut:

Ada beberapa tag/kode dasar yang bisa anda rubah pada kode yang sudah ada. Bahkan anda dapat menambahkannya sendiri style (gaya) terpisah sesuai dengan kreasi anda masing-masing.

• Aturlah nilai margin 10px 10px 40px 7px jika postingan yang anda buat tidak selaras
•  Kode #CCCCCC untuk mengubah warna border
•  Kode #FEFFE6 untuk mengubah background kotak postingan
•  Kode #fff untuk mengubah background warna hover

Semoga bermanfa'at and keep blogging...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 17.24