B
erexperiment dengan kode css3 memang mempunyai tantangan tersendiri,selain bisa membuat tampilan text bisa lebih menarik dan terlihat keren ada kepuasan tersendiri saat kita berhasil melakukan nya ,masih ingat dengan postingan Full Blog Design tentang tooltip terbang beberapa waktu lalu jika belum silahkan review dahulu cara membuat tooltip terbang disini.Banyak sebagian orang berpendapat memasang kode jquery pada sebuah template ada untung ruginya sama halnya dengan tootip terbang yang pernah saya posting,juga menggunakan kode jquery, tampilan nya memang lebih keren tapi sayang akan juga berpengaruh terhadap looding blog tentunya sobat akan berpikir 2 kali untuk memasang tooltip terbang yang pernah saya posting tersebut.Tetapi seperti yang pernah saya bilang pada awal postingan ini bahwa berexsperiment dengan kode css sangat menyenangkan jika kita berhasil membuat sesuatu yang baru,seperti yang akan Full Blog Design Share pada pertemuan kali ini, yaitu Tentang cara membuat Tooltip Terbang Dengan Effect Decoration,silahkankan review dulu demonya di bawah ini . Seperti yang sobat lihat dari hasil Review tadi bahwa effect tooltip terbang tadi saya kasih Effect Blink (berkedip ) pada decorasi Title nya,bagai mana masih ingin tahu cara membuat nya .
- Yang perttama tentunya sobat harus Loggin dulu ke Blogger.com
- Setelah masuk ke dasboard pilih template == Edit Html
- Cari kode ]]></b:skin> pasang kode Css3 berikut tepat di atas kode ]]></b:skin>
- Lalu Save Template
- Untuk Html nya gunakan kode berikut pada postingan atau pada sidebar
a.tooltip {
position: relative;
text-decoration: none;
}
a.tooltip::before {
position: absolute;
content: attr(data-title);
background: #000;
width: 200px;
padding: 5px 10px;
color: #fff;
top: -1000px;
text-align: justify;
z-index: 99;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-webkit-transition: all 0.5s linear;
transition: all 0.5s linear;
border: 5px solid #A52A2A;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
text-decoration: blink;
visibility: hidden;
font: normal 12px/20px Arial,sans-serif;
}
a.tooltip:hover::before {
top: 100%;
visibility: visible;
}
<a href="/" class="tooltip" data-title="Effect tooltip dengan decoration blink(-berkedip-)">Silahkan arahkan cursor ke link ini </a>
Silahkan berexperiment dengan bentuk bentuk Decoration yang lain jika ada kesulitan tentang cara membuat Tooltip Terbang Dengan Effect Decoration ajukan pertanyaan di form komentar.
tooltip
