Komentarze - emoticony

Ciąg dalszy tuningu komentarzy - dziś będzie o emotkach. [rys.1]

Edytujemy szablon więc kopia zapasowa szablony powinna być wykonana, a opcja rozszerz szablony widżetów obowiązkowo zaznaczona ;)

Na początek wyszukujemy takiego ciągu w naszym szablonie: name='comment-editor' powinniśmy zobaczyć kod odpowiadający za ramkę dodawania komentarzy. W moim przypadku wygląda on tak:

<iframe allowtransparency='true' class='Blogger-iframe-colorize Blogger-comment-from-post' frameborder='0' height='400' id='comment-editor' name='comment-editor' src='' width='760'>

tuż nad nim dodajemy poniższy kod: (ustawiamy szerokość jak w kodzie powyżej)

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width:760px; text-align: center; border: 1px solid #cccccc; padding: 0 2px 6px 2px; background: #eeeddf;'><style> .smiley {position: relative;top:4px;left:0px;margin:0px;padding:0px;} .smiley:hover {cursor: pointer;cursor: hand;}</style><center>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :)) ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' title=' :))'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków ;)) ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' title=' ;))'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków ;;) ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' title=' ;;)'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :D ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' title=' :D'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków ;) ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' title=' ;)'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :p ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' title=' :p'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :(( ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' title=' :(('/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :) ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' title=' :)'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :( ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' title=' :('/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :X ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' title=' :X'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków =(( ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' title=' =(('/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :-/ ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' title=' :-/'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :-* ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' title=' :-*'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :| ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' title=' :|'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków 8-} ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' title=' 8-}'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :)] ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' title=' :)]'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków ~x( ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' title=' ~x('/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :-t ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' title=' :-t'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków b-( ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' title=' b-('/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :-L ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' title=' :-L'/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków x( ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' title=' x('/>
<img border='0' class='smiley' onClick='javascript:alert("uzyj w tekscie komentarza znaków :-o ");' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' title=' :-o'/>
</center></div>

w sumie ten krok ma tylko zadanie estetyczne - możemy go pominąć dodając tylko sam kod scryptu JS. Zatem wyszukujemy </body> i tuz nad dodajemy następujący kod:

<script src="http://stani_c1.republika.pl/GGadget/smiley.js" type="text/javascript"/>

Zapisujemy i gotowe.

Przykłady - w tym blogu nie będzie tej opcji więc działanie można zobaczyć na screenach lub np. tutaj...

Aktualizacja:
W przypadku gdy szablon automatycznie kasuje nam link do scriptu dodanego przed tagiem </body> (można to sprawdzić lukając w źródło strony) <script src="http://stani_c1.republika.pl/GGadget/smiley.js" type="text/javascript"> </script> dodajemy w gadzecie HTML/JavaScript i umieszczamy gdzieś jak najniżej na stronie np w stopce układu szablonu 10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110