Artikel kali ini saya akan coba bagikan artikel desain blog tentang cara membuat tulisan link berputar di blog. Maksudnya adalah tulisan yang didalamnya tertanam link url dari alamat dari blo kita, akan berputar ketika di sentuh oleh mouse. Biasanya disebut dengan link hover style. Disini link hover style nya saya buat dengan efek berputar ketika disentuh mouse.
Contohnya: coba arahkan mouse anda ke link tulisan berputar dibawah ini.
Seperti contoh diatas, tulisan akan berputar ketika di sentuh oleh mouse. Sekarang, saya akan coba beri contoh penerapannya di blog. Seperti yang masih/pernah saya gunakan. Efek link hover berputar itu saya terapkan di link yang ada di widget blog. Contohnya coba lihat di widget label atau ketegori yang ada disebelah kiri blog ini(jika masih saya gunakan).
Dan untuk cara membuatnya, silakan ikuti langkah-langkah dibawah ini.
- Silakan login ke blogger, dari halaman dasbor piih pengaturan tata letak.
- Lalu klik desainer template > tingkat lanjut > Tambakan Css.
- Lalu masukan kode berikut ini kedalamnya. Atau cari kode ]]></b:skin> dan masukan kode ini didalamnya.
- 300 itu adalah waktu berputarnya tulisan ketika disentuh mouse.
- -720 kode ini digunakan untuk membuat tulisan berputar sebanyak 720 derajat atau 2x putaran melawan arah jarum jam. Jika ingin dibuat searah jarum jam, hapus saja tanda minusnya.
- Terakhir, klik terapkan ke blog. Selesai.
#Label1 a{
font-weight:bold;
Color:black;
position:relative;
display:inline-block;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease}
#Label1 a:hover{
-webkit-transform:rotate(-720deg);
-moz-transform:rotate(-720deg);
transform:rotate(-720deg)}
Keterangan kode:font-weight:bold;
Color:black;
position:relative;
display:inline-block;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease}
#Label1 a:hover{
-webkit-transform:rotate(-720deg);
-moz-transform:rotate(-720deg);
transform:rotate(-720deg)}
Penjelasan sedikit tentang kode diatas, sebenarnya hanya dengan menggunakan kode singkat seperti dibawah ini.
#Label1 a{
font-weight:bold;
Color:black;
position:relative;
display:inline-block;
transform-style:preserve-3d;
transition:all 300ms ease}
#Label1 a:hover{
transform:rotate(-720deg)}
font-weight:bold;
Color:black;
position:relative;
display:inline-block;
transform-style:preserve-3d;
transition:all 300ms ease}
#Label1 a:hover{
transform:rotate(-720deg)}
Itu sudah cukup untuk membuat tulisan pada link bisa berputar. Tapi, efek berputarnya hanya bisa di browser mozilla. Sedangkan di browser yang lain efek berputar itu tidak bisa berjalan. Karena itu di tambahkanlah kode -webkit-transform dan -moz-transition, agar efek berputar juga bisa berjalan di browser lain.
Sehingga membuat kode-kode diatas agak sedikit panjang. Tapi tidak sulit mengatur waktu putar dan jumlah putarannya. Karena hanya mengganti angaka 300 untuk waktu, dan -720 untuk jumlah putaran. Ketiga-tiganya harus sama. contohnya:
-webkit-transition:all 600ms ease;
-moz-transition:all 600ms ease;
transition:all 600ms ease;
-moz-transition:all 600ms ease;
transition:all 600ms ease;
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
transform:rotate(-720deg)
-moz-transform:rotate(-360deg);
transform:rotate(-720deg)
Untuk pengaturan waktu semakin besar angkanya, maka akan semakin lama waktu berputarnya, sama juga dengan jumlah putaran. 360 untuk satu putaran 720 untuk 2 putaran. Bisa juga dibuat 90, jadi tulisan berputar tapi bergerak 90derajat.
Ada kekurangan dari cara membuat tulisan link berputar ini, yaitu ketika mouse menyentuh bagian ujung dari tulisan. Maka rotasi putarnya menjadi tidak sempurna, terkadang seperi nyangkut2. Jadi harus disentuh di bagian tengah tulisan, maka tulisan akan berputar dengan baik.
Contoh diatas itu hanya saya terapkan di bagian tulisan link yand ada di widget label. Bisa juga digunakan pada bagian yang lain, seperti bagian judul header kita buat berputar-putar saat disentuh mouse, sidebar dan juga bagian yang lain2nya. Silakan di coba sendiri, dan baca juga artikel tentang cara membuat link terbuka di tab baru. Masih berhubungan juga dengan link, dan juga artikel2 lainya. Semoga artikel diatas bisa bermanfaat untuk anda.
EmoticonEmoticon