Membuat Inline Help Tips dengan CSS

Membuat Inline Help Tips dengan CSS - Tooltip Adalah Komponen grafis dalam user interface pengguna. Komponen ini biasanya muncul ketika pointer mouse diarahkan ke komponen. Berbicara mengenai Tooltip, berikut ini saya akan menuliskan Membuat Inline Help Tips dengan CSS. Biasanya Inline Help Tips simbol yang sering digunakan menggunakan tanda tanya (?) .

Inline Help Tips dapat berisi bantuan maupun informasi lain yang terkait dengan komponen tersebut. Cara ini dapat memudahkan pengguna dalam mengetahui fungsi komponen tanpa harus mencobanya terlebih dahulu dan tidak memenuhi tampilan utama. Pada Inline Help Tips ini menciptakannya dengan menggunakan CSS, caranya sebagai berikut :

1. Masuk Keakun Blogger
2. Pilih Template, lalu Klik Edit HTML
3. Selanjutnya Anda cari kode ]]></b:skin>
4. Kemudian Anda Salin kode CSS dibawah ini sebelum kode ]]></b:skin>

/* Inline Help Tips*/
a:link,a:visited { position:relative; }
.helptooltip { 
width:300px; 
position:inherit; 
bottom:300%; 
margin:10px 0 7px -140px; 
padding:5px; 
font-family:Arial,sans-serif; 
font-size:13px; 
font-weight:normal; 
font-style:normal; 
text-align:left; 
text-decoration:none; 
text-shadow:0 1px 0 rgba(255,255,255,0.3); 
line-height:1.5; 
border:solid 1px; 
-moz-border-radius:0; 
-webkit-border-radius:0; 
border-radius:0; 
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) inset; 
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(255,255,255,0.5) 
inset; box-shadow:0 1px 2px rgba(0,0,0,0.3),0 1px 2px rgba(51, 51, 51, 0.5) 
inset; cursor:default; display:block; 
visibility:hidden; 
opacity:0; 
z-index:999; 
-moz-transition:all 0.4s linear; 
-webkit-transition:all 0.4s linear; -o-transition:all 0.4s 
linear; transition:all 0.4s linear; color: #dcdcdc; 
background: #222; 
background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1)); 
background:#222; border-color:#222; 
}
.helptooltip:before,
.helptooltip:after { 
width:0; 
height:0; 
position:absolute; 
bottom:0; margin:0 0 -20px -10px; 
border:solid 12px; 
border-color:transparent; 
display:table-cell; 
content:""; 
}
.helptooltip:before { 
margin:0 0 -24px -12px; 
border:solid 12px; 
border-color:transparent; 
z-index:-1; 
}
a:hover .helptooltip {
text-decoration:none;
visibility:visible; opacity:1; 
-moz-transition:all 0.2s linear; 
-webkit-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; 
}
.helptooltip,.helptooltip.left { left:0; right:0; }
.helptooltip:before,.helptooltip:after,.helptooltip.left:before,.helptooltip.left:after { 
left:153px;
top: -25px; 
right:auto; 
}
.helptooltip:before { border-bottom-color:#222; }
.helptooltip:after { border-bottom-color:#222; 
}
/* Inline Help Tips*/

5. Simpan Template
6. Selanjutnya Anda cari kode <data:post.body/> dan terapkan dibawahnya jika Anda ingin memasangnya dibawah Artikel, namun jika Anda ingin memasang diatas header Anda cari kode <div class='header-wrapper'> terapkan diatasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href="http://www.aak-share.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsyF9CiC7S3uEEUd6QFwOeSP6bYIbETu9IkMtCVgyjC5Ernc_lMwJ8Vs-194HKodB-xHbGMveOGm5zgK6YdG9LIMqW3dGfq0L6AOQJg9nu6VCZLmatNp7MSL-IgNbJGEdkC8jm48khbc/s1600/Help.png" title="Help" /><span class="helptooltip ">Akan membantu untuk mendapatkan berita yang sesuai preferensi Anda.  Misal Anda suka berita, aak-share.com , masukkan email dan Anda akan menerima berita seputar berita tersebut.</span></a></b:if>

7. Simpan Template

Cukup mudah bukan , Semoga bermanfaat!

Subscribe to receive free email updates: