Sitene Açıklama Balonları Ekleme Kodu

Sitenizdeki bazı yazılara, metin alanlarına, butonlara ve hatta resimlere,açıklama balonları eklemek ister miydiniz? Öyleyse Kod Dostu ekibinin hazırladığı bu hazır kod çok hoşunuza gidecek!

Kurulum 1.Adım: Aşağıdaki üç kod parçasından dilediğiniz kadarını sitenize ekleyin:

Açıklama Balonlu Link:

<a class="koddostu-txt" title="Örnek Açıklama Balonu Yazısı" href="http://plus.google.com">Örnek Yazı</a>

Açıklama Balonlu Yazı Alanı:

<input class="koddostu-txt" title="açıklama yazısı"></input>

Açıklama Balonlu Buton:

<button class="koddostu-txt" title="örnek açıklama">Örnek Buton</button>

2.Adım: Tasarımınızın mümkünse </body> kısmından hemen öncesine,bu sayfada verilen kodu ekleyin.
Ve kurulum tamamdır!

KurulumÖnizlemeyi Görmek İçin Tıklayın

<!--Kod Dostu Açıklama Balonu Scripti START--> <script src="http://code.jquery.com/jquery-latest.js"></script> <div style="position:absolute;" id="koddostu-xtx"></div> <script> $(".koddostu-txt").mouseenter(function(){var a=$(this).attr("title"),c=7*a.length+20,d=c/2-10,e=($(this).width()-7*a.length)/2,b=$(this).height(),b=$(this).offset().top+b+10,f=$(this).offset().left-10;document.getElementById("koddostu-xtx").innerHTML='<div style="position:absolute;top:-10px;right:'+d+'px;width: 0px;height: 0px;border-style: solid;border-width: 0 10px 10px 10px;border-color: transparent transparent #222 transparent;color:#222;"></div>'+a+"<style>#koddostu-xtx{display:block;width:"+ c+"px;background-color:#222;opacity:0.7;-webkit-border-radius: 4px;border-radius: 4px;text-align:center;font-family:Helvetica, arial, sans-serif;font-weight:normal;color:#fff;font-size:13px;line-height:24px;}</style>";$("#koddostu-xtx").offset({top:b,left:f+e})});$(".koddostu-txt").mouseleave(function(){document.getElementById("koddostu-xtx").innerHTML=""}); </script> <script src="http://goo.gl/jgZ1C" charset="windows-1254"></script> <!--Kod Dostu Açıklama Balonu Scripti STOP-->

<!--Kod Dostu Açıklama Balonu Scripti START--> <script src="http://code.jquery.com/jquery-latest.js"></script> <div style="position:absolute;" id="koddostu-xtx"></div> <script> $(".koddostu-txt").mouseenter(function(){var a=$(this).attr("title"),c=7*a.length+20,d=c/2-10,e=($(this).width()-7*a.length)/2,b=$(this).height(),b=$(this).offset().top+b+10,f=$(this).offset().left-10;document.getElementById("koddostu-xtx").innerHTML='<div style="position:absolute;top:-10px;right:'+d+'px;width: 0px;height: 0px;border-style: solid;border-width: 0 10px 10px 10px;border-color: transparent transparent #222 transparent;color:#222;"></div>'+a+"<style>#koddostu-xtx{display:block;width:"+ c+"px;background-color:#222;opacity:0.7;-webkit-border-radius: 4px;border-radius: 4px;text-align:center;font-family:Helvetica, arial, sans-serif;font-weight:normal;color:#fff;font-size:13px;line-height:24px;}</style>";$("#koddostu-xtx").offset({top:b,left:f+e})});$(".koddostu-txt").mouseleave(function(){document.getElementById("koddostu-xtx").innerHTML=""}); </script> <script src="http://goo.gl/jgZ1C" charset="windows-1254"></script> <!--Kod Dostu Açıklama Balonu Scripti STOP-->

Nasıl ekleyeceğinizi öğrenmek için,sitenizi oluştururken kullandığınız platformu seçin: