티스토리 추천버튼을 정렬해 보세요

블로그 유저라면 메타블로그(metablog)를 아실 것입니다.
메타블로그(metablog)는 '블로그의 집합체'로서 그리스어의 "함께"라는 의미의 "meta" 에 "blog"(블로그)가 결합하여 만들어진 합성어입니다.(출처:워키백과사전)

블로거들은 메타블로그에 자신의 블로그를 등록하여 보다 많은 사람들에게 자신의 글이 읽혀지기를 바라고 있습니다. 그래서 등장한 것이 메타블로그의 각종 위젯과 추천 버튼입니다. 특히 추천을 많이 받은 글은 더 많은 사람들에게 노출될 기회를 얻게되어 블로그들은 어떻게해서든지 더많은 추천을 받기 위해 노력을 합니다.

메타블로그에서 현재 추천 버튼을 제공하는 곳은 다음의 블로거뉴스와 믹시입니다. 그런데 다른 분의 블로그를 방문해 보면 다음의 블로거뉴스 버튼과 믹시업 추천 버튼이 정렬이 되지 않아 혼란스럽기도 하고 블로그의 좁은 공간이 낭비되는 것 같아 안타깝게 느껴질 때가 많습니다.

여러분의 블로그는 어떻습니까?
많은 분들이 아래와 같이 추천 버튼을 정렬하여 공간적으로 너무 많은 부분을 낭비하고 있습니다.

간혹 아래와 같이 버튼을 정렬하기도 합니다.

이 방법은 블로거뉴스 추천버튼을 소형화하여 블로그에 적용한 것입니다.
chatii님의 블로그에 그 방법을 안내하고 있습니다.


현재 이 블로그의 본문 아래에 보면 아래와 같이 블로거뉴스 추천 버튼과 믹시업 추천 버튼이 동일한 크기로 가지런하게 정렬되어 보기에도 깔끔하고 공간적 효율성도 추구하고 있습니다.

블로거뉴스 추천버튼과 믹시업 추천버튼은 서비스하는 곳이 다르니 크기도 다르고 위치도 한군데 가지런히 정리하기가 쉽지 않습니다. 위즈님께서 제공하신 방법을 알려 드리겠습니다.

1. Skin.html 을 수정합니다.
Ctrl + F 를 하여 [ ##_article_rep_desc_## ]를 찾습니다.
바로 아래에 <div class="GAD">구글 광고 코드</div> 태그를 넣고 '구글 광고 코드'에 자신의 애드센스 코드를 넣습니다.

2. style.css 를 수정합니다.
맨 아래에 다음 코드를 삽입합니다.
div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:350px !important;overflow:hidden !important;margin-top:10px;border-right:1px solid #c3c9e0;}
div.mixup_widget {display:inline;float:right;clear:none;width:350px !important;}
div.blogger-news-widget embed {display:inline;float:left;}
div.GAD {clear:none;width:250px !important;display:inline;float:left;}
div.GAD iframe {display:inline;overflow:hidden;float:left;}

추천.txt

어떻습니까, 깔끔하죠?
여러분도 추천버튼을 정렬하여 블로그를 효율적으로 이용해 보세요.
좋은 방법을 공유해주신 위즈님에게 감사를 드립니다.