Tutorial Cara Bikin Tooltip Deskrip Anime Pada Blog Seperti Fansub.

Tutorial Cara Bikin Tooltip Deskrip Anime Pada Blog Seperti Fansub.

Tutorial Cara Bikin Tooltip Deskrip Anime Pada Blog Seperti Fansub.

Pada tutorial kali ini saya akan coba bagi witged mempercantik tampilan  posting kalian yaitu sebuah tooltip seperti id-card.lengkap dengan deskripnya saya lihat pertama kali waktu membuka list anime fansub Gogoanime.

DEMO

Ok yang berminat langsung saja ikuti cara di bawa ini.
Pertama kita tentukan gambar yang akan di jadikan tooltip deskrip responsip misal :

http://www.animenewsnetwork.com/thumbnails/max700x700/cms/news/102888/one-piece-zou-visual.jpeg

Kemudian kita siapkan deskrip animenya.

Onepiece adalah sebuah anime yang berlatarkan cerita tentang perjalan seorang anak yang bercita-cita menjadi seorang raja bajak laut.

Ok setelah semua siap kita langsung saja membuat codenya:

Pertama kita masuk ke bloger-Pilih-Template kemudian pilih Edit HTML
Cari "</b:skin>"caranya tekan CLTR+F kemudian masukan </b:skin> kalau sudah ketemu
pastekan code di bawa ini tepat diatas code </b:skin>

code</>css Tooltip

li.sfhover .TOLtip,li:hover .TOLtip{ 
        display:block;
        z-index:999;
}
.TOLtip {
        margin:20px 6px 0 6px; 
        padding:15px 10px 15px; 
        position:absolute; 
        width:265px; 
        display:none; 
        background:url(https://lh6.googleusercontent.com/-B1OjRE-HQTQ/T3ED1X9ndGI/AAAAAAAAAiQ/-WCpESXiFLo/h400/bg-grad-1x400.jpg) bottom repeat-x;        border:5px solid #888;
        border-radius:20px;
        font-famil:Arial;
        font-size:12px;
}
.TOLtip { 
        margin-top:10px; 
        margin-left:-10px; 
}
.TOLtip:hover { 
        display:none !important; 
}
.TOLtip p {
        color: #333366; 
        margin:0 0 5px 0; 
} 
.TOLtip b {
        font-weight:bold; 
        color:#996600; 
        margin:0 0 5px 0; 
}
.TOLtip img { 
        margin-right:8px; 
        background:#666666; 
        border:1px solid #222;
        width:100px;
        height:auto; 
        float:left; 
        padding:8px 3px 3px 3px;
        border-radius:10px; 
}
.TOLtip  h3 {
        border-top:1px solid #000;
        border-bottom:1px solid #000; 
        font-size:14px; 
        font-weight:bold;
        margin:0 0 6px 0; 
        padding:4px 10px; 
        background:#CCCCCC; 
        color:#006666;
} 
.TOLtip span{
        font-size:11px;
        margin:0 0 6px 0; 
        padding:0 6px; 
        color:#003333;
}

Kalau sudah jangan lupa simpan template.
Kemudian kita masuk ke postingan yang akan kita kasih tooltip setelah kita tentukan di mana kita akan buat tooltip. liat code di bawaini:

Catatan :
Saat mempaste code pada postingan jangan Pilih "Compose" harus pada Mode "HTML" biar code kebaca dan bisa di terapkan.

HTML atau CCS - Info Blog News

<li><a href="url_disini" target="_blank">kata_tooltip_disini</a>
<div class="TOLtip"><img src="image_tooltip_disini"/><b>judul_deskrip_disini</b>
<p>deskrip_disini...</p></div></li>

Nah sekarang dah selesai sinpan dan lihat hasilnya.

Catatan:
Ganti url_disini :Dengan Link kalian yanga ada di postingan
Ganti kata_tooltip_disini Dengan Judul/kata di postingan yang akan di kasih tooltip
Ganti image_tooltip_disini :Dengan link image yang telah kita siapkan sebelumnya
Ganti judul_deskrip_disini Dengan judul deskrip yang akan muncul di tooltip yang sudah kita siapkan sebelumnya
Ganti deskrip_disini... Dengan deskrip yang sudah kita siapkan sebelumnya.

Ok sekian dulu tutorial kaliini semoga bermanfaat selamat mencoba.