블로그 팁 - 이올린 추천 버튼 제거하기


티스토리 블로그의 가장 큰 장점은 아마도 스킨을 편집 할 수 있는 것이 아닌가 생각됩니다.
마음에 안드는 부분은 과감히 정리하고 내가 넣고 싶은 기능을 넣을 수 있는 것이 바로 티스토리의 매력인데요. 이번엔 오랫동안 마음에 안들었던 "이올린 추천 버튼"을 제거해 보았습니다.
( 이올린은 아마 메타 블로그 사이트 같은데 이용해보지는 않았습니다. ㅎ )



예전의 제 블로그를 보시면 추천메뉴와 카테고리 더 보기 사이에 "이올린에 북마크하기" 와 "이올린에 추천하기" 라는 기능이 있던것을 볼 수 있습니다. 이올린이라고 하는 사이트로 제 글을 보내는 플러그인을 사용해서 이런 버튼이 생겼었는데요. 미관상 별로 좋아 보이지 않았고, 스킨을 편집하다보니 저 위치에 있는게 스킨 편집을 방해하길래 없에 보려고 했습니다.



이올린에 글보내기 플러그인을 제거해도 그 버튼은 없어지지 않더라구요. 아마도 이미 보내진 글에 대해서는 버튼이 사라지지 않거나 아니면 그 버튼을 제거 할 수 있는 플러그인이 사용 종료 되었거나, 둘 중 하나로 생각이 듭니다.


이올린 추천 버튼 없에기

그래서 이올린 추천 버튼을 없에기 위해서는 직접 스킨 편집을 해야합니다.
관리자모드에서 [스킨] -> [HTML/CSS 편집] 메뉴로 들어가셔서 "style.css" 부분에 편집을 하셔야 합니다.

[사진 : CSS 편집 ]

바로 이 부분이죠..


HTML/CSS 편집 기능에는 두 가지 편집창이 있는데, 위 쪽은 HTML 코드를 수정하는 부분이고 아래부분은 스타일 시트인 CSS 파일을 편집 할 수 있는 부분입니다. HTML 코드 부분에는 아무리 찾아봐도 이올린 버튼을 수정할 수 있는 부분이 없더라구요. 그래서 할 수 없이 CSS에서 수정을 해야 합니다.


다음 코드를 style.css 편집 부분에 붙여 넣습니다.

/* 이 올림 북마크 버튼 제거하기 */
.EolinBmVote { display : none }

미리보기나 저장을 눌러서 결과를 보시면



이올린 추천 버튼과 북마크 버튼이 사라진 것을 볼 수있습니다. 한결 깔끔해 졌네요.


PS. 사실 이 방법은 실제로 이올린 버튼을 없엔 것이 아니라 이올린 버튼을 웹 브라우저 화면에 표시하지 않겠다는 CSS 구문을 추가한 것뿐입니다. 웹 브라우저에 따라서는 display:none 을 걸어 놨을 때, 출력은 안되지만 1px*1px의 공간을 잡아 먹고 있는 경우도 있었는데요. 아예 없앨 수 있는 방법을 찾고 있습니다 ㅜㅜ 아시면 댓글에 남겨주세요.


티스토리 초보팁 20편 - HTML/CSS 편집을 이용한 블로그 스킨 수정



이전에 티스토리를 '가입형 블로그'와 '설치형 블로그'의 중간 정도의 성격을 갖는 블로그 플랫폼이라고 언급한 적이 있었습니다. 가입형 블로그의 쉽고 빠른 블로그 글의 배포와 쉬운 블로그 편집의 특성과 설치형 블로그의 강력한 블로그 편집기능의 특성을 동시에 가지고 있습니다.

이게 무슨말이냐하면, 티스토리에 초대장을 받고 가입만하면 누구든지 티스토리 블로그를 통해서 글을 발행할 수 있습니다. 게다가 티스토리가 제공하는 관리자 페이지를 이용해서 쉽게 티스토리의 블로그 세팅을 할 수 있습니다. ( 지금까지 우리가 배워 웠던 기능들을 사용할 수 있다는 말입니다. ) 이런 특징은 네이버 블로그나 다음 블로그 같은 가입형 블로그의 특징입니다.

이 뿐만아니라 티스토리는 직접 HTML 코드를 조작해서 블로그를 꾸밀 수 있는 보다 강력한 블로그 편집 기능을 제공하여 설치형 블로그의 특징도 가지고 있습니다. 이번 시간에는 바로 이런 블로그의 HTML을 조작 할 수 있는 설정 페이지에 대해서 알아 볼 예정입니다.


내 블로그의 HTML 코드를 수정해 보자.

  티스토리에서 HTML 편집을 제공하기 때문에 구글의 애드센스를 이용하여 수익도 얻을 수 있고, 다른 블로그 플랫폼보다 수익 창출에 훨씬 유리한 이점을 가지고 있어서 프로 블로거 분들이 많은 편입니다. 실제로 블로그를 이용하여 어마어마한 수익을 얻고 계신분들도 많이 있죠. ( '머니야머니야'님이라든지, '못된준코'님이라든지, 'Kay'님이라든지.. 많은 수익을 내고 계신 분들이 꽤나 있습니다. )


반면에 가입형 블로그인 네이버 블로그같은 경우에는 직접 HTML을 편집 할 수 없기 때문에 애드센스를 붙이기가 힘들죠. ( 그렇기 때문에 네이버 블로그의 많은 블로거 분들이 티스토리로 이주하기를 희망하고 있었습니다. 저도 네이버 블로그에서 활동하다가 접고 티스토리로 넘어 온 케이스구요 )

물론 네이버도 '애드 포스트'라는 수익 모델을 제시하고 있지만 티스토리의 HTML 편집 기능은 블로거에게 블로그 편집에의 자율성을 주기 때문에 여전히 매력적인 기능입니다. ( 심지어 블로그에 팝업 광고를 할 수도 있고, 악성코드 배포도 가능한 걸로 알고 있습니다. 물론 그런 용도로 사용하시는 분들은 없겠지만요. )


아무튼 티스토리의 가장 큰 장점이자 매력인 HTML 편집에 대해서 알아보도록 하겠습니다. 
관리자 메뉴에서 '스킨'->'HTML/CSS 편집'을 선택합니다.


뭔가 엄청난 것들이 나오죠?
여러분 블로그의 스킨이 HTML 형식으로 보여지는 것입니다. 이곳의 HTML 파일을 수정하면 여러분의 블로그에 수정된 사항이 반영이 되고, 이곳의 HTML을 수정함으로써 여러분 블로그를 여러분 나름대로 꾸밀 수 있습니다. 더 자세한 내용을 살펴 보자면,

'HTML/CSS 편집' 탭에는 HTML 소스와 CSS 소스를 편집할 수 있습니다. 'skin.html' 이라고 나오는 곳이 여러분 블로그의 HTML 소스가 나오는 부분이구요. 'style.css' 부분에 나오는 내용은 여러분 블로그의 스타일 시트 파일이 나오는 곳입니다.

간략하게 소개를 해드리자면, HTML 은 여러분 블로그의 구조를 나타내구요.  CSS 는 HTML 태그와 독립적으로 여러분 블로그의 스타일을 나타냅니다.

HTML은 집의 기둥과 벽 같은 커다란 구조를 의미하고 CSS는 집에 걸어 놓는 액자나 창문, 벽지 정도의 꾸미는 기능이 되겠습니다. 더 자세한 내용은 나중에 설명해 드리겠습니다.


'파일 업로드'여러분 블로그를 꾸밀 때 필요한 여러가지 소스들을 업로드 하는 곳입니다. 예를 들면, 새로 만든 배너를 블로그 상단에 게제하고 싶은데 그러려면 일단 서버에 업로드를 하고 그 주소를 가져와서 img 태그를 이용해 붙여야겠지요? 이 때 서버 역할을 할 수 있는 부분이 바로 이부분입니다. 이곳에 사진을 업로드 하고 그 사진을 이용해서 스킨을 편집할 수 있습니다.

사진 파일 뿐만아니라 플래시 파일이나 음악 파일도 업로드가 되는 것으로 보입니다. 뭐 플래시 게임 같은거 제작해서 이곳에 올린다음 배포를 해도 될 것 같네요..

이 곳을 이용해서 여러분의 블로그를 좀 더 잘 꾸밀 수 있습니다.


애드센스에 가입을 해서 블로그에 광고를 게재할 때나, 새로운 위젯을 블로그에 달고 싶을 때, 아니면 티스토리에서 제공하지 않는 기능을 구현해보고 싶을 때, 이 페이지를 이용하게 됩니다.

이제 티스토리 초보는 탈출 하셨으니 더 많은 것들을 배워 보도록 하세요~ ^^



▲ 이전 글 : 티스토리 초보팁 19편 -CCL을 통한 저작권 표시

+ Recent posts