방문자도 개성있는 댓글을 남길 수 있다! (BBCode 삽입하기)

인터넷이라는 공간은 개성을 드러낼만한 방편이 적어 참으로 획일적이다.
그 속에서 자신을 드러내고 싶은 사람들은 자기만의 공간을 만든다.
이제는 단순한 글쓰기에서 벗어나 에디터 기능을 이용해
글씨체를 바꾸고 사진을 첨부하고 동영상을 넣어 보기도 한다.

그렇지만 방문자는 그 것들을 보고 즐길 뿐이다.
주인의 개성은 존중되지만, 손님의 개성은 무시되는 것이다.
그저 그렇게 나그네처럼..

지금까지 이런 인터넷에 지쳐있던 사람에게 희소식이 있다.
이젠 방문자도 블로그에서 글자색을 바꾸고 그림과 동영상을 삽입해 보자.
이를 가능케 해주는 것은 BBCode다.


자세한 방법은 여기를 참고하자.

겉으로 보기에는 달라진 것이 없지만,
방문자도 명령어를 사용해서 볼트체와 이탤릭체의 사용, 그림 및 동영상 삽입이 가능해 진다.

BBCode를 삽입하기 위해 스킨->직접올리기를 사용하는데,
새 관리 페이지에서만 업로드가 가능하였다.
기존의 관리 페이지에서 업로드를 아무리 눌러도 반응이 없다면
새 관리 페이지를 이용해야 한다.

좀 더 편하게 BBCode를 사용하고 싶다면 여기를 참고하자.

BBCode 삽입 도우미까지 완성하면 블로그의 댓글과 방명록 글쓰기가
포털사이트의 에디터 기능과 비슷해진다.
아이콘을 취향에 맞게 조금만 수정해 주면
이젠 방문자에게도 열린 블로그가 될 수 있을 것이다.

BBCode를 쉽게 삽입할 수 있도록 아이콘을 배치하였다.

위의 아이콘은 포토샵으로 직접 제작하였다.(이모티콘 제외)
혹 이 아이콘을 사용하려면 위의 과정을 모두 마친 후에 아래의 코드로 수정하면 된다.

 

<div class="emoticonborder">
<div class="emoticonspace"><img src="./images/bbcode-left.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('','[b]','[/b]');return false;" title="진하게" class="rollover">
<img class="rollover" src="./images/bbcode-01.gif" align="texttop" class="rollover">
<img src="./images/bbcode-01b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('','[i]','[/i]');return false;" title="기울임" class="rollover">
<img class="rollover" src="./images/bbcode-02.gif" align="texttop" class="rollover">
<img src="./images/bbcode-02b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('','[u]','[/u]');return false;" title="밑줄" class="rollover">
<img class="rollover" src="./images/bbcode-03.gif" align="texttop" class="rollover">
<img src="./images/bbcode-03b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('','[color=white]','[/color]');return false;" title="글자색" class="rollover">
<img class="rollover" src="./images/bbcode-04.gif" align="texttop" class="rollover">
<img src="./images/bbcode-04b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('','[quote]','[/quote]');return false;" title="인용" class="rollover">
<img class="rollover" src="./images/bbcode-05.gif" align="texttop" class="rollover">
<img src="./images/bbcode-05b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('','[img]','[/img]');return false;" title="그림 넣기" class="rollover">
<img class="rollover" src="./images/bbcode-06.gif" align="texttop" class="rollover">
<img src="./images/bbcode-06b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('','[ur=http://]','[/ur]');return false;" title="하이퍼링크" class="rollover">
<img class="rollover" src="./images/bbcode-07.gif" align="texttop" class="rollover">
<img src="./images/bbcode-07b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('','[embed=주소 폭 넓이]','[/img]');return false;" title="영상 넣기" class="rollover">
<img class="rollover" src="./images/bbcode-08.gif" align="texttop" class="rollover">
<img src="./images/bbcode-08b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-right.gif"></div>
<div class="emoticonspace"><img src="./images/bbcode-left.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('', '', ':)');return false;" title=":)" class="rollover">
<img class="rollover" src="./images/bbcode-09.gif">
<img src="./images/bbcode-09b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('', '', ';)');return false;" title=";)" class="rollover">
<img class="rollover" src="./images/bbcode-10.gif">
<img src="./images/bbcode-10b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('', '', ':P');return false;" title=":P" class="rollover">
<img class="rollover" src="./images/bbcode-11.gif">
<img src="./images/bbcode-11b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('', '', '8D');return false;" title="8D" class="rollover">
<img class="rollover" src="./images/bbcode-12.gif">
<img src="./images/bbcode-12b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('', '', ':(');return false;" title=":(" class="rollover">
<img class="rollover" src="./images/bbcode-13.gif">
<img src="./images/bbcode-13b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('', '', '--;');return false;" title="--;" class="rollover">
<img class="rollover" src="./images/bbcode-14.gif">
<img src="./images/bbcode-14b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('', '', ':D');return false;" title=":D" class="rollover">
<img class="rollover" src="./images/bbcode-15.gif">
<img src="./images/bbcode-15b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('', '', ':O');return false;" title=":O" class="rollover">
<img class="rollover" src="./images/bbcode-16.gif">
<img src="./images/bbcode-16b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('', '', ':x');return false;" title=":x" class="rollover">
<img class="rollover" src="./images/bbcode-17.gif">
<img src="./images/bbcode-17b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-right.gif"></div>
<div class="emoticonusage">
<a href="#" onClick="bbcodeintro();return false;" title="BBCode 사용법" class="rollover">
<strong>BBCode 사용법</strong></a></span></div>
</div>

<div class="emoticonborder">
<div class="emoticonspace"><img src="./images/bbcode-left.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_808','[b]','[/b]');return false;" title="진하게" class="rollover">
<img class="rollover" src="./images/bbcode-01.gif" align="texttop" class="rollover">
<img src="./images/bbcode-01b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_808','[i]','[/i]');return false;" title="기울임" class="rollover">
<img class="rollover" src="./images/bbcode-02.gif" align="texttop" class="rollover">
<img src="./images/bbcode-02b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_808','[u]','[/u]');return false;" title="밑줄" class="rollover">
<img class="rollover" src="./images/bbcode-03.gif" align="texttop" class="rollover">
<img src="./images/bbcode-03b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_808','[color=white]','[/color]');return false;" title="글자색" class="rollover">
<img class="rollover" src="./images/bbcode-04.gif" align="texttop" class="rollover">
<img src="./images/bbcode-04b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_808','[quote]','[/quote]');return false;" title="인용" class="rollover">
<img class="rollover" src="./images/bbcode-05.gif" align="texttop" class="rollover">
<img src="./images/bbcode-05b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_808','[img]','[/img]');return false;" title="그림 넣기" class="rollover">
<img class="rollover" src="./images/bbcode-06.gif" align="texttop" class="rollover">
<img src="./images/bbcode-06b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_808','[ur=http://]','[/ur]');return false;" title="하이퍼링크" class="rollover">
<img class="rollover" src="./images/bbcode-07.gif" align="texttop" class="rollover">
<img src="./images/bbcode-07b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onclick="insertAtCursor('comment_808','[embed=주소 폭 넓이]','[/img]');return false;" title="영상 넣기" class="rollover">
<img class="rollover" src="./images/bbcode-08.gif" align="texttop" class="rollover">
<img src="./images/bbcode-08b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-right.gif"></div>
<div class="emoticonspace"><img src="./images/bbcode-left.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_808', '', ':)');return false;" title=":)" class="rollover">
<img class="rollover" src="./images/bbcode-09.gif">
<img src="./images/bbcode-09b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_808', '', ';)');return false;" title=";)" class="rollover">
<img class="rollover" src="./images/bbcode-10.gif">
<img src="./images/bbcode-10b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_808', '', ':P');return false;" title=":P" class="rollover">
<img class="rollover" src="./images/bbcode-11.gif">
<img src="./images/bbcode-11b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_808', '', '8D');return false;" title="8D" class="rollover">
<img class="rollover" src="./images/bbcode-12.gif">
<img src="./images/bbcode-12b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_808', '', ':(');return false;" title=":(" class="rollover">
<img class="rollover" src="./images/bbcode-13.gif">
<img src="./images/bbcode-13b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_808', '', '--;');return false;" title="--;" class="rollover">
<img class="rollover" src="./images/bbcode-14.gif">
<img src="./images/bbcode-14b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_808', '', ':D');return false;" title=":D" class="rollover">
<img class="rollover" src="./images/bbcode-15.gif">
<img src="./images/bbcode-15b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_808', '', ':O');return false;" title=":O" class="rollover">
<img class="rollover" src="./images/bbcode-16.gif">
<img src="./images/bbcode-16b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-border.gif"></div>
<div class="emoticons">
<a href="#" onClick="insertAtCursor('comment_808', '', ':x');return false;" title=":x" class="rollover">
<img class="rollover" src="./images/bbcode-17.gif">
<img src="./images/bbcode-17b.gif"></a></div>
<div class="emoticonspace"><img src="./images/bbcode-right.gif"></div>
<div class="emoticonusage">
<a href="#" onClick="bbcodeintro();return false;" title="BBCode 사용법" class="rollover">
<strong>BBCode 사용법</strong></a></span></div>
</div>

invalid-file

/* BBCode 도우미 버튼들 */
.emoticonborder { border-style: solid; border-width: 0; border-color: #cbcbcb; padding: 0; margin: 0 0 7px 0; height: 25px;}
.emoticons { cursor:pointer; float: left; margin:0 0 0 0; }
.emoticonspace { float: left; margin-right:0px; }
.emoticonusage { cursor:pointer; float: right; }
a.rollover img { border-width:0px; display:block; }
a.rollover img.rollover { display:none; }
a.rollover:hover { position:relative; background-color:transparent !important;}
a.rollover:hover img { display:none; }
a.rollover:hover img.rollover { display:block; }

invalid-file

그 외 이미지 자료(관리자->스킨->직접올리기)

invalid-file