HTML

Cara Menciptakan Link Di Blog Dengan Css

cara menciptakan link di blog dengan menggunakan CSS Cara Membuat Link Di Blog Dengan CSS
Cara menciptakan link di blog menggunakan CSS mungkin sepele bagi yang sudah karatan di dunia blogging. Tapi ternyata sangat banyak teman-teman pemula yang bertanya di komentar ataupun di grup facebook mengenai cara menciptakan link....

Kaprikornus kali ini saya akan membagikan cara menciptakan link di blog. Kita mulai dari yang sederhananya dulu ya....

Cara Membuat Link Dalam Artikel Di Blogspot

Untuk menciptakan link dalam artikel di Blogspot yang perlu anda lakukan hanyalah menyorot teks yang ingin saudara ubah menjadi link dan lakukan mekanisme di bawah ini....
  • Klik icon LINK pada gugusan icon editor
cara menciptakan link di blog dengan menggunakan CSS Cara Membuat Link Di Blog Dengan CSS

  • Masukkan URL yang 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. (Yang dimaksud dengan Nofollow yaitu anda tidak menunjukkan poin positif untuk SEO ke halaman yang dituju.)
cara menciptakan link di blog dengan menggunakan CSS Cara Membuat Link Di Blog Dengan CSS


Cara Membuat Link Dengan HTML sederhana....

Sekarang kita pelajari bagaimana cara memasang link kalau bukan di dalam artikel. Untuk menciptakan link anda cukup memasang isyarat HTML sederhana pada template atau theme saudara.

Bentuk HTML dasar dari sebuah link

Di bawah ini yaitu bentuk dasar HTML dari sebuah link yang melibatkan operator a, dengan properti href dan sebuah teks jangkar....
<a href="http://www.example.com/">Situs Ujicoba</a> 
Perhatikan hukum dasarnya:
  • Anda tinggal mengganti http://www.example.com/ dengan URL yang anda inginkan
  • Anda tinggal mengubah Situs Ujicoba yang yaitu teks jangkar dengan kata-kata yang anda inginkan
....maka anda akan mendapat struktur HTML dari link yang anda butuhkan.

Cara Memasang HTML Link

Setelah anda menciptakan struktur linknya, maka saatnya untuk memasang link tersebut. Bagi pengguna blogspot, anda dapat memasangnya dengan banyak sekali cara:

Memasang link dengan menggunakan widget HTML/JAVASCRIPT

  • Sekarang anda tinggal membuka sajian TATA LETAK pada dasbor blog saudara
  • Klik TAMBAHKAN GADGET pada potongan yang ingin anda pasangkan link
  • Akan muncul pop up, silahkan scroll ke bawah dan pilih HTML/JAVASCRIPT
  • Masukkan isyarat html dari link tadi ke dalam editor gadget dan klik SIMPAN.
    cara menciptakan link di blog dengan menggunakan CSS Cara Membuat Link Di Blog Dengan CSS
  • Atur posisi dari gadget di daerah yang 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 kalau anda melaksanakan kesalahan fatal....

Yang perlu anda lakukan di sini yaitu 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 isyarat HTML yang sudah diedit tadi pada daerah yang anda inginkan di dalam potongan <body>...

Membuat Pengaturan Tampilan Untuk Link Dengan CSS

Jika pada template anda tidak ada pengaturan CSS untuk link, maka link akan ditampilkan berdasarkan standar pengaturan browser yang dipakai oleh pengunjung. Tapi kalau anda tertarik untuk menciptakan pengaturan tampilan untuk link anda, maka aturlah pada potongan CSS....

Kode CSS dasar dari link

Pertama-tama harus diperjelas dulu apa platform dari website anda..., sebab ada beberapa metode memasang CSS di dalam situs anda. Tapi apapun metodenya CSS itu harus ditaruh di dalam potongan <head> dari template anda....

Perlu dicatat bahwa operator untuk memilih nilai sebuah link yaitu a. Kaprikornus bentuk dasar dari CSS sebuah link adalah
a {
properti nilai pengatur link
}
Sebagai pola anda mau menciptakan linknya berwarna merah, maka masukkan nilai menyerupai berikut:

a {
color:#ff0000;
}
Ada banyak sekali properti yang dapat anda suntikkan ke dalam tanda kurung {....} yang mengapit pengaturan a di atas.... beberapa di antaranya menyerupai dicantumkan di bawah ini....

Properti pengatur tampilan link

Pada dasarnya link yaitu teks juga, jadi untuk menciptakan pengaturan kita dapat menggunakan semua CSS pengaturan teks.... Perhatikan beberapa properti di bawah ini:
  • font-family (Mengatur Jenis abjad contohnya:Arial, Times New Roman, dll)
  • font-size (Mengatur besar dari huruf)
  • font-weight (Mengatur ketebalan huruf)
  • color (Mengatur Warna Huruf dengan menggunakan isyarat 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)
Perhatikan bahwa nama properti selalu diakhiri titik dua (:) dan nilai properti diakhiri titik koma (;)

Praktek Membuat Pengaturan Link

Sekarang saya akan coba menciptakan tampilan link dengan isyarat 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 akan terlihat menyerupai di bawah ini:
Cara Membuat Link Di Blog

Membuat Pseudo-Class pada Link

Mungkin banyak teman-teman yang resah kenapa ada link dikala belum dikunjungi berwarna merah, dikala disorot berwarna biru; dikala dikunjungi berwarna abu-abu; dan sehabis dikunjungi berwarna hitam; atau variasi warna lainnya....

Semua itu dapat terjadi sebab variasi pseudo-class yang kita berikan. Ada 4 pseudo-class yang dapat anda pakai untuk menciptakan 4 variasi yang berbeda, yaitu:
  • a:link
  • a:hover
  • a:active
  • a:visited
Yang perlu anda lakukan hanya memasukkan properti yang anda inginkan berubah dari bentuk link dasar sehabis 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 yang saya inginkan....

Mengatur tampilan link hanya pada area tertentu dalam halaman

Hal ini dapat anda lakukan kalau area tersebut dibatasi oleh sebuah class atau id, dan anda harus mengetahui apa class/id dari area tersebut.... Sebagai contoh:
<div class="sidebarkanan">
......
......
</div>
 
Dari isyarat di atas kita dapat melihat bahwa area tersebut dibatasi dengan class sidebarkanan. Oleh sebab class diberi tanda titik dalam css, maka operatornya yaitu .sidebarkanan

Kaprikornus 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 menyerupai ini, maka hanya link-link yang berada di dalam div ber-class sidebarkanan saja yang akan terkena pengaruhnya....

Meletakkan Kode CSS pengaturan yang baru

Setelah anda selesai menciptakan isyarat CSS ini, di mana anda dapat meletakkannya? Bagi pengguna blogspot, anda hanya perlu membuka sajian TEMPLATE > EDIT HTML dan cari isyarat </b:skin>. Taruh isyarat tadi sempurna di atas </b:skin> maka pengaturan link yang sebelumnya akan ditimpa. Klik SIMPAN TEMPLATE untuk melihat hasil.....

Sedangkan untuk web umumnya, anda dapat menarunya di atas isyarat </style> atau di dalam external CSS file yang mengatur tampilan dari halaman tersebut....

Ok, itu saja dulu cara menciptakan link di blog dengan sedikit bermain CSS, mudah-mudahan dapat membantu teman-teman.... Kalau ada yang agak pusing dengan klarifikasi panjang di atas, maka lakukan pelan-pelan saja (seperti lagunya kotak)

Subscribe to receive free email updates:

0 Response to "Cara Menciptakan Link Di Blog Dengan Css"

Posting Komentar