Membuat Efek Shadow pada link blog

Membuat Efek Shadow pada link blog -Membuat efek bayangan pada blog - Membuat Efek Bayangan (Shadow) pada blog - efek shadow pada blog - Cara Mudah Membuat Efek Bayangan Pada Link Blog. Tips dan trik seperti diatas akan saya kemas menjadi simple dan mudah dipahami untuk blogger pemula, agar tidak bingung dengan banyak tutorial yang ada. sebenarnya banyak cara untuk membuat link bayangan pada blog sampai bingung gak bisa pasang.

Banyak cara untuk membuat teks link menjadi lebih menarik di blog supaya teks tersebut di dikunjungi , apalagi link itu berkaitan dengan postingan lain di dalam blog atau link internal blog , efek samping nya cukup bermanfaat buat blog kita, Cara ini bisa meningkat nilai pageview pada blog dan membantu dalam upaya sobat untuk meramping kan blog karena nilai pageview nya naik .

Nah,,, untuk lebih simplenya saya kasih beberapa tutorial bisa sobat pilih dan mencobanya, memang sebuah kendala pada tutorial kadang tidak bisa diterima setiap template alias berbeda-beda namun aslinya semuanya sama, cuma bagi blogger pemula akan merasa kesulitan. jika sobat tertarik membuat efek bayangan pada link blog, ikuti petunjuk dibawah ini: 

Cara Membuat Efek Bayangan Pada Link Blog (Cara Pertama)

1. Log in akun blog sobat.
2. Pada dasbor blog pilih Template » Edit HTML
3.Sobat Cari kode seperti dibawah ini :

a:hover {
color:#80ff00;
text-decoration:none;
}

4.Ganti kode diatas dengan kode dibawah ini

a:hover {color: #ff0000;text-shadow: 0 0 0.5em #000080,0 0 0.5em #0000ff;text-decoration:none; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out}

5.Kemudian Simpan dan lihat hasilnya.

Keterangan :

Bila sobat pengen efek shadow/bayangan yang dihasilkan menjadi lebih tebal, maka tambahkan lebih banyak kode  0 0 0.5em #000080 Hasil Efek bayangannya yang dikeluarkan akan semakin tebal.

Contohnya seperti ini :

a:hover{color: #ff0000;text-shadow: 0 0 0.5em #000080,0 0 0.5em #000080,0 0 0.5em #000080,0 0 0.5em #000080;text-decoration:none; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out}

Cara Membuat Efek Bayangan Pada Link Blog (Cara Kedua)

1. Log in akun blog sobat.
2. Pada dasbor blog pilih Template » Edit HTML
3.Sobat Cari kode #outer-wrapper  (Untuk lebih mudah dan cepat gunakan ctrl+f )
4. jika sudah ketemu, sobat tambahkan kode-kode dibawah ini tepat dibawahnya kode #outer-wrapper tadi.

box-shadow:0 0 20px #6d5d96;
-webkit-box-shadow:0 0 10px #6d5d96;
-moz-box-shadow:0 0 20px #6d5d96;
-o-box-shadow:0 0 10px #6d5d96;

Untuk lebih jelas penempatannya, karena biasanya kurang tepat memasangnya jadi kode tidak berfungsi. kurang lebih hasilnya seperti dibawah ini sobat:

#outer-wrapper {
background:#ffffff;
border-left:1px solid #4169e1;
border-right:1px solid #4169e1;
border-bottom:1px solid #4169e1;
width: 1000px;
margin:0 auto;
padding:10px 10px 20px 0px;
text-align:left;
font: normal normal 11.5px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
box-shadow:0 0 20px #6d5d96;
-webkit-box-shadow:0 0 10px #6d5d96;
-moz-box-shadow:0 0 20px #6d5d96;
-o-box-shadow:0 0 10px #6d5d96;
}

Keterangan :

0 0 20px : Dapat sobat ganti, jika ingin efek bayangan lebih jelas dan tebal.
 #6d5d96 : Adalah warna bayangan, bisa sobat ganti dengan warna bayangan yang sobat inginkan.

 

Terimakasih

Author: Unknown - 1:38 PM