Cara Membuat Help Tip di Blog

MurliCyber    12/07/2014    Blogger , Css3 , Html , Tutorial    Comment   

Yeay, banyak sekali para blogger menaruh info pada blog nya, info tersebut tentu sangat berguna buat para pengunjung blog, karena mereka bisa tau info apa sih yang ada di blog tersebut, misal nya akan ada event, atau sekedar info "Maaf jarang update lagi sibuk soal nya", ya pengunjung bisa sekedar tau aja sih, kenapa ini blog gak update update, sehingga kalau kita taruh info di blog pengunjung udah tau kenapa blog tersebut jarang update

Membuat info pada blog, tentu banyak style nya, ada yang muncul popup, ada yang modal dialog, model tekan tombol dan masih banyak lagi, nah kali ini saya akan membahas tentang menaruh info juga di blog, tapi ini model simple nya, jadi ketika di hover akan muncul tip gitu, lumayan lah supaya pengunjung penasaran akan ada info apa di blog tersebut XD

Css

.help-tip {
position: absolute;
top: 18px;
left: 380px;
text-align: center;
background-color: #222;
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%; }
}

Html

<div class='help-tip'>
    <p>Text Disini</p>
</div>

Ganti Text Disini dengan kata kata kamu sendiri

Gampang banget kan? semoga bermanfaat ye sobat blogger.