2017. augusztus 23.

Hogyan #1


Sziasztok Unatkozó Utazók!

Én, mint régi blogos szinte végigkövettem a HTML és CSS térhódítását. Azonban sosem gondoltam volna, hogy egyszer majd esetleg csinálhatok valami nagy projektet. De igen, és ez a projekt megkövetel tőlem néhány dolgot. Valamint a saját blogom szépítgetését is szeretem a legprofibb módon megoldani. De vannak olyan problémák, amiket sok utánanézés, értelmezés után tudtam csak megfejteni. Hogy nektek ne kelljen ennyit kutatni, hoztam párat.


… távolítsd el a sütis (cookie) üzenetet?

Habár mostanában minden oldalon kint van ez a szöveg – ugyanis EUs kötelezettség –  azonban legtöbbször alul, vagy legalábbis nem fél oldalt elfoglaló kivitelben. A google nem ezt alkalmazza így blogjaink felső sávját gyakorlatilag nem is látjuk – csak akkor, ha rányomunk az Elfogad gombra.
Mivel engem is zavart – és egy olyan projekt van a kezeim közt, aminél nagyon zavaró – így kutattam a neten. És jelentem, megtaláltam a működő módszert. (Azonban én alul jelezni fogom, hogy milyen cookie-kat használ az oldal!)

A következő kódot:
<script type='text/javascript'> cookieChoices = {};</script>
pontosan a <head> alá kell beszúrni és így megszűnik.
Ez egy JavaScript kód, amiben a cookieChoices az a bizonyos figyelmeztető üzenet, a ={} pedig az, hogy üres – azaz nem jelenik meg. [Ha esetleg van rá igény azt is leírhatom, hogy hogyan lehet formázni.]

… távolítsd el a letöltött sablon copyright-ját?

Letöltöttél egy sablont egy külföldi oldalról – mert neked is megtetszett az új minimalista trend – és azt vetted észre, hogy alul nem a „Powered by Blogger” felirat szerepel, hanem egy link az oldalra, ahonnan letöltötted a sablont? Megpróbáltad eltávolítani és aztán kétségbeestél, hogy az oldalad átirányítódott az eredeti oldalra? Szeretnéd máshol megjelölni a készítőt, de nem tudsz mit tenni? Itt a megoldás!

Keress rá arra a részre, hogy copyright vagy All right reserved és máris a megfelelő helyen vagy. A link után még vannak információk, amik közé/után, de még a ></a> előtt be kell illesztened ezt:
style='visibility:hidden'
Ez egy css kód, amiben a style az a stílust jelöl, azaz, hogy az változtatjuk meg; a visibility a láthatóság megnevezése; a hidden pedig, hogy elrejtett.

… adj hozzá ikonokat?

Én mindig is imádtam azokat a kis ikonokat, amiket az amerikai blogoknál láttam. Hiszen milyen menő már betenni egy szívet vagy szmájlit betenni ide-oda? Persze, a Goggle-t nem kell félteni, a bejegyzéseinkbe már van lehetőségünk emojikat beilleszteni – az oldalsávunk azonban nem ilyen szerencsés.
Én a Font Awesome oldalán található ikonokat használom végül, mert az oldalukon – ami ITT érhető el – lehet szemezgetni, hogy mi is a választék. Ha te is szeretnél ikonokat mindenhova, akkor itt van hogy.

Első lépésként a <head> alá be kell tenni az alábbi linket (ha csak egy adott modulban akarod használni elég magába a widgetbe beilleszteni):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Ez az egész nem más, mint a hivatkozás az ikon adatbázisra. Ha ez megvan már el is érhetőek az ikonok.
<span class="fa fa-heart"></span>
Lia jelezte, hogy én balga a formázottakat osztottam meg (bocsi, én formáztam a saját példámban és azt használtam a többihez is), de talán szeretnétek tudni mi is a nem formázott. Ez pedig a span jelölés, amit átírhattok csak a span helyére írjátok be a betűkódot (b, i, u vagy éppen s). Én dőltté formázom a példáimon.
<i class="fa fa-heart"</i>
A fenti kód eredménye, hogy megjelenik egy szív. A fa jelöli a Font Awesome-t – mindkét esetben –, míg a heart maga a megnevezése az ikonnak.
<i class="fa fa-heart">szív</i>
Ez a kód pedig majdnem ugyanaz mint az előző, csak itt a szív ikon mellé odaírtam, hogy szív.
<a href="https://195.199.149.2/" target="_blank"><i class="fa fa-maxcdn"></i>E-napló</a>
Ez pedig egy példa arra, hogy linket – ami új ablakban nyílik meg a target=”_blank” miatt – hogyan szúrjunk be, hogy az ikonra kattintva. Én mögé írtam, hogy ez például az E-naplóra mutat, tehát szöveget is lehet írni mögé.

Nektek van olyan problémátok, amire még nem jöttetek rá, hogy lehetne megoldani?
Miről szeretnétek még olvasni, miben segíthetek?

6 megjegyzés:

  1. Istenítem az embereket akik értenek az ilyenekhez.:)
    Bekövettelek!:)

    VálaszTörlés
    Válaszok
    1. Köszi! :)
      Ha egyszer ráérez az ember, akkor már nincs megállás! :)

      Törlés
  2. Szia! Köszi a segítséget. Te ezeket honnan tanulod? Lehetne még sok-sol ilyen. :)

    VálaszTörlés
    Válaszok
    1. Szia! :)
      A HTML/CSS-t éveken keresztül autodidakta módon tanultam (van egy internetes oldal, ami segít az alapokban, majd arról is írok, mert angol és sokakat ez zavar), a JavaScript-et pedig a főiskolai jegyzetekből sajátítom el (majd csak a 4. félévben lesz "A webprogramozás alapjai" tárgyam).
      Lesz még ilyen bejegyzés! :)

      Törlés
  3. Szia! A FontAwesome ikonokkal kapcsolatban annyit fűznék hozzá, hogy ha a jelenleg leírt módon formázod, akkor ugyanúgy fogja megjeleníteni, mint a dőlt betűtípust, annak ellenére, hogy ez úgy működik, mint egy link. Ha az i helyett span-t használsz, akkor linkként fogja értelmezni a rendszer. Nyilván külön is lehet formázni az ikonokat. Mindkét módon szép, én az utóbbit részesítem előnyben, és gondoltam, megosztom veled ezt a tapasztalatomat. :)

    VálaszTörlés
    Válaszok
    1. Szia Lia! :)
      Köszi, meg mondom őszintén erre nem is figyeltem - mármint, hogy így osztottam meg. A saját példámból vettem (az utolsó) ki a szükségtelen részeket és én formáztam, de totál elfelejtettem kivenni :D
      Megyek és bepasszintok még egy sort :)

      Köszi, hogy benéztél! :)

      Törlés