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 Nawigacyjny → Szablon → Edytuj 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 Nawigacyjny → Szablon → Edytuj 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ę :)
☼