Blogger da Tooltip kullanımı (Jquery)

tooltip Tooltipler oluşturduğunuz bağlantılar veya görsellerinize kısa bilgiler ekleyebilmenizi sağlayan basit uygulamalardır.

 

Ayrıca şuan tanıtacağım uygulama gibi bazı uygulamalar da görsellerinize kısa açıklamalar veya resmin büyütülmüş hallerini ekleyebiliyorsunuz.

 

Uygulamayı test etmek için buraya(İmleci yazıda bulunan resim ve linklere üzerine götürerek uygulamayı test edebilirsiniz ) kendi blog’uğunuza eklemek içinde aşağıdaki adımlara bakmanız yeterli.

Jquery Tooltip’i kendi blog’uğunuza ekleyin.

 

     2010-06-30_013807

 

Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle ulaşıyorum. burada klavyemin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan formda </head>  ifadesini aratın.

 

</head> ifadesini bulduktan sonra hemen üstüne gelecek şekilde aşağıdaki  kodları ekleyin.

 

 

Toltipin   Kodları

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'/>

<style>
.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.container {width: 960px; margin: 0 auto; overflow: hidden;}
</style>

<script type="text/javascript">
$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip         
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip
        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);
        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        tip.css({  top: mousey, left: mousex });
    });
});
</script>

 

 

Javascipt kodları içerisinde bulunan jquerynin ana kodunu(

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'/>

) daha önce eklediyseniz tekrar eklemenize gerek yok.

 

Kodları ekledikten sonra artık bğlntılrınıza çıklamalar ekleyebilirsiniz.

 

HTML Linkler

Diyelim ki yazınıza bir bğlntı ekledikten sonra  imlec üstüne geldiğinde  resimli bir çıklm eklemek istiyorsunuz .

 

Örnek

<a class="tip_trigger" href="Blogger'>Blogger'>Blogger'>Blogger'>Blogger'>Blogger'>Blogger'>http://www.bloggermodifiye.com/">Blogger Modifiye<span class="tip" style="width: 400px;"><img alt="" src="http://1.bp.blogspot.com/_OAaYyqbZjJY/TUXbK2_xeoI/AAAAAAAAD7E/a-50nM1S7kE/s1600/lblogger-modifiye-logo.jpg" style="float: left; margin-right: 20px;" />Bu bölüme açıklamanız gelecek</span></a>

 

bu şekilde oluşturduğunuz linklerin üzerine imleçle gelindiğinde resimli açıklama açılacaktırk.buradaki  (width=400px;) width pencerenin genişliği belirleyebilmenizi sağlayan koddur. eklediğiniz resmin boyutlarına göre buradaki değerlerği yükseltebilir veya azaltabilirsiniz.

 

bloggera-müzik-yollamak 

 

Yukarıdaki işlemi video eklerkende web sayfaları içinde kullanabilirsiniz.

 

Uygulmayı özelleştirin.

 

 CSS Kodlarını değiştirin

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

 

pencerenin arka palanını farklı bir renk yapmak için değiştirmeniz gereken kod

background:#1d1d1d; yazı rengi içinde color: #fff; değiştirmeniz gerekiyor.

 

 

 

 

Kaynak:Sohtanaka

Paylaş !

1 yorum:

  1. kodunuzda hata var hatalı satır

    if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
    mousex = e.pageX - tipWidth - 20;
    } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport

    Bu ikisi sütunlar ise < 20 olan sütunlar bilginize...

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz