Membuat Inline Help Tips Dengan Css

Membuat Inline Help Tips dengan CSS - Tooltip Adalah Komponen grafis dalam user interface pengguna. Komponen ini biasanya muncul dikala 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 dipakai memakai tanda tanya (?) .

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

1. Masuk Keakun Blogger
2. Pilih Template, kemudian Klik Edit HTML
3. Selanjutnya Anda cari kode ]]></b:skin>
4. Kemudian Anda Salin instruksi 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 bila Anda ingin memasangnya dibawah Artikel, namun bila 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/AVvXsEhBb3O6uxGYPWkkzjkUNG3qAxFQ3Yyh2sW9r1e68g7NAa3AqNZkTZdjQ1o0wz5WdTyMrX4TEVi1lsZVb3C_1UAkuoEiUwLvOrQMardp5eZleS9I3T2G69C5oRWskBKMKiuGPgDed9sIZ4U/s1600/Help.png" title="Membuat Inline Help Tips dengan CSS " /><span class="helptooltip ">Akan membantu untuk mendapatkan isu yang sesuai preferensi Anda.  Misal Anda suka berita, aak-share.com , masukkan email dan Anda akan mendapatkan isu seputar isu tersebut.</span></a></b:if>

7. Simpan Template

Cukup gampang bukan , Semoga bermanfaat!
Sumber http://www.websiteedukasi.com/