Jak edytować rotator polecanych wpisów?

Hej, dawno nie dodawałem tutaj instrukcji. Pora odświeżyć listę postów. Tym razem zajmiemy się edycją pokazu slajdów, czyli polecanych wpisów z bannerami. Jest on dostępny w szablonach z rodziny Print Design, min. Norma, Bynary (lub binary), Instinct. Poniższa instrukcja powinna bez problemu zadziałać w każdym z nich. Rozłożyłem 'slider' na czynniki pierwsze, dzięki temu będziecie wiedzieć jak podmienić obrazki, linki oraz tytuły czy opisy.

klik:

Jak uzupełnić rotator polecanych wpisów?

Jeżeli chcesz same zdjęcia to kasujesz odnośniki, tytuły i opisy lub skorzystaj z innej instrukcji do tworzenia pokazu slajdów.

Przydatne? polub na FB, dodaję tam więcej instrukcji blogowych. Dajcie znać jak Wam poszła edycja bloga.

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

Jak wyśrodkować nagłówki gadżetów?

Chcemy wyśrodkować tytuły gadżetów w naszym menu bocznym. Jak tego dokonać? Nie jest to trudne. Wiemy już jak szukać elementów nagłówków i menu w szablonie zatem przeskakujemy w kodzie HTML bloga (konkretnie w sekcji CSS) do: .sidebar h2, styl tego elementu może wyglądać mniej więcej tak:

.sidebar h2 {

    background: none repeat scroll 0 0 #EEEEEE;

    border-left: 6px solid #E8202D;

    color: #565656;

    font-family: Arial,Helvetica,Sans-serif;

    font-size: 16px;

    font-weight: bold;

    line-height: 16px;

    margin: -11px -11px 12px;

    padding: 10px;

    text-transform: uppercase;

}

kod:

border-left: 6px solid #E8202D;

odpowiada za boczne obramowanie, tutaj zmieniamy grubość i kolor z lewej strony.
Do powyższego stylu dopisujemy jeszcze jedną linijkę:

text-align: center;

zapisujemy zmiany i gotowe. Nagłówki będą wyśrodkowane.

Jeżeli chcemy wyśrodkować cały boczny pas (tytuły i treść) musimy tę samą linijkę dopisać do .sidebar {tutaj będzie styl} lub tuż przed ]]>< dodać to:

#sidebartab1 {
text-align: center;
}

Należy pamiętać, że text-align: center; da się stosować praktycznie wszędzie jednak rozwiązanie dotyczące środkowania tytułów nagłówków dotyczy konkretnie szablonu PrintDesign i jemu pokrewnych. Na pozostałych skórkach (i tych wbudowanych) nagłówki mogą być opisane w inny sposób.

Jeżeli środkowanie jakiegoś elementu nie działa można spróbować wymusić je w ten sposób:

text-align: center !important;

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

Jak zmienić tło w szablonie?

W standardowym kodzie szablonu PrintDesign mamy szare tło z wzorkami - ustawione tak by pokazywało się tuż przy bokach boksu z zawartością bloga. Nie każdemu się to może podoba a jak edytował już kolory menu czy innych elementów w szablonie to warto dopasować sobie także tło.

Jak zmienić obrazek tła?
Należy przejść do Szablon -> Edycja HTML -> kontynuuj -> zaznaczamy "rozszerz szablony widżetów".
Odszukujemy takie coś:

<style type='text/css'>

tuż pod tym mamy taki kod:

body{background:#F4F4F4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhryjCXzCLtBTYts-0pENSVs9Rvzt4uO7GQ7aM_iD-FBYAa3AJHcIGDnX0tCQIcUE5NhkAJ4emd_f-Kh_dRGRzOuqkgjHb188AtE2Jt9Qzkk5wMVR9J5DlWPK_k3_MRYnghta6d5vN9XnA/s1600/background.jpg) center top no-repeat;color:#535353;font-family: Arial, Verdana;font-size: 12px;margin:0px;padding:0px;}

 jest tam URL z grafiką: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhryjCXzCLtBTYts-0pENSVs9Rvzt4uO7GQ7aM_iD-FBYAa3AJHcIGDnX0tCQIcUE5NhkAJ4emd_f-Kh_dRGRzOuqkgjHb188AtE2Jt9Qzkk5wMVR9J5DlWPK_k3_MRYnghta6d5vN9XnA/s1600/background.jpg (1600x781 px) należy zamienić ją na własną. Wartość #f4f4f4 oznacza kolor szary poza obszarem grafiki (czyli jak ktoś ma rozdzielczość 1920 to po bokach widzi ten kolor.

Jak ustawić powtarzający się wzorek?
Ustawiamy odpowiedni URL obrazka a następnie z powyższego kodu kasujemy to:

no-repeat

Niepowtarzające się tło i wyśrodkowane?
Odpowiada za to fragment użyty w kodzie na górze, czyli:

center top no-repeat

Jak ustawić tylko kolor tła?
Jeżeli chcemy mieć tylko kolor, bez żadnych obrazków to cały fragment:

background:#F4F4F4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhryjCXzCLtBTYts-0pENSVs9Rvzt4uO7GQ7aM_iD-FBYAa3AJHcIGDnX0tCQIcUE5NhkAJ4emd_f-Kh_dRGRzOuqkgjHb188AtE2Jt9Qzkk5wMVR9J5DlWPK_k3_MRYnghta6d5vN9XnA/s1600/background.jpg) center top no-repeat;

kasujemy a zamiast tego wklejamy to:

background-color: #eeeeee;

gdzie #eeeeee to wybrany przez nas kolor dla tła bloga.

Jak zrobić tło rozciągające się wraz z ekranem przeglądarki?
przeczytasz: tutaj.

Jak zrobić żeby tło było nieruchome a przesuwała się jedynie ramka bloga?
do znacznika body dopisujemy jeszcze jedną linię:

background-attachment: fixed;

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

Jak dodać dzielenie na strony?

Stronicowanie to bardzo fajna sprawa na blogach, które mają już dużo wpisów. Zamiast wciskać "starsze posty" lub "nowsze posty" możemy przeskoczyć sobie od razu do strony 4, 5 czy 10.

Jak wykonać paginację na blogu?
Najpierw przechodzimy do zakładki Ustawienia -> Posty i komentarze -> Posty-> Pokaż najwyżej -> i ustawiamy np. na 5. Zapisujemy ustawienia.
Przechodzimy do zakładki Szablon -> Edycja HTML -> kontynuuj -> zaznaczamy "rozszerz szablony widżetów". Następnie w nowej karcie przeglądarki otwieramy ten temat i postępujemy według instrukcji. Warto przed przystąpieniem do zmian zapisać sobie kopię zapasową szablonu.


Po wstawieniu JavaScriptu oraz CSS przycisków (można zapisać zmiany w tym miejscu na wszelki wypadek) możemy przystąpić do dopasowywania ich wyglądu do naszego szablonu (trzeba edytować krój czcionki, kolor tła przycisków przed i po najechaniu myszą - wszystkie zmiany dokonujemy w pierwszym kodzie). Po skończonej pracy pod postami pojawi się lista podstron - taka jak na moim blogu.

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

Jak poszerzyć nagłówek bloga?

Blogi typu star-poli czy ananasowemsp mają duże nagłówki na całą szerokość bloga. Po wgraniu szablonu PrintDesign i ustawieniu nagłówka za pomocą gadżetu - dostępnego na podstronie Układ - niestety nie osiągamy takiego efektu. Dlaczego?

W standardowej opcji nagłówek tego szablonu składa się z dwóch kolumn, w jednej mamy tytuł lub logo a w drugiej opis bądź banner reklamowy. Nie przewidziano tam możliwości wstawienia wielkiej grafiki.

Jak zatem poszerzyć miejsce na nagłówek?

Trzeba dokonać kilku modyfikacji by zdjęcie dodane w gadżecie pojawiło się na całą szerokość bloga. Należy edytować parę marginesów, zmienić ustawione na sztywno wysokości boksów. Przejdź na forum i przeczytaj => ten temat.

Można też zrobić nagłówek zmieniający się po każdym odświeżeniu strony. Wystarczy przygotować parę obrazków do rotatora (najlepiej bez tła pod postaciami) a następnie udać się na forum i zastosować rozwiązania opisane w drugiej części powyższego tematu.

Instrukcja przewidziana jest dla szablonu Print Design, ale rozwiązań użytych w niej można próbować w pokrewnych skórkach. W przypadku zmiennego nagłówka rozwiązanie jest uniwersalne i da się wprowadzić wszędzie gdzie dostępna jest edycja kodu HTML.

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

PrintDesign - skąd pobrać i jak wgrać szablon na bloga?

Ten temat pasuje raczej na jeden z pierwszych wpisów, ale blog dopiero startuje, więc nie jest jeszcze za późno. Wpis przeznaczony jest dla osób, które chcą mieć taki szablon jak na tym blogu. Taki sam ma star-poli czy ananasowemsp.

Należy pamiętać, że szukamy szablonu na Blogger. Print Design dostępny jest także na platformę Wordpress, dlatego trzeba zwrócić uwagę czy paczka, którą pobieramy ze strony jest wersją naszego theme dla Blogspot.

Poniżej kilka linków do stron, gdzie można pobrać szablon PrintDesign:
http://www.premiumbloggertemplates.com/2011/10/printdesign-premium-blogger-template.html
http://btemplates.com/2011/blogger-template-printdesign/
http://www.templatebloggers.com/2011/11/printdesign.html

Podobny do nich jest np. Bynary (Binary Theme): http://btemplates.com/2012/blogger-template-bynary/demo/ tylko ma rotator na całą szerokość bloga. Drugi to Instinct: http://www.premiumbloggertemplates.com/2011/12/instinct-premium-blogger-template.html


Mamy szablon na dysku i co dalej? Jak wgrać go na bloga?
postępujemy według instrukcji na forum: Jak wgrać szablon na Blogger.

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

Jak dodać czat na bloga?

Wiele blogów o MSP a także i ten posiada czat ze strony XAT.COM. Można się tam zarejestrować (ale nie trzeba) i wygenerować sobie kod czata. Nie jest to najtrudniejsza część, generator jest całkiem łatwy w obsłudze. Gorzej z wstawieniem tego na bloga.

Instrukcja dotyczy szablonu PrintDesign (czyli takiego jak na moim blogu) oraz jemu pokrewnych (np. Instinct, Elegant). Przyda się jednak osobom, które nie mają takiego szablonu, ale dowiedzą się jak przeszukiwać kod szablonu w poszukiwaniu interesującego nas fragmentu.

Oczywiście można wkleić wszystko w gadżet HTML/Javascript w zakładce Układ, ale w ten sposób skrypt czata pojawi nam się w dziwnych miejscach a my chcemy konkretnie:
a) tuż pod nagłówkiem bloga / nad poziomym menu
b) Tuż pod rozwijanym menu / nad wpisami

Pełną instrukcję (wraz z wskazanymi miejscami w kodzie) znajdziecie na forum - w tym temacie.

Jak rozszerzyć xat?
Podczas generowania kodu należy w polu width wpisać wartość szerokości szablonu na Waszym blogu. W PrintDesign standardowo jest to 960. Jeżeli zapomnieliście to zrobić na stronie xat to można edytować kod. Odszukajcie w jego treści wartości width i zmieńcie ją na własną.

Czy są jeszcze jakieś miejsca gdzie chcielibyście wkleić czat z XAT?

p.s. jeżeli nie chcecie tła (żeby było przezroczyste) to wejdźcie w 'ustawienia chat'a' (chat settings) a następnie 'więcej opcji' (more options) - zostaniecie przeniesieni na stronę ustawień. Wyszukajcie tam pozycji 'Transparent background (No background image)' i zaznaczcie ją. Poniżej można też zmienić język na Polski (przy 'Default language for chat box'). Następnie jedziemy w dół i szukamy przycisku 'Update these options' - wciskamy go i gotowe. Od tej pory chat będzie miał przezroczyste tło a opcje będą w języku polskim.

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

Jak edytować ikony społecznościowe na górze?

Szablon PrintDesign zawiera ikony społecznościowe wraz z linkami do tych serwisów. Można je uzupełnić swoimi profilami lub skasować. Tylko jak to zrobić?
Okazuje się, że nie jest to trudne. Wystarczy odszukać odpowiedni fragment w źródle szablonu i go skasować - wtedy pozbywamy się tego paska z ikonkami całkowicie. Druga opcja to zamiana adresów na własne lub skasowanie tylko niektórych elementów - tak jak w przypadku mojego bloga, gdzie zostawiłem sobie link do Facebooka, Twittera, Google Plus oraz RSS (czyli kanał z nowymi wpisami, polecam dodanie tego bloga do zakładek lub listy czytelniczej).

No dobra, ale jak odnaleźć ten kod?
Wszystko zostało pokazane w tym wątku na forum. Dwa kody dla obu wersji rozwiązania problemu. W razie pytań piszcie w komentarzach lub w temacie z linka.

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

Jak rozciągnąć tło nagłówka na blogu?

Odpowiedź na pytanie z komentarza.

Jak rozciągnąć tło pod nagłówkiem tak jak na star-poli oraz ananasowemsp?
To samo pytanie padło także na forum Blogowicza, odsyłam zatem do tego tematu (4 i 5 post).

Przy poszerzaniu bloga i jego elementów (menu boczne, ramka wpisów) w szablonie PrintDesign przydatny może być jeszcze ten wątek.

Jeżeli chcesz wstawić zdjęcie tak żeby było widoczne na całą szerokość nagłówka przeczytaj nowszy wpis na tym blogu => edycja nagłówka PrintDesign.

Przejdź do strony wpisu i dodaj komentarz lub pytanie »

Witam.

Założyłem tego bloga z czystej ciekawości. Nie gram w MovieStarPlanet (jestem za stary na to), ale zauważyłem, że niektóre strony o MSP posiadają w zakładkach dział z instrukcjami. Zawarte są tam informacje o tym jak wykonać czat, zmienić nagłówek, uzupełnić rotator czy wgrać szablon na bloga. Na tym się trochę znam i myślę, że mogę pomóc Wam ulepszyć blogi o tej grze. Szczególnie, że od 6 lat prowadzę forum blogowe. Jak widać celowo ustawiłem najpopularniejszy szablon (PrintDesign) żeby pracować na nim i dokonywać potrzebnych zmian. Wszystkich odwiedzających tę stronę, których interesują instrukcje na bloga proszę o komentarze pod tym wpisem. Jakich instrukcji oczekujecie? Co sprawia Wam najwięcej problemów? Nie bójcie się zadawać pytań, prawie każdy problem da się rozwiązać ;)

Przejdź do strony wpisu i dodaj komentarz lub pytanie »