piątek, stycznia 22, 2016

3 pomysły na popularne posty

     Z moich ferii został jedynie tydzień. Jak ten czas leci! W ciągu tych kilku dni obejrzałam parę filmów, przeczytałam parę książek i ogólnie odpoczęłam. Napisałam jeden wpis o książkach na ferie. Wpadłam też na kilka innych pomysłów. Dziś przychodzę z jednym z nich. Uznałam, że ferie to dobry czas na wprowadzenie zmian czy odświeżenie bloga. Specjalnie dla Was stworzyłam trzy wersje wyglądu dla gadżetu Popularne Posty. Dodatkowo! Wszystkie kody rozpisałam tak, że z łatwością można połączyć niektóre ich fragmenty i stworzyć jeszcze inny wygląd tego dodatku.

blogger, instrukcja, css, popularne posty, wygląd, design, popular posts,

     Dla mnie wszystkie trzy wersje są ładne i sama dodałabym je na bloga. Najpierw przedstawiłam Wam, jak wyglądają poszczególne wersje. Pod obrazkami w ramkach znajdują się kody, które należy skopiować i wkleić w arkusz CSS w Projektancie Szablonów.  Jeśli nie wiecie, jak to zrobić, to na początku tego wpisu jest pokazane krok po kroku. Na sam koniec wytłumaczyłam, jak dostosować wszystko pod swojego bloga. Mam nadzieję, że nie będziecie mieli z tym problemów.

To zaczynamy!

blogger, instrukcja, css, popularne posty, wygląd, design, popular posts,
.PopularPosts .item-title {text-transform: uppercase; font-family: 'Times'; padding-top: 10%; border-bottom: solid 1px #000; }
.PopularPosts .item-title:first-letter {font-size: 1.2em}
.PopularPosts h2 {text-align: center; font-size: 20px; color: #000; text-transform: uppercase}
#PopularPosts1 .widget-content {border-top: solid 1px #000; padding-top: 30px}



blogger, instrukcja, css, popularne posty, wygląd, design, popular posts,
.PopularPosts .item-title {text-transform: uppercase; font-family: Times;background: #000; text-align: center ; border-bottom: solid 1px #000; }
#PopularPosts1 a {color: #fff}
.PopularPosts .item-title:first-letter {font-size: 1.2em}
.PopularPosts h2 {text-align: center; font-size: 20px; color: #000; text-transform: uppercase}
#PopularPosts1 .widget-content {border-top: solid 1px #000; padding-top: 10px}



blogger, instrukcja, css, popularne posty, wygląd, design, popular posts,
.PopularPosts .item-thumbnail {float: none; text-align: center;}
.PopularPosts img {border-radius: 100%;}
.PopularPosts .item-title {text-align: center; text-transform: uppercase; font-family: Times;}
.PopularPosts .item-title:first-letter {font-size: 1.2em}
.PopularPosts h2 {text-align: center; font-size: 20px; color: #000; border-top: solid 1px #000; }
#PopularPosts1 .widget-content {border-top: solid 1px #000; padding-top: 30px}

Jeśli wybierzecie wersję 1 lub 3, to w układzie ustawcie, by wyświetlał się sam tytuł wpisu i miniaturka. W przykładzie 2 - tytuł i fragment wpisu. 


Dostosuj do swojego szablonu

     Opierając się na tych przykładach, możecie wymieszać elementy i stworzyć coś swojego, np wziąć z trzeciego wygląd tytułu gadżetu, a z drugiego tytuły postów. Niżej rozłożyłam Wam na czynniki pierwsze kody, jakie napisałam. Wystarczy spojrzeć, porównać z tym co jest wyżej i na pewno uda Wam się stworzyć coś swojego. Warto spróbować, a jak będą problemy, to piszcie do mnie.


SELEKTORY, czyli to od czego zaczyna się kod, określa co dokładnie będziemy zmieniać.
  • .PopularPosts .item-title -  tytuły postów 
  • .PopularPosts h2 -  tytuł gadżetu
  • .PopularPosts img - miniaturki wpisów
  • #PopularPosts1 .widget-content - zawartość gadżetu 


WARTOŚCI, czyli określenie, jak ma wyglądać dana rzecz.
  • text-transfor: uppercase; - wszystkie duże litery [usuń, jeśli ma być normalnie] 
  • font-family: 'Times'; - czcionka tytułów [zmień tylko Times] 
  • border-bottom: solid 1px #000 - podkreślenie dolne [zmień #000 na kolor jaki chcesz, 1px - grubość]
  • border-top: solid 1px #000; - podkreślenie górne
  • border-radius: 100%; - zaokrąglenie rogów [zmień 100%] 
  • background: #000 - kolor tła tytułów [zmień #000]
  • color #000 - kolor liter [zmień #000]
  • font-size: 20px - rozmiar liter [zmień 20px]
  • text-align: center - wyrównanie tekstu [może być left (od lewej) lub right (od prawej) strony]


Mała uwaga


     Czasami z różnych przyczyn kody mogą Wam nie zadziałać. W takiej sytuacji kierujcie się poniższymi punktami. Jeśli jednak nie będzie działać, to dajcie znać. Postaram się coś więcej wymyślić.

  • Sprawdź, czy kod został cały skopiowany, nie może zabraknąć ani jednego znaku.
  • Sprawdź, czy poprzedni kod jest zamknięty - kończy się klamerką.
  • Możesz spróbować zmienić .PopularPosts na #PopularPosts1 
  • W przypadku #PopularPosts1 upewnij się, że takie ID ma Twój gadżet. Czasem może mieć #PopularPosts2 lub więcej.  [Jak sprawdzić ID gadżetu?]



     Mam nadzieję, że instrukcja komuś się przyda, bo troszkę czasu spędziłam nad nią. W razie jakichkolwiek pytań piszcie śmiało w komentarzach lub prywatnie na maila. Jeśli nie macie gadżetu popularne posty, to może warto o tym pomyśleć? Może zwiększy to ruch na stronie?


Podobają Wam się pomysły? 
Jak w ogóle minął tydzień? Ferie czy szkoła? 




21 komentarzy:

  1. Najbardziej podoba mi się ostatnia wersja :)
    Mój blog ♥

    OdpowiedzUsuń
  2. Przyznam od razu, że pierwszy kod po części wykorzystałam :D
    Pozdrawiam,Madda
    blog ->klik

    OdpowiedzUsuń
  3. Świetne pomysły :)
    http://malwinabeczek.blogspot.com/
    Blog się spodoba? Zaobserwuj!

    OdpowiedzUsuń
  4. Aż mnie zainspirowałaś, żeby dodać gadżet 'popularne posty' na swojego bloga i myślę, że nad tym trochę posiedzę w najbliższym czasie :) Na pewno Twoje pomysły mi się przydadzą, więc naprawdę super post!

    minimalistyczny.blogspot.com

    OdpowiedzUsuń
  5. przydatne :) aczkolwiek ja lubię jak jest miniatura zdjęcia posta i kawałek tekstu :)

    OdpowiedzUsuń
  6. Ja w kodach i takich rzeczach jestem dość słaba, ale jak jest instrukcja to spróbuje ^^ !


    KAPCIUSZEK

    OdpowiedzUsuń
  7. Kurczę, czy tylko ja myślałam, że napiszesz o tematach na ciekawe posty, by były popularne, a nie że chodzi o gadżet? Hahaha, aż mi głupio. ;) Mimo wszystko może wykorzystam te kody. :)

    PS. Co się stało, że już nie masz Disqusa?

    _________
    Pozdrawiam, my-life-my-troubles.blogspot.com

    OdpowiedzUsuń
    Odpowiedzi
    1. Niestety na razie chodzi o gadżet, ale pomysł o tych tematach jest ciekawy :)
      Z Disqusem miałam małe problemy, a dodatkowo bardzo spowolnił ładowanie strony. Może tylko u mnie, ale troszkę mnie to denerwowało :/

      Usuń
  8. Wersja 1 i 3 najbardziej mi się podobają :) Są bardzo klasyczne!

    immhfashionblog.pl (klik)

    OdpowiedzUsuń
  9. Dziękuję za instrukcję, w jak dojdę do design'u popularnych postów na pewno tutaj wrócę :)
    http://side-of-life.blogspot.com/ - KLIK!

    OdpowiedzUsuń
  10. Ooo, chyba skorzystam z 3 sposobu :)


    WEŹ UDZIAŁ W KREOWANIU NASZEJ RZECZYWISTOŚCI
    Blog się podoba? - Zaobserwuj!

    OdpowiedzUsuń
  11. Jak dla mnie mega przydatne kody dlatego obserwuję od jakiegoś tygodnia Twojego bloga :)

    Nowy post na blogu ¦ Zapraszam

    OdpowiedzUsuń
  12. Trzeci podoba mi się najbardziej :)
    Świetny,przydatny post :)
    http://liikeeme.blogspot.com/

    OdpowiedzUsuń
  13. Super! Chciałam właśnie coś pokombinować z wyglądem bloga i dzięki Tobie pójdzie mi szybciej :3 świetny pomysł :)

    Mój blog - ZAPRASZAM

    OdpowiedzUsuń
  14. najlepszy nr 2 ;)
    Zapraszam do mnie. Nowy post :) insporationbyann.blogspot.com

    OdpowiedzUsuń
  15. świetnie to wygląda niemniej jednak na mim blogu gadżet ten jest zbędny :) Jeśli kiedyś będę chciała go dodać, pewnie skorzystam z Twoich pomysłów! Są naprawdę genialne! :) Tymczasem zastanawia mnie jak zrobiłaś ten przesuwający się pasek na końcu strony :) świetnie to wygląda i w moim szablonie też było coś takiego, ale nie umiem go odpowiednio edytować, aby wyświetlały mi się instagramowe zdjęcia :3

    OdpowiedzUsuń
    Odpowiedzi
    1. Jest to gadżet ze strony snapwidget.com, jeśli dobrze pamiętam. Jak masz problemy z szablonem, to możesz do mnie napisać na maila. Postaram się pomóc i go rozwiązać :)

      Usuń
  16. Już od naprawdę długiego czasu zbieram się do zmienienia swojego gadżetu, ale ciągle to odkładam :/

    adgam.blogspot.com

    OdpowiedzUsuń
  17. Super pomocne są twoje poradniki i w dodatku działające. Już zastosowałem u siebie. Bardzo dziękuję. Zerknij czy się podoba www.matowy.blogspot.com

    OdpowiedzUsuń
  18. Dziękuję, bardzo mi pomogłaś! :)

    OdpowiedzUsuń
  19. ŚWIETNE ! bardzo mi pomogłaś dziękuję !

    OdpowiedzUsuń

Komentować może każdy. | Brak weryfikacji obrazkowej.
Komentarze, gdzie będzie przeważał spam będą usuwane.