구글 블로그 사이드바 모바일 숨기기, 데스크탑 보이기, 모바일 속도 빠르게

구글 블로그 반응형 테마는, 모바일로 접속하면 사이드바가 접히고 상단에 햄버그 아이콘이 표시됩니다. 화면에 사이드바가 보이지는 않지만, 사이드바 내용을 로딩 하므로, 블로그 로딩 시간이 많이 걸리게 됩니다.

사이드바 내용이 많거나 큰 용량의 이미지가 있어, 페이지 로딩 속도가 문제 된다면, 모바일에서는 사이드바를 로딩하지 않도록 하는 방법도 생각해 볼 수 있겠습니다. 방문자가 햄버그 버튼을 눌러 사이드바 내용을 빈번하게 사용하는지를 잘 헤아려 볼 필요가 있습니다.

방법은 간단합니다.
사이드바 영역에 아래와 같은 조건을 설정해 주면 됩니다.

cond='data:blog.isMobileRequest == "false"'

구글 블로그 사이드바 모바일 숨김, 데스크탑 보임 - 반응형 테마 Contempo, Soho, Emporio


>> 블로그 대시보드 > 테마(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: &quot;flat-icon-button ripple sidebar-back&quot; }' 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: &quot;flat-icon-button ripple sidebar-back&quot; }' name='backArrowIcon'/>
      </div>
      <div class='sidebar_top_wrapper'>
        <b:class cond='data:widgets none w =&gt; w.sectionId == &quot;sidebar_top&quot;' 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: &quot;flat-icon-button ripple sidebar-back&quot; }' 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>

이렇게 하면, 사이드바 영역은 잡히지만, 사이드바에 있는 내용은 로딩되지 않습니다. 사이드바를 여는 햄버그 버튼과, 사이드바를 닫는 화살표 버튼은 표시됩니다.


위 방법들은 사이드바 뿐만 아니라, 특별히 로딩 속도를 떨어뜨리는 부분(영역)이나 가젯(위젯)이 있다면,  그러한 문제를 해결할 수 있는 길 가운데 하나가 될 수 있을 것입니다. 한가지 주의할 것은, 브라우저 종류와 버전에 따라 작동 상태가 다르게 나타날 수 있으므로, 확인을 할 필요가 있습니다.

>> 가젯(위젯)을 특정한 페이지에만 또는 모바일에만 보이거나 숨기는 방법
주인으로 삽시다 !
우리 스스로와 사랑하는 후세대를 위하여 !
사람(人) 민족 조국을 위하여 !!



《조로공동선언 : 2000년 7월 19일 평양》
반제자주 다극세계 창설 - 공정하고 합리적인 국제질서 수립



>> 조선 땅을 점령함 : 점령자(침략자) 미제국 맥아더 포고령

>> 한국인 마루타 : 주한미군 세균전 실체

>> 강제 백신(예방) 접종 : 강제 인구감축 대량학살 무기

>> 끊임없이 전쟁을 부추기는 피아트 머니 - 사기.착취.략탈.강탈 도구

>> 현금금지(캐시리스) 전자화폐(CBDC 씨비디씨) 특별인출권(에스디알)

>> 미국 달러 몰락, IMF SDR 특별인출권 국제기축통화 부상과 금

>> 딮 스테이트 : 그레이트리셋, 유엔 아젠다 2030, 2021, SDG 17, 아이디 2020, 4차산업혁명, 세계경제포럼, 세계화, 신세계질서, 세계단일정부, 세계재편



민족자주 승리에 대한 굳건한 믿음으로, 한미동맹파기! 미군철거!!

주권主權을 제 손에 틀어쥐고, 주인主人으로서 당당하고 재미나게 사는 땅을 만들어, 우리 후세대에게 물려줍시다.