Tutorial Cara Bikin Tooltip Deskrip Anime Pada Blog Seperti Fansub.
Tutorial Cara Bikin Tooltip Deskrip Anime Pada Blog Seperti Fansub. |
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.jpegKemudian 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; }
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>
Catatan:Ok sekian dulu tutorial kaliini semoga bermanfaat selamat mencoba.
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.
kunjungi marfnkz.blogspot.co.id
ReplyDelete