Membuat Inline Help Tips di Blogspot

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