23 lipca 2013

Wyróżnienie komentarzy autora

Notka z dedykacją dla Serafii.


Dzięki temu komentarze właściciela bloga nie zgubią się w tłumie! :)

Zawartość notki:
1. Podświetlony komentarz autora bloga.
2. Podświetlone komentarze autorów bloga.

1. Idziemy do Panel NawigacyjnySzablonEdytuj kod HTML → wyszukujemy /body

Nad /body wklejamy to:





<script src="http://code.jquery.com/jquery-latest.js" />
<script>
$(function() {
function highlight(){
$('.user.blog-author,.ssyby').closest('.comment-block')
.css('border', 'solid #000 1px')
.css('background','#FFF url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('padding', '10px')
.css('text-shadow', '0 0 10px #000');
}
$(document).bind('ready scroll click', highlight);
});
</script>

 
Jak edytować całą ramkę?
Za cały wygląd odpowiada ten oto fragment:
.css('border', 'solid #000 1px')
.css('background','#FFF url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('padding', '10px')
.css('text-shadow', '0 0 10px #000');

To jQuery, ale... czy wygląda znajomo?
Gdybyśmy pierwszą linijkę zapisali w sposób:
border: solid #000 1px;
...to wiadomo już o co chodzi :D
 
Border - czyli ramka. Zaraz po niej pisze solid, czyli, że będzie to ciągła linia. Zamiast tego możemy dać dotted (kropeczki) lub dashed (kreseczki). Obok pisze #000, co oznacza, że ramka będzie czarna. 1px to grubość, którą też można zmieniać wedle uznania.

Background - tło naszego komentarza. #FFF to kolor, który się pojawi, jeśli "świetny" Imageshack nie zadziała i obrazek, do którego link podany jest później, się nie wyświetli. Zwróćmy uwagę na koniec tej linijki, nie zapomnijmy żadnego apostrofu czy nawiasu.

Padding - odstęp wewnętrzny. Zastanawiam się jak to opisać, żeby nie wprowadzić w błąd :) Nie chcę też tego nazywać marginesem, żeby nie skojarzyło się z "margin". Wyobraźmy sobie szklankę, do której wkładamy malutką kostkę lodu - pomiędzy kostką a szklanką jest duży odstęp - duży padding. Wepchnijmy teraz cytrynę do szklanki. Owoc jest większy i w naczyniu robi się ciasno. Padding wtedy jest mniejszy :)
Odstęp od wewnętrznej krawędzi *o* (eureka).

Text shadow - cień tekstu. Jeśli zaraz po tym użyjemy dwóch wartości, cień będzie ostry. Jeżeli trzech - tak jak w przykładzie - cień da efekt poświaty (efekt widać w moich komentarzach). Obok stoi kolor cienia - tutaj mamy czarny.

Pamiętajmy, że średnik dajemy dopiero na samym końcu! :)


2. Tutaj mogą się zdarzyć różne rzeczy. Zazwyczaj podświetlają się tylko komentarze autora postu, ale dzięki zmodyfikowanemu kodowi udostępniamy podświetlenie dla innych. Niestety, podświetlają się też komentarze osób, które używają tego samego nicku na naszym blogu.

 Idziemy do Panel NawigacyjnySzablonEdytuj kod HTML → wyszukujemy /body

Nad /body wklejamy to:



<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
var author1 = $('.user:contains("NICKautora")');
$(author1).closest('.comment-block')
.css('border', 'solid #000 1px')
.css('background','#FFF url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

Zmieniamy NICKautora na nasz. Kopiujemy kod i w kopii wpisujemy nick kolegi/koleżanki. Dla tego bloga wyglądałoby to tak:


 
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
var author1 = $('.user:contains("Finranthil")');
$(author1).closest('.comment-block')
.css('border', 'solid #000 1px')
.css('background','#FFF url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
var author1 = $('.user:contains("Jill")');
$(author1).closest('.comment-block')
.css('border', 'solid #000 1px')
.css('background','#FFF url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

Sposób edycji wyglądu (a raczej małą rozpiskę na ten temat) zamieściłam w punktcie pierwszym - na końcu.

Plusy:
- jeśli jest wielu autorów i czytelnicy nie mogą się połapać kto tu rządzi, to będzie dobry pomysł, - nowi autorzy, którzy nie są jeszcze znani, zwrócą na siebie większą uwagę :)  
Minus:
- jeśli trafimy na trolla, który robiąc nam na złość będzie się podpisywać naszym nickiem i wypisywać kompletne bzdury, jego komentarz też się podświetli, co może doprowadzić do mega nieprzyjemności :C



 ☼
Kochani czytelnicy - z racji wakacji życzę Wam cudownego wypoczynku i spalenia szkół w międzyczasie  ☼ Postanowiłam wybrać się na dwutygodniowy urlop - nie będę wtedy ani zaglądać na bloga, ani odpisywać na maile. Wpadnę co jakiś czas na swój prywatny blog.
Żeby nie stała się blogowa apokalipsa i aby nie posypał się spam, ustawiam komentarze na moderowane. Będzie miał na nie oko mój sługa. 

Odpiszę na te komentarze, które tu są i zmykam. Trzymajcie się :)

16 komentarzy:

  1. Tobie też życzę cudownych wakacji i udanego wypoczynku - należy Ci się:D

    Pozdrawiam!:)

    OdpowiedzUsuń
  2. mega pomocny blog, pozdrawiam !

    OdpowiedzUsuń
  3. Bardzo dziękuję za wysłuchanie mojej prośby . Serdecznie pozdrawiam i również życzę wszystkiego dobrego ;)

    OdpowiedzUsuń
  4. W instrukcji 1. w tym fragmencie:
    *script src="http://code.jquery.com/jquery-latest.js">
    brakuje / przed >. :)
    < zamieniłam na *, żeby móc dodać komentarz :D
    Dziękuję za instrukcję :)

    OdpowiedzUsuń
    Odpowiedzi
    1. O jaaa, faktycznie! Nie wiem jak to się stało, skoro gdzie indziej jest dobrze (i u mnie w kodzie też). Już poprawiam! Dziękuję za zwrócenie uwagi :D

      Usuń
  5. A ja u siebie nie znalazłam " /body ". :c

    OdpowiedzUsuń
    Odpowiedzi
    1. Ja na początku też nie ;D Chodzi o to, że musisz wpisać < /body >. Of kors, bez spacji. I nad tym będziesz miała script, nie? po "script>" wpisujesz właśnie to, co podała Firanthil. Liczę, że rozumiesz ;)

      Usuń
    2. Pokombinuję... dzięki. :3

      Usuń
    3. Oł je bejbe. Udało się. :) Dziękuję bardzo <3

      Usuń
  6. Niestety, nie znalazłam /body ....
    Mogłabyś napisać, jak mam to znaleźć?
    Nie rozumiem. :/

    OdpowiedzUsuń
    Odpowiedzi
    1. Klikasz w ramkę kodu HTML, później wpisujesz na klawiaturze kombinację CTRL+F, pojawia się ramka w której wpisujesz "/body".

      Usuń
  7. Czy wiecie może jak obniżyć wysokość paska bocznego, żeby podstrony były niżej od postu? Coś w css czy w projektowaniu? Bo nigdzie nie mogę znaleźć. Z góry dziękuję ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Haha, tyle się naszukałam wcześniej, a gdy zapytałam od razu to znalazałam, także dziękuję. Wkleję komendę, jakby kogoś jeszcze interesowało to pytanie ;) .column-right-inner {margin-top: 300px}

      Usuń
  8. A czy jest jakiś sposób na zmianę koloru czcionki tylko w komentarzach? Bo na moim blogu komentarze mają inne tło niż reszta szablonu.. ;/ Mogę liczyć na pomoc ? (Jeśli nie wytłumaczyłam tego zbyt dobrze, to to link do mojego bloga --> http://magia-slow-koneko.blogspot.com/ ) Komentarze są tak jakby w "ramce" i nie wiem jak się tego pozbyć lub zmienić ;/ Bo tekst mało widoczny jest :(

    OdpowiedzUsuń
  9. A jak dodać cień wokół ramki?

    OdpowiedzUsuń
  10. Nie wiem, czy jeszcze odpowiadasz na pytania, ale..
    (przepraszam, jeśli takie pytanie już wystąpiło)
    W jaki ,,zaczarowany" sposób zrobiłaś, iż ta kolumna na której piszesz posta ma swój wygląd, to znaczy, te paski oddzielone transparentem po lewej i prawej a u góry ślicznie ozdobione menu?
    Jeśli zrozumiesz o co mi chodzi >.<

    A drugie pytanie, (znowu przepraszam jeśli wystąpiło :C) jak przesunęłaś kolumnę na prawą stronę?
    Interesuje mnie to, gdy chciałem zrobić podobnie ;d

    Przepraszam i dziękuję z góry >.<

    OdpowiedzUsuń

szukaj