Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot