Cara Membuat Hover Slide Up Box CSS3 di Blog

Cara Membuat Hover Slide Up Box CSS3 di Blog – ini merupakan tutorial yang sangat sederhana CSS3 transisi untuk menciptakan sebuah "slideUp" pada efek kotak atau teks box. Saat teks box tersentuh oleh mouse maka akan tampak efek hover, dan judul kotak slide keluar dari bawah dan teks box akan menampilkan deskripsi dari judul yang sudah anda masukan. Cara penerapannya juga tidak sulit. Slide Up Box ini dapat dipasang pada widget blog dan bisa juga pada posting blog. Untuk memasang tidak perlu masuk pada edit HTML maupun menaruh kode pada template blog. Hanya dengan cara copy kode yang ada dibawah kemudian langsung paste dan taruh pada tempat yang di inginkan, tentu sangat efektif. Untuk masuk ke tutorial, berikut adalah Cara Membuat Hover Slide Up Box CSS3 di Blog dengan cepat dan mudah.

1. Login ke akun blogger.
2. Lalu klik Entri Baru, kemudian copy kode berikut ini kemudian paste di kolom posting mode HTML.

<style>
.slide-up-boxes a {
display: block;
height: 130px;
margin: 0 0 20px 0;
background: rgba(215, 215, 215, 0.5);
border: 1px solid #ccc;
height: 65px;
overflow: hidden;
}

.slide-up-boxes h5 {
color: #333;
text-align: center;
height: 65px;
font: italic 18px Georgia, Serif;
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}

.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}

.slide-up-boxes div {
position: relative;
color: white;
font: 12px/15px Georgia, Serif;
height: 45px;
padding: 10px;
opacity: 0;
-webkit-transform: rotate(6deg);
-webkit-transition: all 0.4s linear;
-moz-transform: rotate(6deg);
-moz-transition: all 0.4s linear;
-o-transform: rotate(6deg);
-o-transition: all 0.4s linear;
}
.slide-up-boxes a:hover div {
opacity: 1;
-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-o-transform: rotate(0);
}
.slide-up-boxes a:nth-child(1) div { background: #c73b1b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz1lDsdHpc9S8YDkpakkIESoIBqAfafo1A1dWhYo0i79P-0UdlPCjMn7NAOJ0zl5AcMiXGhw7q9xhH0ZypGWDUbtdDuItDPB8TZ3I9AE0CA-uEf6IckUjAl5jsgjcuze60F-SvewzYZ1bI/w99-h30-no/Faceblog+Evolutions+%25281%2529.gif) 17px 17px no-repeat; padding-left: 120px; }
.slide-up-boxes a:nth-child(2) div { background: #367db2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5yCrM79BN04lV2JfCVMq45MMxaw7IuEYp3sjxGgBUkOKy2qoWyIx3kF34eWHLoyApHxxpKXa0wWgmz6Llt34Zgue5JiBwyE8f6sR92fYWfxlXRuhbLZxSmSQW0P6c14s6trvjgDIFeyY3/s50-no/Faceblog+Evolutions+%25282%2529.gif) 21px 10px no-repeat; padding-left: 90px; }
.slide-up-boxes a:nth-child(3) div { background: #393838 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4YQ7BxEKJYupPPOntj_ClwSXUfyx4AJyUb5miTl_cyZQItsEUEu1WdYor-750vIkTguNpmPDA2VXo1JhohWvvRbKwkBpobNa6mhaiIZdVpGo6XvlJBiXAv8cd55go9C7_WezGW1obqp5T/w99-h33-no/Faceblog+Evolutions+%25283%2529.gif) 14px 16px no-repeat; padding-left: 133px; }
</style>

<section class="slide-up-boxes">
<a href="#">
<h5>JUDUL 1</h5>
<div>DESKRIPSI</div>              
</a>

<a href="#">
<h5>JUDUL 2</h5>
<div>DESKRIPSI</div>              
</a>

<a href="#">
<h5>JUDUL 3</h5>
<div>DESKRIPSI</div>              
</a>
</section>

Keterangan:
Ganti link warna merah dengan URL Gambar yang di inginkan.
Ganti tanda # warna biru dengan URL halaman tujuan yang di inginkan.
Judul dan deskripsi ganti dengan yang di inginkan.
Untuk menambahkan kotak lebih banyak lagi maka copy kode dibawah ini, dan paste sebelum kode  </section>

<a href="#">
<h5>JUDUL</h5>
<div>DESKRIPSI</div>              
</a>

Langkah terakhir klik Publikasikan dan kemudian lihat hasilnya dari Cara Membuat Hover Slide Up Box CSS3 di Blog. Jika ingin dipasang pada widget atau sidebar blog maka caranya seperti biasa, klik Tata Letak >> Tambah Widget >> HTML/Javascript lalu paste kode tersebut didalamnya. Selanjutnya klik Simpan, sampai disini anda sudah berhasil dan tahap selanjutnya lihat hasilnya.

DEMO:

Tutorial Blog

Panduan blogger tingkat dasar sampai mahir 100% gratis tanpa pungutan biaya dengan hasil memuaskan

Tutorial CSS

Mempercantik blog dengan menggunakan kode CSS dari tingkat dasar sampai mahir 100% gratis tanpa pungutan biaya dengan hasil memuaskan

Tutorial jQuery

Mempercantik blog dengan menggunakan script jQuery dari tingkat dasar sampai mahir 100% gratis tanpa pungutan biaya dengan hasil memuaskan