Posted by Aak
Aak-share.com Updated at: 4:52:00 PM

Cara Membuat Title Tooltip Link dengan CSS

No comments:
Title Tooltip Link dengan CSS - Dengan adanya Title Tag maka pengunjung bisa mengetahui garis besar dari informasi yang disajikan pada sebuah Blog. Title Tag juga baik untuk Judul Blog maupun untuk judul sebuah artikel bisa dibilang cukup penting untuk mengoptimalkan SEO karena title tag merupakan faktor dasar search engine untuk mengukur relavansi dari keyword yang dicari pengguna.

Titel Tag selain dapat di buat untuk Judul Blog maupun untuk judul sebuah artikel , dapat di buat juga pada sebuah link . pada pembuatan title pada link Anda cukup menambahkan title didalamnya . Penambahan title pada link bisa ditambahkan dengan efek Tooltip , contohnya Anda bisa tempatkan cursor pada link di bawah ini :



Untuk menciptakannya hanya dengan menggunakan CSS , bila Anda tertarik berikut ini langkah-langkahnya :

1. Login Keakun blogger
2. Pilih Template, lalu klik Edit HTML
3. Kemudian Anda cari kode  ]]></b:skin>
4. Selanjutnya Anda salin kode dibawah ini dan simpan diatasnya atau sebelumnya

.linktitle a{
text-decoration:none;
text-transform:inherit;
font-family:'Anton',sans-serif;
color:#00f;
}
.linktitle a::after{
content:attr(alt);
display:none;
margin-left:10px;
color:#ccc;
background: #222;
padding:3px;
-webkit-box-shadow:0 0 5px 1px #dcdcdc;
-moz-box-shadow:0 0 5px 1px #dcdcdc;
box-shadow:0 0 5px 1px #dcdcdc;
width:300px;
position:absolute;
font-family:'Arial',sans-serif;
line-height:1.5;
letter-spacing:1px;
text-transform: lowercase;
font-size:13px;
}
.linktitle a:hover::after{
display:inline;
}
.linktitle li{
list-style-type:circle;
}

5. Simpan Template
6. Selanjutnya diperlukan kode pengguna atau pemangil, anda menuju enti baru lalu salin kode dibawah ini dan terapkan pada Mode HTML.

<div class="linktitle">
<li><a  href="URL Tujuanalt="Tuliskan title Anda/deskripsi singkat">Nama Link Anda</a></li>
</div>

7. Publikasikan

Mudah bukan , semoga bermanfaat!
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments