O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Podziel wpis na wstęp i treść - wygląd linku więcej »

Dzieląc notkę na wstęp i treść decydujesz się na wyświetlanie na stronie głównej jedynie fragmentu treści wpisu. Jest to bardzo wygodne rozwiązanie, szczególnie w odniesieniu do archiwalnych wpisów. Bardzo lubię takie rozwiązanie jeżeli wstęp napisany jest z sensem i skrótowo wyjaśnia co będzie w zawartości. Zamierzam zwiększyć liczbę wpisów na stronie głównej do maksymalnej (przez pięć lat było ich zawsze osiem) ale nie potrafię pisać skrótowo więc dwadzieścia pięć notek zajmie za wiele miejsca.

więcej link

Na razie nowe notki dodaję na stronę główną w całości a dopiero po pewnym czasie zmieniam na podzielone. Moje wstępy są w dalszym ciągu nieracjonalnie rozbudowane ale może kiedyś uda mi się zminimalizować je do rozmiarów jakie prezentują zajawki u Cebrity. Już kiedyś pisałam o dzieleniu wpisu na wstęp i treść, podałam subiektywny zestaw wad i zalet a także wyjaśniłam jak w łatwy sposób umieszczać we wstępie zdjęcia i linki.

Tematem dzisiejszej notki jest sam sposób oznaczenia i wyróżnienia wpisów, które są podzielone od tych, które nie są.

Jeżeli notka jest podzielona, wówczas na głównej stronie bloga pokazuje się tylko wstęp z linkiem do strony z pełną treścią notki.

Standardowo link wygląda mniej więcej tak: Więcej »

W zasadzie można zmienić niemal wszystko co z nim związane: treść, wygląd, miejsce wyświetlania... Wystarczy wiedzieć gdzie i czego szukać i jak to zmieniać.

 

Treść linku do dalszej części notki

To wcale nie musi być „Więcej »” (choć przyznać się muszę, że podoba mi się to słowo - tak zatytułowałam mojego prywatnego bloga)

Możliwości, sugestie i propozycje:

  • czytaj dalej »
  • Czytaj więcej »
  • Czytaj całość »
  • ZOBACZ WIĘCEJ
  • Przeczytaj resztę tego wpisu »
  • tu kliknij aby przeczytać resztę
  • to jeszcze nie koniec!!!
  • dalej…
  • więcej…
  • ciąg dalszy »

Link więcej » (Ilustrowany przewodnik po bloksie)

Ale jak to zmienić? Ta część akurat nie ma nic wspólnego z szablonem. Oczywiście można zastąpić tekst jakąś ilustracja i w tym pomoże szablon ale samą treść linka zmieniamy w innym miejscu. Mapa dla tych, którzy nie wiedzą gdzie szukać:

USTAWIENIA -> WPISY -> Treść linka dzielącego wstęp i treść:

Treść linka dzielącego wstęp i treść:  Jeśli pozostawisz powyższe pole niewypełnione, link do treści wpisu będzie brzmiał

Nie jestem pewna o co chodzi z tym wcześniejszym pytaniem - Podział wpisu na Wstęp / Treść: Tak/Nie. Nie robi to większej różnicy jeżeli chodzi o dodawanie wstępu (może w dziedzinie nie-dodawania jakąś robi). Wcale więc nie musisz zaznaczać tu Tak aby dodać sobie wstęp i podzielić notkę. 

Natomiast okienko niżej jest już ciekawsze. Tutaj właśnie wpisujesz sobie treść linku podziału. Jeżeli nic nie wpiszesz to będzie to Więcej ». Wpisać możesz natomiast co tylko chcesz.

Wygląd linku do dalszej części notki

Możliwości jest wiele. W miarę upływu czasu link więcej staje się coraz mniej niezbędny. Jeżeli wstęp ma ze dwa zdania to wyraźnie widoczne jest, że dalsza część notki znajduje się na osobnej stronie. W większości przypadków tytuł notki jest linkiem i chcąc przejść do jej treści w tytuł właśnie klikamy więc szczególne wyróżnienie linku więcej nie jest niezbędne.

Sam link jest natomiast o tyle konieczny, że gdy wstęp ma więcej niż dwa zdania przestaje być takie oczywiste czy to tylko wstęp czy cała treść i dlatego istotne jest dodanie informacji o dalszej treści, choć niekoniecznie bardzo wyróżnionej.

Sposobów na wyróżnienie jest wiele, począwszy od bardzo prostych jak pogrubienie tekstu a skończywszy na bardziej skomplikowanych jak naśladowanie wyglądu przycisków systemowych czy różne graficzne ozdobniki. Jeżeli chcesz zabrać się za edytowanie wyglądu linku więcej » odszukaj w arkuszu selektor nazywający się: .IPTwiecej. Pamiętaj, że klasa przypisana jest elementowi blokowemu (div) więc jeżeli chcesz zmienić kolor to musisz użyć kombinatora wskazującego na link: .IPTwiecej a.

Czerwony kolor i podkreślenie

Wygląd jest całkiem prosty. Pamiętaj aby kod wstawić zamiast tego, który jest w arkuszu.Samo dodanie go na końcu szablonu może nie zadziałać w pełni tak jak oczekiwałbyś. Jeżeli twoje liki są pogrubione albo podkreślone to możliwe, że trzeba będzie zneutralizować te cechy: text-decoration:none; font-weight:normal; Jeżeli to są cechy przypisane linkom to neutralizować je też trzeba przy selektorach linków.

.IPTwiecej {
 text-align:left;
 text-transform:capitalize;
 padding-top:2em;
}
.IPTwiecej a {
 color:#ea0000;
 border-bottom:1px solid #ea0000;
}
.IPTwiecej a:hover {
 border-bottom:1px solid #000;
}

Niebieski przycisk

W przypadku przycisku należy pamiętać, że sam element więcej jest blokowy a więc zajmuje całą szerokość a link w nim umieszczony jest zaś elementem liniowym czyli jest tak szeroki jak jego zawartość ale nie bardzo można zwiększyć jego wysokość. Dlatego przede wszystkim warto skorzystać z właściwości display:inline-block;, która łączy w sobie blokowy i śródliniowy sposób wyświetlania.

.IPTwiecej {
 margin-top:2em;
 text-align:left;
}
.IPTwiecej a {
 display:inline-block;
 padding:0.35em 0.65em;
 background:#41b7d8;
 border-radius:5px;
 border:1px solid #3aa4c2;
 color:#fff;
}

Strzałka, kursywa i podkreślenie

Strzałkę można dodać na dwa sposoby. Prostszy to wpisać ją w okienku, polecam bo jeżeli strzałka jest na początku to ostre nawiasy udające strzałkę na końcu są niepotrzebne.

→ Kontynuuj czytanie...

Drugi sposób to skorzystanie z możliwości dodanie treści poprzesz arkusz. Nie jest to prawdziwa treść, ona tylko tak wygląda.

.IPTwiecej:before {
 content:'\002192 ';
 color:#000;
}


Reszta opisu jest już niezależna od treści. Dodaj strzałkę w ten czy inny sposób a wygląd opisz w arkuszu stylów. Link jest czarny a po najechaniu zmienia kolor na pomarańczowy.

.IPTwiecej {
 text-align:left;
 margin:0.7em 0;
 padding:1.4em 0;
 border-bottom:1px solid #000;
}
.IPTwiecej a {
 text-decoration:underline;
 font-style:italic;
 color:#000;
}
.IPTwiecej a:hover {
 color:#d63c00;
}

Magentowy, pogrubiony tekst i kropkowane podkreślenie

Pogrubiony tekst ze ściśniętymi literami to nie zawsze jest najlepszy pomysł. Pogrubienie fajnie podkreśla dwuelementowość kroju więc więc polecam w przypadki czcionek szeryfowych. Mam wrażenie, że taka gruba strzałka powinna być gdzieś dostępna ale jeżeli tak jest to nie potrafię jej znaleźć. W takiej sytuacji najlepiej skorzystać z właściwości tła i brakujące elementy dodać w ten właśnie sposób. Do tego przykładu potrzebna jest magentowa strzałka więc zanim skorzystasz z kodu dodają ją do zasobów bloga.

magentowa strzałka.IPTwiecej a {
 display:inline-block;
 padding:2px 15px 2px 0;
 background:url(/resource/more_magenta_arrow.png) no-repeat right center;
 border-bottom:1px dotted #ff0054;
 color:#ff0054;
 font-size:1.4em;
 font-weight:bold;
 text-decoration:none;
 letter-spacing:-.1em;
}
.IPTwiecej a:hover {
 color:#a20035;
 border-bottom:1px solid #a20035;
}

Duże litery i długa strzałka

Jedno z moich ulubionych rozwiązań ostatnio. Prosty pomysł będący jednocześnie zakończeniem notki jak i wskazaniem na rozwinięcie wpisu. Pomysł łatwy do realizacji, wystarczy przygotować grafikę z odpowiednio długą strzałką. Tym razem przykład pochodzi z bloga craftowego więc strzałkę zrobiła dokładnie na wzór tamtejszej, imitując jednocześnie niedoskonałość ręcznej roboty. Moim zdaniem ta strzałka ma być elegantszą i bardziej stylową wersją strzałki którą narysowaliście w paincie gdy pierwszy raz odpaliliście komputer.

Ja przygotowałam bardzo długą strzałkę bo nie wiem w jakim szablonie będzie wykorzystana. Trzeba by ją sobie odpowiednio przyciąć tak aby kreseczka strzałki nie pojawiała się pod tekstem. Można to oczywiście całkiem łatwo obejść ale w takim przypadku tylko teksy będzie linkiem a strzałka nie. Dlatego polecam strzałkę przyciąć i skorzystać z drugiego rozwiązania. To pierwsze, poniżej, nie wymaga żadnego przycinania, wystarczy grafikę dodać do zasobów a kod wkleić w arkuszu na miejsce div.IPTwiecej.

strzałka długa szara.IPTwiecej {
 margin-top:2em;
 background:#fff url(/resource/more_grey_arrow.gif) right center;
 text-align:left;
 text-transform:uppercase;
}
.IPTwiecej a {
 display:inline-block;
 height:18px;
 padding:0 10px 0 0;
 background:#fff;
 color:#2d211c;
 font-size:17px;
}
.IPTwiecej a:hover {
 color:#d34e53;
}

Ja przygotowałam bardzo długą strzałkę bo nie wiem w jakim szablonie będzie wykorzystana. Dlatego trzeba ją sobie odpowiednio przyciąć tak aby kreseczka strzałki zaczynała się jakieś 10 pikseli za napisem. Napis powinien być własny bo końcowe » niespecjalnie pasuje do strzałki.

strzałka długa szara.IPTwiecej {
  margin-top:2em;
 text-align:left;
 text-transform:uppercase;
}
.IPTwiecej a {
 display:block;
 width:100%;
 height:18px;
 background:#fff url(/resource/more_grey_arrow.gif) no-repeat right center;
 color: #2d211c;
 font-size: 17px;
}
.IPTwiecej a:hover {
 color:#d34e53;
}

Brązowy tekst na papierowym pasku z kropkowaną strzałką

Bez problemu można papierowy pasek umieścić jako tło pod całym elementem informacji pod notką ale w typowym ułożeniu jest to jednak dość wysoki element i umieszczenie papierowego tła pod całym elementem nie zawsze będzie pasować więc najlepiej zaprojektować to indywidualnie. Dlatego chociaż w przykładzie pasek obejmuje cały element informacyjny to ja podaję kod dla mniejszego rozwiązania.

Odcień papieru najlepiej dopasować sobie do szablonu. Ja przygotowałam neutralny beżowy z oderwanym fragmentem. Kropkowaną strzałkę umieściłam w osobnym pliku aby można było zastąpić tło a strzałkę zostawić.

tłoarrow.IPTwiecej {
 float:right;
 width:177px;
 height:25px;
 padding:12px 10px 12px 0;
 background:url(/resource/more_bg.png) no-repeat right center;
 text-transform:capitalize;
 font-size:1.6em;
}
.IPTwiecej a {
 display:inline-block;
 width:142px;
 height:25px;
 padding:0 35px 0 0;
 background:url(/resource/more_dot_arrow.png) no-repeat 145px center;
 color:#8c3b3a;
 text-align:right;
 text-shadow:1px 0 0 #f4e7d4;
}
.IPTwiecej a:hover {
 background-position:147px center;
 color:#b85b5a;
 text-shadow:1px 0 1px #f4e7d4;
}

Przygotowałam też papierek w kratkę. Zanim dodasz do zasobów bloga albo zmień nazwę pliku z papierkiem w kratkę, albo jego adres w powyższym kodzie (more_bg.png).


Polecane wpisy na podobne tematy:

sobota, 27 października 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2007/10/27 22:53:08
Kate, jesteś niesamowita. Nawet nie wiedziłam, że w Bloxie mogę wybierać link do podziału notki. Prawdę mówiąc nie zwracam na to uwagi. Notek nie dzielę, bo wiem sama po sobie, że zniechęcają do czytania. Ale skąd Ty wiesz, gdzie w CSS nalezy to wpisac , aby było na stałe? Nie miałam o tym pojęcia. Kiedyś w szablonie miałam problem z dzieloną notką, bo na stronie komentarzowej tytuł notki był niżej niż na głownej i nie wiedziałam gdzie to naprawić. (przy notce nie dzelonej na wstęp wszystko było w porządku). Do dzisiaj nie wiem. Szkoda, że we wstępach nie można dawać obrazków.
-
kate_mac
2007/10/28 14:52:57
Coraz częściej dochodzę do wniosku że można wszystko – trzeba tylko wiedzieć jak
Co do tego gdzie to w pewnym sensie sama podsunęłaś mi pomysł gdzie tego szukać ;)
Pisałaś mi kiedyś o zapisie Info Pod Tekstem – więcej też należy do tej „kategorii” zapisu .IPT = Info Pod Tekstem;
Na prywatnym (prywatny to chyba nie najlepsze określenie) blogu czasami używam podziału na wstęp i treść i dlatego zależało mi na tym aby także to edytować; zaczęłam więc podglądać CSSy w poszukiwaniu zapisu który by pasował do podziału notki i tak znalazłam .IPTwiecej
jeżeli zdecydujesz się sama go wykorzystywać to dobrze sprawdź CSS który używasz bo często .IPTwięcej jest już opisane jako float: right (tak miałam w 6szablonkatemac.blox.pl a że nie zauważyłam to dziwiłam się dlaczego ten zapis mi nie działa tak jak powinien czyli wyśrodkowane)
Co do obrazków we wstępach – czary mary – wszystko można – w przyszłym tygodniu napiszę jak.
-
2007/10/29 13:49:39
A jeśli .IPTwiecej opisuje float: right to co to znaczy, czym to się objawia na szablonie? Nie wiem także, jak trzeba zapisac szukacza, aby nie był w jednej linii, lecz tekst na górze a klawisz pod nim. Wstawiłam trzeci czarny szablon i miałam z nim nieprzewidziane komplikacje. (teraz sobie przypomniałam, że CSS zostawiłam w strasznym bałagania;). Chciałam przesunąć blog do samego dołu, tak aby stykał się z belką. Normalnie powinno wystarczyć w BlogGłównyBox margin-bottom: 0px; Nic z tego, nie zadziałąło. Chciałam sobie pomóc stopką. Wpisałam jej wymiary, tło, nawet border...i nic, po prostu jej nie ma na blogu! Już w ostatnim kroku desprackim w BlogGłównyBox wpisałam margon-bottom: -20px. I to pomogło! Taak, tylko, że to nie takimi metodami powinno się uzyskać ten efekt. To czasami w pracach przy szablonach jest denerujące. Niby robisz jak nalezy, a efektu nie ma.
Pozdrawiam:)
-
2007/10/29 13:52:13
Acha, we wstępie zamieścisz obrazek, ale chyba tylko zapisem ręcznym, bo tam nie ma edytora. Ale nie jestem pewna czy się i to uda. Już wielu próbowało:)Trzymam kciuki!
-
kate_mac
2007/10/29 15:19:39
IRYTKU tylko za głośno się nie śmiej
jeżeli nie jestem pewna znaczenia czegoś a stosować to powiedzmy umiem to tłumaczę to sobie po swojemu
FLOAT czyli płynąć – używam go powiedzmy tak jak text-align dla teksu – czyli float:right będzie znaczyło że cały element ma być „przyczepiony” do prawej krawędzi
SUKAJKA spróbuj display:block – powinno powodować wyświetlanie poszczególnych elementów jeden pod drugim jako bloki – display:block to odwrotność display:inline które powinno powodować wyświetlanie elementów w jednej linii nawet jeżeli nie jest to ich „naturalne” ułożenie (moje źródło wiedzy webmaster.helion.pl/kurshtml/xml/css.htm - jeszcze praktycznie nie sprawdziłam choć obserwując już zastosowane w szablonach które przetwarzam display działa tak jak mi się wydaje ;) )
WSTĘP właśnie zapis ręczny mam na myśli i to działa – jest bardzo proste rozwiązanie postaram się w piątek je opisać
-
sgk
2007/10/30 14:36:34
Dziewczyny, a jakich narzędzi używacie do prac przy tworzeniu szablonów (przeglądarka, edytor, itp)?
-
kate_mac
2007/10/30 14:57:36
Czy to jest podchwytliwe pytanie?
Po pierwsze będę się trzymała tego, że ja przetwarzam. Zaczynam od jednego z blokowych szablonów i zmieniam go aż uzyskam pożądany efekt wizualny (dlatego w CSS może być bałagan).
Przede wszystkim robię to w „Edycja arkusza styli” choć w zasadzie pracuję tak chaotycznie, że bywa to też notatnik czy word choć oczywiście aby zobaczyć efekt wracam zawsze do „Edycja arkusza styli”.
Mam też coś takiego jak „TopStyle Lite”. Przydał mi się w pewnym momencie bo wyłapał błąd który popełniam w zapisie ale nie jestem na razie w stanie wykorzystać możliwości tego programu bo nie pamiętam skąd go wzięłam i gdzie szukać instrukcji obsługi (w języku ojczystym oczywiście). Tak więc na razie działam intuicyjnie.
Mam nadzieję, że moja odpowiedz jest wyczerpująca (to moje drobiazgowe podejście wychodzi ze mnie zawsze;) i że teraz Ty napiszesz skąd pytanie.
-
sgk
2007/10/31 13:02:46
Nie jest to żadne podchwytliwe pytanie :)
Edycja arkusza styli to sprawa oczywista - trzeba tam wrzucić efekty pracy, aby zadziałały.
Miałem na myśli to, co się dzieje zanim przygotowany arkusz tam trafi.

Chciałem zachęcić do skorzystania z przeglądarki Firefox, która ma mnóstwo narzędzi BARDZO ułatwiających pracę z CSSem.
Przykładem choćby rozszerzenie Web Developer, który ma wbudowany edytor CSS działający tak, że od razu widać na stronie efekty zmian. Poczytaj sobie o tej funkcjonalności tutaj -> sgk74exp.blox.pl/2006/11/blox-i-edycja-CSS-na-zywo.html
Drugim jest ColorZilla, która pozwala w łatwy sposób identyfikować CSSowe nazwy elementów strony. Ma do tego przechwytywacz kolorów, edytory palet, itp
O tym możesz poczytać sobie tutaj -> longway.blox.pl/2007/07/Firefox-dla-web-developera.html
Szczerze namawiam do tego. To ogromnie ułatwia pracę.

Może "web developer" to brzmi poważnie, ale naprawdę bez tych ogólnie dostępnych, darmowych i w sumie prostych narzędzi ciężko mi wyobrazić sobie nakład pracy przy edycji stron z użyciem notatnika i worda...
Jakby co, to więcej szczegółów drogą mailową :)
-
kate_mac
2007/10/31 13:37:59
dziękuję Ci bardzo - Web Developer to rzeczywiście musi być duża oszczędność czasu;
muszę się przyznać że mam już to rozszerzenie zainstalowane od dawna ale że to było dawno to zapomniałam
Zainstalowałam mniej więcej wtedy kiedy wpadł mi do głowy pomysł "że może by tu coś sobie pozmieniać" czyli jakieś pół roku temu kiedy nie miałam nawet pojęcia co to jest CSS; dlatego właśnie to rozszerzenie mnie przerosło i zostało usunięte sprzed mych oczu ale teraz do tego wrócę
na koniec mała uwaga - gdy zmiany, które chcę wprowadzić w szablonie są niewielkie i ograniczają się do zmiany kolorów, grafiki czy czcionki (fontu) to nie zajmuje to wiele czasu ale chyba wyszłam już poza etap niewielkich zmian i to że przypomniałeś mi o tym rozszerzeniu zaoszczędzi mi sporo czasu więc jeszcze raz
Dziękuję i jak by jakiś problem to skorzystam z Twej oferty pomocy :)
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...