Tooltip Terbang Dengan Kode Css3

Mungkin sobat blogger sudah pernah mendengar tentang tooltip yang bisa terbang ,keren memang akan tetapi berpengaruh ngak dengan masalah looding blog ...? Jawabannya pasti ya...karena penggunaan tooltip dengan penggunaan Jquery pasti akan berpengaruh dengan looding blog.Nah untuk Postingan kali ini INFO BLOG akan membuat bagaimana cara membuat tooltip dengan kode CSS juga bisa terbang Sebagai contoh coba sobat arahkan kursor sobat kearah link di bawah ini

Contoh link yang bisa terbang — Nah tooltip inilah yang akan terbang nantinya-

Setelah melihat contohnya dan sobat ingin juga tahu cara membuatnya silahkan ikuti secar detil tutorialnya di bawah ini

1. Cari kode]]></b:skin> lalu simpan kode css 3 berikut tepat di atas ]]></b:skin>

    a.tooltip {outline:none;text-decoration:none;border-bottom:dotted 1px blue;} a.tooltip strong {line-height:30px;} a.tooltip > span { width:250px; padding: 10px 20px; margin-top: -1000px; margin-left: 10px; opacity:0;  z-index: 10; position: absolute; font-family: Arial; font-size: 12px; font-style: normal; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 2px 2px 2px #999; -moz-box-shadow: 2px 2px 2px #999; box-shadow: 2px 2px 2px #999; -webkit-transition-property:opacity, margin-top, visibility, margin-left; -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -moz-transition-property:opacity, margin-top, visibility, margin-left; -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; -o-transition-property:opacity, margin-top, visibility, margin-left; -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; transition-property:opacity, margin-top, visibility, margin-left; transition-duration:0.4s, 0.3s, 0.4s, 0.3s; transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; } /*a.tooltip > span:hover,*/ a.tooltip:hover > span { opacity: 1; text-decoration:none; visibility: visible; overflow: visible; margin-top:-10px; display: inline; margin-left: 10px; } a.tooltip span b { width: 15px; height: 15px; margin-left: 20px; margin-top: -19px; display: block; position: absolute; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-box-shadow: inset -1px 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff; -o-box-shadow: inset 0 1px 0 #fff; box-shadow: inset 0 1px 0 #fff; display: none\0/; *display: none; } a.tooltip > span { color: #000000; background: #FBF5E6; background: -moz-linear-gradient(top, #FBF5E6 0%, #FFFFFF 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FBF5E6), color-stop(100%,#FFFFFF)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBF5E6', endColorstr='#FFFFFF',GradientType=0 ); border: 1px solid #FF9933; } a.tooltip span b { background: #FBF5E6; border-top: 2px solid #000099; border-right: 2px solid #000099; }

2. Silahkan Save dulu template sobat
3. Untuk memsukkan kode HTML nya silahkan sobat gunakan kode di bawah ini:

   <a href="Link tujuan" class="tooltip"> Judul  <span> — Isi tooltip akan tampil disini </span> </a>

Effect Animasi Pada Header blogger

Masih tentang Keyframes Css3 ternyata juga bisa kita fungsikan pada header blog ,nah yang akan Info Blog kasih pada Tutorial Kali ini bagai mana cara membuat Effect Animasi Pada Header Blogger ,sebagai contoh coba sobat lihat pada header blog ini selain warna fontnya bisa berganti warna juga bisa bergerak ke kanan dan ke kiri Nah untuk cara membuat nya sobat bisa langsung praktek dengan mengikuti tutorialnya seperti di bawah ini.

1. Silahkan Loggin ke blogger.com
2. Pilih template lalu sobat pilih bagian Edit Html
3. Gunakan Ctrl +f   cari kode ]]></b:skin> masukkan kode css berikut tepat di bawah kode ]]></b:skin> berikut kodenya :

   <style>#header{width:auto;
   height:50;
   background:none;
   position:relative;
   animation:mymove 5s infinite;
   -moz-animation:mymove 5s infinite; /* Firefox */
   -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
   -o-animation:mymove 5s infinite; /* Opera */
   }
   
   @-moz-keyframes mymove /* Firefox */
   {
   0% {left:0px;color:green}
   50% {left:200px;color:red}
   100% {left:0px;color:orange}
   }
   
   @-webkit-keyframes mymove /* Firefox */
   {
   0% {left:0px;color:green}
   50% {left:200px;color:red}
   100% {left:0px;color:orange}
   }
   
   @-ms-keyframes mymove /* Firefox */
   {
   0% {left:0px;color:green}
   50% {left:200px;color:red}
   100% {left:0px;color:orange}
   }
   
   @-o-keyframes mymove /* Firefox */
   {
   0% {left:0px;color:green}
   50% {left:200px;color:red}
   100% {left:0px;color:orange}
   }</style>

4. untuk mengatur pergerakan header edit bagian  %{left:...px} 
5. Jangan lupa yang terakhir SAVE template

Cara Buat Link Berdisco Ria

menjadikan hal biasa menjadi luarbiasa adalah hal yang ingin Info Blog share untuk pertemuan kali ini seperti yang pernah kita lihat bentuk Default warna link adalah Biru ,bagai mana kalau seandainya bentuk warna link tersebut kita rubah menjadi warna yang lain ,bukan hanya berubah satu warna akan tetapi link tersebut akan berubah dengan berbagai warna bahkan boleh dibilang link yang Berdisco Ria,untuk melihat contoh link yang berdisco ria silahkan sobat lihat di akhir postingan ini.Sedangkan untuk cara membuatnya silahkan sobat lihat cara nya seperti di bawah ini :

1. Pada bagian dasboard silahkan sobat pilih template kemudian klik Edit Html
2. Kemudian cari kode ]]></b:skin>lalu sobat taruh kode CSS3 tepat di atas nya berikut kodenya

   a{animation:mymove 5s infinite;
   -moz-animation:mymove 5s infinite; /* Firefox */
   -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
       -o-animation:mymove 5s infinite; /* Opera */}
   @-moz-keyframes mymove{0%{color:red}10%{color:yellow}20%{color:orange}30%{color:purple}50%{color:blue}75%{color:pink}100%{color:green}}
   @-webkit-keyframes mymove{0%{color:red}10%{color:yellow}20%{color:orange}30%{color:purple}50%{color:blue}75%{color:pink}100%{color:green}}
   @-o-keyframes mymove{0%{color:red}10%{color:yellow}20%{color:orange}30%{color:purple}50%{color:blue}75%{color:pink}100%{color:green}}

3. Kemudian Save template dan lihat hasilnya  semua link sudah bisa berdiscoria

DEMO

Tooltip Dengan Animasi keren

Berkreasi memang tidak ada habis nya bagaimana tidak...? seperti yang akan Info Blog berikan pada pertemuan kali ini .
Saya kira sobat semua sudah tahu dengan Tooltip....!! Yach itu lho keterangan yang akan muncul jika mendekatkan cursor atau mouse pada sebuah link contohnya seperti ini..coba sampean arahkan cursor/mouse kearah link di samping ini Contoh Tooltip sederhana yang saya praktekan barusan adalah contoh tooltip yang sangat sederhana jika ditulis dalam bentuk html seperti ini

<a href="#"title="nah yang nongol ini yang namanya tooltip">Contoh Tooltip sederhana</a>

Coba sobat perhatikan text yang berwarna merah ...tulisan itulah yang akan keluar jika cursor/mouse kita dekatkan ke atas link .dari bentu sederhana tersebut ternyata masih bisa kita modifikasi sedemikian rupa hingga bisa menjadi lebih keren ,tentunya hal tersebut tidak akan pernah terjadi tanpa bantuan dari kode CSS 3 keyframe Animation .Untuk mempersingkat waktu mari kita jabarkan caranya satu persatu.

1. Silahkan sobat download lengkap dulu template untuk menjaga kemungkinan ada kesalahan saat penempatan kode Nantinya .
2. Cari Kode ]]></b:skin> Lalu tempatkan kode Css3 berikut tepat di atas nya

   a.tooltip{
   position:relative;
   }
   a.tooltip span{
   display:none;
   }
   a:hover.tooltip span{
   background:#FFFFCC;
   padding:10px 15px;
   width:300px;
   height:auto;display:block;
   position:absolute;
   left:10px;
   top:20px;
    -webkit-box-shadow: 10px 1px 5px 5px rgba(6, 4, 8, 10);
   box-shadow: 10px 1px 5px 5px rgba(6, 4, 8, 10);
   color:#000;
   z-index:100;
   border:1px solid #999;
   text-decoration:none;
   font-weight:normal;-moz-animation:nongol 1s forwards; /* Firefox */
   -webkit-animation:nongol 1s forwards; /* Safari and Chrome */
   -o-animation:nongol 1s forwards; /* Opera */
   }
   @-moz-keyframes nongol /* Firefox */
   {
   0%   {left:400px;opacity:0}
     
   100% {left:75px;}
   }



3. Lalu Save Template,untuk pemanggilan kode  HTML nya gunakan kode berikut



<a href="alamat yang dituju" class="tooltip">Judul Link <span>Teks yang akan ditampilkan pada tooltip Teks yang akan ditampilkan pada tooltip</span></a>

Jika tutorial di atas sobat lakukan seperti di atas maka hasilnya akan seperti contoh di bawah ini
Nama Anchor Link Teks yang akan ditampilkan pada tooltip Teks yang akan ditampilkan pada tooltip

Semoga tutorial tentang cara membuat tooltip dengan animasi keren bermanfaat buat sahabat semua

Tentang Mas Mahfid

Nama Admin:Mas Mahfid
Profesi Admin:Saat ini bekerja di studio foto di kota Jember
Hobby Admin:Wah kalau masalah hobby sangat banyak selain membaca admin juga suka nonton film Horror walaupun waktu ke kamar mandi saat malam hari masih minta antar ama Ajudan(istri),selain itu Admin paling suka membaca ,nonton TV terutama liputan liputan Kriminal ,maklum admin dulu pernah bercita cita ingin menjadi Polisi
Motifasi : melakukan sesuatu hal yang sering di anggap orang lain sulit dan mencoba untuk menjadi bisa ,mencoba lebih baik walau gagal dari pada takut untuk mencoba kita tidak akan tahu kapan kita akan berhasil