달력

122024  이전 다음

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
TIP 2016. 9. 27. 11:20

이번에는 나의 티스토리를 네이버에서 검색이 가능하게 하는 방법을 알아보겠습니다


사실 그냥 둬도 언젠가 네이버 로봇이 티스토리에 놀러와서 글을 긁어가겠지만


말그대로 "언젠가"라서

빨리 티스토리를 네이버 블로그카테고리에 보이도록 하기위해서는


네이버 웹마스터도구를 이용해서

본인의 티스토리를 등록후 손 좀 봐줘야 합니다 


줌/다음에서의 검색등록방법과는 다르게

조금 더 복잡합니다만


복잡한만큼


네이버에서 유입되는 방문자들은 많다는거

오래걸릴 필요도없이 이 등록후 2일정도있으면

네이버에서 검색후 첫페이지에 잘 보입니다ㅋ


이렇게 네이버에 등록을 해두시면

네이버에서 들어오는분들이 거의 85~90%정도를 차지하게 됩니다


역시 한국은 네이버


티스토리나 워드프레스 혹은 기타 개인 홈페이지를 이용하시는분이라면

 네이버 검색에 잘나오게 하는 방법

무조건 해야만하는

네이버 웹마스터도구의 사용방법을 알아보겠습니다


네이버 블로그 사용자분들이라면 안하셔도 됩니다

네이버는 자동으로 긁어가니까요







먼저


http://webmastertool.naver.com/



위의 링크로 들어가주세요


네이버웹마스터도구 홈페이지입니다.





네이버 웹마스터도구의 첫화면 입니다


회원가입부터 해주세요

그리고 로그인을 해주시면






이렇게 연동 사이트/앱/채널 목록이나오며

처음 사용하시는 분들이라면 사이트에 아무것도 안보입니다

밑에 녹색버튼인


사이트 추가 + 를 눌러주세요





사이트 정보 입력 창입니다

잘 읽어보시고요

프로토콜 선택부분에서

http:// 단추버튼을 누르고


그아래에 본인의 티스토리 혹은 홈페이지의 주소를 넣고 확인을 눌러줍니다






다음에는 이 티스토리가 본인의 티스토리인지 확인하는 소유 확인 작업입니다


HTML태그 단추버튼을 눌러주시면


그아래에

[메타태그] : <meta~~~~~~~~/> 라고 녹색 부분이있는데


이 녹색부분을 드래그해서 복사해주신후에

인터넷 새 창을 켜시고


본인의 티스토리의 관리창에 들어가주세요







꾸미기 카테고리 아래의

HTML/CSS 편집을 눌러주세요







그러면 위와같이 샬라샬라 나오는데 ...


그냥 간단히 <head> 와 </head> 사이에


위에서 <meta~~~>복사했던걸 붙여넣기 해주세요


그리고 저장을 꼭 ! 눌러주세요






그리고 다시 웹마스터 도구가 열려있는 인터넷창으로 돌아와서 보안문자를

입력하시고 확인을 눌러주시면 위와같은 작은 창이 뜹니다

본인 소유 확인이 완료되었습니다라고 뜨며


검색노출은 보장하지 않습니다라고 뜹니다


(상업적이지 않으면 거의 뜹니다)







아직 끝난게 아닙니다 ㅠㅠ

이제는 네이버에서 나의 티스토리의 글을 잘 퍼갈 수 있도록 작업을 해줘야합니다








연동 사이트/앱/채널 목록의 사이트 카테고리에서


본인의 등록한 티스토리 주소를 클릭해줍니다







이제 위와같은 창이 나오는데 웹마스터도구 관리창입니다

일단 이 창을 켜두시고 다시 티스토리 블로그 관리창을 켜줍니다






관리창의 글관리 -> 글설정에서


공개정책 RSS부분을


전체공개 단추버튼을 클릭해주시고


옆에 개수를 정할 수 있는데

다퍼가라고 50개로 갱신을 해주시고

아래 저장을 눌러줍니다


그리고 다시 네이버 웹마스터 도구 창으로 돌아와줍니다








요청 카테고리에서


RSS 제출을 선택해주시고


RSS 제출 큰 글씨아래에



본인의 티스토리 블로그 주소뒤에 /RSS를 넣어주시고 확인버튼을 눌러주세요


그러면 등록된 RSS아래에


제가 해둔것처럼 RSS가 등록된것을 확인하실 수 있습니다


RSS URL 등록은 하나만 등록가능해서 추가할 수 없어요


여기까지 네이버 웹마스터도구 RSS 등록하는 방법이였습니다


이제 거의 다왔습니다


이제 남은건 끝판왕...





마지막으로 좀 더 잘 퍼갈수있도록

사이트맵을 제출하는게 남았습니다


살짝 복잡해보일 수 있으나


스크린샷대로 따라와 주시면 별거 없습니다



요청 카테고리 아래의 사이트맵 제출을 눌러주세요





일단 저는 이렇게 등록을 해두었습니다


그러면 사이트맵은 어떻게 만드느냐?



http://www.xml-sitemaps.com/


위의 링크에 들어가서 사이트 맵을 만들 수 있습니다

링크를 눌러주세요





그러면 첫 화면 살짝아래에 이렇게 등록 하는곳이 있는데


첫번째 빈칸에는 본인의 티스토리 주소를 입력해주세요


그리고 Always를 선택


Last modification의 3번째 단추 use this date/time 을 선택해주시고


Priority는


Automatically Calculated Priority 단추를 선택해 주세요


그리고 START 

네모 박스를 눌러주세요








티스토리 사이트맵을 만드는 중입니다


빠르면 5분 늦으면 8분

티스토리 상태에 따라 다르긴하나 

저는 이정도 시간이 소요되었습니다



잠시 다른일을 하셔도 좋습니다


단 이 창은 꼭 켜두셔야 하고요





사이트맵 만드는 작업이 끝났습니다


다운로드 부분에서

sitemap.xml이 보일텐데 다운받아 주세요

필요한건 이것뿐입니다


그리고 이 창을 닫아주시고


다시 티스토리에 들어와서 글쓰기를 합니다






파일을 눌러주시고 방금 다운받은 sitemap.xml을 업로드하고 등록을 해줍니다


그리고 이 글을 발행하지 마시고


미리보기 버튼을 클릭해주세요


그냥 발행하셔도 되는데 글삭해야해서

그냥 미리보기로만 해도 문제없습니다




이렇게 미리보기 창에서 사이트맵 파일이 업로드되어서 보이는데

파일을 마우스 우클릭하셔서 링크 주소 복사를 눌러줍니다

(인터넷 브라우저 크롬 기준)



다시 네이버 웹마스터도구 사이트맵으로 돌아와서


주소입력창에 붙여 넣기를 해줍니다


단 /attach~~~~이부분이 필요한거니

이 앞부분인 본인 블로그 주소 부분은 삭제해주세요 

위에 올려둔 네이버 웹마스터 사이트맵 스크린샷보면 본인 티스토리 url이 적혀있으니까요

잘 붙여넣고 지우고 확인을 해주시면됩니다


사이트맵은 단 1개만 제출됩니다

RSS처럼요


이렇게 RSS와 사이트맵을 제출했는데


잘 등록되었는지 마지막으로 체크를 해보아야 합니다 







현황 카테고리의 사이트 최적화를 눌러주세요


들어가보면 이렇게 잘 등록되어있는것을 확인하실 수 있습니다


저는 이렇게 모두 체크버튼으로 잘적용된것을 확인 할 수 있습니다


모바일 사용성은 본인의 블로그 스킨 모바일 스킨 상황에 따라 다른거고


방금 우리가 등록한 사이트맵과 RSS가 잘 등록되었는가가 중요합니다


이 부분이 모두 체크되어있다면 성공입니다





또 한가지 팁


본인이 티스토리에다가 쓴 글이 빨리 네이버 검색 로봇이 와서 긁어가서

네이버에 빨리 보이게 하고싶다 하면




요청 카테고리의


웹 페이지 수집에서 본인이 올린글의 주소를 적고 확인 버튼을 눌러주시면 됩니다~

하루에 최대 50번까지 가능하며


본인 이 삭제한 글을 검색 제외 시키고 싶다하면

웹 페이지 검색 제외에서도

똑같이 하시면 됩니다


이 또한 일일 제한 50개입니다





여기까지 티스토리를 네이버 웹마스터도구를 이용해 네이버에 검색시키는 방법과

RSS 그리고 사이트맵 등록방법까지 알아보았습니다


별거 없죠?


전혀 어렵지 않습니다 복잡한것도 없고


이렇게 해서 내가 쓴 글을 네이버에 보이게 하다보면

네이버 블로그 이용자들보다 

내 글이 상위에 있을때가 많고 내 티스토리가 네이버 블로그 검색 첫페이지에 있으면

보람도 느끼고 기분도 좋네요 


예전에는 네이버가 티스토리 블로그를 차별했다하던데

지금은 이렇게 검색 순위 싸움 심한건 운이고...

다른 경우는 잘 보이다보니 차별은 없어진거 같습니다 


모두 티스토리를 네이버 웹마스터 도구를 이용해 네이버에서 보이도록 하세요


도움이 되셨다면 아래 ♥ 버튼을 눌러주세요


감사합니다 


출처 : http://usogi.tistory.com/95

Posted by 당구치는 개발자
|
TIP 2016. 9. 27. 10:22

티스토리 블로그 배경에 눈이 내리도록 하는 자바스크립트 효과에 대해 알려드리고자 합니다.


일단 눈이 내리도록 하는 자바스크립트 파일을 다운받으셔야 합니다.



<다운받기>



 jquery-1.8.3.min.js

 snowstorm-min.js

 snowstorm.js

 jquery.snow.js


티스토리 링크는 트래픽이 많아질 경우, 주소가 바뀌는 경향이 있습니다.

제가 올린 링크의 url을 이용하시면, 나중에 url이 바뀌었을때 적용이 안되니

꼭 따로 다운받아주세요~!






<업로드하기>

다운을 받으셨으면, 이제 위 자바스크립트 파일을 업로드하는 곳으로 가보겠습니다.




위 파일 4개를 다운받으셨으면, Tistory 관리자 모드로 들어갑니다.




위 그림 잘 보이시나요?

HTML/CSS 편집에 들어가셔서, 상단의 파일업로드 탭에 들어갑니다.




파일업로드 탭에 들어가시면, 자신 홈페이지 스킨을 구성하는 그림파일들이 존재합니다.

대부분 images/ 풀더에 저장되며, 추가버튼을 눌러서 위에서 다운받은 자바크스립트 4개의 파일을 올려주세요


추가버튼을 누르고


자바스크립트 네 파일을 업로드 하시면 끝~!






그럼 이렇게 자바스크립트 파일이 images/ 안에 올라가게 됩니다.

jqeery-1.8.3.min.js

jquery.snow.js

snowstorm-min.js

snowstorm.js


제 그림에는 파일 하나가 안보이지만 이해해주시길, 다 올라간거에요~! 4개 다요!!



네 파일이 정상적으로 업로드 됐는지 다시한번 확인 해주시고, 이제 실제로 홈페이지에 적용만 하면 됩니다.

여기까지는 눈이 내리도록 하는 자바스크립트 소스가 자신의 블로그에 올라간 것이고,

이제 진짜로 눈이 내리도록 스킨에 적용만 해주시면 됩니다.




<적용하기>

HTML/CSS 탭에 다시 들어가셔서 소스를 작성해 주세요.




HTML/CSS 윗부분에 보시면 <head> ~ </head> 태그가 있습니다.

</head> 바로 윗부분에 다음과 같은 소스를 넣어주시면 됩니다.




아래는 소스입니다.


<!-- Snowstorm start -->


<script src="./images/jquery-1.8.3.min.js"></script>

<script src="./images/snowstorm.js"></script>

<script src="./images/snowstorm-min.js"></script>

<script type="text/javascript" src="./images/jquery.snow.js"></script>

<script> 

jQuery(document).ready( function(){

        $.fn.snow();

});

 jQuery(document).ready( function(){

        $.fn.snow({ minSize: 5, maxSize: 40, newOn: 800, flakeColor: '#0099FF' });

});

</script>

<!-- Snowstorm end -->






위 소스에서 <script src="./images/snowstorm-min.js"></script> 이것의 역할은

작은 눈이 천천히 내렸다가, 바람으로 몰아쳤다가, 등의 랜덤한 효과를 발생하는것 같아요.

(귀찮아서 분석은 안했습니다.)


이것을 지우면 눈이 천천히 내리게 됩니다.

저는 그래서 snowstorm-min.js 소스를 지운 상태이구요.

어느정도 자바스크립트 볼줄 아시는 분은 js 소스 들어가서 눈의 속도랑 방향 등을 결정하는 소스를 수정하셔서

자신만의 눈내리는 효과를 만들어 보세요 ^^



- 이 눈오는 소스의 저작권은 다음과 같습니다.


출처 : http://sosal.kr/802


다른 효과 넣는 코드 사이트 : http://www.mf2fm.com/rv/dhtmlspacewarp.php

Posted by 당구치는 개발자
|
TIP 2016. 9. 27. 09:24

말 그대로, 여러분의 블로그에 포스트 제목을
출렁이는 물결 모양으로 바꾸는 방법 입니다.


이것은 원래 민상님의 블로그 
http://minsangk.com/ 
에서 소개되어 있는 방법 입니다.

따라하기만 하면 쉬우니, 잘 따라 와 보셔요~



일단, ▲ 요거 다운 받아서 압축을 풀어주세요

압축을 풀면 ▼요렇게 3개의 파일이 나타납니다.



관리자모드 - 스킨 - HTML/CSS 편집 - 파일업로드
경로를 찾아가서 압축이 풀린 파일 3개를 업로드 합니다.



관리자모드 - 스킨 - HTML/CSS 편집
경로를 가서 Ctrl + F 기능 으로  article_rep_title  을 검색 합니다.


아마도 이런 부분이 보이겁니다.
여기서 <h2> 에서부터 </h2> 까지가 수정 할 부분 입니다.


어떻게 수정 하느냐면, 
아까 압축을 풀어서 나온 파일 3개중 TEX 파일을 열어 봅니다. 


텍스트파일의 내용중에서

<script language="javascript"  src="./images/viewTitle.js" type="text/javascript">
</script>
<script language="javascript">
showTitle("./images/", "viewTitle.swf", 600, 30, "", "", "center", "0x00000");
</script>


이런 소스가 보이실겁니다.

이걸 복사해서, 검색 해서 나온 부분
<h2> 에서부터 </h2>까지 부분까지 삭제하고
그자리에 그대로 붙여넣기 하시면 됩니다.



미리보기를 먼저 적용 시켜 본 후
아무 이상이 없으면 저장하기를 누릅니다.




이제 완성 입니다.
참 쉽죠??




Tip

1. 제목의 위치정렬을 바꾸시려면 center 를 left/right 로 수정하시면 됩니다.

2. 색상을 바꾸시려면 0x000000 을 수정하세요. (16진수 RGB 입니다)
x뒤에 밑줄친 부분을 바꾸시면 됩니다.

참고 : 2009/08/23 - [Blog story/블로그 팁] - 웹에 적용 되는 색상 코드

색상코드에서 원하는 색깔을 선택 하신 후, #을 떼고 넣으세요.


출처 : http://luminoustime.tistory.com/87

Posted by 당구치는 개발자
|
TIP 2016. 9. 26. 17:33

마우스 아이콘 강좌 낸 이후로 갑자기 방명록도 북적북적 댓글도 하나둘 달리고.. 헿 기분이 너무 좋아진 가운데 많은 분들이 물어보시는 제 티스토리의 하트 효과! 세네분 정도 물어보시기에 마우스 효과를 이렇게 강좌를 냈습니다 화하ㅏ하하 어차피 앞으로 한달은 못들어올 것 같은데 오늘 한 2개만 내볼까 생각하고 있어요.



최대한 자세히 설명해드릴텐데요 혹시 이해가 안되는 부분 또는 질문 있으시면 댓글이나 방명록으로 질문해주세요!

방명록은 메뉴함 열고 'guest'로 가시면 됩니다!




# 티스토리에서 마우스 움직일 때 효과내기 #

마우스 커서를 이리저리 움직일 때 하트효과나 팅커벨 효과 등 다양한 효과를 적용할 수 있는 마우스 강좌를 내려고 합니다!

하트가 뿅뿅 터지다가 없어지곤 하는데 티스토리를 더욱 러블리?하게 만들어주죠 헤헤 서론은 이쯤에서 접고 바로 강좌 시작하겠습니다!




1. http://www.mf2fm.com/rv/ 에 들어가주세요



상단의 Mouse Effects를 보면 다양한 효과들이 있는데 원하는 효과를 클릭해주세요!

이번 강좌에선 팅커벨 효과를 적용해볼게요~




2. 아래 내용을 복사해주세요!






3. html 편집에서 </head>를 검색한 후 그 바로 위에 붙여넣기 해주세요!







4. 적용을 누르신 후 티스토리에 들어가보시면 움직일때마다 이렇게 반짝거리는 효과가...♥


출처 : http://roda527.tistory.com/77

Posted by 당구치는 개발자
|
TIP 2016. 9. 26. 17:20

티스토리에서 글을 드래그 했을 때, 기본적으로 파란색상과 흰색글씨로 세팅이 된다.

 

 

대충 이런식...

 

 

이 색을 바꾸려면 다음과 같이 HTML/CSS 편집을 해주면 된다.

 

 

 

1. 관리자 화면에서 HTML/CSS 편집에 들어간다.

 

2. CSS 소스 탭을 클릭하여 CSS 소스에 아래 네모칸을 추가한다. 

 

color: 드래그 했을 때 글자색

background: 드래그 했을 때 배경색

 

 

 

ex 1)

::selection {background:#aaaaaa; color:#fff;}
::-moz-selection{background:#aaaaaa color:#fff}

 

 

ex 2)

::selection {background:#ea7be3; color:#fff;}
::-moz-selection{background:#ea7be3; color:#fff}

 

 

 

 

참조: http://soosooin.tistory.com/237


출처 : http://sosal.kr/983

Posted by 당구치는 개발자
|