Tuesday 22 July 2014

Blogskins List Hover vers 4

       Hai hai! Setelah aku share versi pertama, kedua, dan ketiga, sekarang aku mau share yang keempat nih. Aku lagi cari cari ide buat yang versi kelima hehe. Dan yang versi keempat ini lumayan rumit nyusun kodenya. Semoga kalian suka! Preview :

  • Copy kode dibawah ini :
<style>
.skens{
box-shadow:2px 2px 2px #ccc;
background:#f1f1f1;
padding:3px;
margin:5px;
width:90px;
height:90px;
border-radius:30px 0px 30px 0px;
}
.skens:hover{
box-shadow:2px 2px 2px #ccc;
background:#e4e4e4;
padding:3px;
width:90px;
height:90px;
border-radius:0px 30px 0px 30px;
-webkit-transition: 1.3s;
-moz-transition: 1.3s;
}
</style>
  • Pastekan dimanapun kamu mau, misalnya di laman skins.
  • Ubah kode yang berwarna merah dengan kode warna kesukaanmu. 
  • Kemudian, copy lagi kode dibawah ini :
<center>
<div><a href="Url blogskin" ><img class="skens" src="Url screenshot blogskin" /></a>
<a href="Url blogskin" ><img class="skens" src="Url screenshot blogskin" /></a>
<a href="Url blogskin" ><img class="skens" src="Url screenshot blogskin" /></a>
<a href="Url blogskin" ><img class="skens" src="Url screenshot blogskin" /></a></div></center> 
  • Pastekan lagi kode tadi dibawah kode yang telah kamu paste distep pertama.
  • Ubah kode yang berwarna hijau dengan url blogskins kamu.
  • Ubah juga kode yang berwarna biru dengan url image screenshot blogskins kamu dan ukurannya harus 100 x 100 pixel.
  • Save and done!

No comments:

 
Copyright © 2013-2017 By Anugerah Mullia Ulfa Salsabella. All Rights Reserved.