agung wisudhatama October 06, 2022 Komentar

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

Cara Memberikan Tooltip Keren Memperjelas Link Deskripsi

TOOLTIP merupakan cuplikan keterangan dari artikel yang dipersingkat dan dikemas dengan balutan yang sederhana. Sehingga ketika kita mouse hover dari link text yang ditooltip, maka akan muncul sekilas apa inti dari kata yang dituju. Setidaknya kita tahu uraian singkatnya artikel yang akan kita baca.

Tooltip ini berguna untuk kita yang ingin menonjolkan sebuah kata tertentu untuk diberikan deskripsi singkat sehingga para pembaca semakin tertarik dari point inti yang diberikan dalam deskripsi itu. Dengan begitu intisari dapat terserap pada tooltip yang diberikan pada artikel postingan tersebut.

Cara Memberikan Tooltip Untuk Memperjelas Link Deskripsi Artikel

Cara Pertama

Masuk ke Tema, lalu pilih Sesuaikan : Edit HTML, terus kalian cari kode ini ya, ]]></b:skin>. Kemudian tempelkan kode dibawah ini diatas kode ]]></b:skin> tadi yang sudah kamu temukan.

p {
  width: 100%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background-color: #ffffff;
  padding: 3.5em;
  text-align: center;
  font-size: 16px;
}
a {
  position: relative;
  color: orange;
  font-size: inherit;
}
a:after {
  position: absolute;
  width: 12em;
  background-color: #202842;
  content: attr(data-tip);
  padding: 0.6em 0;
  color: #ffffff;
  margin: auto;
  left: -4.5em;
  right: 0;
  bottom: 1.5em;
  text-align: center;
  border-radius: 0.2em;
}
a:before {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border-top: 0.5em solid #202842;
  border-left: 0.5em solid transparent;
  border-right: 0.5em solid transparent;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 1.1em;
}
a:before,
a:after {
  display: none;
}
a:hover:before,
a:hover:after {
  display: block;
}

Nah sekarang berlanjut ke postingan. Untuk memberikan deskripsi dari link text maka kita sisipkan kode dibawah :

<a href="#" data-tip="Contoh Tooltip 1">Alifa</a>

Catatan : untuk tanda # ganti dengan URL artikel yang sudah kamu buat. Misal seperti ini https://alifacode.com/2022/03/tooltip-keren-memperjelas-link-deskripsi.html

Kalau sudah semua kamu lakukan, saatnya simpan hasil pekerjaan kamu dan lihat di halaman blog yang sudah diedit barusan. Sudah jadi tooltipnya pasti ya. Untuk hasilnya lihat contoh berikut : Tapi sebelumnya saya mengucapkan terima kasih kepada teman-teman semua yang sudah sudi singgah kesini dan baca artikel Tooltip Keren Memperjelas Link Deskripsi.

DEMO

Cara Kedua

1. Masuk ke Dashboard Blogger
2. Klik Tema
3. Pilih Sesuaikan : Edit HTML
4. Cari kode </head>, dan tempelkan CSS3 dibawah ini tepat diatasnya.

<style type='text/css'>
#tooltip{text-align:center;color:#fff;background:#111;position:absolute;z-index:100;padding:15px;border-radius:3px}
#tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #111;content:'';position:absolute;left:50%;bottom:-10px;margin-left:-10px}
#tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #111;top:-20px;bottom:auto}
#tooltip.left:after{left:10px;margin:0}
#tooltip.right:after{right:10px;left:auto;margin:0}
</style>

5. Terus masih di template, temukan kode </body>, dan tempelkan Javascript dibawah ini tepat diatasnya.

<script type='text/javascript'>
//<![CDATA[
// Tooltip Ini Akan Bekerja Pada Tag Sebagai Berikut
    $("a").addClass("tooltip");
    $("img").addClass("tooltip");
    $("p").addClass("tooltip");

// Responsive Tooltip Minify JS
$(function(){var targets=$("[class~=tooltip]"),target=false,tooltip=false,title=false;targets.bind("mouseenter",function(){target=$(this);tip=target.attr("title");tooltip=$('<div id="tooltip"></div>');if(!tip||tip==""){return false}target.removeAttr("title");tooltip.css("opacity",0).html(tip).appendTo("body");var init_tooltip=function(){if($(window).width()<tooltip.outerWidth()*1.5){tooltip.css("max-width",$(window).width()/2)}else{tooltip.css("max-width",340)}var pos_left=target.offset().left+(target.outerWidth()/2)-(tooltip.outerWidth()/2),pos_top=target.offset().top-tooltip.outerHeight()-20;if(pos_left<0){pos_left=target.offset().left+target.outerWidth()/2-20;tooltip.addClass("left")}else{tooltip.removeClass("left")}if(pos_left+tooltip.outerWidth()>$(window).width()){pos_left=target.offset().left-tooltip.outerWidth()+target.outerWidth()/2+20;tooltip.addClass("right")}else{tooltip.removeClass("right")}if(pos_top<0){var pos_top=target.offset().top+target.outerHeight();tooltip.addClass("top")}else{tooltip.removeClass("top")}tooltip.css({left:pos_left,top:pos_top}).animate({top:"+=10",opacity:1},50)};init_tooltip();$(window).resize(init_tooltip);var remove_tooltip=function(){tooltip.animate({top:"-=10",opacity:0},50,function(){$(this).remove()});target.attr("title",tip)};target.bind("mouseleave",remove_tooltip);tooltip.bind("click",remove_tooltip)})});
//]]>
</script>

Bila ada kendala dan Tooltip tidak tampil maka kalian meski menempelkan Javascript dibawah ini diatas kode </head>.

<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");}
//]]>
</script>

Setelah semua sudah terlaksana, sekarang saatnya kalian lihat blog kalian, pastinya sudah tampil sempurna. Dan saatnya saya ucapkan Alhamdulillah. Saatnya saya istirahat ya teman-teman. Besok sudah kerja masuk pagi. Selamat mengerjakan. Salam Blogger.

Bagikan ke teman-teman kamu

Label Postingan : CSS , Javascript , Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Cara Memasang Tooltip Keren Memperjelas Link Deskripsi . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.