Membuat Inline Help Tips di Blogspot

Membuat Inline Help Tips di Blogspot

Membuat Inline Help Tips di Blogspot

infoalya.com

Update blog lagi, sahabat infoalya.com, kali ini admin ingin berbagi langkah-langkah membuat inline help tips di blogspot, bagi kalian yang tertarik untuk menerapkan di blog silahkan diikuti langkah-langkahnya dibawah ini ya.

DEMO

Untuk CSSnya kopi dan tempel diatas  </style>   atau   ]]></b:skin> 
.help-tip{
 position: absolute;
 top: 18px;
 right: 18px;
 text-align: center;
 background-color: #BCDBEA;
 border-radius: 50%;
 width: 24px;
 height: 24px;
 font-size: 14px;
 line-height: 26px;
 cursor: default;
}

.help-tip:before{
 content:'?';
 font-weight: bold;
 color:#fff;
}

.help-tip:hover p{
 display:block;
 transform-origin: 100% 0%;

 -webkit-animation: fadeIn 0.3s ease-in-out;
 animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{ /* The tooltip */
 display: none;
 text-align: left;
 background-color: #1E2021;
 padding: 20px;
 width: 300px;
 position: absolute;
 border-radius: 3px;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
 right: -4px;
 color: #FFF;
 font-size: 13px;
 line-height: 1.4;
}

.help-tip p:before{ /* The pointer of the tooltip */
 position: absolute;
 content: '';
 width:0;
 height: 0;
 border:6px solid transparent;
 border-bottom-color:#1E2021;
 right:10px;
 top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
 width:100%;
 height:40px;
 content:'';
 position: absolute;
 top:-40px;
 left:0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
 0% { 
  opacity:0; 
  transform: scale(0.6);
 }

 100% {
  opacity:100%;
  transform: scale(1);
 }
}

@keyframes fadeIn {
 0% { opacity:0; }
 100% { opacity:100%; }
}

Kalau sudah selesai terapkan HTML berikut dimanapun sobat ingin menampilkan inline help tips
<div class="help-tip">
 <p>Ini adalah contoh  Inline Help Tips, semoga membawa manfaat .............</p>
</div>

jelasinblog.blogspot.co.id/2014/10/membuat-inline-help-tips-hanya-dengan.html

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×