Készítsen hihetetlen egyedi Tumblr blogot

A Tumblr népszerűsége évről évre exponenciálisan nőtt - ennek oka az, hogy könnyen kezelhető, rugalmas és helyesen kezelve nagyon hatékony platform. Számos webdesigner és -fejlesztő továbbra is úgy tekint a Tumblr-re, mint egy közösségi hálózatra vagy mikroblog-weboldalra - amely előre elkészített sablonokat használ a cicák és mémek aranyos képeinek megosztásához. De sokkal több lehet. Ma 90 millió blognak ad otthont, amelyek naponta több mint 89 millió új bejegyzést generálnak. Ilyen számokkal nehéz figyelmen kívül hagyni a lehetőségeket (lásd a legjobb Tumblr blogok hogy mit lehet elérni).

A dinamikus adatok beillesztésére a Tumblr változóit felhasználva, a HTML feltételes megjelenítéséhez pedig a „blokkokat” használva valóban friss irányba terelhetjük blogunk funkcionalitását.

A Tumblr hét kulcsfontosságú bejegyzésre épül: szöveg, fotók, linkek, idézetek, csevegés, hang és videó. A CSS használatával testre szabhatjuk témáinkat e típusok köré, hogy bejegyzéseink szépek legyenek a saját blogunkon, követőink irányítópultjain és más felhasználók blogjain, amikor „újblogolják” őket.



hogyan lehet elrejteni az összes képet a facebook-on

Elkezdeni

A Tumblr Irányítópulton kattintson a Megjelenés testreszabása elemre a jobb oldali oszlopban. Ezután kattintson a HTML szerkesztése gombra a bal oldali téma bélyegképe alatt. Itt fog megírni minden HTML kódot.

Sok Tumblr témakör-fejlesztő a HTML-szerkesztőben beépített CSS-t gyakorol. Ez nem felel meg nekem. A CSS megírásához fel és le kell görgetni, nehézkes és unalmas. Ráadásul a kódunk zűrzavarossá válhat, ami a jövőben megnehezíti a szerkesztést.

A bejegyzések testreszabásával egyedi elrendezéseket hozhat létre, például a Quirksville Tumblr-en. Két oszloposzlop van bedugva a takaros kis részen

A bejegyzések testreszabásával egyedi elrendezéseket hozhat létre, például a Quirksville Tumblr-en. Két oszloposzlop van behúzva a takaros kis 'kártyákba'

A gyakorlatban azt javaslom, hogy hívjon egy stíluslapot, amelyet külső szerveren tárolnak, ugyanúgy, mint egy szokásos HTML oldalon - bár meg kell említenem, hogy az inline CSS használatának egyik előnye az lenne, hogy a Tumblr a stílusokat a tartalomszolgáltatása segítségével szolgálja ki hálózat (CDN). Az egyszerűség kedvéért az inline CSS-t fogom használni ehhez az oktatóanyaghoz.

Fotóbejegyzések típusainak megjelenítése

Menj a példa oldal . Itt bemutatjuk a Tumblr hét bejegyzési típusának egyikét. Ez a fotóbejegyzés megjelenít egy képet, egy feliratot és a bejegyzés címkéit.

Először a Tumblr 'blokkjait' kell használnunk, hogy HTML-t jelenítsünk meg egy adathalmazra - ebben az esetben a Fotóposztunkra. Ha blokkjainkat HTML azonosítókba és osztályokba csomagoljuk, megcélozhatjuk a blokkok által kibocsátott tartalom minden egyes részét:

{block:Posts} {block:Photo} {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:HasTags}
    {block:Tags}
  • {Tag}
  • {/block:Tags}
{/block:HasTags} {/block:Posts}

A fotóbejegyzés típusának stílusa

CSK-t alkalmazva a jelölőnkre, tetszés szerint stílusozhatjuk bejegyzéseinket. Ebben az esetben hozzáadunk egy szegélyt és egy kis árnyékot.

#posts .photo img { border:10px solid #fff; -moz-box-shadow:0px 0px 20px 0px #aaa; -webkit-box-shadow:0px 0px 20px 0px #aaa; box-shadow:0px 0px 20px 0px #aaa; }

Kis erőfeszítéssel most megismerhetjük a Tumblr bejegyzéstípusok kialakításának lehetőségeit.

Címkézés és navigáció

A címkékről szól a Tumblr. Az előző példában elmagyaráztuk, hogyan jeleníthet meg címkéket a bejegyzéseiben a HasTags blokk segítségével. A címkék nagyszerű módot kínálnak a bejegyzések rendezésére, valamint kereshetővé tételére a Tumblr-en és a keresőmotorokban. Ezeket felhasználhatjuk arra is, hogy navigációt hozzunk létre felhasználóink ​​számára az adott címkén belüli bejegyzések megtekintésére.

hogyan lehet szerkeszteni a gifeket a photoshop cs6-ban

Ha címkéket ad hozzá egy bejegyzéshez, a címkézett oldal URL-je automatikusan létrejön. Például amikor létrehoztam az első bejegyzésünket, a „cica” címkével láttam el. Ha a http: // OUR-TUMBLR-URL / tagged / cica oldalra mennénk, akkor csak a 'cica' címkével ellátott bejegyzéseket jelenítenénk meg.

Visual Sundae

A Visual Sundae webhelye egyedi navigációs dizájnnal rendelkezik, a Tumblr beépített funkcionalitását felhasználva. Az oldalak címkék szerint vannak rendezve, és a webhely legördülő menüjéből érhetők el

Párféleképpen állíthat be címkézett navigációt. Inkább manuálisan, mert ez jobban szabályozza a linkeket és a stílusokat. Itt hozzáadunk egy alap navigációs listát, összekapcsolva a két címkézett oldalunkat. Amikor a felhasználó rákattint a navigáció egyik elemére, akkor csak azoknak a bejegyzéseknek a hírcsatornáját fogja látni, amelyek a megfelelő címkével vannak ellátva.

  • Kitty
  • Dog

Stílusok a címkék alapján

Az előző példák, bár egyszerűek, valóban javíthatják a Tumblr-terv elrendezését. Az egyedi stílusok a bejegyzésekhez és a címkézett oldalak navigálásához javíthatják a felhasználói élményt. De mi lenne, ha egy kicsit jobban szeretnénk szokásokat szerezni?

Néha a különféle típusú bejegyzéseket diszkrét módon kell megtervezni. A címkéink használatával (ne feledje, hogy ezeket automatikusan hozzák létre, amikor hozzáadjuk a bejegyzésekhez) osztályokat generálhatunk a hozzáadott egyes címkék alapján. (Például lásd: http://nettutorialtags.tumblr.com/tagged/mountains.)

Szenvedélygödör

A Passion Pit webhelye egyedi stílusokat jelenít meg az egyes bejegyzési típusokhoz, valamint a belső oldalak speciális navigációját

Ezt úgy végezzük, hogy a HTML-ben a TagsAsClasses változót használjuk. Ez a változó a bejegyzés címkéinek HTML osztály-attribútum-barát listája. Ezzel a változóval címkéinket osztálynévként kezelhetjük, és beinjektálhatjuk a HTML-be.

{block:Posts} {block:Photo} {block:Caption} {Caption} {/block:Caption} {/block:Photo} {block:HasTags}
    {block:Tags}
  • {Tag}
  • {/block:Tags}
{/block:HasTags} {/block:Posts}

Ebben a példában hozzáadtuk a TagsAsClasses változót a Photo post típusunkhoz, és a „hegyekkel” címkézett összes bejegyzést kissé eltérően stílusoztuk. A keret, a felirat méretének és színének megváltoztatása. Ez a példa nagyon finom, de kis képzelőerővel végtelenül testreszabhatjuk a különböző bejegyzéseket csak a címkéjük alapján.

legjobb laptop 500 alatti fotószerkesztéshez
#posts .mountains img { border:10px solid #d92565; } #posts .mountains .caption { font-size:1.5em; color:#d92565; }

Az állandó linkek olyan URL-ek, amelyek egy adott blogbejegyzésre mutatnak. A Tumblr-ben ez is az az oldal, amely megjeleníti az összes újbóli bejegyzést és tetszést. A bejegyzéseit ehhez az egyetlen belépési oldalhoz nagyon egyszerű összekapcsolni. A 'post block' -on belül kapcsolja össze a képét, címét, feliratát vagy akár egy egyéni gombot az alábbiak használatával. Itt összekapcsoljuk a feltöltött képet:

Tehát másképp szeretné stilizálni az állandó link oldalát? Nincs mit. Ha hozzáadja a Permalink blokkot a törzscímkéhez, egyedi azonosítóval együtt, akkor az azonosítót dinamikusan csak akkor injektálja, amikor a felhasználó felkeresi a permalink oldalt. ( Lásd egy példa oldalt .) Mostantól másképp is stílusozhatja a állandó linkeket tartalmazó oldalt, megcélozva a permalink azonosítóját, CSS segítségével.

A The Expendables film népszerűsítésére szolgáló Tumblr webhely nagyszerű példa a Tumblr minden aspektusának testreszabására, beleértve a navigációt, a címkéket és a állandó linkeket

A The Expendables film népszerűsítésére szolgáló Tumblr webhely nagyszerű példa a Tumblr minden aspektusának testreszabására, beleértve a navigációt, a címkéket és a állandó linkeket

Különböző tartalmak különböző oldalakhoz

Az, hogy a Tumblr-ben fejlődünk, nem jelenti azt, hogy minden posztoldalnak és állandó lapnak azonos tartalommal kell rendelkeznie. Megcélozhatunk egyes oldalakat, és csak a kívánt tartalmat jeleníthetjük meg. Például mi lenne, ha a címsor másolatát akarnánk felvenni állandó oldalainkra? Ezt megtehetjük a Tumblr PermalinkPage blokkjával. Ha a HTML-jünket ebbe a blokkba csomagolja, akkor az csak akkor jelenik meg, ha a felhasználó felkeresi a állandó linket:

vályogpremier elemek vs vályogpremiere pro
{block:PermalinkPage}

Your Heading Here

{/block:PermalinkPage}

Különféle tartalmakat csak a fő híroldalakon jeleníthetünk meg:

{block:IndexPage}

This will only display on the main feed pages.

{/block:IndexPage}

Következtetés

A Tumblr testreszabásának lehetőségei végtelenek. A felhasználói élmény növelése és a Tumblr társadalmi szempontjainak hasznosítása nagyon hatékony eszköz lehet a projektjeihez.

Szavak: John Surdakowski

Ez a cikk eredetileg itt jelent meg net magazin 242. szám

Tetszett ez? Olvassa el ezeket!