블로그에 토글 사이드바 추가하기

Posted by 도올돌

2014. 9. 17. 17:46 블로그 이야기

블로그 사이드바에 블로그 정보(설명)를 토글(Toggle)바 형태로 추가 할 수 있는 방법입니다. 제 블로그에 적용해 보았습니다.

여러 블로그들을 방문하다 보면 각자의 블로그 특성을 잘 표현한 블로그 설명 사이드바를 볼 수 있는데요. 어떤 곳은 사이드바에 블로그 정보 모듈을 사용하지 않는 블로그도 여럿 보았습니다. 물론 각자의 취향대로 겠지만.. 기본 모듈보다는 토글바 형태의 사이드바도 매력이 있어 보입니다.

블로그를 방문했을 때, 사이드바에 블로그 설명이 바로 보이는 것이 아니라, 접혀 있는 블로그 정보 사이드바를 마우스로 클릭하면 펼쳐서 볼 수도 있고 그 반대로도 표현 할 수 있습니다.

아래는 적용된 영상 입니다.

적용 방법 - FastBoot 1.6.1 스킨 기준

1. 코드를 복사해서 HTML/CSS 에 각각 삽입하고 저장 합니다.

<HTML> : 아래 사이드바 코드 요소를 <s_sidebar> ~ </s_sidebar>사이에 흰색부분을 복사해서 삽입한다.

<s_sidebar>

<s_sidebar_element>
          
          <div class="Sidebar SidebarBloginfo">
            <div class="SidebarTitle">
              <span class="SidebarTitleIcon"><i class="fa fa-info-circle"></i></span>
              <span class="SidebarTitleText">Blog Info</span>
              <span class="Toggle ToggleBlogInfo"><i class="fa fa-caret-down"></i></span>
            </div>
          <div class="SidebarContent ToggleBlogInfoContent">
             <div class="panel-body" id="blogDesc">
                <img src="[xx_image_xx]" />
                  <b>[xx_desc_xx]</b><br/> by [xx_blogger_xx]
              </div>
            </div>
         </div>
   </s_sidebar_element>

</s_sidebar>

※ 위의 xx 표시는 티스토리 치환자 표시 ##으로 모두 교체해 주어야 합니다.

<div class="panel-body" id="blogDesc">는 FastBoot 스킨의 클래스 선택자이므로, 다른 스킨은 각자의 선택자에 맞게 적용(삭제/수정/추가)하시면 되고, 나머지는 공통적으로 적용가능 합니다.

<HTML> : 아래 스크립트를 </script>바로 위에 흰색부분을 복사해서 삽입한다.

// Sidebar Toggle
$( '.SidebarTitle' ).has( '.ToggleBlogInfo' ).click( function() { $( '.ToggleBlogInfoContent' ).slideToggle(); } )

</script>

<CSS> : 아래 코드를 CSS 맨 아래에 추가한다.

/* Sidebar - 토글바 */
.Sidebar {margin-bottom: 20px;}
.SidebarTitle {background-color: #e6e9ed; color:#434a54; font-size:15px;

font-family: Arial, "돋움", Dotum, AppleGothic, sans-serif !important; font-weight: 700; cursor: pointer; border-radius: 4px;}
.SidebarTitle span {display: inline-block;}
.SidebarTitleIcon {color: #434a54; padding: 5px 2px 5px 10px;}
.Toggle {float: right; background-color: #dfdfdf; color: #ffffff; padding: 5px 14px; cursor: pointer; border-radius:4px;}
.SidebarContent {background-color: #fefefe; padding: 5px 5px 0px; border: 0px 1px 1px 0px solid #e6e9ed; box-shadow: 1px 2px 1px rgba(0,0,0,.125)}
.ToggleBlogInfoContent {text-align: center; border-radius:4px;}

/* Sidebar Toggle 표시 */
.ToggleBlogInfoContent {display: none;}

2. 티스토리 관리자 메뉴 -> 꾸미기 -> 사이드바에서 생성된 Blog Information 모듈을 본인이 원하는 적당한 위치에 드래그하여 위치 시키면 완료됩니다.

CSS 요약

① .SidebarTitle ② .SidebarTitleIcon ③ .Toggle ④ .SidebarContent

위 내용을 참고해서 CSS는 자기 블로그의 환경에 적합하도록 색상이나 여백,폰트 등을 수정하면 됩니다.

사이드바 토글 표시 여부 : 만약 첫 화면에서 토글 사이드바가 펼쳐진 상태로 셋팅하려면,

"ToggleBiogInfoContent {display: none;}" 이 부분을 삭제하거나 주석처리 하면 됩니다.

다운로드 : 토글 사이드바 추가하기.txt

참고 사이트 : http://www.cmsfactory.net/

저작자표시 비영리 변경금지

'블로그 이야기' 카테고리의 다른 글

초대장 10장 나눔해 드립니다 (42)	2014.10.01
구글 애드센스-한 달간의 뒷끝 있는 만남! (0)	2014.09.27
블로그 설명글에 파비콘 넣기 (0)	2014.09.13
구글 애드센스 승인이 났습니다.. (2)	2014.08.25