Cara Membuat Tooltip Pada Blog

Baca Juga

Cara Membuat Tooltip Keren Pada Blog - Kali ini saya ( Sagitarius Kusadhi ) akan share cara membuat tooltip yang keren menggunakan CSS3. Para sobat blogger pasti sudah gak asing lagi kan dengan tooltip, Maksud dari tooltips keren ini adalah berbeda dengan tooltip - tooltip yang ada, karena tooltip yang ini memiliki fungsi yang lebih yaitu bisa memberikan informasi dengan kategori sampai 5 kategori, yaitu : Standard tooltip, Critical tooltip, Warning tooltip, Help tooltip, dan Information tooltip.  Berikut Ini Langkah Langkah Untuk Membuat Tooltips Tersebut:

Cara Membuat Tooltip Keren Pada Blog

1. Login ke akun blogger anda >> Template >> Edit HTML >> Proceed
2. Cek lists Expand Widget Templates
3. Cari kode ]]></b:skin> (Tips: Untuk mempermudah pencarian gunakan Ctr + F)
4. Letakkan kode berikut diatas kode ]]></b:skin>

.tbi-tooltip { outline: none; cursor: help; position: relative; text-decoration: none; border-bottom: 1px dotted #000; } .tbi-tooltip span { margin-left: -999em; position: absolute; color: #000; } .tbi-tooltip:hover span { font-family: Trebuchet MS, Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 0px 0px 9px #000000; -webkit-box-shadow: 0px 0px 9px #000000; box-shadow: 0px 0px 9px #000000; } .tbi-tooltip:hover img { border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; } .tbi-tooltip:hover em { font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; } .custom { padding: 0.5em 0.8em 0.8em 2em; } .tbi-general { background: #EDEDED; background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjVmNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iI2UzZWFlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjOGQ3ZGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(242,245,246,1) 0%, rgba(227,234,237,1) 37%, rgba(200,215,220,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,245,246,1)), color-stop(37%,rgba(227,234,237,1)), color-stop(100%,rgba(200,215,220,1))); background: -webkit-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); background: -o-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); background: -ms-linear-gradient(top, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 ); -webkit-box-shadow: 4px 4px 1px 1px #ccc; box-shadow: 4px 4px 1px 1px #ccc; } .tbi-critical { border: 1px solid #FF3334; background: #ffccaa; background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmY2NhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjg0ODIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #ffccaa 0%, #ff8482 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffccaa), color-stop(100%,#ff8482)); background: -webkit-linear-gradient(top, #ffccaa 0%,#ff8482 100%); background: -o-linear-gradient(top, #ffccaa 0%,#ff8482 100%); background: -ms-linear-gradient(top, #ffccaa 0%,#ff8482 100%); background: linear-gradient(to bottom, #ffccaa 0%,#ff8482 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffccaa', endColorstr='#ff8482',GradientType=0 ); } .tbi-help { border: 1px solid #2BB0D7; background: #a9e4f7; background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); background: -webkit-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: -o-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: -ms-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: linear-gradient(to bottom, #a9e4f7 0%,#0fb4e7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); } .tbi-info { border: 1px solid #2BB0D7; background: #a9e4f7; background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E5ZTRmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZmI0ZTciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #a9e4f7 0%, #0fb4e7 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e4f7), color-stop(100%,#0fb4e7)); background: -webkit-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: -o-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: -ms-linear-gradient(top, #a9e4f7 0%,#0fb4e7 100%); background: linear-gradient(to bottom, #a9e4f7 0%,#0fb4e7 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); } .tbi-warning { border: 1px solid #FFAD33; background: #f1e767; background: url(data:image/svg+xml; base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZTc2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmY2JjNWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #f1e767 0%, #fcbc5d 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#fcbc5d)); background: -webkit-linear-gradient(top, #f1e767 0%,#fcbc5d 100%); background: -o-linear-gradient(top, #f1e767 0%,#fcbc5d 100%); background: -ms-linear-gradient(top, #f1e767 0%,#fcbc5d 100%); background: linear-gradient(to bottom, #f1e767 0%,#fcbc5d 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#fcbc5d',GradientType=0 ); }

5. Simpan template sobat.

Nah sekarang cara menampilkan tooltips nya , cukup tambahkan kode berikut sesuai dengan spesifikasi tooltips yang sobat inginkan pada bagian HTML editor post.

CODE TAMPILAN TOOLTIP

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-general"> TOOLTIP HERE</span></a>

<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-critical"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlErVx00KdwxcpBiza82qX_6Z4-NgAA-IP70bfA06xhdGu6Z7go8rt39T4P-aO-FfXbmXgYT069ZBrA_OSK2-elXBF7Bq0b5fVaU3IXaR1jtYwSlbXjWA7b9fiXo0cmGLCp-qTgahICS8/s48/Critical.png" alt="Error" height="48" width="48" /><em>Critical</em>TOOLTIP HERE</span></a>

  <a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-warning"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGfWfWjjQUuQSYcr1Atdx7GXQHedemiPrEaMp_vDl4sKss_waaoNTeW5T8avumGu9CFmD3wGivHsD-U9S_T9SIRELJC4S4vw15AyHdshyQ4AleF5hBlF7_sMgYrjTqBVzaXK5wKjEgGVo/s48/Warning.png" alt="Warning" height="48" width="48" /><em>Warning</em>TOOLTIP HERE</span></a>

  <a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-help"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiV9QplI7UytL2bbS_MAqrG87n7oY4JJlcWIXmLkZGHuI1-cry7wxXkNw31AQQyUNo5skM4YePrC21VVNyCR1Q0oCI8-tiJOPGLaNrAdb_lErzp5zVeQjjtFMFwCedm_LOy-3RL-uroEo/s48/Help.png" alt="Help" height="48" width="48" /><em>Help</em>TOOLTIP HERE</span></a>

  <a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom tbi-info"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNZ7YDDCdkNNnx5-tkmoUkVdNdfVEJ1_JJR-9N7cjHjyjHztimwo9rc-wwmAEwO7N1-oOqsiM52RRl4c75nAfFHjiOheo6Emn700AaDZeBxRK0g5QjSLi2AYs5Wul9gj5vA7zMzp8HBOE/s48/Info.png" alt="Information" height="48" width="48" /><em>Information</em>TOOLTIP HERE</span></a>

TAMBAHAN:

• Silahkan Ganti # yang ada pada CODE TAMPILAN TOOLTIP diatas dengan link yang akan ditampilkan padanya tooltips 
• Ganti ANCHOR TEXT HERE dengan kalimat yang anda inginkan
• Ganti TOOLTIP HERE dengan kalimat informasi yang ingin anda tambahkan

Untuk demonya bisa kunjungi link dibawah ini !!

>> DEMO TOOLTIP <<

Demikian tutorial mengenai Tooltip pada blog, semoga tutorial ini dapat berguna bagi para blogger semuanya. Jangan lupa tinggalkan komentar untuk tutorial ini, Terima kasih :)