Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Cara Membuat Hover Slide Up Box CSS3 di Blog

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://lh6.googleusercontent.com/-sc_Emu3etd8/UdB6FdJkkaI/AAAAAAAAFcs/fz9kw8G95r0/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://lh6.googleusercontent.com/-LFZmcq-tag8/UdB6FdD5VcI/AAAAAAAAFc4/W1DQIGJbC7A/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://lh4.googleusercontent.com/-0Lk4QSH5hwo/UdB6FUklVzI/AAAAAAAAFc0/sOMRbBBpXY4/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

Berlangganan artikel via email

20 Response to "Cara Membuat Hover Slide Up Box CSS3 di Blog"

wuihhh.... bis goyang2 menunya. keren mas.

Balas

wah keren mas bbisa muncul keatas gitu menunya :D

Balas

ajiibb kereeenn banggeett mas , cocok gk ya buat template saya

Balas

ini buat postingan jadi lebih berwana.. amankan dulu entar paraktek .

Balas
avatar
Anonymous

wah dapat ilmu baru nih.. mantab :D

Balas

cuma mau komen aja,. artikelnya emang luar biasa. gak seperti saya punya BIASA DI LUAR...hehehehehhee

Balas

wih cerdik
bikin aku tdartarik

Balas

wah bisa dicoba..
keren abis dah..

Balas

Ga pernah keabisan tutorial nih mas andes.
Hahaha hebat euy . .

Balas

Setuju dengan Mba Iin Indriani, tutorialnya selalu update dan menarik.

Balas

gimana mo habis lah gudang tutornya luas banget heuheuheu

Balas

Keren kang, ijin sedot ya ..
Langsung saya pasang di Blog ane nih ... Hehehehee

Balas

makasi buattutorialnya kakak :)

Balas

wah keren mas bbisa muncul keatas gitu menunya

Balas

wah keren mas bbisa muncul keatas gitu menunya


Balas

Makasih Gan Tutornya Bermanfaat

Balas

gambar https://lh6.googleusercontent.com/-sc_Emu3etd8/UdB6FdJkkaI/AAAAAAAAFcs/fz9kw8G95r0/w99-h30-no/Faceblog+Evolutions+%25281%2529.gif bisa diganti dengan gambar lain yang ukurannya berapa ya guys?
www.pakepe.com

Balas

kenapa tulisannya sama gambarnya ga center ya gan...?

Balas

ternyata
.slide-up-boxes a:hover h5 {
margin-top: -65px;
opacity: 0;
}
Diganti angkanya jadi -95 baru dapet ditengah bro..
thanks ya

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Cara Membuat Hover Slide Up Box CSS3 di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode