Saturday, 26 October 2013

Blogskins List Hover vers 1

      Assalamu'alaikum. Tutorial ini direquest oleh Safira dan Maya. Preview? Lihat gambar dibawah ini.
Live previewnyaa, coba kalian klik navigasi "Stuffs"! Disitu ada list blogskins aku kan? Coba hover salah satunya, dia akan bergerak. Dan kalau diklik, muncul halaman blogskins kamu. Mau coba? Ikuti caranya ^^
  • Dashboard > Template > Paste kode ini diantara kode <style> dan </style>.
.bs{
border:1px solid #000000;
background:url(Url Background);
padding:5px;transform:rotate(0deg);
margin:5px;
-webkit-transition:All 0.5s ease !important;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}
.bs:hover{transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;}
  • Atur kode berwarna itu. Sudah? belum selesai. Paste kode ini di list tutobies atau dimanapun kamu mau.
<center>
<a href="Url Blogskins"><img class="bs" src="Url screenshot blogskins" />
</a><a href="Url Blogskins"><img class="bs" src="Url screenshot blogskins" /><a href="Url Blogskins"><img class="bs" src="Url screenshot blogskins" /><a href="Url Blogskins"><img class="bs" src="Url screenshot blogskins" /></center>
  •  Untuk kode warna ungu, screenshot blogskins-nya harus berukuran 100px x 100px.
        Sudah jadi deh! Mudah kan? Heheheh. Kalau ingin repost tolong sertakan link blog ini yaa. Makasih.

9 comments:

  1. Jadi, copy nya itu kaya gini :

    .bs{
    border:1px solid #000000;
    background:url(Url Background);
    padding:5px;transform:rotate(0deg);
    margin:5px;
    -webkit-transition:All 0.5s ease !important;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;
    }
    .bs:hover{transform: rotate(360deg) ;
    -webkit-transform: rotate(360deg) ;
    -moz-transform: rotate(360deg) ;
    -o-transform: rotate(360deg) ;
    -ms-transform: rotate(360deg) ;}
    < style >

    Bukan ka? aku kurang ngerti #ahaha

    ReplyDelete
  2. Jadi, antara < / s t y le > & < s t y le >

    Contoh :
    < / s t y le >
    .bs{
    border:1px solid #000000;
    background:url(Url Background);
    padding:5px;transform:rotate(0deg);
    margin:5px;
    -webkit-transition:All 0.5s ease !important;
    -moz-transition:All 0.5s ease;
    -o-transition:All 0.5s ease;
    }
    .bs:hover{transform: rotate(360deg) ;
    -webkit-transform: rotate(360deg) ;
    -moz-transform: rotate(360deg) ;
    -o-transform: rotate(360deg) ;
    -ms-transform: rotate(360deg) ;}
    < s t y l e >

    Gitu? -_- komentar sebelum ga boleh komen kata STYLE jadi kurang jelas

    ReplyDelete
  3. maksud nya antara kode itu apa? dibawah, diatas, atau kayak mana? --"

    ReplyDelete
  4. Maya : Iya kayak gitu -_-
    Safira : emang kamu gatau "Di antara" ? Coba tanya guru Bahasa Indonesia mu :v

    ReplyDelete
  5. WAHHH MAKASIIIH KAK SALSAAAA!!!!!!!

    ReplyDelete
  6. Gak jadi gak T________T
    Tuto kayak gitu dapet dari blog siapa? Harap dijawab ._.

    ReplyDelete
  7. safira : apa yang gak jadi? ._. Maaf banget Saf aku gak inget T^T udah lama soalnya

    ReplyDelete
  8. Thank's kak salsaa!! Aku pake blogger biasa tapi bisa :)

    ReplyDelete

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