Info Tips Trick Tutorial.

Selasa, 17 Oktober 2017

Cara Membuat Tulisan Link di Blog Berputar

Cara Membuat Tulisan Link di Blog Berputar


Cara Membuat Tulisan Link di Blog Berputar - Hallo sahabat , Pada artikel yang anda baca kali ini dengan judul Cara Membuat Tulisan Link di Blog Berputar, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Baca juga : Cara Menghapus Tulisan Tampilkan Posting dengan Label di Blog

Cara Membuat Tulisan Link di Blog Berputar

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 kode berikut ini kedalamnya. Atau cari kode ]]></b:skin> dan masukan kode 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 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.

4.Terakhir, klik terapkan ke blog. Selesai.
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)}
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;
-webkit-transform:rotate(-360deg);
-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.


Demikianlah Artikel Cara Membuat Tulisan Link di Blog Berputar

Sekianlah artikel Cara Membuat Tulisan Link di Blog Berputar kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Cara Membuat Tulisan Link di Blog Berputar Rating: 4.5 Diposkan Oleh: IRZAN ZULMI
Terima kasih sudah berkomentar