블로그스쿨(blog school)





포스팅의뢰 및 제휴 문의


인터넷돈벌기 초급과정 및 블로그꾸미기


블로그 초급과정으로 주로 블로그셋팅 및 블로그꾸미기로 구성됩니다.

제목  : 뷰추천 버튼 상단으로 무조건 올리기

 

시작하기.


티스토리 기준으로 설명 하겠습니다. 무료로 블로그를 쓸 수 있도록 하고 HTML/CSS를 거의 모든 부분 수정이 가능한것은 티스토리라는 공간 뿐이기 때문입니다.


이번에 설명할 내용은 뷰추천 버튼을 맨 상단으로 올리는 방법 입니다. "물론 코드를 복사해와서 글 쓴뒤 위에 붙여넣으면 되요" 라는 말을 하려는 건 아닙니다.


이런건 사실 팁이라고 하기에는 부족하고 사용방법이겠죠.


Jquery 를 이용해서 자동으로 위로 올려보겠습니다. 어려워보인다구요? 걱정하지마세요. 그냥 복사 붙여넣기만 할 줄 안다면 가능 합니다.



보충이야기


뷰추천버튼은 다음뷰라는 거대 메타사이트의 추천시스템의 버튼 입니다. 추천버튼은 어디든 가져가서 홍보할 수 있고 눌러달라고 할 수 있습니다. 어떻게 보면 참 웃긴 시스템입니다.  추천버튼의 위치에 따라 추천의 갯수가 달라지는데 이런 추천으로 순위를 메긴다는것이 웃긴것이죠. 물론 추천갯수만으로 정해지진 않습니다만, 어쨋든 공정하진 않습니다.


그런데 왜 위로 올려서 쉽게 누르게 하냐면 , 추천 버튼이 어디에 있는지 몰라서 추천을 할 줄 모르는 분들을 위해서 상위에 올리는 것 입니다. 저도 탐탁지는 않지만 이런것도 있다는것을 알아두기 위해서 한번 쯤 해보세요.



보충설명 2


초보자 팁게시판을 보면 HTML/CSS라고 해놨지만 사실 조금은 부족한 방법들도 눈에 띄네요. 틀렸다고 뭐라고 하는것은 아닙니다. 처음에는 다 그렇게 시작하니까요. 다만 스킨 잘 관리하려면 배우는것도 분명 필요합니다.


<table><tr><td> 이런식으로 테이블 코드를 넣어서 임의로 내용을 넣는 내용도 있었지만 결과는 올바르게 나오겟지만 한가지 생각해야할 점이 있습니다.


만약 스킨을 바꿔서 글내용도 바뀌어야한다면 즉 넣었던 내용을 모두 빼야한다면 어떻게 해야할까요? 1000개의 글을 모두 들어가서 수정해야할까요? 이런 내용때문에 가능하면 레이어로 이름을 정해서 넣어놓는게 좋습니다. 그럴 경우에는 나중에 여차하면 한번에 다 안보이도록 빼버릴 수 있기 때문이죠.



위에 내용 어렵다구요? 다 잊어버립시다. 밑에 내용 한번 따라해봅시다.




다음뷰 추천 버튼, 자동으로, 옮기기, 블로그팁, IT, blog, tips, 팁,이 글을 적기 전에 고민을 많이 했습니다. 정말 이렇게 까지 해야하나 싶어서요. 다음뷰는 가장 큰 메타사이트라고 봐도 과언이 아닙니다. 그런데 랭킹이라는 것에 수익이 연결되다보니 조금은 과열이 된 부분이 분명 있습니다. 그리고 이것에는 추천을 눌러주느냐 안눌러주느냐도 엄청난 연관이 있기 때문에 이것으로 괜히 욕먹기도하고 시기를 받기도 하고 문제가 생기기도 합니다. 예전에 음식 관련 이벤트가 있었는데 다음뷰 버튼을 퍼가기 해서 추천을 받는것 때문에 엄청난 파문이 있기도 했었죠. 개인적으로는 다음뷰 버튼이 딱 고정된 위치에서만 뜨고 다른곳에 뜰 수 없어야 한다고 생각하는데요. 그래야 그나마 공정하기 때문입니다. 다만, 다음뷰 관리자도 퍼가기에 대해서는 관대하고 문제가 전혀 없다는 입장이기 때문에 다음뷰의 변화를 기대하긴 어렵습니다. 블로그의 글의 첫 문단에 추천을 해달라는 다음뷰 버튼들을 심심치 않게 볼 수 있는데요. 이 버튼을 여기 둘 수 밖에 없는 상황이 되었습니다. 좋은글도 알리지 않으면 읽히지 않아서 필요없는 글이 될 수 있습니다. 사람들이 볼 수 없다면 의미가 없다는 것 이죠. 자 그렇다면 다음뷰 추천 버튼을 퍼가기를 해서 본문에 상단에 올려보도록 하겠습니다. 이것은 굳이 설명하지 않더라도 대부분 아실겁니다. 다음뷰 사이트에 가서 자신의 글의 퍼가기를 눌러서 코드를 글에 넣으면 됩니다. 물론 이것을 설명하려고 지금 글을 적는것은 아닙니다. 이런 일련의 과정을 자동화 하겠습니다. 아래 내용을 따라하면 자동으로 모든글에 다음뷰 추천버튼이 일정한 위치에 모두 뜨게 됩니다. 물론 이제는 추천은 양심에 맡겨야 합니다. 정말 괜찮은 글에만 판단하여 추천을 해줘야하기 때문이죠. 그래서 배경으로 글도 하나 넣어보았습니다.


제 블로그의 상단을 보면 이미지 바로 위에 다음뷰 추천버튼이 올려져 있고 배경으로 "좋은 글이면 추천해주세요" 라는 글을 볼 수 있습니다. 이것은 다음뷰 추천 위젯 퍼가기를 통해서 넣은것이 아닙니다. jquery 로 자동화되어서 올라갑니다. 코드를 넣어주면 모든글에 이렇게 추가가 되며, 코드를 제거하면 모든글에서 다시 제거가 됩니다.

이제부터 본문의 맨 첫번째 이미지 바로 위에 다음뷰 추천버튼과 배경을 자동으로 표기하는 부분을 적용해보겠습니다.



다음뷰 추천 버튼, 자동으로, 옮기기, 블로그팁, IT, blog, tips, 팁,이 글을 적기 전에 고민을 많이 했습니다. 정말 이렇게 까지 해야하나 싶어서요. 다음뷰는 가장 큰 메타사이트라고 봐도 과언이 아닙니다. 그런데 랭킹이라는 것에 수익이 연결되다보니 조금은 과열이 된 부분이 분명 있습니다. 그리고 이것에는 추천을 눌러주느냐 안눌러주느냐도 엄청난 연관이 있기 때문에 이것으로 괜히 욕먹기도하고 시기를 받기도 하고 문제가 생기기도 합니다. 예전에 음식 관련 이벤트가 있었는데 다음뷰 버튼을 퍼가기 해서 추천을 받는것 때문에 엄청난 파문이 있기도 했었죠. 개인적으로는 다음뷰 버튼이 딱 고정된 위치에서만 뜨고 다른곳에 뜰 수 없어야 한다고 생각하는데요. 그래야 그나마 공정하기 때문입니다. 다만, 다음뷰 관리자도 퍼가기에 대해서는 관대하고 문제가 전혀 없다는 입장이기 때문에 다음뷰의 변화를 기대하긴 어렵습니다. 블로그의 글의 첫 문단에 추천을 해달라는 다음뷰 버튼들을 심심치 않게 볼 수 있는데요. 이 버튼을 여기 둘 수 밖에 없는 상황이 되었습니다. 좋은글도 알리지 않으면 읽히지 않아서 필요없는 글이 될 수 있습니다. 사람들이 볼 수 없다면 의미가 없다는 것 이죠. 자 그렇다면 다음뷰 추천 버튼을 퍼가기를 해서 본문에 상단에 올려보도록 하겠습니다. 이것은 굳이 설명하지 않더라도 대부분 아실겁니다. 다음뷰 사이트에 가서 자신의 글의 퍼가기를 눌러서 코드를 글에 넣으면 됩니다. 물론 이것을 설명하려고 지금 글을 적는것은 아닙니다. 이런 일련의 과정을 자동화 하겠습니다. 아래 내용을 따라하면 자동으로 모든글에 다음뷰 추천버튼이 일정한 위치에 모두 뜨게 됩니다. 물론 이제는 추천은 양심에 맡겨야 합니다. 정말 괜찮은 글에만 판단하여 추천을 해줘야하기 때문이죠. 그래서 배경으로 글도 하나 넣어보았습니다.


1. 먼저 다음뷰를 먼저 보이도록 활성화 합니다. 기본형을 하셔도 되고 버튼형을 하셔도 상관은 없습니다.




<head>

     <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>

</head>

2. 노란색으로 표기한 코드를 skin.html의 <head></head> 사이에 넣어 줍니다. (라이브리를 쓰고 계시다면 이부분은 생략해도 됩니다.)




</s_t3>

<script type="text/javascript">
    $('.article img:first').before($('.blogger-news-widget'));
</script>

</body>
</html>

3. 노란색으로 표기된 코드를 복사 한 뒤 skin.html 의 </body> 바로 앞에 붙여넣기 합니다.






.blogger-news-widget {
    background: url(http://cfile10.uf.tistory.com/image/123440504F2A62A6294E89) no-repeat scroll center -4px transparent;
    padding: 47px 0 20px 0;
}


4. 위 코드를 복사 한 뒤, style.css 의 맨 하단에 추가해 줍니다. 스타일은 원하는 스타일이 있다면 수정하셔서 쓰셔도 됩니다.




추가적으로 제가 적은 팁들은


http://cdmanii.com/category/%EC%9C%A0%EC%9A%A9%ED%95%9C_%ED%8C%81/%EB%B8%94%EB%A1%9C%EA%B7%B8_%ED%8C%81


에서 확인 하세요.



서비스 링크

X
Login

브라우저를 닫더라도 로그인이 계속 유지될 수 있습니다. 로그인 유지 기능을 사용할 경우 다음 접속부터는 로그인할 필요가 없습니다. 단, 게임방, 학교 등 공공장소에서 이용 시 개인정보가 유출될 수 있으니 꼭 로그아웃을 해주세요.

X