2014. 5. 24. 23:47

 

 

후티스토리입니다.

 

티스토리 태그목록 화면을 움직이는 태그목록이 되도록 바꾸는 방법을 알아보겠습니다.

 

다른 분들의 블로그를 방문해보니 거의 움직이는 태그가 많군요. 폭풍 검색을 통해 적용해봤습니다.

 

 

왼쪽이 기존의 태그 모습이며 오른쪽이 코드 적용 후의 모습입니다. 많이들 보셨죠.

 

 

 

 

                        

     [변경 전]                                                             [변경 후]

 

 

 

첨부된 파일을 다운받은 후 압축을 푼 후

 

HTML/CSS 편집에서 파일업로드 클릭 후 두 개의 파일을 올려줍니다.

 

 

태그 움직이기 파일받기 -> 태그움직이기.zip

 

 

 

 

 

 

 

 

 

 

▶  첨부된 태그움직이기 html 소스 파일을 복사하여

 

HTML/CSS 편집의 skin.html에서 태그목록을 검색을 통하여 찾은 후

 

<ul> 복사한 태그움직이기 코드 붙여넣기 </ul> 사이에 붙여넣습니다.

 

 

아래의 소스에서 #fffffff 부분은 배경색이구요, tcolor 부분은 글자색,

 

tspeed 부분은 태그의 움직임 속도입니다. 당연히 숫자가 높으면 좀 더 빨리.

 

후티는 150으로 설정했습니다.

 

 

태그 움직이기 소스 받기 -> 태그움직이기소스코드.txt

 

 

 

<ul> ~ </ul>사이에 기존에 있던 내용을 지워도 제 티스토리에서는 되네요.

 

혹 모르니 적용 전 스킨 저장은 필수..

 

 

 

 

 

 

 

 

 

 

 

이렇게 간단히 동적인 태그목록을 만들 수 있습니다.

 

태그목록 자체가 어디있는 지 모르신다구요?

 

꾸미기 - 사이드바에서 태그목록 모듈을 추가한 후 위치를 조정해주면 됩니다.

 

 

 

 

 

 

 

 

 

 

 

한 가지 팁을 더하자면 보여지는 태그 목록의 갯수를 조절할 수 있는데,

 

화면 설정 -> 화면 출력에서 사이드바에 보면 태그 부분이 있습니다.

 

보여지는 갯수 및 출력 방법에 대해서 정할 수 있습니다.

 

 

 

 

 

 

 

 

 

원래의 정적인 태그목록과 동적인 태그목록 중 어떤 것이 나은 건지는 모르지만

 

후티 개인적으로는 움직이는 태그 목록이 좋아보입니다.

 

 

후티와 같이 태그목록 움직이게 하는 방법을 알아보았습니다.

Posted by 후티
2014. 5. 14. 00:49

 

 

후티스토리입니다.

 

앞서 티스토리 사이드바에 애드센스 광고 삽입하는 방법을 알아보았습니다.

 

이번에는 애드센스 검색 광고를 사이드바에 삽입하는 방법을 알아보겠습니다.

 

 

 

참고로 구글 애드센스에서의 광고 정책을 보고 넘어가도록 하죠.

 

콘텐츠용 3개, 링크 3개, 검색용 2개를 배치하도록 되어있는 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

구글 맟춤검색창을 달기 위해선 검색 광고를 먼저 생성해야 됩니다.

 

내광고 - 검색 - 맟춤검색 엔진- 새 맞춤검색 엔진 클릭하여 아래의 화면에서 설정을 합니다.

 

 

검색 범위에서 선택한 사이트만에 체크 시 검색 할 사이트 주소를 입력하면 됩니다.

 

예로 티스토리 블로그 내에서 검색할려면 본인의 티스토리 주소를 입력하면 되겠습니다.

 

후티는 전체 웹을 선택했구요, 아래의 사용자설정 채널에서 검색결과 화면을 이어서 보겠습니다.

 

 

 

 

 

 

 

 

 

 

사용자설정 채널은 앞서 포스팅한 맞춤채널 설정으로 나중에 해도 됩니다.

 

검색창 스타일을 본인의 사이드바에 맞게 정하시구요,

 

텍스트 상자 길이는 19로 설정했습니다.

 

제 블로그보다 사이드바 폭이 넓으면 더 줘도 됩니다.

 

 

 

 

 

 

 

 

 

광고 스타일은 검색 결과화면에서도 정해진 스타일을 그대로 유지합니다.

 

검색결과에서는 결과 화면을 어떻게 처리할 지에 대한 설정입니다.

 

티스토리 블로그 자체 페이지에서 검색결과가 나오도록 설정했습니다.

 

이럴 경우 URL에 본인 블로그 주소 뒤에 /search 를 붙입니다.

 

후티스토리의 경우 http://whoti.tistory.com/search 가 되겠습니다.

 

 

 

 

 

 

 

 

 

 

자, 이제 설정을 다 했으니 저장 및 코드 생성을 클릭하여 코드를 확인합니다.

 

두 개의 코드가 생성이 되는데

 

검색창 코드는 관리 화면에서 사이드바에 삽입할 것이구요,

 

검색결과 코드는 스킨에 삽입할 것입니다.

 

 

 

 

 

 

 

 

 

 

각 코드를 복사하여 알맞은 곳에 넣어보도록 하겠습니다.

 

먼저 티스토리 사이드바에 검색창 코드를 삽입하여 검색창이 나타나도록 하겠습니다.

 

앞선 포스팅에서 이미 했던 부분이 되겠습니다.

 

관리 화면 - 꾸미기 - 사이드바 - HTML 배너출력 - 편집을 눌러 광고코드를 붙여넣은 뒤 확인 후 저장하면 됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

티스토리 사이드바에 검색창을 달았으니, 검색 시 검색 결과가 설정한 대로 잘 나오도록

 

하나 남은 코드를 스킨에 삽입하면 되겠습니다.

 

 

관리 화면 - HTML/CSS 편집 - skin.html에서

 

s_list를 Ctrl + F(검색)키를 이용하여 찾아봅니다.

 

 

티스토리에서 자체적으로 제공하는 검색기능으로

 

다른 코드 삭제 없이 그대로 애드센스 코드를 붙여넣으면 됩니다.

 

 

왜냐하면 나중에 티스토리 검색기능을 이용 시 추가한 애드센스 검색 코드만 삭제하면 되니깐요. 

 

 

 

 

 

 

 

 

 

 

설정 후 후티스토리의 사이드바에 구글 애드센스 맞춤검색광고가 삽입된 모습입니다.

 

 

 

 

 

 

  * 애드센스 검색광고는 검색 시가 아니라

    

    검색 결과 화면에서 광고 클릭 시 수익이 Up...

 

 

 

 

 

 

 

 

 

  구글 맞춤검색창이 아래의 카테고리 부분과

 

  너무 딱 붙어 약간의 수정이 필요하겠군요.

 

  그런대로 만족...

 

 

   검색해보니 구글검색결과와 똑같이 나오는군요.

 

   만약 검색범위를 내블로그로 한정해서 설정했다면

 

   내 블로그 글들이 검색이 되겠죠.



 

 

티스토리 사이드바에 구글 애드센스 맞춤검색광고달기를

 

후티와 같이 알아보았습니다.

 

 

아직은 어떤 게 수익에 조금이라도 도움이 되는지,

 

잘 알지 못하는 초보블로거이지만,

 

용돈 이상의 수익을 바란다면 시간과 노력을 끊임없이 투자해야 되는 것이 정답인 듯 합니다.

 

물론, 효율성의 문제도 있겠지만. 콘텐츠의 질도..

 

 

하여튼 이번 한 주는 애드센스 광고에 대해 이것 저것 공부해보고 있는 후티입니다.

Posted by 후티
2014. 5. 13. 01:38

 

 

후티스토리입니다.

 

현재 애드센스 광고를 상단에 두 개, 하단에 한 개를 달고 있습니다.

 

테스트를 위하여 하단 광고를 삭제하고 블로그 사이드바에 애드센스 광고를 달아볼까 합니다.

 

일 방문자수가 많지 않은 상태이지만 공부 겸 해보도록 하겠습니다.

 

일종의 삽질인셈이죠..ㅎ

 

 

우선 구글 애드센스 계정에 로그인하셔야겠죠.

 

그런 다음 내 광고 - 광고 단위 - 새 광고 단위를 클릭합니다.

 

흔히 클릭률이 좋다는 160*600 수평형 스카이스크래퍼를 선택했습니다.

 

래의 맞춤 채널은 나중에 설정해도 되고 안해도 됩니다.

 

 

 

 

 

 

 

 

 

저장 후 코드를 클릭 후 복사를 합니다.

 

 

 

 

 

 

 

 

복사했으니 붙여넣을 곳을 찾아야 되겠습니다.

 

본문 상. 하단에 애드센스를 광고를 삽입하기 위해서는 HTML/CSS 에서 설정을 했지만,

 

사이드바에는 관리 화면에서 간단히 광고를 삽입할 수 있습니다.

 

 

티스토리 관리 화면 - 꾸미기 아래 사이드바 - HTML 배너출력 - 편집을 클릭하여

 

HTML 소스 부분에 생성한 사이드바 광고 코드를 붙여넣기 한 후 확인하면 됩니다.

 

 

애드센스 광고 배너가 왼쪽에 치우치지 않고 중앙에 정렬하기 위해

 

<div align="middle"> 애드센스 광고코드 삽입 </div>

 

위의 코드를 추가하여 수정합니다.

 

후티스토리이 사이드바는 정렬이 안되네요..쩝 보여지듯이 왼쪽에 맞춰져 있군요.

 

 

이 후 배너가 보여질 알맞은 위치로 드래그하여 정렬을 해준 후 미리보기를 통하여

 

제대로 적용이 된다면 저장하면 됩니다.

 

 

 

 

 

 

 

 

 

 

 

위와 같은 방법으로 쉽게 티스토리 사이드바에 구글 애드센스 광고를 달 수 있습니다.

 

이젠 한 동안 지켜보는 일만 남았군요.

 

 

참. 꾸미기 - 사이드바에서 HTML 배너출력이 보이지 않으면

 

바로 아래의 플러그인 설정 - 관리 및 통계 분류에 있는 배너출력이라는 플러그인을 사용하도록 체크해야 됩니다.

 

 

 

후티와 같이 티스토리 블로그의 사이드바에 애드센스 광고 삽입하는 방법을 알아보았습니다.

Posted by 후티