Taufik Blog

Cara Membuat Link Dalam Artikel Di Blogspot

Untuk membuat link dalam artikel di Blogspot yang perlu anda lakukan hanyalah menyorot teks yang ingin saudara ubah menjadi link dan lakukan prosedur di bawah ini....

• Klik icon LINK pada deretan icon editor

• Masukkan URL yang saudara inginkan terbuka. Pilih apakah anda ingin link terbuka di jendela baru atau tidak. Pilih juga apakah anda ingin link bersifat nofollow atau tidak.... Setelah itu klik OK dan selesai. (Yang dimaksud dengan Nofollow adalah anda tidak memberikan poin positif untuk SEO ke halaman yang dituju.)

Cara Membuat Link Dengan HTML sederhana....

Sekarang kita pelajari bagaimana cara memasang link jika bukan di dalam artikel. Untuk membuat link anda cukup memasang kode HTML sederhana pada template atau theme saudara.

Bentuk HTML dasar dari sebuah link

Di bawah ini adalah 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 aturan dasarnya:

• Anda tinggal mengganti http://www.example.com/ dengan URL yang anda inginkan
• Anda tinggal mengubah Situs Ujicoba yang adalah teks jangkar dengan kata-kata yang anda inginkan

....maka anda akan mendapatkan struktur HTML dari link yang anda butuhkan.

Cara Memasang HTML Link

Setelah anda membuat struktur linknya, maka saatnya untuk memasang link tersebut. Bagi pengguna blogspot, anda bisa memasangnya dengan berbagai cara:

Memasang link dengan menggunakan widget HTML/JAVASCRIPT

• Sekarang anda tinggal membuka menu TATA LETAK pada dasbor blog saudara
• Klik TAMBAHKAN GADGET pada bagian yang ingin anda pasangkan link
• Akan muncul pop up, silahkan scroll ke bawah dan pilih HTML/JAVASCRIPT
• Masukkan kode html dari link tadi ke dalam editor gadget dan klik SIMPAN.
  
  
• Atur posisi dari gadget di tempat yang anda inginkan

Memasang Link Di Dalam Struktur Template

<a href='http://www.example.com/'>Situs Ujicoba</a>

Membuat Pengaturan Tampilan Untuk Link Dengan CSS

Kode CSS dasar dari link

a {
properti nilai pengatur link
}

a {
color:#ff0000;
}

Properti pengatur tampilan link

• font-family (Mengatur Jenis huruf contohnya:Arial, Times New Roman, dll)
• font-size (Mengatur besar dari huruf)
• font-weight (Mengatur ketebalan huruf)
• color (Mengatur Warna Huruf dengan menggunakan kode warna)
• text-decoration (Mengatur variasi text, misalnya ...menentukan apa memakai 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 membuat tampilan link dengan kode 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 seperti di bawah ini:
Cara Membuat Link Di Blog

Membuat Pseudo-Class pada Link

• a:link
• a:hover
• a:active
• a:visited

Lihat contoh 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;
}

Mengatur tampilan link hanya pada area tertentu dalam halaman

<div class="sidebarkanan">
......
......
</div> 

Dari kode di atas kita bisa melihat bahwa area tersebut dibatasi dengan class sidebarkanan. Oleh karena class diberi tanda titik dalam css, maka operatornya adalah .sidebarkanan

Jadi contoh kodenya sekarang 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;
}

Meletakkan Kode CSS pengaturan yang baru