sobota, 16 stycznia 2016

Poradnik Designu #4 Jak wyróżnić komentarze autora?

Hej! Zapraszam was na kolejny post. Dziś pokażę Wam, jak wyróżnić komentarze autora bloga. Więc bez zbędnego przedłużania zapraszam.

Od czego zaczynamy? Więc na początku tworzymy grafikę. Ja używam jak zwykle pic monkey :) Następnie potrzebujemy adresu URL. Do hostowania obrazków używam Google, ale jeśli chcecie wybierzcie inną stronę. Kopiujemy nasz adres i wklejamy go np. do notatnika, lub po prostu mamy otwarty w innej karcie ;)
Przechodzimy do Bloggera. Wchodzimy w szablon>edytuj kod HTML. Szukamy tam (Ctrl+F):

</body>

Nad nim wklejamy ten oto kod:

<script src='http://code.jquery.com/jquery-latest.js'/><!-- ss highlight author starts --><script>$(function() {function highlight(){$('.user.blog-author,.ssyby').closest('.comment-block').css('border', 'solid #cccccc 1px').css('background','#ffffff url("URL OBRAZKA")top right no-repeat').css('padding', '10px');}$(document).bind('ready scroll click', highlight);});</script><!-- ss highlight author ends -->

Możemy tu trochę pozmieniać.
border- ramkę
solid- styl ramki (solid- linia ciągła, dashed- przerywana, dotted- kropkowana, hidden- niewidoczna)
#cccccc - kolor HEX tła ramki (generator kolorów)
#ffffff - kolor tła całego pola komentarza
URL OBRAZKA- tutaj wklejamy skopiowany adres URL

Efekt:
Zapisujemy i gotowe! 
W dzisiejszym poście modelem był Jackie ;) Jeśli chcecie możecie zadać pytania do Q&A, które pojawi się w kolejnym poście z okazji moich urodzin. By zaobserwować kliknij TU. Pozdrawiam Was i zapraszam już za tydzień!

28 komentarzy:

  1. Przydatny post.. muszę kiedyś pokombinować z wyglądem bloga i napewno skorzystam z Twoich poradników! :3

    Pozdrawiam,
    bycichociemna.blogspot.com :*

    OdpowiedzUsuń
  2. Jejku akurat dzisiaj zaczełam rozmyślac jak tu zmienić bloga itd. No i nie wiedziałam jak to zrobić, no bo przecież dużo kombinowania a tutaj natrafiłam na Twój post :D
    http://wittka.blogspot.com/

    OdpowiedzUsuń
  3. Bardzo przydatny post, ostatnio zastanawiałam się jak to zrobić :)

    matrelsy.blogspot.com

    OdpowiedzUsuń
  4. Właśnie szukałam wszędzie jak to zrobić.
    Na pewno pomyślę nad dodaniem tego :)

    live-telepathically.blogspot.com

    OdpowiedzUsuń
  5. Bardzo przydatny post, udostępnię go u siebie ;)

    w wolnej chwili zapraszam do siebie:
    http://velvetheart96.blogspot.com/?m=1

    OdpowiedzUsuń
  6. Bardzo przydatny post! Świetnie to wytłumaczyłaś. Na pewno skorzystam.

    Pozdrawiam, I am Angelika - klik!

    OdpowiedzUsuń
  7. Ooo ciekawy post:)
    Śliczny piesek <3
    Poklikasz?:)
    http://grlfashion.blogspot.com/2016/01/dresslink-wishlist-wyniki-konkursu.html#comment-form

    OdpowiedzUsuń
  8. Bardzo lubię takie posty z poradami :). Śliczne zdjęcia. Pozdrawiam!

    lublins.blogspot.com

    OdpowiedzUsuń
  9. Całkiem przydatne rady :)
    Co powiesz na wspólną obserwację ? :)
    http://bedifferent-ania.blogspot.com/

    OdpowiedzUsuń
  10. kiedyś coś z tym pokombinuję :D słodki psiak <3
    http://exality.pl/

    OdpowiedzUsuń
  11. Kiedyś wyróżniałam komentarze autora. Na pewno skorzystam z twojej instrukcji następnym razem. :)

    http://justdaaria.blogspot.com/

    OdpowiedzUsuń
  12. Świetny post! Obserwujemy? ;* daj znać u mnie w komentarzu. :)
    http://mystyllleee.blogspot.com/

    OdpowiedzUsuń
  13. Hej super post, bardzo lubię czytać Twojego bloga, dlatego nominowałam Cię do Liebster Blog Award - wystarczy odpowiedzieć na pytania, które znajdziesz u mnie w najnowszym poście ;*
    http://czekolada23.blogspot.com/

    OdpowiedzUsuń
  14. Hei bardzo przydatne, na pewno wypróbuję ;) Bardzo fajnie też wytłumaczone. Ogólnie ładny design bloga ;) http://thesandie.blogspot.com/

    OdpowiedzUsuń
  15. Świety blog c; Obserwuję i liczę na to samo mimo że dopiero zaczynam c;
    marthas-journal.blospot.com

    OdpowiedzUsuń
  16. Nie ogarniam takich informatyczno-internetowych rzeczy. Przy mnie wszystkie komputery wysiadają XD
    Pozdrawiam
    welcome-to-my-little-big-world.blogspot.com

    OdpowiedzUsuń
  17. Najpiękniejszy blog, który kiedykolwiek odwiedziłam, ten desing jest cudowny! Życzę Ci powodzenia w dalszym blogowaniu bo na prawdę świetnie Ci to wychodzi! :D Obserwuję;)
    http://magiatoprzyjazn.blogspot.com/ <- Zapraszam dom nie w wolnej chwili

    OdpowiedzUsuń
  18. Próbowałam, ale ni udało mi się ;P Ale co tam, nie chcę mi się tracić czasu na coś, co mi się i tak nie uda ;P Kiedyś jeszcze pokombinuję xD Śliczne zdjęcia i piesek :) Pozdrawiam
    konieckropka-bookgirl.blogspot.com

    OdpowiedzUsuń
  19. Bardzo lubię takie blogowe porady, bo sama srednio się w tym odnajduję :)

    OdpowiedzUsuń
  20. Świetne rady. Co powiesz na wspólną obserwację?
    Daj znać :)

    http://looyourself.blogspot.com/

    OdpowiedzUsuń
  21. Świetny poradnik :) Osobiście nie zamierzam wyróżniać na blogu swoich komentarzy ale myślę że przyda się nie jednej osobie :)
    anonimoowax.blogspot.com

    OdpowiedzUsuń
  22. bardzo fajny tutorial :3 w weekend jak bd miała trochę czasu to przysiądę nad tym bo od jakiegoś czasu już planowałam jakoś wprowadzić taką mała zmianę także dzięki :D
    przesłodki psiak ♥ i zaobserwowałam cię :* mam nadzieję, że będzie dalsza część tego poradnika :)
    pozdrawiam :))

    stylowana100latka.blogspot.com - KLIK

    OdpowiedzUsuń
  23. Przydatny post !
    Co powiesz na wspólną obserwację ? -zacznij a ja zrewanżuje się tym samym
    Zapraszam również do konkursu na moim blogu, można wygrać np. perfumy, pomadkę do ust i kilka innych perełek :D


    magicworldprincesscarmen.blogspot.com

    OdpowiedzUsuń
  24. Wszystko wyszło i ramka, i tło, tylko nie wiem czemu nie miałem obrazka "autor" :p Są jakieś konkretne wymiary?

    OdpowiedzUsuń

♥ Dziękuję za każdy komentarz ♥
♥ Napisz coś wartościowego ♥
♥ Nie ma nic złego w krytyce, o ile jest konstruktywna ♥
♥ Nie komentuj samych zdjęć, pamiętaj że oprócz nich jest też tekst ♥
♥ Każdy obserwator ma miejsce w moim serduszku ♥