Skip to content Skip to sidebar Skip to footer

Membuat page navigation hover dengan image

Membuat page navigation hover dengan image

Ini tutorial blog baru dan aku sudah mendapatkan kode nya, mengeditnya dengan menggunakan CSS3 yang gambarnya seperti di atas. Cara Membuat page navigation hover dengan image langsung saja ikuti langkah-langkah berikut.

1.Dasbor > template > edit HTML
2.Tick/centang Expand template widget dan cari kode:
]]></b:skin>  atau   /* Content (pilih salah satu saja)
3.Copy paste kode berikut dan taruh di atas kode tadi:

#navi {
opacity:0;
position:absolute;
margin-top:5px;
padding:2px;
font-family:trebuchet ms;
font-size:10px;
width:105px;
height:auto;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
background-color:#fff;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( 84deg);
-moz-transform: scale( 0.7) rotate( 84deg);
color:#555;
}
#pic:hover #navi{
opacity:9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}
#pic {
position:fixed;
top:290px;
left:30px;
width:100px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
#pic:hover #inimg{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}

#inimg {
width:100px;
height:auto;
position:fixed;
height:auto;
top:250px;
left:30px;
background:#fff;
border-radius:2px;
padding:5px;
-moz-box-shadow: 0px 0px 5px #ddd;
-webkit-box-shadow: 0px 0px 5px #ddd;
box-shadow: 0px 0px 5px #ddd;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( 8deg);
-moz-transform: scale( 0.7) rotate( 8deg);
}
#navi2 {
opacity:0;
position:absolute;
margin-top:5px;
padding:2px;
font-family:trebuchet ms;
font-size:10px;
width:105px;
height:auto;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
background-color:#fff;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( 84deg);
-moz-transform: scale( 0.7) rotate( 84deg);
color:#555;
}

#pic2:hover #navi2{
opacity:9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}
#pic2 {
position:fixed;
top:190px;
left:30px;
width:100px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
#pic2:hover #inimg2{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}

#inimg2 {
width:100px;
height:auto;
position:fixed;
height:auto;
top:150px;
left:30px;
background:#fff;
border-radius:2px;
padding:5px;
-moz-box-shadow: 0px 0px 5px #ddd;
-webkit-box-shadow: 0px 0px 5px #ddd;
box-shadow: 0px 0px 5px #ddd;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( -8deg);
-moz-transform: scale( 0.7) rotate( -8deg);
}

#navi3 {
opacity:0;
position:absolute;
margin-top:5px;
padding:2px;
font-family:trebuchet ms;
font-size:10px;
width:105px;
height:auto;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
background-color:#fff;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( 84deg);
-moz-transform: scale( 0.7) rotate( 84deg);
color:#555;
}

#pic3:hover #navi3{
opacity:9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}
#pic3 {
position:fixed;
top:390px;
left:30px;
width:100px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
#pic3:hover #inimg3{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}
#inimg3 {
width:100px;
height:auto;
position:fixed;
height:auto;
top:350px;
left:30px;
background:#fff;
border-radius:2px;
padding:5px;
-moz-box-shadow: 0px 0px 5px #ddd;
-webkit-box-shadow: 0px 0px 5px #ddd;
box-shadow: 0px 0px 5px #ddd;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( -8deg);
-moz-transform: scale( 0.7) rotate( -8deg);
}

#navi4 {
opacity:0;
position:absolute;
margin-top:5px;
padding:2px;
font-family:trebuchet ms;
font-size:10px;
width:105px;
height:auto;
text-align:center;
text-transform:uppercase;
letter-spacing:1px;
background-color:#fff;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( 84deg);
-moz-transform: scale( 0.7) rotate( 84deg);
color:#555;
}

#pic4:hover #navi4{
opacity:9;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}
#pic4 {
position:fixed;
top:490px;
left:30px;
width:100px;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}
#pic4:hover #inimg4{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.9) rotate( 0deg);
-moz-transform: scale( 0.9) rotate( 0deg);
}

#inimg4 {
width:100px;
height:auto;
position:fixed;
height:auto;
top:450px;
left:30px;
background:#fff;
border-radius:2px;
padding:5px;
-moz-box-shadow: 0px 0px 5px #ddd;
-webkit-box-shadow: 0px 0px 5px #ddd;
box-shadow: 0px 0px 5px #ddd;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform: scale( 0.7) rotate( 8deg);
-moz-transform: scale( 0.7) rotate( 8deg);
}


4.Masuk layout/tata letak > tambahkan gadget
5.Pilih HTML/JavaSript dan masukkan kode berikut:
<div id="pic" ><<img alt='TITLE 1' src="URL IMAGE" width="100px" id="inimg" /><div id="navi" onclick="document.getElementById('main').innerHTML=document.getElementById('one').innerHTML"><a href="URL PAGE 1">TITLE 1</a></div></div>
<div id="pic2"><<img alt='TITLE 2' src="URL IMAGE" width="100px" id="inimg2" /><div id="navi2" onclick="document.getElementById('main').innerHTML=document.getElementById('two').innerHTML">
<a href="URL PAGE 2">TITLE 2</a></div></div>
<div id="pic3"><<img alt='TITLE 3' src="URL IMAGE" width="100px" id="inimg3" /><div id="navi3" onclick="document.getElementById('main').innerHTML=document.getElementById('three').innerHTML"><a href="URL PAGE 3">TITLE 3</a></div></div>
<div id="pic4"><<img alt='TITLE 4' src="URL IMAGE" width="100px" id="inimg4" /><div id="navi4" onclick="document.getElementById('main').innerHTML=document.getElementById('four').innerHTML"><a href="URL PAGE 4">TITLE 4</a></div></div>
4.Yang aku tandai dengan warna merah TITLE itu ganti dengan nama page navigation nya ada dua title 1 diisi sama, etc. Warna biru adalah url page nya, dan warna hijau adalah url gambar/image ukuran 100x100px. setelah semua diedit tekan simpan, selamat mencoba.

Image UKURAN 100X100:

Membuat page navigation hover dengan image

Membuat page navigation hover dengan image


Membuat page navigation hover dengan image


Membuat page navigation hover dengan image


Cara copy url image

Klik mouse sebelah kanan pada gambar, tekan copy image URL.

4 comments for "Membuat page navigation hover dengan image"

  1. Mbak tempatku kok nggak bisa ya :3

    ReplyDelete
    Replies
    1. untuk sesetengah template blogger simple kadang memang gak support, coba ganti template simple/sederhana yang lainnya aja

      Delete