06 October 2022

Cara Memasang Tooltip Keren Memperjelas Link Deskripsi

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

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.



Untuk membuat tooltip tersebut, kita membutuhkan pemahaman sedikit tentang utak-atik template yang terdiri dari CSS, HTML dan juga Javascript, itu menurut saya. Mungkin bagi sebagian orang berbeda-beda. Tapi nanti inti dan hasilnya akan sama, yaitu berupa cuplikan keterangan. Meski caranya berbeda tapi hasil akan tetap sama.

Okelah sembari kalian santai, sambil mendengarkan musik boleh lho ya. Tidak perlu spaneng dan serius. Tapi SerSan - Serius Tapi Santai - biar otak kita fresh dan siap untuk mengobrak-abrik kode yang ada di blog kita. Udah siapkah? Ayo kita mulai saja tutorial kita di gelap malam yang terbalut hujan deras ini. Suasana semakin asyik nih.

Siapkah? siap ya. Yuk kita mulai saja.

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.



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.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon