Header Ads

Ge dina länkar en knuff



Håll musen ovanför länkarna här nedan och se vad som händer.
Vill du använda dig av samma effekt på länkar du har i din bloggs sidokolumn?





Fixabloggen
Fixas Forum
Fixa Tipsar

Så här gör du.

Börja med att lägga in följande kod precis ovanför </head> taggen i din bloggs kodmall.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
    var dur = 400; // Duration Of Animation in Milli Seconds
    $(document).ready(function() {
        $('a.linknudge').hover(function() {
            $(this).animate({
                paddingLeft: '25px'
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // end of Jquery Script
</script>

Så här:


 
Sen är det dags att fundera över vart du vill ha den här effekten, i vilka gadgets.

Öppna din bloggs framsida i en ny flik så att du lätt kan se vad dina gadgets heter.
Kryssa sen i rutan som heter "Utöka gränssnittskomponentmallar"
Nu kan du se det mesta av din kodmall.

Tryck Ctrl och F på ditt tangentbord för att få fram en sökruta.
I den här sökrutan fyller du rubriken på den gadget du vill ha rörliga länkar i. Du behöver antagligen inte fylla i hela rubriken om den är lång, bara orden skiljer sig från andra rubriker.

Tryck enter.

Nu får du förhoppningsvis upp en kod som ser ut något ungefär som på bilden under (3 + 4)
Sök dig nedåt tills du hittar <li><a expr:href.....>

Mellan a och expr lägger du in class='linknudge' , se till att det blir ett mellanslag på båda sidor. (linknudge betyder ungefär länkknuff vilket är den effekt vi vill ha)

Spara din mall.



Om du har flera gadgets där du vill ha den här effekten på gör du om samma sak med dessa.

Om du vill göra en lista i ett blogginlägg och få den här effekten skriver du in din länk som vanligt (skriv länknamnet, markera ordet/orden och tryck på länkknappen. Fyll i din länk och tryck OK.)

Sen växlar du till Redigera HTML-läge. Din länk ser då ut så här:
(om du länkar till Fixabloggen alltså)
<a href="http://fixa-din.blogspot.com/">Fixabloggen</a>
Lägg till  class="linknudge" i länken, så här:
<a class="linknudge" href="http://fixa-din.blogspot.com/">Fixabloggen</a>
Spara gärna namnet på klassen i ett anteckningsdokument på datorn eller liknande så du minns vad du skulle skriva även om ett par månader. Eller, kika i din bloggmall...

2 comments:

  1. Wiiiiiiiiiiii...Detta har jag gjort!
    Tack så ♥-ligt,såå coolt!

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------