2013년 7월 13일 토요일

구글 블로그(blogger) 레이아웃 간격 조절 코드 몇가지

일반 템플릿에서 포스트, 탭, 위젯의 간격을 조절할 때 쓰일 수 있는 코드 몇가지를 모아봤습니다. 코드 입력 전에는 반드시 템플릿을 백업해두시고, 테스트용 블로그에서 테스트를 해본 후 적용하시기 바랍니다.

아래 코드들의 삽입 위치는 [대시보드→템플릿→맞춤설정→고급→CSS추가] 입니다.


1. 포스트와 탭(페이지) 사이의 간격 조절


.blog-posts {margin-top:-30px}
-30 대신 원하는 값(음수, 또는 양수)을 지정해줍니다.


2. 포스트와 사이드바 사이의 간격 조절



.blog-posts {margin-right:-30px}
-30 대신 원하는 값(음수, 또는 양수)을 지정해줍니다.


3. 사이드바와 탭(페이지) 사이의 간격 조절


.main-inner .column-right-outer {margin-top:-30px}
-30 대신 원하는 값(음수, 또는 양수)을 지정해줍니다.


4. 포스트 간 간격 조절


.date-outer{margin-bottom:-30px}
-30 대신 원하는 값(음수, 또는 양수)을 지정해줍니다.


5. 사이드바 위젯 간 간격 조절


.sidebar .widget {margin-top:-30px}
-30 대신 원하는 값(음수, 또는 양수)을 지정해줍니다.



댓글 9개:

  1. 안녕하십니까.님의블로그는 역시 대단히 잘되어있습니다.대단하세요.그런데요.
    http://hoitallica.blogspot.kr/ 여기가 제블로그 인데요.한가지 궁금한 것이 있어 질문드립니다.
    블로그에 혹시 들어와 보신다면 맨위오른쪽에 검색하는 부분이 있습니다 근데 파이어폭스에서는 검색하는 박스옆에 돋보기가 잘나오는데 익스플로어로 저의 블로그를 보면 검색박스는 잘있는데 돋보기 이미지가 박스에서 멀리떨어져보입니다.또한 이상한 글자도 돋보기 위에 겹쳐보이구요.

    이현상을 해결할수 있는방법은 무엇인지요.도와주십시요.

    답글삭제
  2. 위 내용 중 "4. 포스트 간 간격 조절" 부분이 필요했습니다. 간격을 좀 넓히고 싶어서 값을 양수로 하는 경우입니다. 말씀하신 대로 date-outer {margin-bottom:30px;} 로 했을 때는 아무 효과가 없었습니다. 그런데 .post-outer {margin-bottom:30px;} 로 하니 간격이 넓혀졌습니다. 한번 확인해 보시면 좋을 거 같습니다.

    답글삭제
  3. 뼛속까지 문과생이라 어렵긴 하지만 설명 너무 잘 해주셔서 열심히 따라가고 있습니당!!!! 진짜 저에게는 금같은 블로그에요ㅠㅠ 감사합니다!!!!!

    답글삭제
  4. 뼛속까지 문과생이라 어렵긴 하지만 설명 너무 잘 해주셔서 열심히 따라가고 있습니당!!!! 진짜 저에게는 금같은 블로그에요ㅠㅠ 감사합니다!!!!!

    답글삭제
  5. 유용한정보 너무너무너무 감사드립니다!!!

    답글삭제
  6. 좋은 자료 공개해주셔서 감사합니다!!

    답글삭제
  7. 메인 페이지에서가 아닌 포스트를 열었을 때 포스트 제목을 기준으로 위로는 탭과의 간격, 아래로는 본문과의 간격이 너무 넓어서 위의 몇개 코드를 추가해봤는데 않되네요. 혹시 간격 줄이는 방법 없을까요? 저의 블로그 주소입니다. https://reformedtheologyandfaith.blogspot.kr/ 해결 방법 부탁드립니다.

    답글삭제
  8. 두 시간 동안 앉을 수 있는 많은 흥미로운 것들이 있다. 인터넷에 취직해서 좋다 자유시간이 많아 홀덤 나는 보통 나 자신이 지금까지 문제가 없었 같은 시간에 좋은 사이트에 당신을 조언 해 줄 수 있습니다

    답글삭제
  9. 이것은 매우 흥미 롭습니다. 여가 시간에 이것에 대해 더 자세하게 숙지해야합니다. 이제 할 일이 없습니다. MLB중계 만 절약 할 수 있습니다.이 리소스가 아니라면 자유 시간에 무엇을할지 모르겠습니다. 당신이 스포츠를 좋아한다면, 나는 당신이 볼 것을 권합니다.

    답글삭제