64 Cara Membuat Tooltips Keren Dengan CSS3 Untuk Blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Alhamdulillah akhirnya bisa kembali memenuhi tutorial request dari salah seorang sahabat blogger kita, kali ini dari sahabat Ade Tiawan admin dari blog Ol Terus. Maaf kalau kemudian permintaan ini agak telat ditanggapi karena dari sekian banyak tutorial membuat tooltip yang pernah saya dapatkan baik yang menggunakan JavaScript, JQuery dan CSS3 saya memilih untuk memberi yang berbeda dari biasanya, dimana padanya terdapat aspek desain sehingga tampilan tidak saja umum dan standar tapi juga bisa terlihat sejuk dan segar. Pertimbangan lain adalah juga melirik pada segi fungsi, sehingga kegunaan tooltips inipun semakin sempurna sebagai pemberi informasi.

Screenshot Tooltips Hasil Dari Tutorial Ini

Tooltips For Blogger Untuk mendapatkan ide yang jelas anda bisa mengecek dan melihat langsung live demo tooltips for blogger ini diblog eksperimen saya

Tekan tombol "View Demo"

View Demo

Jika anda tertarik dengan tooltips ini, berikut cara membuat tooltips keren bertenaga CSS3 untuk blogger

Cara Menambahkan Tooltips Ini KeBlog

  • Login ke akun blogger anda >> 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://lh6.googleusercontent.com/-IIUWYhGh_-M/UB1pbdD3wCI/AAAAAAAAFiQ/9BSZXhLX-tQ/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://lh3.googleusercontent.com/-sEK0idue4HM/UB1pcNMBpjI/AAAAAAAAFio/JB7yN1M0WF4/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://lh6.googleusercontent.com/-kCmiNkbo9i4/UB1pbogi4JI/AAAAAAAAFiU/hJb76rrKNBo/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://lh3.googleusercontent.com/-aPsqP_cKj0k/UB1pbaBgV_I/AAAAAAAAFiY/xqeP4CLV3ew/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
Demikian cara membuat tooltips keren bertenaga CSS3 untuk blogger. Semoga anda suka dengan widget ini dan bermanfaat bagi anda. Terimakasih.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

64 komentar :

  1. wih cantik dan menarik,
    ntar aku coba utak atik...

    BalasHapus
    Balasan
    1. Silahkan dicoba, thanks tuk kunjungan dan apresiasinya.

      Hapus
  2. Balasan
    1. Terimaksh tuk kunjungan dan apresiasinya.

      Hapus
  3. Kaya nya seru, ntar deh dicoba utak atik di blog saya, terima kasih info nya :)

    BalasHapus
    Balasan
    1. Yup, lbh seru lg klu dah dicoba utak atikx. Sama2, thanks jg tuk kunjungan dan apresiasinya.

      Hapus
  4. (‾⌣‾ʃƪ) Makasih yah gan udah dibuatkan postingan tentang tooltip.. hehe..
    mantabs deh...

    BalasHapus
    Balasan
    1. Sama-sama, thanks jg tuk apresiasinya.

      Hapus
  5. informasi yang bagus... berkunjung ke web kebaya gaya tex ya

    BalasHapus
    Balasan
    1. Terimaksh, insyaAllah anaa akn kunjung balik.

      Hapus
  6. tooltipnya keren, beda dari yang pernah saya lihat :)

    BalasHapus
    Balasan
    1. Pasti keren dan mmg anaa coba mnyuguhkn yg brbeda dari biasax :)
      Terimaksh kunjungan dan apresiasinya.

      Hapus
  7. kalau tooltip otomatisnya gmana ?? hehe

    BalasHapus
    Balasan
    1. Kalau mau pakai tooltips otomatis pada setiap link atau tag blog mesti pakai JavaScript. Tapi funfsinya sbg informasi pasti msh trasa krg.

      Hapus
    2. owh begitu.. okedeh makasih triksnya (y)

      Hapus
  8. asyik sekarang belajar tentang cara membuat tooltip

    BalasHapus
    Balasan
    1. Terimksh dah mau mampir belajar brsm disini.

      Hapus
  9. Mantab benar blog dan tutorialnya gan. Dapat referensi baru lagi ni tuk belajar ngotak ngatik blog baru gue. Thanks ya gan dah mau berbagi :)

    BalasHapus
    Balasan
    1. MasyaAllah, terimaksh jg tuk kunjungan dan apresiasi anda.

      Hapus
  10. keren gan,tapi kayaknya gak cocok ma template ane :)

    BalasHapus
    Balasan
    1. Kerenlh dan mmg dibuat bkn tuk dicocokin sm tmplate agan :P

      Hapus
  11. cantik banget blognya... boleh requist gak ? klo buat "Artikel terkait" yang biasanya ada di bawah postingan gimana gan ? ane pernah coba tapi kok kotaknya kosong.. gak ada postingan ane.. klo berkenan lihat dulu blog ane.. thanks

    BalasHapus
    Balasan
    1. Untuk tutorial artikel terkait atau related posts sdh prnah publish, silahkan search aja diblog ini atau klik saja pada dropline menu diats bgn widgets khususx label related posts. Smg mmbantu. InsyaAllah sbntr anaa kunjung balik ke blogx ya. Skrg lg ngedit blog. Terimaksh

      Hapus
    2. makasih udah mau mampir di blog ane.. sering2 mampir ya.. itung2 menjalin silaturahmi.. klo berkenan follow ane juga.. makasih infonya.. bakal ane praktekin

      Hapus
    3. sis kenapa artikel terkaitq kosong yaa ? g da tulisanya.. kalau sempet tolong lihat dulu.. n komen di situ sj..

      Hapus
    4. Alhamdulillah sdh tdk ada masalah khn dgn widget related posts atau artikel trkaitx skrg? Krn dah tampil artikel trkaitxx ssuai dgn label postx.

      Hapus
  12. wah keren gan.. kyak di windows ya..:D

    BalasHapus
    Balasan
    1. Benar sekali mirip tooltip di windows. Terimaksh apresiasinya.

      Hapus
  13. Cantik dan keren sob.boleh nihh dicoba

    BalasHapus
    Balasan
    1. Silahkan dicoba, terimaksh tuk kunjungan dan apresiasi anda.

      Hapus
  14. Keren banget tuh.
    Hmm.. ada gak ya tutorial supaya kotak admin beda warna seperti di blog ini?

    BalasHapus
    Balasan
    1. Tutorial agar kolom komentar admin berbeda dengan pengunjung blog sudah pernah dipublish diblog ini, silahkan search aja dikolom search yg disediakan. Pada tutorial modifikasi tampilan threaded comments jg sdh ada effect highlight authors comments, silahkan dicoba sj.

      Terimaksh tuk apresiasi anda.

      Hapus
  15. Teh Ama, saya ingin memakai css3 seperti yang diatas, tetapi blog saya kurang begitu cock dengan warnanya, apakah bisa diganti dengan warna hijau agar terlihat lebih cocok untuk d-ungu.blogspot.com? ditunggu jawabannya yaaa???

    BalasHapus
    Balasan
    1. Kalau ingin mengganti warna background tooltipx, mudah saja tinggal di edit pada bagian kode CSS no 4 diatas. Untuk referensi kode warna bisa dilihat pada postingan saya tabel kode warna.

      Terimaksh kunjungan dan apresiasinya.

      Hapus
  16. wah buat nya manual yaa di link..
    ada ngga yg otomatis muncul di link..? tanpa manual yg diatas?

    BalasHapus
    Balasan
    1. Iya buatx manual krn multi fungsi klu yg otomatis hrs dgn script dgn fungsi trbts blm anaa buat tutorialnya, klu pgn yg otomatis mgkn bs search aja dl dogoogle pasti dah bnyk yg mmbhsx.

      Hapus
  17. saya sudah lihat demonya,memang keren toltipsnya sob.

    maaf sob klu komen ini OOT
    mau nanya nih sob,gimana caranya nambahin atau memunculkan semua komentar blog pada posting?
    maksudnya gini,dalam sebuah posting ada 500komentar tapi yg muncul cuma sekitar 300 gitu...tapi selebihnya komentar itu ada dan tidak masuk kolom spam stelah dicek pada setting,komentar.
    kasus ini saya alami pada template awesome bawaan blogger.
    mksh sebelumnya sob

    BalasHapus
    Balasan
    1. Maaf untuk saat ini anaa blm pnya jwbnx, insyaAllah klu dah temukan jwbnx anaa sharing disini, soalx komentar ana jg blm smpe sgtu, blm nemu kasus gtu jg :D

      Hapus
  18. klo tooltip otomatis gmana ?? hehe

    BalasHapus
    Balasan
    1. Bukanx sdh djwb diats? Yah nntlh anaa buatin tutorialx.

      Hapus
  19. manteb bgt nih blog..
    izin praktekin..
    trimakasih udah share.. sukses selalu buat tipstrikblogging

    BalasHapus
    Balasan
    1. Terimaksh tuk kunjungan dan apresiasinya maria.

      Hapus
  20. Assalamu'alaikum..
    Tutorial ini menarik hati untuk mencoba tapi apa daya sudah terlalu berat untuk loading :)
    Sementara simpan dulu deh, mau pilih2 yg mana yg padanya harus didelete :)
    Terima kasih atas sharenya mba.

    BalasHapus
    Balasan
    1. Wa'alaikumusslm, insyaAllah tdk akn bnyk mmpngaruhi loading blog krn ini hnya pnambahan CSS.

      Hapus
  21. Penasaran dengan tutorial ini, akhirnya sy coba juga, tp mungkin ada yg terlewat krn hasilnya tidak seperti contoh di atas mba.

    ( merah aku ganti link NARA SUMBER
    orange aku ganti NAMA NARA SUMBER
    hijau aku ganti BIOGRAFI NARA SUMBER )

    hasilnya muncul berupa teks di bawah postingan, bukan seperti contoh di atas, ada yg salah dengan cara yg sy masukkan?

    Terima kasih atas jawabannya..

    BalasHapus
    Balasan
    1. Tdk ada yg trlewat kayakx, cara anda jg sdh benar dlm memasukkanx dipostingan.
      Bs saya lihat hasil dari praktek anda?

      Hapus
  22. Saya sudah lihat versi demonya..
    Menurut saya bagus & lebih keren dari toltips biasanya..
    Ijin boomark dulu sob infonya buat nanti saya coba..
    Thanks..

    BalasHapus
    Balasan
    1. Silahkan, trimaksh jg tuk apresiasinya.

      Hapus
  23. Kereen yah... nyoba yah sob

    thanks udh berbagi :)

    BalasHapus
    Balasan
    1. Yup. Silahkan dicoba, sama-sama thanks jg apresiasinya.

      Hapus
  24. Thx gan , ini yang lagi saya cari ...
    Ada bnyak , tapi hanya disini yang lengkap tooltip nya ...

    BalasHapus
  25. keren blognya keren tutorialnya

    BalasHapus
  26. Makasih gan kunjungi balik ijin cpy paste artikel yang unik-unik

    http://tkj-cyber4rt.blogspot.com/

    BalasHapus
  27. kaloq buat tooltip kayak gini bisa gk..??
    http://www.chordfrenzy.com/chord/332/peterpan-yang-terdalam-chord

    BalasHapus
  28. Wah, oke banget tutorialnya sob..
    Thanks ya sob udah di share..

    BalasHapus
  29. keren" banget tips n tricknya .
    pasti mba pinter css & jquery yah :D

    BalasHapus
  30. lagi lagi ketemu sama blog ini.. maju terus gan

    BalasHapus
  31. mantap gan.. nanya donk.. kalau mau tolltipnya kelihatan pas nanti di klik, bagaimana yah?

    BalasHapus
  32. maaf ingin tanya gan,maksud HTML editor post itu dibagian Blog mana yah?
    sya agak bingung...
    thanks before!

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!