구글 블로그 사이드바 모바일 숨기기, 데스크탑 보이기, 모바일 속도 빠르게
구글 블로그 반응형 테마는, 모바일로 접속하면 사이드바가 접히고 상단에 햄버그 아이콘이 표시됩니다. 화면에 사이드바가 보이지는 않지만, 사이드바 내용을 로딩 하므로, 블로그 로딩 시간이 많이 걸리게 됩니다.
사이드바 내용이 많거나 큰 용량의 이미지가 있어, 페이지 로딩 속도가 문제 된다면, 모바일에서는 사이드바를 로딩하지 않도록 하는 방법도 생각해 볼 수 있겠습니다. 방문자가 햄버그 버튼을 눌러 사이드바 내용을 빈번하게 사용하는지를 잘 헤아려 볼 필요가 있습니다.
방법은 간단합니다.
사이드바 영역에 아래와 같은 조건을 설정해 주면 됩니다.
>> 블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML) 버튼을 눌러, HTML 편집창을 엽니다.
>> 창의 아무곳에나 마우스를 놓고, 한 번 클릭하여, 창을 활성화 시킵니다. > 키보드의 [컨트롤 + F]키를 쳐서 검색상자를 엽니다.
>> 검색상자에 <aside 를 입력하고, 엔터키를 쳐서, 해당 위치로 이동하여, 조건을 설정하는 코드를 넣습니다. <aside> </aside> 는 사이드바 영역입니다.
위 그림에서 보듯이, 사이드바 코드는 아래와 같은 모양으로 되어 있습니다.
<aside 뒤에 아래의 코드를 복사하여 붙여 넣고 저장을 하면 작업 끝입니다.
그러면, 코드가 아래 모양이 됩니다.
참고:
위와 같이 하여서 작동이 되지 않으면, 아래와 같이 <b:if> </b:if> 로 감싸는 방법으로 해보기 바랍니다.
>> 먼저, 위에서 처럼 <asdie 부분으로 이동 합니다.
>> <aside ~ ~> 바로 아래의 사이드바 여닫기 버튼(navigation)을 제외하고 나머지 영역을 <b:if> ~ </b:if>로 감싸고, <b:if>에 cond='data:blog.isMobileRequest == "false"' 조건을 설정합니다.
>> 아래에서, 빨강색으로 표시한 코드가 추가된 것입니다.
그러면, 코드가 아래 모양이 됩니다.
이렇게 하면, 사이드바 영역은 잡히지만, 사이드바에 있는 내용은 로딩되지 않습니다. 사이드바를 여는 햄버그 버튼과, 사이드바를 닫는 화살표 버튼은 표시됩니다.
위 방법들은 사이드바 뿐만 아니라, 특별히 로딩 속도를 떨어뜨리는 부분(영역)이나 가젯(위젯)이 있다면, 그러한 문제를 해결할 수 있는 길 가운데 하나가 될 수 있을 것입니다. 한가지 주의할 것은, 브라우저 종류와 버전에 따라 작동 상태가 다르게 나타날 수 있으므로, 확인을 할 필요가 있습니다.
>> 가젯(위젯)을 특정한 페이지에만 또는 모바일에만 보이거나 숨기는 방법
사이드바 내용이 많거나 큰 용량의 이미지가 있어, 페이지 로딩 속도가 문제 된다면, 모바일에서는 사이드바를 로딩하지 않도록 하는 방법도 생각해 볼 수 있겠습니다. 방문자가 햄버그 버튼을 눌러 사이드바 내용을 빈번하게 사용하는지를 잘 헤아려 볼 필요가 있습니다.
방법은 간단합니다.
사이드바 영역에 아래와 같은 조건을 설정해 주면 됩니다.
cond='data:blog.isMobileRequest == "false"'
>> 블로그 대시보드 > 테마(Theme) > HTML편집(Edit HTML) 버튼을 눌러, HTML 편집창을 엽니다.
>> 창의 아무곳에나 마우스를 놓고, 한 번 클릭하여, 창을 활성화 시킵니다. > 키보드의 [컨트롤 + F]키를 쳐서 검색상자를 엽니다.
>> 검색상자에 <aside 를 입력하고, 엔터키를 쳐서, 해당 위치로 이동하여, 조건을 설정하는 코드를 넣습니다. <aside> </aside> 는 사이드바 영역입니다.
위 그림에서 보듯이, 사이드바 코드는 아래와 같은 모양으로 되어 있습니다.
<aside class='sidebar-container container sidebar-invisible' role='complementary'>
<div class='navigation'>
<b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
</div>
<div class='sidebar_top_wrapper'>
.........................................................
</aside>
<div class='navigation'>
<b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
</div>
<div class='sidebar_top_wrapper'>
.........................................................
</aside>
<aside 뒤에 아래의 코드를 복사하여 붙여 넣고 저장을 하면 작업 끝입니다.
cond='data:blog.isMobileRequest == "false"'
이 코드는 모바일 기기로 접속하면, 해당 영역을 로딩하지 않도록 하는 것입니다. 그러면, 코드가 아래 모양이 됩니다.
<aside cond='data:blog.isMobileRequest == "false"' class='sidebar-container container sidebar-invisible' role='complementary'>
<div class='navigation'>
<b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
</div>
<div class='sidebar_top_wrapper'>
<b:class cond='data:widgets none w => w.sectionId == "sidebar_top"' name='no-items'/>
<div class='navigation'>
<b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
</div>
<div class='sidebar_top_wrapper'>
<b:class cond='data:widgets none w => w.sectionId == "sidebar_top"' name='no-items'/>
참고:
위와 같이 하여서 작동이 되지 않으면, 아래와 같이 <b:if> </b:if> 로 감싸는 방법으로 해보기 바랍니다.
>> 먼저, 위에서 처럼 <asdie 부분으로 이동 합니다.
>> <aside ~ ~> 바로 아래의 사이드바 여닫기 버튼(navigation)을 제외하고 나머지 영역을 <b:if> ~ </b:if>로 감싸고, <b:if>에 cond='data:blog.isMobileRequest == "false"' 조건을 설정합니다.
>> 아래에서, 빨강색으로 표시한 코드가 추가된 것입니다.
그러면, 코드가 아래 모양이 됩니다.
<aside class='sidebar-container container sidebar-invisible' role='complementary'>
<div class='navigation'>
<b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
</div>
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='sidebar_top_wrapper'>
.........................
.........................
.........................
</b:section>
</b:if>
</aside>
<b:template-script async='true' name='indie' version='1.0.0'/>
</body>
</html>
<div class='navigation'>
<b:include data='{ button: true, iconClass: "flat-icon-button ripple sidebar-back" }' name='backArrowIcon'/>
</div>
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='sidebar_top_wrapper'>
.........................
.........................
.........................
</b:section>
</b:if>
</aside>
<b:template-script async='true' name='indie' version='1.0.0'/>
</body>
</html>
이렇게 하면, 사이드바 영역은 잡히지만, 사이드바에 있는 내용은 로딩되지 않습니다. 사이드바를 여는 햄버그 버튼과, 사이드바를 닫는 화살표 버튼은 표시됩니다.
위 방법들은 사이드바 뿐만 아니라, 특별히 로딩 속도를 떨어뜨리는 부분(영역)이나 가젯(위젯)이 있다면, 그러한 문제를 해결할 수 있는 길 가운데 하나가 될 수 있을 것입니다. 한가지 주의할 것은, 브라우저 종류와 버전에 따라 작동 상태가 다르게 나타날 수 있으므로, 확인을 할 필요가 있습니다.
>> 가젯(위젯)을 특정한 페이지에만 또는 모바일에만 보이거나 숨기는 방법