[티스토리꾸미기] 블로그 전반적인 수정 작업 004

아 블로그 꾸미는데 많은 시간을 투자하면 안되는데..

마음 먹은것들은 해야해서..;;

머 여튼 오늘도 블로그를 꾸미고 포스팅을 합니다.

응 오늘 고칠 부분은 해더 부분인데..

예전부터 저 Guest 쪽 메뉴 및 검색부분이 딱히 좋지 않앗드랫드랍니다.

그래서 일단은 수정!

HTML 부분은 요래 변경되었습니다

#top 부분과 .tab_line부분을 원하는 형태로 변경하시면 되구요.

이 이미지는 js_down.png 라는 화살표모양의 이미지입니다.

반대 이미지 이구요.

소스를 보시면 jsBlogDropdownTopMenu()라는 함수가 보이는데요.

 
function jsBlogDropdownTopMenu()
{
	if($("#jsSubCategoryList").css("display") == "block") 
	{
		$("#jsSubCategoryList").css("display","none")
		$("#jsCategoryList").css("display","block")
		$("#top img").attr("src","//s1.daumcdn.net/cfs.tistory/custom/blog/161/1617543/skin/images/js_down.png")
	}
	else
	{
		$("#jsSubCategoryList").css("display","block")
		$("#jsCategoryList").css("display","none")
		$("#top img").attr("src","//s1.daumcdn.net/cfs.tistory/custom/blog/161/1617543/skin/images/js_up.png")
	}
}

라는 토글식 함수입니다. 이 함수의 역활은 메뉴를 변경해주는 역활을 합니다.

요런식으로 말이죠.

이미지 주소를 ./image 이런식으로 하니 주소를 읽지 못해서 강제적으로 이미지 주소를 넣었습니다.

여기서 끝이 아니죠..

#top {background: #FFFFFF; border-bottom:none;padding:0px;height: 33px;}
#top h1 a {color:#000;font-size:14px;line-height: 33px;}
#top h1 a:link, #top h1 a:visited, #top h1 a:active {color:#000;font-size:14px;}
#top h1 a:hover {color:#CE6C6C;}
#top h1#logo {padding:0px;float:none;}
#top .wrap > div {text-align:center;}
#top img {width:12px;}

.tab_line .category_list {line-height: 0px;}
.tab_line #jsCategoryList {max-width:768px;}
.tab_line #jsSubCategoryList {display:none; max-width:461px;height:30px;padding-top:8px;}

CSS 부분입니다. 

윈도우 창이 작아졌을때 화면이 변경되는 부분이 있어서.. 그부분을 잡아야하는데... 너무 많은 시간을 허비해서..

시간이 나면 다음 기회에 해야겠네요..ㅎ

블로그 커스텀하기 참 쉽죠잉~