Blogger'a ToolTip Eklemek

Blogger'dan blogunuz var ve Tooltip kullanmak istiyorsunuz. O halde bu ilk yazımız tam size göre. Şimdi Blogger'a basit bir şekilde Tooltip ekleyeceğiz. Umarız kendinize göre, blogunuzun yapısına göre düzenleyebilir ve kullanabilirsiniz. Şimdi sırayla yapmanız gerekenleri verelim;

Css Kodlarını Eklemek

1. Blogger yönetim panelinize girin.
2. Şablon sekmesinden blog şablonunuzun yedeğini indirin.
3. HTML düzenleme kısmına geçin.
4. </head> kodunu ctrl+f yardımıyla bulun ve üstüne aşağıdaki kodları ekleyin...

<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:100;
    -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
    $(&quot;.tip_trigger&quot;).hover(function(){
        tip = $(this).find(&#39;.tip&#39;);
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip        
    }).mousemove(function(e) {
        var mousex = e.pageX + 0; //Get X coodrinates
        var mousey = e.pageY + 0; //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 &gt; 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY &gt; 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        tip.css({  top: mousey, left: mousex });
    });
});
</script>

Bu aşamadan sonra şablonunuzu kaydedin. Bundan sonra sırada HTML kısmı mevcut. Bundan sonra yazı içinde Tooltip özelliğini ekleyeceğimiz yerlere şu açağıdaki kodları uygulayacağız. Resimli ya da resimsiz şekli mevcut.

Sadece Yazı İçin Tooltip

<a class="tip_trigger">Yazıda Görünen Kısım<span class="tip" style="width: 450px;">Fare imleciyle görünen kısım. Fare üstüne gelmeden görünmez ve açıklamalarınız burda yer alır.</span></a>

Yazı Ve Resim İçin Tooltip

<a class="tip_trigger">Yazıda Görünen Kısım<span class="tip" style="width: 450px;"><img alt="Hidden IMG" src="http://1.bp.blogspot.com/-ZYC5rtRVz1A/UUHYeFj5JuI/AAAAAAAAHOk/O7R2F84nvfo/s1600/onlineblog.png" style="float: left; margin-right: 20px;" />Fare imleciyle görünen kısım. Fare üstüne gelmeden görünmez ve açıklamalarınız burda yer alır.</span></a>

Bizim uyguladığımız kodları incelemek için Demo'ya göz atın.

Hiçbir açıklama yazmayarak sadece resim olarakta kullanabilirsiniz. Sormak istediğiniz şeyleri yorum yazarak iletebilirsiniz.