Ügyfélvélemények "sminkelése"

A napokban értékesítő weblapot készítettem és szerettem volna, ha az ügyfelek véleménye kiemelkedjen a sales szövegből. Ennek egyik lehetséges megoldása, hogy felhasználjuk a szerkesztés során az idézet blockquote HTML tag-et. Nézzük, hogy ez hogyan is néz ki a gyakorlatban?

Saját weblapom mintája:

Ide kell az idézett szöveget elhelyezni.

Ha az oldal forrását megnézzük, akkor ez így néz ki: <blockquote>Ide kell az idézett szöveget elhelyezni.</blockquote>

Weblapunkhoz általában tartozik egy style.css stílusfájl, ahol ezt a tag-et definiáljuk. Ez weboldalanként, sablononként más és más lehet. (Házi feladat: próbáld ki, hogy a Te weblapodon milyen eredményt kapsz a HTML kódban megadott <blockquote></blockquote> tag-et.)

Az én mintám már egy szép változat, aminek a kódja ez:

A quote.png a macskakörmöt jelenti az idézet bal felső sarkában, amit külön fel kell tölteni a webszerverre. Ennek a mintának a kipróbálását csak haladóknak ajánlom.

2. minta:

Ide kell az idézett szöveget elhelyezni.

 

Ha az oldal HTML forrását megnézzük, akkor ez így néz ki:

<blockquote style="display:block;background: #fff;padding: 15px 20px 15px 45px;margin: 0 0 20px;position: relative;font-family:Georgia, serif;font-size: 16px;line-height: 1.2;color: #666;text-align: justify;border-left: 15px solid #4F1D11;border-right: 2px solid #c76c0c;-moz-box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;box-shadow: 2px 2px 15px #ccc;width:450px;">Ide kell az idézett szöveget elhelyezni.</blockquote>

Tehát, nem muszáj a style css fájlban kotorászni, elegendő, ha szövegedben megadod a fenti kódot és megjelenik a sminkelt/átsminkelt vélemény.

3. minta:

Idézet minta

Ennek a kódja:

<blockquote style="border-left:5px solid #ddd;margin:15px 30px 0 10px;padding-left:20px;">Ide kell az idézett szöveget elhelyezni.</blockquote>

4. minta:

idézet minta

Ennek a kódja:

<blockquote style="margin: 1em 3em;padding: .5em;background-color: #f6ebc1;font-family:Georgia, serif;font-size: 16px;border-left: 15px solid #4F1D11;border-right: 2px solid #c76c0c;-moz-box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;box-shadow: 2px 2px 15px #ccc;width:450px;">Ide kell az idézett szöveget elhelyezni.</blockquote>

További hasznos oldalak, nem csak haladóknak:

http://css-tricks.com/examples/Blockquotes

http://www.cssnewbie.com/six-ways-style-blockquotes/#.VFpSV4e9Ncl

http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/

MIELŐTT BÁRMIT LETÖLTESZ, TELEPÍTESZ, GYŐZŐDJ MEG A PROGRAM "TISZTASÁGÁRÓL"! HASZNÁLJ VÍRUSELLENŐRZŐT, TŰZFALAT! KÉSZÍTS BIZTONSÁGI MENTÉST TELEPÍTÉS ELŐTT!!!

A programok, amelyeket ajánlok többnyire kipróbáltak, de vannak olyanok is, melyek nem, hiszen egy nap nekem is 24 órából áll, nem jut mindenre idő..

Mindenki felelősséggel töltse le, illetve telepítse az ajánlott programokat! Mielőtt bármit telepítesz, készíts biztonsági mentést! Az esetleges problémákért felelősséget nem vállalok!

 

Szerző: Tóth Judit

2006 óta foglalkozom online marketing eszközökkel és Drupal weblapok készítésével. Dolgoztam multis és kisvállalkozói környezetben egyaránt, ahol a feladatom az online kommunikáció és online marketing eszközök menedzselése volt. 2010 óta saját lábra álltam és az évek során felhalmozott tudást saját ügyfeleim szolgálatába állítottam. Jelenleg a garfika irányába "mozdultam el". Ennek az egyik oka az, hogy meggyőződésem, hogy csak úgy lehetek jó szakember, ha minél több dolgot tanulok, több területen is kipróbálom magam, a máso ok, hogy a grafika, a grafikai tervezés, rajzolás mindig is érdekelt. :-)

Egy nagy felfedezőnek tartom magam, mert minden nap keresem az újdonságokat, amit meg tudok osztani az ügyfeleimmel és az olvasóimmal egyaránt.

Ilyen weblapok készítésében tudok: Online Tanfolyami Keretrendszer, Értékesítési Szakmai Blogoldal, Kapuoldal, Cégbemutató Weboldal.

Kapcsolatfelvétel: toth.judit@weblaptitkok.hu

Tetszett a cikk? Kövess a Facebookon is, és nem fogsz lemaradni a fontos bejegyzésekről!

 

Facebook Hozzászólás