모바일 장치에서 특정 위젯을 숨기고 싶을 때가 있습니다. 예를 들어 사이드바에 있는 위젯은 모바일 환경에서 본문 하단에 배치됩니다. 페이지의 길이가 지나치게 길어 페이지를 불러오는 데 시간이 오래 걸리며 데스크톱 기기와 달리 하단의 태그 메뉴는 방문자가 사용하기 불편하고 모바일 메뉴만으로도 충분하기 때문에 사실상 불필요합니다.
제 블로그에는 사이드바에는 인기 글 위젯과 태그 위젯이 있습니다. 모바일에서 태그 위젯을 숨기고 동일한 기능의 스크롤 메뉴는 모바일에서만 보이게 보았습니다. 모바일에서 특정 위젯을 숨기는 방법은 다음과 같습니다.
모바일에서 특정 위젯 숨기기와 보이기
isMobileRequest을 사용하여 모바일에서 위젯을 숨기기 또는 모바일에서만 표시되도록 합니다.
테마를 수정하기 전에 백업하는 것을 잊지 마세요!
1. 모바일에서 숨기기
1단계: Blogger 대시보드에서 테마를 클릭합니다.
2단계: 맞춤 설정 버튼의아이콘을 클릭합니다.
3단계: HTML 편집을 선택하면 편집 페이지로 이동합니다.
4단계: 편집할 위젯을 검색합니다. 자신의 테마에 적용할 위젯 위치를 찾아주세요! 아래 예시 참고.
<b:widget id='HTML1' locked='false' title='태그' type='Label' version='2' visible='true'>
위젯의 시작 부분에 cond='!data:blog.isMobileRequest'를 추가합니다.
<b:widget cond='!data:blog.isMobileRequest' id='HTML0000' locked='false' title='태그' type='Label' version='2' visible='true'>
5단계: 저장을 하고 모바일과 데스크탑에서 블로그 페이지를 새로고침하여 확인합니다.
이제 태그 위젯은 모바일에서 숨겨지게 되었습니다. 태그 위젯 대신 상단 스크롤 메뉴를 모바일에만 표시되도록 하겠습니다.
2. 모바일에서만 보이기
해당 위젯 코드에 cond='data:blog.isMobileRequest'를 추가합니다.
<b:widget cond='data:blog.isMobileRequest' id='HTML0001' locked='true' title='상단 스크롤 메뉴' type='LinkList' version='2' visible='true'>
모바일에서만 보이게 할 때는 data앞에 (!)를 표시하지 않습니다.
저장을 하고 모바일과 데스크탑에서 블로그 페이지를 새로고침하여 확인합니다. 이제 제 블로그에서는 데스크 탑에서는 태그 위젯을 모바일에서는 상단 스크롤 메뉴를 표시합니다.
모바일과 데스크탑에서 각각 다르게 표시
애드센스 광고 같은 경우 이 방법을 사용해 볼 수 있습니다. 예를 들어 데스크탑에서는 멀티플렉스 광고를, 모바일에서는 반응형 디스플레이 광고를 보여주고 싶을 수 있습니다. 아래 조건식을 참조하세요.
<b:if cond='!data:blog.isMobileRequest'> 데스크탑에서 보여줄 광고 <b:else/> 모바일에서 보여줄 광고 </b:if>
지나치게 긴 페이지는 페이지 로드 시간이 오래 걸린다는 문제도 있지만 디자인 관점에서 방해가 되거나 방문자를 피로하게 할 수 있습니다. 모바일 장치와 데스크탑에서 각각 적합한 위젯을 배치해보세요!