Yaudah dari pada anda pusing dengan penjelasan saya mendingan gak usah di perpanjang lagi penjelasannya deh, kita langsung aja lihat salah satu contohnya di bawah ini :
Untuk membuat yang seperti ini caranya gini....
1. Masuk dulu ke akun blogger anda
2. Setelah berada di Dashboard Klik Design --> Edit HTML
3. Backup Dulu Template anda dengan mengKlik Download Full Template
(Terserah anda Ya atau Tidak.tapi lebih baik Ya)
3. Centang Expand Template Widget
4. Cari Kode ]]></b:skin>
5. Copy kode di bawah lalu paste di atas kode ]]></b:skin>
.Tutorial_TIK-PTD_1 {
border:1px solid #fff;
}
.Tutorial_TIk-PTD_1:hover {
border:1px solid red;
}
6. Save Template dan buat sebuah postingan baru
Berikut contoh beberapa Image hover sederhana beserta kode CSS dan HTML
.Tutorial_TIK-PTD_2 {
border:1px solid #ccc;
}
.Tutorial_TIK-PTD_2:hover {
background-color:#ccc;
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
}
<img class="Tutorial_TIK-PTD_2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />
.Tutorial_TIK-PTD_3 {
border:1px solid red;
}
.Tutorial_TIK-PTD_3:hover {
-moz-box-shadow: 5px 5px 10px red;
}
<img class="Tutorial_TIK-PTD_3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />
.Tutorial_TIK-PTD_4 {
border:1px solid #ccc;
}
.Tutorial_TIK-PTD_4:hover {
background-color:#eee;
border:1px solid red;
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
}
<img class="Tutorial_TIK-PTD_4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />
.Tutorial_TIK-PTD_5 {
border:2px solid #ccc;
}
.Tutorial_TIK-PTD_5:hover {
border:2px dashed #000;
}
<img class="Tutorial_TIK-PTD_5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />
.Tutorial_TIK-PTD_6 {
padding-top:5px;
padding-bottom:5px;
border-top:3px solid #ddd;
border-bottom:3px solid #ddd;
}
.Tutorial_TIK-PTD_6:hover {
background-color:#fff;
border-top:3px solid #000;
border-bottom:3px solid #000;
}
<img class="Tutorial_TIK-PTD_6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />
.Tutorial_TIK-PTD_7{
border:5px solid #ccc;
}
.Tutorial_TIK-PTD_7:hover {
background-color:#E71305;
border:5px solid #ddd;
}
img class="Tutorial_TIK-PTD_7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />
.Tutorial_TIK-PTD_8 {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
margin: 0 10px 5px 0;
position: relative;
padding: 3px;
width: 125px;
height: 125px;
-moz-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(-15deg);
}
.Tutorial_TIK-PTD_8:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
box-shadow:0px 0px 10px red;
-webkit-box-shadow:0px 0px 10px red;
-moz-box-shadow:0px 0px 10px red;
opacity: 1;
z-index: 2;
position: relative;
-moz-transform: rotate(0deg);
-moz-transform: scale(1.25);
-webkit-transform: rotate(0deg);
-webkit-transform: scale(1.25);
<img class="Tutorial_TIK-PTD_8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQINEtWgAKkPPU2pmeiIAYfN0W4H_MK7aNaigm_MwovC8yGCWZLC1JdNH6u3tUV3q_I418HrPlxiNS3e7cBs2_HhJpF72wj7S5znor3S_GAlYLK7UT_ZhJ_KfFLKyHR_aZRCAXISh7KkH/" />
Silahakan Berkreasi, edit sesuka hati anda :)
0 komentar:
Posting Komentar
Silakan Isi KOmentar Dengan Baik Dan Bijak