얼마전에
올블로그 메인 화면 개편이 있었습니다. 형태상으로는 '
블로고스피어는 지금'이 검색부분 아래에 width 100%로 차지하고 있습니다. 개편 방향은 포스트 홍수 속에서 주제의 다양화를 잃지 않으면서 양질의 글을 발굴하는 것일 겁니다.
저 레이아웃을 개인 블로그에 적응시킨다면 단순히 사이드바 메뉴 중 하나가 아니라 검색방문자들에게 간략하지만
빠르게 관심분야를 알림으로써 관련 검색어에 대한 저의 전문성 정도를 알리게 될 것입니다. 검색사이트에서 찾아준 한개의 포스트와 그것을 읽고 판단하던 것에서 최근 작성한 글들 속에서 '한개의 포스트'를 볼 수 있게 도와주는 것입니다.
분야가 다르다면
빠르게 빠져나갈 수 있게 도움을 줄 것이며 관심분야가 유사하다면
다른 글들도 소개하는 공간이 될 것입니다.
올블로그 레이아웃과 시선
1→2→3의 순서로 시선이 옮겨집니다. 검색기능은 개인 블로그에서 비중이 낮으므로 전면에 배치하지 않았습니다.
블로고스피어는 지금이라는 코너를 태그와 최근글로 대체해보고 개인 블로그에서 이슈가 되고 있는 글들을 알아볼 수 있게 최근 댓글도 전면에 배치했습니다.
적용모습과 향후개선
referer로 시작해서 post로 끝나는 top_menu는 실용성을 강조해서 빼지 않았으며
어눌하게 최근글 등이 배치되어 있습니다. 옵션은 티스토리 기본 환경설정에서 조정이 된지만 글 개수는 html에서 height를 변경하지 않는 한 4개까지만 표시됩니다. header가 차지하는 비중이 높으면 기사 읽기에 방해가 된다고 생각했기 때문입니다. 사이드바 항목중 세개를 상단에 위치시킴으로써 사이드바 길이를 줄일 수 있었습니다. 로고를 뺀다면 1024*768의 해상도에서도 약간의 스크롤로 모든 메뉴항목을 볼 수 있을 정도의 길이가 되었습니다.
검색 사용자가 많으므로 로고 이미지(수막새) 항목을 뺄 것을 생각해 보았으나 재방문시 알아볼 수있도록 하기위해 일단 넣었으며 '장문작문은 요즘'이라 쓰여진 아래 공간에 작은 크기로 옮길 생각이다.
그리고 올블로그처럼 OnMouse함수의 Behavior를 생각하고 있습니다. 키워드별로 글을 보여줄 수 없기 때문에 불필요해 보이기도 합니다.
레이아웃은 허접하지만 본래의 의도를 충분히 살린 것 같아서 만족스럽습니다.
(클릭) 소스 공개 Html
<div id="top_resent">
<div class="title">
<a href=""> </a>은 <span class="style1">요 즘</span> </div>
<!-- title close -->
<div class="top_tags">
<h3>태 그</h3>
<ul>
<li>
<s_random_tags>
<a href="" class=""> </a>
</s_random_tags>
</li>
</ul>
</div>
<div class="top_comment"><h3>최근 댓글</h3>
<ul>
<li>
<s_rctrp_rep>
<a href="">.</a><br/>
</s_rctrp_rep>
</li>
</ul>
</div><!-- top_comment close -->
<div class="top_resent_post"><h3>최근 글</h3>
<s_rctps_rep>
<a href=""> .</a> <span class="cnt"></span> <br/>
</s_rctps_rep>
</div><!-- top_resent_post close -->
(클릭) 소스공개 CSS
/* 위 최근 동향*/
#top_resent {
clear: both;
margin-right: 6px;
height: 80px;
padding: 2px;
margin-left: 9px;
vertical-align: middle;
}
#top_resent h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding:3px 5px 0px 0px;
margin:0px;
color: #56CFBD;
text-decoration: blink;
}
#top_resent a:link {
color:#666666
}
.title {
width: 18%;
float: left;
margin: 5px;
text-align: right;
font-size: 14px;
font-weight: bold;
height: 86px;
}
.top_tags {
float: right;
width: 27%;
margin: 5px;
height: 86px;
background-color: #FFFFFF;
overflow: hidden;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: justify;
padding: 4px;
}
.top_tags li {
list-style:none;
}
.top_tags .cloud1 {
font-size : 14px;
color : #FF6600!important;
margin: 5px;
}
.top_tags .cloud2 {
font-size : 12px;
color : #FF9900;
margin: 5px;
}
.top_tags .cloud3 {
font-size : 11px;
color : #FFCCCC;
margin: 5px;
}
.top_tags .cloud4 {
font-size : 11px;
color : #000000;
margin: 5px;
}
.top_tags .cloud5 {
font-size : 11px;
color : #666666;
margin: 5px;
}
.top_tags a:hover {
background-color:#FF3300;
color:#FFFFFF;
}
.top_tags a:visited {
color:#777
}
.top_resent_post {
float: right;
width: 23%;
margin: 5px;
height: 86px;
background-color: #FFFFFF;
overflow: hidden;
padding: 4px;
}
.top_resent_post li {
list-style:none;
}
.top_resent_post a:visited {
color:#777
}
.top_comment {
float: right;
width: 23%;
margin: 5px;
height: 86px;
background-color: #FFFFFF;
overflow: hidden;
padding: 4px;
}
ps) 스킨 소스는 (능력껏) 블로그에 적용하는 것만을 인정합니다.
적용하신 분은 댓글남겨 주세요 구경갑니다.
배경으로 색이나 이미지(기본 제공, 이미지(10M까지) 사용 가능. 반복 옵션으로 패턴 이용가능. 
헤더 영역 높이를 막대바로 조절가능하며 제목의 색상, 글꼴(굴림, 돋움, 바탕, Arial), 크기(8, 9, 10, 11, 12, 16, 24, 32px) 조정가능
