Cara Membuat Tautan Menyala pada Blog - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Tautan Menyala pada Blog

Pilihan Editor :

Cara Membuat Tautan Menyala pada Blog
Penulis Bagus Surochman
0
Modus malam




KURAZONE ~ Salah satu trik untuk mempercantik tampilan Blog agar lebih menarik adalah dengan memberikan kesan MENYALA pada permalink. Contohnya adalah seperti dibawah ini :


Langkah - langkah :

1. Masuk ke Akun Blog anda
2. Pilih Template > Edit HTML
3. Tekan CTRL + F lalu tulis ]]></b:skin> , copy kode CSS dibawah ini lalu paste DIATAS kode ]]></b:skin>
a.murub {
text-decoration:none;
-webkit-transition:all .5s ease-out;
-moz-transition:all .5s ease-out;
-o-transition:all .5s ease-out;
transition:all .5s ease-out;
}

a.murub:hover {
color:#fff;
text-shadow:
0px 1px 0px #288433,
0px 0px 3px #288433,
0px 0px 5px #288433,
0px 0px 30px #288433,
0px 3px 50px #288433;
}
4. Simpan

Selajutnya pada saat penulisan kode link, tambahkan class="murub" pada bagian <a>, sehingga kode linknya akan menjadi seperti ini :
<a href="#" class="murub">Teks Anda</a>
Hasilnya akan menjadi seperti dibawah ini : (arahkan kursor pada tulisan "Teks Anda")

Note :
  • Warna default permalink akan otomatis menyesuaikan color link pada template yang kalian gunakan. Apabila ingin mengubah warna default nya, cukup tambahkan kode color='warna yang diinginkan' pada CSS class a.murub
Contoh :
a.murub {color:red;
Hasil :


  • Sedangkan jika ingin mengubah warna link ketika tersentuh kursor, cukup ubah kode color='#fff' pada class a.murub:hover menjadi color='warna yang diinginkan'

Contoh :
a.murub:hover {color:yellow;
Hasil :

  • Sedangkan jika ingin mengubah warna bayangan, cukup ubah kode #288433 pada bagian text-shadow menjadi kode warna yang diinginkan

Contoh :
text-shadow:
0px 1px 0px blue,
0px 0px 3px blue,
0px 0px 5px blue,
0px 0px 30px blue,
0px 3px 50px blue;
}
Hasil :


Kesimpulan

  • a.murub untuk mensetting warna default link
  • a.murub:hover untuk mensetting perubahan warna ketika link terkena kursor
  • text-shadow: untuk mensetting warna bayangan

Nah, sisanya bisa kalian kembangkan sendiri.
Tautan menyala pada Blog ini akan sangat menarik jika digunakan pada template dengan style gelap / dark edition.
Contoh tautan menyala pada tema Gelap :
> Arahkan kursor ke tulisan PERMALINK 1 dan PERMALINK 2
Ini adalah contoh PERMALINK 1 dan PERMALINK 2 yang berada di tema gelap

sumber : http://surochman.blogspot.com

nanio
Cara Membuat Tautan Menyala pada Blog
Cara Membuat Tautan Menyala pada Blog Cara Membuat Tautan Menyala pada Blog Reviewed by Bagus Surochman on 5/08/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.