Cara Muda Membuat Tool Tips Keren Menggunakan CSS3 Untuk Blogger
Tutorial membuat tooltipbisa menggunakan JavaScript, JQuery dan CSS3. Tutorial kali ini saya memilih untuk
memberi yang berbeda dari biasanya, dimana terdapat aspek desain
sehingga tampilan tidak saja umum dan standar tapi juga bisa terlihat COOL dan
segar. Pertimbangan lain adalah juga melirik pada segi fungsi, sehingga
kegunaan tooltips inipun semakin sempurna sebagai pemberi informasi.
Screenshot Tool Tips Hasil Dari Tutorial Ini
Cara Menambahkan
Tool Tips Ini KeBlog
<<>>Masuk Login ke Blogger >> Template
<<>>Klik Edit HTML ---> Proceed
---> Expand Widget Templates
<<>>Klik Ctrl+F Kemudian Cari kode
]]></b:skin>
>>>>Letakkan
kode CSS 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 );
}
<<>>Simpan template anda.
Cara Menampilkan Tooltip
Ini Ke Halaman Posting
Tambahkan
kode berikut sesuai dengan spesifikasi tooltips yang anda inginkan pada bagian
HTML editor post.
<<>> Untuk Tooltip umum dan
standar/ General tooltip Gunakan Kode:
.<a
class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span class="custom
tbi-general"> TOOLTIP
HERE</span></a>
<<>> Untuk Critical Tooltip
Gunakan Kode:
.<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span
class="custom tbi-critical"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmHhwtjexkEuh7ll1NbOFBEiSBzMhrPthY2iGJB8X6PMZDTYe7Kiv-bFJiWf1tZcHBU46rsF3ntpKm_aKjjOaz43ngYfIevXD9lg-p-4Q5_WDXFSqG9DGQ8KoCX_B5A1x02UVR1JDbW1o/s48/Critical.png"
alt="Error" height="48" width="48"
/><em>Critical</em>TOOLTIP HERE</span></a>
<<>> Untuk Warning Tooltip
Gunakan Kode:
.<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span
class="custom tbi-warning"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMeaiCW5mYA_M1sc8tHhGJeXDjRze4dQ_5hh5uNP4SrHxtNYz1S3o1Pb8Z52ZE8BC0sir4UMJPKbBHudNlihdoxn4w4P1sdEM2W_0R6tBoB33VPNhedKIjzFF3T4k3arefjr39uIZtflY/s48/Warning.png"
alt="Warning" height="48" width="48"
/><em>Warning</em>TOOLTIP HERE</span></a>
<<>> Untuk Help Tooltip Gunakan
Kode:
<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span
class="custom tbi-help"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdxRPrMjxguTqOB_3QrUta9gM7AEErRQm97pV9AKaM9-BndNQnV8A_WcmOVWXe5VHiwfQkC662cms0kiX7gXgOywO3itqWxWTpAegib0jNJXWDHtvCZms-eEbUfTt8cR14jD1x1GWCg6g/s48/Help.png"
alt="Help" height="48" width="48" /><em>Help</em>TOOLTIP HERE</span></a>
<<>> Untuk Information Tooltip
Gunakan Kode:
.<a class="tbi-tooltip" href="#">ANCHOR TEXT HERE<span
class="custom tbi-info"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtt_qb6b6hjDXWSIjY_svu-9pGPjn4k2oWAnKAw581TA7Ok5HXz0rsz8g_V73Aj1-MqKqcMw_zxKa3cSkWq_RgVnmx0nCNm0qsZPMi1OhhnwIG4_Kq73e_aswKPLzNhmVc1Jpk45J77_M/s48/Info.png"
alt="Information" height="48" width="48"
/><em>Information</em>TOOLTIP HERE</span></a>
Kustomisasi
<<>> Anda dapat mengganti tanda pager ‘ # ‘ dengan
link yang akan ditampilkan padanya tooltips
<<>> Ganti ANCHOR TEXT HEREdengan kalimat yang anda inginkan
<<>> Ganti TOOLTIP HEREdengan kalimat informasi yang ingin anda
tambahkan
Beginilah Tutorial cara membuat Tooltips keren CSS3 untuk Blogger. Semoga anda suka dengan widget ini.
Terimakasih untuk kunjungannya….
Jangan lupa bagian Artikel ini, mungkin sahabat Anda
memerlukan informasi ini.
Related Posts
Cara Non Aktifkan AdBlockers Pengunjung Blog Anda dengan JavaScript Salam Blogging. Saya akan memberikan Tips "Cara Nonaktifkan AdBlockers pengunjung Blog Anda dengan Javascript ". Ya ! Namun saya akan menjelaska...Read More
Pengertian SEO Onpage dan Offpage SEO dan cara Penerapannya di BLOGSalam Bogging, Di sini Blogger Newbie ( Pemula : seperti saya ) akan mendapatkan cara paling efektif dalam penerapan SEO Onpage dan Off-page. ...Read More
Hal Yang Harus di Perhatikan Sebelum Mengajukan Permohonan ke GOOGLE ADSENSESalam Blogging, kali ini saya akan share mengenai 12 Hal yang Harus Dilakukan Sebelum Mengajukan Permohonan ke Google Adsense. Google Adsense...Read More
Pengertian CANONICAL URL dan Fungsinya Salam Blogging, Kali ini saya akan sedikit menjelaskan tentang Apa itu CANONICAL URL ?. URL Canonical didefinisikan sebagai URL pilihan untuk ...Read More
Cara Membuat Widget RECENT POST Keren dengan Thumbnail Salam Blogging, Kali ini saya akan memberikan tips atau “Cara Membuat WIDGET RECENT POST dengan Thumbnail di Blogspot/Blogger “ Widget ini fungs...Read More
Cara Upload File Doc,Exel,Powerpoint,Video di Posting BlogBlog memungkinkan Anda untuk mempublikasikan foto, tulisan, video dan konten online lainnya. Mereka juga memungkinkan Anda untuk mendiskusika...Read More
EmoticonEmoticon