Cara Membuat Tooltip Dengan CSS

Lihat dulu Demonya

General TooltipIsikan dengan text 


Warning TooltipWarningIsikan dengan text disini



Critical tooltipCriticalIsikan dengan text disini




Help TooltipHelpIsikan dengan text disini





Information TooltipInformationIsikan dengan text disini


Adapun tutorialnya sebagai berikut.

1. Login dulu ke akun sobat.
2. Pilih Template > Edit HTML,kemudian centang Expand Widget Templates.
3. Cari kode ]]></b:skin>,kemudian kode CSS di bawah letakan di atas kode ]]></b:skin>.

/* Tooltips By http://ngeblogbarengbareng.blogspot.com/ */
.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 );
}
/* Tooltips By http://ngeblogbarengbareng.blogspot.com/ */

4. Kemudian save.

Untuk menggunakan Box Style Tooltip CSS ini bisa sobat gunakan dalam postingan bagian HTML,atau bisa juga di dalam Widget bagian HTML/javascript.

Untuk kode CSS nya bisa sobat pilih di bawah sesuai kebutuhan.

General Tooltip

<a class="tbi-tooltip" href="#">JUDUL TOOLTIP<span class="custom tbi-general">Isikan text disini</span></a>

Warning Tooltip

<a class="tbi-tooltip" href="#">JUDUL TOOLTIP<span class="custom tbi-warning">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVZqCwnBl0r8anSlDQj-892HaC6oiClFQXkVIZI9_N3LsKRGF9GdRQuo11oegcZ3bZc9RfMScg4RPwckZuhkXIKtFhGLT4BkvKj9EqOBFXmbXMtSvobtjXMYK03Rgiq7eF8xrw0UMPkqo/s48/Warning.png"
alt="Warning" height="48" width="48" /><em>Warning</em>isikan text disini</span></a>

Critical Tooltip

<a class="tbi-tooltip" href="#">JUDUL TOOLTIP<span class="custom tbi-critical">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj562Wp1QwAbX2jnoJ9vo3N8MdWaXEeOqT7KJMuHO0GVR9LZTAnDWMzBaEvhxgUYoHnhTEhc4ScaDPEzhhBBz051fKMX89-NJBv1XJ4ueO0Jq7H3ioJ3XhptE9fOlh5kpBGMXHcU7zgsU0/s48/Critical.png"
alt="Error" height="48" width="48" /><em>Critical</em>Isikan text disini</span></a>

Help Tooltip

<a class="tbi-tooltip" href="#">JUDUL TOOLTIP<span class="custom tbi-help">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_zjcgXXw4YA6vrBVr1gflt3hkSZG7TkNH9eFmaneJw_DMpNqDH0euHHO3QmkMWgRNak2Vx1sLDk1qknD009NNqqTtryzKIZIWvRMKkjgqOzGhyLpQeHDAzQUvyWlXMqtyRy4ggdX8w4k/s48/Help.png"
alt="Help" height="48" width="48" /><em>Help</em>Isikan text disini</span></a>

Information Tooltips

<a class="tbi-tooltip" href="#">JUDUL TOOLTIP<span class="custom tbi-info">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM1VYimCR5sjG18UtDUMtRxD86S4zY4kP-C3sEwc_j7kCBlqzFGGDlqKturHHjBVNWlNMk98RRMicKIV7vw_qsAVYkZMi5auH1nnjNYd49YpdJwVbAtARj8YJRVZ2-GFDmPm1G_VUazWE/s48/Info.png"
alt="Information" height="48" width="48" /><em>Information</em>Isikan text disini</span></a>

Keterangan

* Untuk tulisan berwarna hijau adalah judul tooltip silahkan sobat ganti sesaui keinginan.
* Untuk tulisan berwarna kuning menunjukan letak text,silahkan ganti tulisan berwarna kuning dengan text sobat.


4. Setelah semuanya beres silahkan sobat save dan lihat hasilnya.

Demikina tutorial kali ini yang sedikit melelahkan hehehhe.semoga dapat bermanpaat buat semuanya.

Related Post Thumbnail Tampilan Baru Dengan Navigasi Kolom Dan Efek Tooltip

                                   http://ngeblogbarengbareng.blogspot.com/
Related Post tampilan baru ya begitulah saya menamai widged ini karena sebelumnya mungkin sudah ada di blog lain tetapi belum pernah saya lihat related post seperti ini sebuah related phttp://ngeblogbarengbareng.blogspot.com/ost yang menggabungkan animasi tooltip denganhttp://ngeblogbarengbareng.blogspot.com/ kolom navigasinya yang cuman mehttp://ngeblogbarengbareng.blogspot.com/nampilkan thumbnail
ok gan daripada penasaran lansung aja ke proses pembuatannya....

Masuk blog agan
kemudian pilihhttp://ngeblogbarengbareng.blogspot.com/ menu tata letak/add gadged
setelah itu copas semua kode dibawah ini pada kolom yang telah tersedia...http://ngeblogbarengbareng.blogspot.com/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css" scoped="scoped">
#mini-gallery {
  width:340px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
  margin:0 auto;
  font:normal normal 11px Verdana,Arial,Sans-Serif;
  color:#666;
  padding:8px;
  background-color:#222;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

#mini-gallery h2 {
  font:normal normal 14px Impact,"Arial Narrow",Arial,Sans-Serif;
  color:#999;
  text-shadow:0 1px 0 black;
  text-transform:uppercase;
  margin:2px 2px 2px;
  padding:7px 14px;
  background-color:#3c3c3c;
}

#mini-gallery .rp-item {
  float:left;
  display:inline;
  position:relative;
  margin:2px;
  padding:0 0;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  width:72px;
  height:72px;
}

#mini-gallery .rp-item img {
  width:72px;
  height:72px;
  border:none !important;
  margin:0 0 !important;
  padding:0 0 !important;
  background:transparent !important;
  display:none;
}

#mini-gallery .rp-item .rp-child {
  position:absolute;
  top:95%;
  left:95%;
  z-index:1000;
  width:200px;
  background-color:white;
  border-top:4px solid #3399ff;
  -webkit-box-shadow:0 0 3px rgba(0,0,0,0.7);
  -moz-box-shadow:0 0 3px rgba(0,0,0,0.7);
  box-shadow:0 0 3px rgba(0,0,0,0.7);
  padding:10px 15px;
  overflow:hidden;
  word-wrap:break-word;
  display:none;
}

#mini-gallery .rp-item .rp-child h4 {
  font-size:12px;
  margin:0 0 5px;
  color:#2473A8;
}

#mini-gallery .rp-item:hover .hidden {display:block}
</style>
<script type="text/javascript">
var rpTitle     = "Artikel Terbaru", // Tentukan judul widget
    numposts    = 8,                // Tentukan jumlah thumbnail/posting
    numchar     = 300,               // Tentukan jumlah karakter pada deskripsi tooltip
    rcFadeSpeed = 600,               // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
    pBlank      = "http://images.cooltext.com/3096753.gif", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
    blogURL     = "http://ngeblogbarengbareng.blogspot.com/"; // Alamat blogmu
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/rp-mini-gallery.js" type="text/javascript"></script>

http://ngeblogbarengbareng.blogspot.com/

Catatan : untuk settingannya silahkan ubah kode berwarna Hijau sesuai keinginan anda
                kodetersebut menunjukan lebar kolom widgednya
              http://ngeblogbarengbareng.blogspot.com/

                Simak beberapa kode yang saya tandai dengan warna biru dibawah ini http://ngeblogbarengbareng.blogspot.com/

                Silahkan disesuaikan kode tersebuat dengan kebutuhan anda

Contohnya : Numpost adalah jumhttp://ngeblogbarengbareng.blogspot.com/lah post yang akan ditampilakn
                      pBlank adalah URL gambar pengganti ketika postingan tidak memiliki gambar
                      blog URL silahkan ganti http://ngeblogbarengbareng.blogspot.com/ dengan URL blog anda

Shttp://ngeblogbarengbareng.blogspot.com/aya rasa sudah cukup untuk related post navigasinya gan jika agan berminat silahkan dicoba saja..
Selamat mencoba semoga related postnya bisa bermanfaat....http://ngeblogbarengbareng.blogspot.com/

Cara Membuat Tooltip Otomatis di Blog

Tooltip atau yang disebut juga sebagai Infotip adalah sebuah informasi yang langsung muncul saat kursor mouse mengarahkan pada suatu link. dan pada posting kali ini, saya akan membagikan langkah - langkah membuat Tooltip Otomatis di blog.

Langkah Pertama, seperti biasa login ke akun blogger sobat. ( bukan punya orang lain...)

Kedua, Masuk ke Rancangan - Edit HTML

Ketiga, Centang Expand Template Widget.

Keempat, Paste Kode Berikut di bawah kode <body>.

<script src='http://hanjs.googlecode.com/files/wb-tooltipdeejayhan.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Muhammad Hanafi (DeeJayHan) </a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></script><script src='http://hanjs.googlecode.com/files/wb_tooltips.js'/>
<script src='http://hanjs.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>

 Kelima, Paste Lagi kode berikut di atas kode </body>

</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script>

Keenam, Save Template.
NB : Sobat Bisa mengatur tampilan Tooltip dengan memodifikasi kode yang berwarna biru.
Sobat tidak boleh mengubah kode - kode selain yang berwarna biru.... karena kalo tidak, tooltip akan mengalami Error.

Description: Cara Membuat Tooltip Otomatis di Blog

Cara Membuat Tooltip Otomatis Pada Semua Tag 'Title' Dengan Script

Ini hanya sebuah fitur tambahan untuk mempercantik blog/web dan membuatnya tampil beda, dimana sebagian situs besar seperti Kapanlagi.com sepertinya juga memasang tooltip khusus yang begitu menarik.

Buat yang belum pernah dengar, tooltip itu balon info yang muncul saat sebuah gambar atau link yang berisi tag tittle diarahkan oleh kursor. Bentuk default-nya seperti ketika sobat mengarahkan kursor mouse pada tab atas browser.

Tooltip kali ini menggunakan sedikit script, jadi bagi sobat yang merasa tidak begitu perlu ya tidak usah memaksakan kecantikan blognya.. :) karena ditakutkan akan sedikit memberatkan blog walau tidak banyak.

Jika sobat ingin mempraktikkannya, silakan ikuti langkah berikut ini, untuk demonya bisa arahkan pada link di blog ini yang mengandung tag title-nya.. :)

Berikut caranya :

• Login Ke Akun Blogger sobat
• Pilih Rancangan/Design
• Pilih EDIT HTML (tidak perlu mencentang Expand Template Widget )
• Copy kode berikut tepat diatas kode </head>

<style>#tooltip{width:200px;z-index: 10000000;position:absolute;background:#000;-moz-border-radius:5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;-o-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -webkit-transition:0.5s ease-out;padding:2px 5px;font-size:12px;color:#fff;border:1px dashed #ff0000;display:none;font-weight:bold}</style>

<script type='text/javascript'>

this.tooltip = function(){

xOffset = 10;

yOffset = 20;

$("a[title]").hover(function(e){     

this.t = this.title;

this.title = "";   

$(&quot;body&quot;).append(&quot;<p id='tooltip'>&quot;+ this.t +&quot;</p>&quot;);

$("#tooltip")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px")

.fadeIn("fast");

},

function(){

this.title = this.t;

$("#tooltip").remove();

});

$("a[title]").mousemove(function(e){

$("#tooltip")

.css("top",(e.pageY - xOffset) + "px")

.css("left",(e.pageX + yOffset) + "px");

});

};

// starting the script on page load

$(document).ready(function(){

tooltip();

});

</script>

• Simpan Templatenya Dan Lihat Hasilnya

Cara Mudah Membuat Tooltip Otomatis di blog

Assalamualaikum wr.wb.... salam Sejahtera sahabat blogger semuanya,,,Bagaimana dengan blog anda? Apakah sudah anda pasang tooltip,kalau belum tepat sekali anda telah masuk ke blog ! Ini karena saya akan berbagi Tutorial yaitu Bagaimana Cara Mudah Membuat Tooltip Otomatis di blog. dan apa itu Tooltip,,,,? Tooltip atau yang disebut juga sebagai Infotip adalah sebuah informasi yang langsung muncul saat kursor mouse mengarahkan pada suatu link. dan pada posting kali ini, saya akan membagikan langkah - langkah Dan Bagaimana Cara Mudah Membuat Tooltip Otomatis di blog.>>Ingin Tau Cara Mudah Membuat Tooltip Otomatis di blog>>

Langkah >>> Cara Mudah Membuat Tooltip Otomatis di blog.

Pertama >> seperti biasa login ke akun blogger sobat. ( bukan punya orang lain...)

Kedua >> Masuk ke Rancangan - Edit HTML

Ketiga >> Centang Expand Template Widget.

Keempat >> Paste Kode Berikut di bawah kode <body>.

<script src='http://hanjs.googlecode.com/files/wb-tooltipdeejayhan.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Muhammad Hanafi (DeeJayHan) </a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></script><script src='http://hanjs.googlecode.com/files/wb_tooltips.js'/>
<script src='http://hanjs.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>

Kelima >> Kemudian Paste Lagi kode berikut di atas (sebelum) kode </body>

</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script>

Keenam >> terakhir  Save Template.
NB : 
Sobat Bisa mengatur tampilan Tooltip dengan memodifikasi kode yang berwarna kuning
Sobat tidak boleh mengubah kode - kode selain yang berwarna biru.... karena kalo tidak, tooltip akan mengalami Error.
Selamat Mencoba... Dan semoga bermanfaat............Artikel Cara Mudah Membuat Tooltip Otomatis di blog.>>Cara Mudah Membuat Tooltip Otomatis di blog.
Terima Kasih......

Cara Membuat ToolTips Warna-Warni Dengan CSS3

Tooltips ini menggunakan jquery dan css dan tampilan tooltips ini sangat menarik dengan warna biru, hijau, merah, kuning, putih dan hitam, secara default tooltips ini menampilkan warna kuning. untuk melihat hasilnya



Bagaimana apa sobat tertarik untuk membuat tooltips warna-warni ini?

Langsung saja kita ikuti tutorial berikut ini :

1.    Login ke Blogger

2.    Pilih tab Dsign > Edit HTML

3.    Cari kode ]]></b:skin>

4.    Copy kode di bawah ini dan pastekan tepat di bawah kode ]]></b:skin>

<link href='https://sites.google.com/site/tutorialseoblogger/file/colortip-1.0-jquery.css' rel='StyleSheet' type='text/css'/>

5.    Kemudian cari kode </body>

6.    Copy kode di bawah ini dan pastekan tepat di atas kode </body>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src='https://sites.google.com/site/tutorialseoblogger/file/colortip-1.0-jquery.js' type='text/javascript'/> <script src='https://sites.google.com/site/tutorialseoblogger/file/scriptcolortips.js' type='text/javascript'/>

7.    Simpan template sobat.

8.    Untuk mengaplikasikannya tambahkan kode class='blue' untuk menampilkan tooltips berwarna biru

contoh

    <a href='http://www.tutorial-4u.com/' title='Tutorial For You' class='blue'>Tutorial For You</a>

Warna yang tersedia, blue, red, green, yellow, white dan black

Selesai sudah tutorial Cara Membuat ToolTips Warna-Warni Dengan JQuery,
selamat mencoba, semoga berhasil dan bermanfaat

Tooltip otomatis untuk semua link

tooltip sudah banyak di bahas di banyak blog tetangga ,dan hampir semua blog menggunakan tooltip,seperti postingan sebelumnya yaitu tooltip dengan effec gambar kali ini pun yang akan kita bahas adalah masih seputar tooltip tapi dalam bentuk berbeda.,dan aku kira tooltip yang ini sangat simple kita sudah tidak perlu lagi menggunakan kode Title lagi karena semua yang mengandung link pasti akan keluar tooltip nya.sebagai contoh coba arahkan kursor ke semua link di blogku ini pasti tooltipnya akan keluar nah untuk cara pembuatanya ...youk kita langsung aja ..ke tempat kejadian perkara ...ha ha ha ha ha

1. tentunya sobat harus logi dulu ke blogger.com
2. lalu klik dasbor /dasboard yang tempatnya ada di Navbar yang tempatnya ada di kanan  atas blog kita
3. Lalu pilih Edit HTML (jangan lupa download lengkap dulu template )
4. Cari kode <body>biar mudah gunakan Ctrl+F lalu taruh kode di bawah ini tepat tepat di bawah kode <body>
Berikut kode nya :

---

<script src='http://kumpulaninspirasidiah.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'/><script type='text/javascript'>//<![CDATA[ wb.tooltip_setting = { func : "Tooltip", top : 5, left : 5, maxw : 300, speed : 20, timer : 40, endalpha : 95, alpha : 0, style_plus : "#tt{border:3px solid #198DC9; background:#B0C4DE}#ttcont{background:#000000;color:#FFFFFF}" }; //]]></script><script src='http://kumpulaninspirasidiah.googlecode.com/files/wb2_tooltips.js'/> <script src='http://kumpulaninspirasidiah.googlecode.com/files/wb_autotooltips.js'/><div id='karinafoto'>

---

5. Kemudian cari kode </body>lalu tempatkan kode di bawah ini tepat di atas kode </body>
Berikut kodenya:

---

</div>     <script type='text/javascript'>wb.$_auto_tooltip(&#39;karinafoto&#39;);</script>

---

6. Lalu Save template dan lihat hasilnya

Nah Jika artikel di atas bermanfaat mohon masukan nya di kolom komentar...wassalaam

Cara Membuat Tooltip Otomatis di Blog

Berikut Langkah-Langkah  Cara Membuat Tooltip Otomatis di Blog

Langkah Pertama, seperti biasa login ke akun blogger sobat. ( bukan punya orang lain...)

Kedua, Masuk ke Rancangan - Edit HTML

Ketiga, Centang Expand Template Widget.

Keempat, Paste Kode Berikut di bawah kode <body>.

<script src='http://javascript-share.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Princexells Seyka (Princelling Saki)</a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>

 Kelima, Paste Lagi kode berikut di atas kode </body>

</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script>

Keenam, Save Template.
NB : Sobat Bisa mengatur tampilan Tooltip dengan memodifikasi kode yang berwarna biru.
Sobat tidak boleh mengubah kode - kode selain yang berwarna biru.... karena kalo tidak, tooltip akan mengalami Error.

Cara Membuat Tooltip Zigzag Effect diblog

Hello,..All bloggers all around Indonesia, in this nice opportunity Education for All would like to share an article about how to make  Tooltip  Zigzag Effect in a blog. there are many ways how to beauty your blog. one of the by putting Tooltip  Zigzag Effect  in your blog. I promise that your blog will look cute if you wanna put this one. and even will make your guest stay at home when visiting your blog. trust me. You wanna try it?? well, without further a do just some of the hints bellow. it's very easy.

1. log in to your blog
2. Click design
3. Choose Edit HTML
4. Find the code </head>
5. If you've found it, put the code bellow above the code </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://sites.google.com/site/sin1ajablog/jquery/Tooltip-ZigZagSystem.js" type="text/javascript"></script>
<style type='text/css'>
.tooltip{
      display:none;
      background:#333;
      width:250px;
      font-family:Arial;
      font-size:13px;
      padding:10px 10px 20px;
      color: #00CCFF;
      text-shadow:1px 1px 1px #000;
      border: 4px solid #555;
      border-radius:10px;
      box-shadow:0px 5px 20px rgba(125,124,250,.9);
}
#jqtips img{
      border:0;
      cursor:pointer;
      margin:0 8px;
}
</style>

The next step is, find the code </body>  and put the code bellow above the code  </body>

<script type="text/javascript">
$("#jqtips a[title]").tooltip({effect: 'bouncy'});
$("#jqtips img[title]").tooltip({effect: 'bouncy'});
</script>

 


And now the explanation how to use Tooltip , if you wanna to use tooltip code in a posting area, please move mode Compose to mode EDIT HTML, 

if you wanna to use tooltip code in sidebar please click  ,
Design ► Add Gadget ► Choose HTML/Javscript

here is the code ▼
1. the code Tooltip in link form

 

<div id="jqtips">
<a href="your link here" title="Write down tooltip text here!">your tittle link here</a>
</div>

2. The Tooltip Code in link and picture form

<div id="jqtips">
<a href=" your link here " title="Write down tooltip text here!"><img src="your URL picture here" /></a>
</div>

3. The Tooltip Code in  picture form

<div id="jqtips">
<img src=" your URL picture here " title="Write down tooltip text here!" />
</div>

 For the  CSS code  please create by yourself.