Redirect Homepage Images To Post | Code Your Blog

streda 8. júna 2016


Pekné popoludnie!
Hoci ma čakajú ešte jedny prijímacie skúšky, užívam si voľno ako sa len dá (ale presne o týždeň už budem mať definitívny pokoj).
Dnes vám ukážem ďalší jednoduchý a rýchly kódovací trik - keďže tu už dlho nebol a viacerí z vás si tieto články obľúbili.
Good afternoon!
Even though there're still one more admission tests waiting for me, I'm enjoying free time as much as possible (but within a week it'll be over).
Today I'll show you another simple and quick coding trick, because they haven't been here for a long time and many of you like them.

Úprimne, ja sama som tento kód/trik nikdy cielene nevyhľadávala, keďže som ani netušila, že sa čosi také dá spraviť, ale teraz som rada, že som ho našla.

Ide o kód, ktorý vás po kliknutí na obrázok na homepage presmeruje rovno na článok.

V originálnej šablóne je to nastavené tak, že po kliknutí na obrázok na domovskej stránke sa otvorí stránka len s obrázkom, ale v pôvodnej veľkosti.
Ale s týmto kódom, keď kliknete na homepage na úvodný obrázok, tak vás to presmeruje na článok, a až keď kliknete na obrázok v rámci článku, vtedy sa vám otvorí v pôvodnej veľkosti.
Honestly, I have never specificly tried to find this code/trick, because I didn't know something like this existed, but now I'm glad I found it.

This is a code that after clicking on an image on homepage will redirect you to an article.

In the original template it's set up that after clicking on the image on homepage a new tab is opened but only with a picture in full resolution.
But with this code, when you click on homepage on the header picture, it will redirect you to the article, and after that when you click on the image within the post, then it'll show in full resolution.


01. Prihláste sa na svoj blog, v ľavom menu zvoľte Šablóna a kliknite na Upraviť kód HTML.
02. Kliknite dovnútra okna s kódmi, stlačte CTRL + F a do vyhľadávača zadajte:
01. Log into your blog, in menu on the left side find "Template" and click on "Edit HTML".
02. Click inside the box with all codes, press 'CTRL + F' and into searchbar add:

</b:skin>

03. Pod tento kód vložte:03. Below this code paste:

<script src='http://code.jquery.com/jquery-latest.min.js' 
type='text/javascript'/> 
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
    function linkListImagesToPosts() {
        $(".blog-posts .post-outer").each(function(index) {
                 // get the post url from the title anchor
                 var newhref = $(this).find("h3.post-title a").attr("href");
               
                 // find the image anchor and clone it
                 var a = $(this).find("img").first().parent("a");
                 var aclone = a.clone();      
               
                 // change the link in the image anchor
                 aclone.attr("href", newhref);
               
                 // replace the old anchor with the new one
                 a.replaceWith(aclone);
         });
    }
   $(document).ready(function() {              
         linkListImagesToPosts();
    });
 //]]>
 </script>
 </b:if>

04. Uložte šablónu a hotovo!

Poznámka:
Ak vám presmerovanie po uložení stále nefunguje, skúste odstrániť červený kód.

Ak vám niečo i tak nebude fungovať, napíšte mi.
Kontakt nájdete v hornom i bočnom menu.
04. Save the template and done!

Note:
If your redirecting after saving is still not working, try to delete red code.

If something won't be working, please let me know.
Contact is in top and sidebar menu.

with all love,

9 komentárov

  1. super tip :) ja si občas hľadám tieto kódiky na internete no nie vždy nájdem to, čo hľadám :) ináč máš veľmi pekný blog aj fotky :)

    OdpovedaťOdstrániť
    Odpovede
    1. Preto som si povedala, že z času na čas budem takéto návody pridávať - možno niekomu uľahčím hľadanie :D
      A ďakujem ❤

      Odstrániť
  2. Prajem veľa šťastia na prijímačkách :) nech sa dostaneš tam kam chceš :D Je to super pocit držať v ruke papier o prijatí :) Čo sa týka kódov, aj ja si ich občas hľadám na internete a zatiaľ som našla :D
    Caroline

    OdpovedaťOdstrániť
  3. Super návod! :) Celkem užitečný, ještě zvážím, zda si ho dám i já na blog, ale jinak super. :) Jinak hodně štěstí s testy. určitě to zvládneš. :)
    DENYII

    OdpovedaťOdstrániť
    Odpovede
    1. Mne sa už mnohokrát stalo, že som klikla na úvodný obrázok a musela sa potom zbytočne vracať späť, takže myslím, že je to celkom dobrý trik :D
      A ďakujem ❤

      Odstrániť
  4. Ahoj.. už Bee :) konečne som Ťa našla. Hallelujah! Skladám pred tebou klobúk, si neuveriteľná. !

    OdpovedaťOdstrániť
  5. Jej, tak toto je prvý blog, ktorý akokoľvek radí s html a javascriptom, ktorý som tuto na blogspote našla. Len tak ďalej. Študujem informatiku a tak je pre mňa jednoduché, čosi také naprogramovať.

    Len tak ďalej :)

    PS: Inak ten ,,červený kód" iba načíta jquerry knižnicu, ktorá sa používa veľmi často pri práci s javascriptom a html a zadeklaruje sa na začiatok na znamenie, že za ňou nasleduje javascript. Na konci máš "/script" (" rozumej ako < alebo >, nechce mi to so scriptom vlozit komentar)ktorý znamená, že javascript tam končí a nasleduje napr. html kód alebo php. Nemyslím si, že by bol problém v tej ,,červenej" časti. Jedine v prípade, že máš už predtým zadeklarovaný nejaký javascript a tento vladáš do neho, vtedy to je treba odstrániť. Prípadne pred celý tento kód dať "/script" pre ukončenie toho predošlého scriptu.

    OdpovedaťOdstrániť

Latest Instagrams

© A STYLISH BEE. Design by FCD.