Makara kali ini saya bakal membagikan trik menciptakan link di blog. Kita mulai dari yg sederhananya dulu ya....
Caranya Membuat Link Dalam Maknakel Di Blogspot
Untuk menciptakan link dalam Maknakel di Blogspot yg perlu anda lakukan hanyalah menyorot teks yg ingin saudara ubah menjadi link dan lakukan mekanisme di bawah ini....- Klik icon LINK pada formasi icon editor
- Masukkan URL yg saudara inginkan terbuka. Pilih apakah anda ingin link terbuka di jendela gres atau tidak. Pilih juga apakah anda ingin link bersifat nofollow atau tidak.... setelah itu klik OK dan selesai. (Maksud dengan Nofollow ialah anda tidak memperlihatkan poin positif untuk SEO ke halaman yg dituju.)
Caranya Membuat Link Dengan HTML sederhana....
Sekarang kita pelajari gimana trik memasang link jikalau bukan di dalam Maknakel. Untuk menciptakan link anda cukup memasang aba-aba HTML sederhana pada template atau theme saudara.Bentuk HTML dasar dari sebuah link
Di bawah ini ialah bentuk dasar HTML dari sebuah link yg melibatkan operator a, dengan properti href dan sebuah teks jangkar.... <a href="http://www.example.com/">Situs Ujicoba</a> Perhatikan hukum dasarnya:- Anda tinggal Mengubah http://www.example.com/ dengan URL yg anda inginkan
- Anda tinggal mengubah Situs Ujicoba yg ialah teks jangkar dengan kata-kata yg anda inginkan
Caranya Memasang HTML Link
setelah anda menciptakan struktur linknya, maka saatnya untuk memasang link tersebut. Bagi pengguna blogspot, anda dapat memasangnya dengan banyak sekali trik:Memasang link dengan menggunakan widget HTML/JAVASCRIPT
- Sekarang anda tinggal membuka sajian TATA LETAK pada dasbor blog saudara
- Klik TAMBAHKAN GADGET pada bab yg ingin anda pasangkan link
- Bakal muncul pop up, silahkan scroll ke bawah dan pilih HTML/JAVASCRIPT
- Masukkan aba-aba html dari link tadi ke dalam editor gadget dan klik SIMPAN.
- Atur posisi dari gadget di kawasan yg anda inginkan
Memasang Link Di Dalam Struktur Template
Untuk melaksanakan ini maka anda haruslah cukup berpengalaman dalam mengedit template. Jika tidak sebaiknya anda melaksanakan back up template, supaya ada alternatif untuk pemulihan jikalau anda melaksanakan kesalahan fatal....
yg perlu anda lakukan di sini ialah mengubah tanggal kutip ganda pada HTML menjadi tanda kutip tunggal.
<a href='http://www.example.com/'>Situs Ujicoba</a> setelah itu buka sajian TEMPLATE dan klik tombol EDIT HTML. Letakkan aba-aba HTML yg sudah diedit tadi pada kawasan yg anda inginkan di dalam bab <body>...
Membuat Pengaturan Tampilan Untuk Link Dengan CSS
Jika pada template anda tidak ada pengaturan CSS untuk link, maka link bakal ditampilkan berdasarkan standar pengaturan browser yg dipakai oleh pengunjung. Tapi jikalau anda tertarik untuk menciptakan pengaturan tampilan untuk link anda, maka aturlah pada bab CSS....
Kode CSS dasar dari link
Pertama-tama Musti diperjelas dulu apa platform dari website anda..., alasannya ada beberapa metode memasang CSS di dalam situs anda. Tapi apapun metodenya CSS itu Musti ditaruh di dalam bab <head> dari template anda....
Perlu dicatat bahwa operator untuk memilih nilai sebuah link ialah a. Makara bentuk dasar dari CSS sebuah link adalah
a {
properti nilai pengatur link
} Sebagai pola anda mau menciptakan linknya berwarna merah, maka masukkan nilai mirip berikut:
a {
color:#ff0000;
} Ada banyak sekali properti yg dapat anda suntikkan ke dalam tanda kurung {....} yg mengapit pengaturan a di atas.... beberapa di antaranya mirip dicantumkan di bawah ini....
Properti pengatur tampilan link
Pada dasarnya link ialah teks juga, jadi untuk menciptakan pengaturan kita dapat menggunakan semua CSS pengaturan teks.... Perhatikan beberapa properti di bawah ini:
- font-family (Mengatur Macam karakter contohnya:Arial, Times New Roman, dll)
- font-size (Mengatur besar dari huruf)
- font-weight (Mengatur ketebalan huruf)
- color (Mengatur Warna Huruf dengan menggunakan aba-aba warna)
- text-decoration (Mengatur variasi text, contohnya ...menentukan apa menggunakan garis bawah atau tidak)
- letter-spacing (Mengatur jarak antar huruf)
- text-shadow (Mengatur bayangan pada huruf)
Praktek Membuat Pengaturan Link
Sekarang saya bakal coba menciptakan tampilan link dengan aba-aba CSS di bawah ini: a {
font-family: Times New Roman;
font-size: 24px;
font-weight: bold;
color: red;
text-decoration: underline;
letter-spacing: 2px;
text-shadow: 0px 0px 5px yellow;
} Hasilnya bakal terlihat mirip di bawah ini:Caranya Membuat Link Di Blog
Membuat Pseudo-Class pada Link
Mungkin banyak teman-teman yg galau Mengapa ada link dikala belum dikunjungi berwarna merah, dikala disorot berwarna biru; dikala dikunjungi berwarna abu-abu; dan setelah dikunjungi berwarna hitam; atau variasi warna lainnya....
Semua itu dapat terjadi alasannya variasi pseudo-class yg kita berikan. Ada 4 pseudo-class yg dapat anda pakai untuk menciptakan 4 variasi yg tidak sama, yaitu:
- a:link
- a:hover
- a:active
- a:visited
yg perlu anda lakukan hanya memasukkan properti yg anda inginkan berubah dari bentuk link dasar setelah link dikenakan perlakukan tertentu.... Link dasar dalam hal ini dinyatakan dengan pseudo-class a:link....
Lihat pola berikut:
a:link {
font-family: Times New Roman;
font-size: 24px;
font-weight: bold;
color: red;
text-decoration: underline;
letter-spacing: 2px;
text-shadow: 0px 0px 5px yellow;
}
a:hover {
color: blue;
}
a:active {
color: grey;
}
a:visited {
color:black;
} Dari pola di atas teman-teman dapat melihat bahwa saya hanya ingin variasi dalam hal warna. Jika saya ingin ada variasi dalam hal ukuran, warna bayangan,garis bawah, dan lain-lain, maka saya tinggal menambahkan saja perubahan apa yg saya inginkan....
Mengatur tampilan link hanya pada area tertentu dalam halaman
Hal ini dapat anda lakukan jikalau area tersebut dibatasi oleh sebuah class atau id, dan anda Musti mengetahui apa class/id dari area tersebut.... Sebagai contoh:
<div class="sidebarkanan">
......
......
</div> Dari aba-aba di atas kita dapat melihat bahwa area tersebut dibatasi dengan class sidebarkanan. Oleh alasannya class diberi tanda titik dalam css, maka operatornya ialah .sidebarkananMakara pola kodenya kini adalah:
.sidebarkanan a:link {
font-family: Times New Roman;
font-size: 24px;
font-weight: bold;
color: red;
text-decoration: underline;
letter-spacing: 2px;
text-shadow: 0px 0px 5px yellow;
}
.sidebarkanan a:hover {
color: blue;
}
.sidebarkanan a:active {
color: grey;
}
.sidebarkanan a:visited {
color:black;
} Dengan mirip ini, maka hanya link-link yg berada di dalam div ber-class sidebarkanan saja yg bakal terkena pengaruhnya....
Meletakkan Kode CSS pengaturan yg baru
setelah anda selesai menciptakan aba-aba CSS ini, di mana anda dapat meletakkannya? Bagi pengguna blogspot, anda hanya perlu membuka sajian TEMPLATE > EDIT HTML dan cari aba-aba </b:skin>. Taruh aba-aba tadi sempurna di atas </b:skin> maka pengaturan link yg sebelumnya bakal ditimpa. Klik SIMPAN TEMPLATE untuk melihat hasil.....
Sedangkan untuk web umumnya, anda dapat menarunya di atas aba-aba </style> atau di dalam external CSS file yg mengatur tampilan dari halaman tersebut....
Ok, itu saja dulu trik menciptakan link di blog dengan sedikit bermain CSS, mudah-mudahan dapat membantu teman-teman.... Jika ada yg agak pusing dengan klarifikasi panjang di atas, maka lakukan pelan-pelan saja (seperti lagunya kotak)
0 comments:
Post a Comment