Cara Menciptakan Goresan Pena Link Berputar

Artikel kali ini aku akan coba bagikan artikel desain blog perihal cara menciptakan goresan pena link berputar di blog. Maksudnya yaitu goresan pena 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 aku buat dengan efek berputar ketika disentuh mouse.

Contohnya: coba arahkan mouse anda ke link goresan pena berputar dibawah ini.

Tulisan Berputar

Seperti pola diatas, goresan pena akan berputar ketika di sentuh oleh mouse. Sekarang, aku akan coba beri pola penerapannya di blog. Seperti yang masih/pernah aku gunakan. Efek link hover berputar itu aku terapkan di link yang ada di widget blog. Contohnya coba lihat di widget label atau ketegori yang ada disebelah kiri blog ini(jika masih aku gunakan).

Dan untuk cara membuatnya, silakan ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, dari halaman dasbor piih pengaturan tata letak.
2. Lalu klik desainer template > tingkat lanjut > Tambakan Css.
3. Lalu masukan instruksi berikut ini kedalamnya. Atau cari instruksi ]]></b:skin> dan masukan instruksi ini didalamnya.
#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:

• 300 itu yaitu waktu berputarnya goresan pena ketika disentuh mouse.
• -720 instruksi ini dipakai untuk menciptakan goresan pena berputar sebanyak 720 derajat atau 2x putaran melawan arah jarum jam. Jika ingin dibentuk searah jarum jam, hapus saja tanda minusnya.
4. Terakhir, klik terapkan ke blog. Selesai.

Penjelasan sedikit perihal instruksi diatas, bersama-sama hanya dengan memakai instruksi singkat ibarat 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)}

Itu sudah cukup untuk menciptakan goresan pena pada link dapat berputar. Tapi, efek berputarnya hanya dapat di browser mozilla. Sedangkan di browser yang lain efek berputar itu tidak dapat berjalan. Karena itu di tambahkanlah instruksi -webkit-transform dan -moz-transition, semoga efek berputar juga dapat berjalan di browser lain.

Sehingga menciptakan 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;

-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
transform:rotate(-720deg)

Untuk pengaturan waktu semakin besar angkanya, maka akan semakin usang waktu berputarnya, sama juga dengan jumlah putaran. 360 untuk satu putaran 720 untuk 2 putaran. Bisa juga dibentuk 90, jadi goresan pena berputar tapi bergerak 90derajat.

Ada kekurangan dari cara menciptakan goresan pena link berputar ini, yaitu ketika mouse menyentuh bab ujung dari tulisan. Maka rotasi putarnya menjadi tidak sempurna, terkadang seperi nyangkut2. Makara harus disentuh di bab tengah tulisan, maka goresan pena akan berputar dengan baik.

Contoh diatas itu hanya aku terapkan di bab goresan pena link yand ada di widget label. Bisa juga dipakai pada bab yang lain, ibarat bab judul header kita buat berputar-putar ketika disentuh mouse, sidebar dan juga bab yang lain2nya. Silakan di coba sendiri, dan baca juga artikel perihal cara menciptakan link terbuka di tab baru. Masih berafiliasi juga dengan link, dan juga artikel2 lainya. Semoga artikel diatas dapat bermanfaat untuk anda.