티스토리 툴바

Daum
Tistory
로그인
블로그만들기/티스토리2011/03/20 08:34

다음뷰애드 왼쪽 여백 활용하기


 뷰애드가 시작되고 구글애드센스를 사용하지 않거나 사용할수 없는 다음블로그는 뷰애드때문에 왼쪽 여백이 생겨 글의 쏠림현상이 생겨버렸습니다. 오늘글은 뷰애드 왼쪽 여백을 메워줄 방법을 생각하다가 <div>태그를 이용해 뷰애드와 비슷한 배경이미지를 넣어서 채워봤습니다.  

( Life in Mono 기본스킨에 최적화가 되어있어 있지만 다음블로그에서도 적용이 가능합니다. )
 
다음뷰애드 왼쪽 여백 활용하기

1. 이미지 만들어주기

- 하단에 첨부한 재료이미지.zip를 다운받고 압축을 풀어줍니다.
- 재료이미지속 네모칸에 자신이 원하는 글이나 그림을 넣어줍니다. 
- 알라딘광고등을 넣으시려면 이미지를 만들어주실 필요는 없습니다.

 

재료이미지.zip


2. HTML/CSS 수정해주기 

- HTML  

1. html수정.txt 파일을 열어줍니다. 
2.  HTML/CSS 편집 HTML에서 <div class="article"> 을 찾아줍니다.
3. 아래에 html수정.txt의 내용을 자신의 블로그에 맞게 수정해줍니다.
4. 수정한 내용을 <div class="article">아래에 추가해주시면됩니다. 
4-1. 위젯을 설치하시려면 <a href="주소><img src="그림주소"></a>에 위젯주소로 수정 
5. 구글애드센스를 추가하시려면 <div class="article">상단에 추가하시면됩니다. [참고하기]


html수정.txt


- CSS


1. 아래 여백은 Life in mono 스킨에 최적화 되어있습니다.
2. 여백을 수정하시려면 하단의 Margin값의 이해를 참고하시면 됩니다.


 

css추가.txt


Margin값의 이해 
 
Margin값은 외부여백으로 각화살표 방향에 있는 노란색여백값으로 이해하시면됩니다.
( margin : 1px 2px 3px 4px = 위 : 1px, 오른쪽:2px, 하단:3px, 왼쪽 :4px )

#mymenu { float:left; margin: 0 32px 16px 10px;} <- 왼쪽에 추가시킨 메뉴
.ad250_outter {margin: 0 10px 22px 0 !important;} <- view애드



완성된모습 



 

본문상단에 이미지를 이용한 대표카테고리를 사용하면 유리한점 

 



[새라새님 생각]

기본적인 스킨 수정 스킬만 있으면 간단히 적용할 수 있어 좋은것 같아요.. 처음엔 저 공간 활용할려고 고민 좀 했지요.. 참고로 저 부분에 카테고리를 넣는 이유는 블로그 지수에 신경을 쓴건데.. 블로그 검색최적화을 보았을때 블로그 지수가 어느정도 반영이 된다고 알게되어..

 그 블로그 지수중에 방문자 깊이(베이지 뷰, 블로그에 머무는 시간)등을 고려 했다고 보면 되지요.. 또한 저렇게 배치하고 나서 다음 웹인사이드에서 통계표를 보니 어느정도 효과도 있는것 같더라구요..


 

 

다음 블로그 만드는법 


다음 블로그 만드는법

다음블로그의 경우는 HTML/CSS편집이 되지않아 매번 본문마다 HTML를 체크하고 본문에 넣어줘야하는 번거로움이 있습니다. 

- HTML 체크


- 상단에 다음블로그다음뷰왼쪽여백.txt텍스트파일 상단에 복사해주기

준비중

 

후기  

  자신의 블로그와 어울리는 이미지를 만들어 다음뷰애드의 왼쪽여백을 채워보시길 바랍니다. ^^; 티스토리의 경우는 꼭 HTML/CSS에 태그를 넣어주지 않고 다음블로그처럼 매번 본문상단에 태그를 넣어주셔도 됩니다. 



TAG , ,
Trackback 0 Comment 52

댓글을 달아 주세요

  1. BlogIcon 노래바치

    아~~ 이렇게하면 되는군요.
    급 적용시켜 보아야겠는걸요.
    요리 말고도 다른 카테고리의 발행을 원할때 아주 유용하겠습니다^^.

    2011/03/20 08:43 [ ADDR : EDIT/ DEL : REPLY ]

  2. 비밀댓글입니다

    2011/03/20 08:44 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 티비의 세상구경

      저도 요몇주 정신이 없어서요
      추천만 남기고 간적이 많았어요 ㅎㅎ
      정말 부담안가지셔도 되세요 !

      2011/03/20 16:43 [ ADDR : EDIT/ DEL ]

  3. 비밀댓글입니다

    2011/03/20 08:44 [ ADDR : EDIT/ DEL : REPLY ]
  4. 최정

    저도 이부분을 활용하기 위해서 연구를 좀 해봐야 할듯 싶어요~ 감사합니다.

    2011/03/20 08:46 [ ADDR : EDIT/ DEL : REPLY ]
  5. BlogIcon 노지　

    상단을 깔끔하게 해 둔 분들을 보면 정말 부럽다는 ^^ ㅋ

    2011/03/20 08:50 [ ADDR : EDIT/ DEL : REPLY ]
  6. BlogIcon 나만의 판타지

    전 구글광고로 ㅎ
    처음엔 비워뒀는데.. 뭔가 가독성도 떨어지는건 같고해서..
    광고를 넣어버렸다죠. ^^

    2011/03/20 08:52 [ ADDR : EDIT/ DEL : REPLY ]
  7. BlogIcon 굄돌

    그게 좀 그래요.
    그때문에 박스를 떼냈다는 사람도 있고...
    티비님처럼 이렇게 노련하면 좋으련만....
    비 오지요?

    2011/03/20 08:54 [ ADDR : EDIT/ DEL : REPLY ]
  8. BlogIcon 리틴

    헉.. 애드센스 띄어내셨나요?
    헉...

    2011/03/20 08:55 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 티비의 세상구경

      아니예요 ㅎㅎ 포스팅을 위해 잠깐 수정해봤어요 ^^;;
      위쪽에 구글애드센스를 넣어보고
      지저분해 보이면 원상복구 해야죠 ㅋ

      2011/03/20 08:58 [ ADDR : EDIT/ DEL ]
  9. BlogIcon 새라새

    기본적인 스킨 수정 스킬만 있으면 간단히 적용할 수 있어 좋은것 같아요..
    처음엔 저 공간 활용할려고 고민 좀 했지요..
    참고로 저 부분에 카테고리를 넣는 이유는 블로그 지수에 신경을 쓴건데..
    블로그 검색최적화을 보았을때 블로그 지수가 어느정도 반영이 된다고 알게되어..
    그 블로그 지수중에 방문자 깊이(베이지 뷰, 블로그에 머무는 시간)등을 고려 했다고 보면 되지요..
    또한 저렇게 배치하고 나서 다음 웹인사이드에서 통계표를 보니 어느정도 효과도 있는것 같더라구요..

    이렇게 소개해 주셔서 감사하고요 주말 잘 보내세요^^

    2011/03/20 08:58 [ ADDR : EDIT/ DEL : REPLY ]
  10. BlogIcon 짱똘이찌니

    저는 일부러 앞 부분의 글을 많이 써서 채우는데
    이렇게 채워도 되겠네요.
    여름이 관련 글은 짧기 때문에
    움직이는 사진으로 작게 올려 놨었는데~
    많은 도움이 되었습니다.
    감사합니다. ^^

    2011/03/20 08:59 [ ADDR : EDIT/ DEL : REPLY ]
  11. BlogIcon 엔젤메이커

    이런 방법도 잇었군요.
    뷰에드 광고가 달리고 티비님을 통해서 상단을 깨끗하게 하는 방법을 배웠던 기억이 나는군요^^
    티비님께 다시한번 감사를 드립니다. 티비님께 참 많은 도움을 받았던것 같습니다.

    2011/03/20 09:10 [ ADDR : EDIT/ DEL : REPLY ]
  12. BlogIcon 윈컴이

    그럼 애드센스는 어디로 도망갔는지?? ㅎㅎ

    2011/03/20 09:11 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon 티비의 세상구경

      오늘은 구글애드센스를 사용안하거나 사용못해서
      왼쪽 여백이 있는 분들을 위한 포스팅이였어요 ㅎㅎ
      그대로 한번 적용해봤어요 ^^;;

      위쪽에 구글광고를 넣거나 지저분해보이면
      다시원상복구 하려구요 ㅋ

      2011/03/20 09:14 [ ADDR : EDIT/ DEL ]
  13. BlogIcon 아이엠피터

    블로넷 위젯이 있어서 상관이 없는데,저의 경우 여기 이미지가
    검색어 이미지 노출에 그래도 노출이 되어서 요새 고민중입니다.

    2011/03/20 09:16 [ ADDR : EDIT/ DEL : REPLY ]
  14. BlogIcon ★입질의 추억★

    아 정말 필요로 하는 분들이 많으실꺼 같아요. 저는 아시겠지만 현재의 포맷에 최적화되게
    서론을 쓰고 들어가서 요렇게 바꾸고 싶어도~ 많은 노력이 들어갈듯 싶습니다 ㅠㅠ
    좋은 팁 감사히 보고 갈께요~

    2011/03/20 09:20 [ ADDR : EDIT/ DEL : REPLY ]
  15. BlogIcon 산들강

    좋은 팁입니다.
    항상 잘 보고 느끼지만 실현은 쉽지 않은 듯...

    2011/03/20 09:35 [ ADDR : EDIT/ DEL : REPLY ]
  16. BlogIcon HJ

    저는 그냥 글로 채워두는데요 ㅠㅠ
    원래 이미지를 넣었는데 저작권문제가 자꾸 걸러서.
    오늘 포스팅 제가 꼭 참고해야겠어요~!!! ㅎㅎ

    2011/03/20 09:40 [ ADDR : EDIT/ DEL : REPLY ]
  17. BlogIcon 좋은엄니

    글로 채워지던데요..

    아..
    티비님의 오늘 포스팅 내용.

    이해할 듯..하면서도 이해를 못하겠다는.....ㅡㅜ

    2011/03/20 09:55 [ ADDR : EDIT/ DEL : REPLY ]
  18. BlogIcon 더공

    저도 처음에 고민을 정말 많이 했던 곳인데... ^^
    새라새님은 한칸 더 아래로 내리신 독특한 방법을 택하셨더라고요.

    2011/03/20 10:03 [ ADDR : EDIT/ DEL : REPLY ]
  19. BlogIcon 탐진강

    여백을 잘 활용하는 것도 좋겠네요.
    늘 좋은 정보 감사합니;다.

    2011/03/20 10:24 [ ADDR : EDIT/ DEL : REPLY ]
  20. BlogIcon 무터킨더

    저번에 제게도 조언주셨는데...
    제게 중요한 포스트인것 같은데 지금 이해가 잘 안되는...
    연구 열심히 해봐야겠어요. 고마워요.^^

    2011/03/20 10:32 [ ADDR : EDIT/ DEL : REPLY ]
  21. BlogIcon 여강여호

    저는 어떻게된건지 나란히 위치가 되지 않더라구요..
    자꾸 깨지고....위 예시대로 했는데도요...

    2011/03/20 10:56 [ ADDR : EDIT/ DEL : REPLY ]
  22. BlogIcon 무터킨더

    근데 전 잘안되요. 잉~~~

    2011/03/20 11:12 [ ADDR : EDIT/ DEL : REPLY ]
  23. BlogIcon 참교육

    좀 더 배운 후 다시 시도해 보겠습니다.
    이런 재주 있는 사람보면 정말 부럽습니다.
    주말 잘보내세요.

    2011/03/20 11:36 [ ADDR : EDIT/ DEL : REPLY ]
  24. BlogIcon 안나푸르나516

    좋은 팁이네요~ 잘 보고 갑니다^^

    2011/03/20 13:22 [ ADDR : EDIT/ DEL : REPLY ]
  25. BlogIcon 자수리치

    다음뷰 적용할 만한 랭킹이 되면 해봐야겠어요.
    랭킹이 안드로메다라, 적용할 엄두가 안나네요.ㅎㅎ

    2011/03/20 14:00 [ ADDR : EDIT/ DEL : REPLY ]
  26. BlogIcon 외계소년32

    이 포스트가 있었으면 이렇게 먼저 했을텐데 지금 저는 구글, 다음애드 나란히 붙이기 포스트를 응용해서 올블릿을 나란히 붙여 놓았습니다. 빈공간으로 남는게 이상해서 그렇게 했더니 맘에 들더군요. 구글 애드는 좀 신경쓸게 많아서 잠시 미루고 잇어요. 광고 한번 넣어보려했더니 신경쓸게 많더군요. 이 포스트 상당히 유용하겠낸요.

    2011/03/20 15:18 [ ADDR : EDIT/ DEL : REPLY ]
  27. BlogIcon 아딸라

    티비님은 역시 - ㅎ 작은 거 하나라도 혼자만 알지 않고 널리 알려주시려는 마음이 참 고맙습니다. -
    저도 저 안에 사이즈 맞는 걸로 제 블로그 관련 알림 사항같은 걸 넣어보든지 아이디어를 생각해 봐야겠어요.

    2011/03/20 15:39 [ ADDR : EDIT/ DEL : REPLY ]
  28. BlogIcon kkolzzi

    제가 고민했던 부분이었는데... 시도해 봐야할 과제네요. 구글광고는 달지 않고 있고 그 여백을 메우려고 올블릿이나 블로넷 배너를 달기도 했었는데, 고정 이미지를 다는 방법을 알아두면 나중에도 큰 도움이 될 것 같습니다.

    2011/03/20 16:12 [ ADDR : EDIT/ DEL : REPLY ]
  29. BlogIcon 릿찡

    초짜가 뷰애드 외에 무언가 달아놓는 경우는 왠지 베스트에 잘 안올라가는듯 해서 그냥 이미지만 놔야겠어요

    2011/03/20 17:09 [ ADDR : EDIT/ DEL : REPLY ]
  30. BlogIcon *저녁노을*

    노을인 어렵심더..히힛~

    즐거운 휴일 되세요.

    2011/03/20 17:48 [ ADDR : EDIT/ DEL : REPLY ]
  31. BlogIcon 백전백승

    지금은 아니지만 저는 스킨이 달라 다음뷰애드와 애드센스를 나란히 놓는 전에 티비님의 강좌를 따라하는데 글이 자꾸 들어가 어려웠지만 했짆아요.

    2011/03/20 17:48 [ ADDR : EDIT/ DEL : REPLY ]
  32. BlogIcon 샤프심

    다음뷰 애드가 폭이 좁아서 디자인 매칭시키기 조금 애매한 부분이 있는거 같아요^^
    HTML 모르시는 분들에게 도움되는 정보네요~~

    2011/03/20 21:15 [ ADDR : EDIT/ DEL : REPLY ]
  33. BlogIcon 미디어코난

    제 블로그도 1년 5개월인데 탄력을 못 받아요 와주셔서 문제점을 파악해주세요...ㅠㅠ

    2011/03/20 22:42 [ ADDR : EDIT/ DEL : REPLY ]
  34. BlogIcon 하랑사랑

    다음 블로그를 이용하시는 분들꼐 유용하겠네요.
    저 여백때문에 글을 쓸때도 은근히 신경이 쓰였어요.
    지금은 티비님이 구글 애드센스랑 나란히 정리해주셔서 잘 쓰고 있지만 ^^

    2011/03/20 23:47 [ ADDR : EDIT/ DEL : REPLY ]
  35. BlogIcon 시림 (詩琳)

    티비 님!
    나중에 시간나면
    원격 조정으로 봐주면 안되려나?
    글 만 올리는 정도라
    한번... ㅎㅎㅎ
    배워도 끝 없어요

    행복은 곁에 있어요
    아름다운
    사랑으로...

    2011/03/21 00:23 [ ADDR : EDIT/ DEL : REPLY ]
  36. BlogIcon 리우군

    티비님 강의 인기 폭발인데요? ㅋㅋ

    2011/03/21 02:01 [ ADDR : EDIT/ DEL : REPLY ]

  37. 비밀댓글입니다

    2011/03/21 07:53 [ ADDR : EDIT/ DEL : REPLY ]
    • BlogIcon Dasia

      That really captures the sirpit of it. Thanks for posting.

      2013/02/06 18:18 [ ADDR : EDIT/ DEL ]
  38. BlogIcon 그냥 아저씨

    음;;;매번 해야 하면; 힘들 것 같습니다...
    다음 이용하시는 분들은 한번쯤 생각해 본 것 같아요...
    애드로 인해서 ㅋ 잠시 보기가 이쁘지 않다는 것을요~
    좋은 정보 감사합니다.^^

    2011/03/21 10:19 [ ADDR : EDIT/ DEL : REPLY ]
  39. BlogIcon 비바리

    저는 글을 써서 ..(사설) 채워요.ㅎㅎㅎ

    2011/03/21 20:19 [ ADDR : EDIT/ DEL : REPLY ]
  40. BlogIcon 백마탄 초인™

    오,,, 다음 뷰애드를 박아 놓고 좌측 공간 활용이 애매 했는데 베리 나이스 팁입니당! ^ ^
    건강 하시길~!!

    2011/03/21 21:30 [ ADDR : EDIT/ DEL : REPLY ]
  41. BlogIcon 아사다리

    정말..좋은글입니다~감사합니다~

    2011/09/23 13:27 [ ADDR : EDIT/ DEL : REPLY ]
  42. BlogIcon affordable seo business

    あなたは通常、別の提案や情報が付属しているので、通常私は、あなたのブログの記事が好きです。いつも私は私の友人のポストにあなたのウェブサイトを共有した。投稿を続けると私はあなたに従います。

    2012/07/16 13:38 [ ADDR : EDIT/ DEL : REPLY ]
  43. BlogIcon affordable seo packages

    こんにちは、私はあなたの記事のほとんどを閲覧しています。この記事は、私はおそらく私の研究のための最も有用な情報を得た場所を正確に、最も可能性があります。投稿のおかげで、おそらく我々はこれについての詳細を見ることができます。

    2012/07/16 13:39 [ ADDR : EDIT/ DEL : REPLY ]
  44. BlogIcon affordable seo pricing

    私は私はあなたに続いているので、見るものを好ん。繰り返しあなたのインターネットのページを探索を楽しみに表示されます。私の配偶者と私はここで別のウェブサイトから来るよりもつまずいたと私は物事を確認する必要があります信じていた。

    2012/07/16 13:40 [ ADDR : EDIT/ DEL : REPLY ]