Create CSS Popup Tooltip

Popup Tooltip yang dibangun murni melaui kode CSS berfungsi sebagai box untuk menyampaikan hal khusus yang dipandang menarik dan tidak ditampilkan secara langsung dalam posting tetapi berkaitan dengan materi posting yang disampaikan. Selain berisikan teks, popup tooltip juga di selipi image/gambar asalkan tidak terlalu besar.

D E M O

Cara membuat CSS Popup Tooltip :

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard):
   Cari dan klik "Rancangan (Design)".
3. Setelah halaman baru terbuka, klik "Edit HTML".
4. Lakukan Backup Template.
5. Cari kode ]]></b:skin>
6. Copy dan paste-kan kode css di atas kode ]]></b:skin>
7. Klik "Simpan Template (Save Template).
8. Lanjutkan untuk menggunakn xHTML css tooltip.

Kode CSS tooltip :

a.GRtips{
       font-weight:bold;
       position:relative;
       color:#0000CC;
       text-decoration:none;
}
a.GRtips:hover{ 
       color:#FF0000;
}
a.GRtips span{
       text-align:center;
       display:none;
       font-weight:600;
       position:absolute;
       bottom:30px; /* original code by : http://gubhugreyot.blogspot.com */
       left:10px;
       font-family:Arial;
       font-size:12px; 
       width:180px;
       padding:10px;
       overflow:hidden;
       border:4px double #999;
       color:#eee;
       border-radius:6px; 
       background:#a86b78;
       background:-moz-linear-gradient(top,  #a86b78 0%, #3f0108 9%, #910221 98%);
       background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#a86b78), color-stop(9%,#3f0108), color-stop(98%,#910221));
       background:-webkit-linear-gradient(top,  #a86b78 0%,#3f0108 9%,#910221 98%);
       background:-o-linear-gradient(top,  #a86b78 0%,#3f0108 9%,#910221 98%);
       background:-ms-linear-gradient(top,  #a86b78 0%,#3f0108 9%,#910221 98%);
       background:linear-gradient(top,  #a86b78 0%,#3f0108 9%,#910221 98%);
       filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#a86b78', endColorstr='#910221',GradientType=0 );   
       text-shadow:1px 1px 1px #000;
}
a.GRtips:hover span{
       z-index:999; 
       display:block;   
}

xHTML css Tooltip :

<a class="GRtips" href="http://gubhugreyot.blogspot.com">gubhugreyot<span>Panduan dan Tutorial Blogger</span></a>

Keterangan :

• Gunakan class="GRtips" untuk menampilkan tootip.
• Kode berwarna biru = URL
• Sisipkan tag span di dalam link.
• Letakkan teks tooltip yang berwarna orange dalam tag span.
• Text Link berwarna kuning.
• Tooltip dapat digunakan di halaman posting atau bagian blog yang lain.
• Jika membutuhkan panduan backup template, cara mencari kode html atau berbagai cara menyimpan kode silahkan buka Special Tutorials di sebelah kiri halaman.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Seloso    LEGI, Maret, 13, 2012

» Happy Blogging - gubhugreyot «