구글 블로그 탭(Tab) 메뉴 만들기

기본적으로 3개의 탭을 사용할 수 있으며 하나의 게시물에 최대 4개의 탭을 추가할 수 있습니다.

Tabs Post.txt를 다운로드합니다.
텍스트 파일을 열어 기존 코드를 모두 복사합니다.
Blogger 게시물 편집기에서 아이콘을 클릭하고 HTML 보기를 선택하여 HTML 모드로 전환합니다.
이전에 복사한 모든 코드를 게시물에 붙여넣습니다.

Tabs Post.txt 2kb

처음에 원하는 탭을 표시하려면?

표시하려는 탭의 <input> 요소에 checked 속성을 추가하기만하면 됩니다. 쉬운 예는 아래와 같습니다.

<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>

탭 제목을 변경하려면?

아래 코드에서 강조 표시된 부분을 바꾸면 됩니다.

<!--[ Change atribute data-text='...' to replace tabs title ]-->
<label for='fTabs-1' data-text='Tabs_1'></label>
<label for='fTabs-2' data-text='Tabs_2'></label>
<label for='fTabs-3' data-text='Tabs_3'></label>

새 탭을 추가하려면?

다음과 같이 <input>, <label>, <div class='tbText-1'>의 숫자를 확인하고 변경하기만하면 됩니다.

<!--[ Active function ]-->
...
...
...
<input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  ...
  ...
  ...
  <label for='fTabs-4' data-text='Tabs_4'></label>
</div>

<div class='tbCn'>
  ...
  
  ...

  ...
  
  <!--[ Tabs content ]-->
  <div class='tbText-4'>
    Fourth tab here...

  </div>
</div>

전체 코드는 아래와 같습니다.

<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for='fTabs-1' data-text='Tabs_1'></label>
  <label for='fTabs-2' data-text='Tabs_2'></label>
  <label for='fTabs-3' data-text='Tabs_3'></label>
</div>

<div class='tbCn'>
  <!--[ Tabs content ]-->
  <div class='tbText-1'>
    First tab here... 

  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-2'>
    Second tab here...
  
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-3'>
    Third tab here...

  </div>
</div>

.tbHd{display:flex; border-bottom:1px solid #e6e6e6;margin-bottom:30px;font-size:14px;line-height:1.6em;overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;-ms-overflow-style: none}
.tbHd::-webkit-scrollbar{display:none}
.tbHd >*{padding:12px 15px; border-bottom:1px solid transparent;transition:all .1s ease;opacity:.6;white-space:nowrap;scroll-snap-align:start}
.tbHd >*::before{content:attr(data-text)}
.tbCn >*{display:none;width:100%}
.tbCn >* p:first-child{margin-top:0}
input[id*="1"]:checked ~ .tbHd label[for*="1"], input[id*="2"]:checked ~ .tbHd label[for*="2"], input[id*="3"]:checked ~ .tbHd label[for*="3"], input[id*="4"]:checked ~ .tbHd label[for*="4"]{border-color:#000000;opacity:1}
input[id*="1"]:checked ~ .tbCn div[class*="Text-1"], input[id*="2"]:checked ~ .tbCn div[class*="Text-2"], input[id*="3"]:checked ~ .tbCn div[class*="Text-3"], input[id*="4"]:checked ~ .tbCn div[class*="Text-4"]{display:block}

미리 보기

콘텐츠 확장을 위한 샘플 텍스트

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus. Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus.

Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo. Cras placerat sit amet libero sit amet rhoncus. Aenean ultrices vitae erat ut malesuada. Vivamus fringilla mollis leo, ut tempus nibh feugiat sollicitudin. Phasellus sodales maximus turpis, eget sollicitudin tortor volutpat ac.

In imperdiet ultrices iaculis. Proin consequat, massa ut hendrerit lacinia, eros nibh finibus justo, ut consectetur nibh orci vitae massa. Ut sodales lobortis sollicitudin. Phasellus eget mi dictum neque mollis vehicula. Vestibulum et dolor accumsan, volutpat est quis, posuere tortor. Maecenas euismod turpis eu metus elementum tempor. Pellentesque in ullamcorper massa. Pellentesque lectus ipsum, dignissim nec ornare et, laoreet eget ex. Duis convallis lorem vitae consequat mattis. Aenean dui lectus, auctor eu dui et, gravida pellentesque velit. In vitae justo lacus. Vivamus id imperdiet sapien. Mauris non maximus purus. Nulla facilisi.

Curabitur quis vestibulum arcu, at aliquet urna. Aenean ex risus, rhoncus vitae urna accumsan, congue aliquet tortor. Suspendisse imperdiet nibh eget odio posuere maximus. Integer vitae neque ante. Donec pellentesque dictum diam, a luctus lectus ultrices vitae.

Donec pretium dui erat, a maximus nunc dapibus sed. Nulla malesuada lectus a felis malesuada pretium. Nulla sit amet augue in neque rhoncus commodo ac nec nibh. Duis semper eleifend mauris, vel tristique velit bibendum sit amet. Mauris vitae justo eu nisl scelerisque condimentum eget eu mi.

Nullam non sapien sit amet ex consequat tempor ut nec risus. Phasellus non justo eget ex faucibus mattis. Vivamus vestibulum interdum consectetur. Morbi pulvinar ut lectus eu semper. Ut et sagittis leo. Pellentesque vitae posuere orci. Praesent sit amet egestas tortor, vel consectetur nulla. Duis feugiat consectetur nisl.

Nunc interdum a sapien sed commodo. Maecenas porttitor dictum mi quis luctus. Vestibulum turpis quam, laoreet in dignissim dapibus, ullamcorper in tortor. Morbi malesuada massa sapien, sagittis ullamcorper quam pharetra ultrices.

Donec laoreet fringilla mattis. Proin vitae scelerisque neque, nec imperdiet sem. Aliquam pellentesque euismod eros, eget pharetra est vehicula eu. Nulla ligula orci, pellentesque sed quam vel, posuere sodales neque. Nulla turpis justo, lobortis vel imperdiet ut, viverra id nunc. Aliquam ipsum lectus, rutrum vel blandit sed, commodo ut ligula.

Ut in condimentum eros. Duis in elit ultricies, molestie metus ac, dapibus augue. Pellentesque eu feugiat risus, sed rhoncus urna. Quisque viverra tellus nec placerat ullamcorper. Sed nec volutpat est, at pharetra mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eu ultrices metus. Morbi placerat tempus nibh nec ultricies.

4 comments

adfadfdfd 4년 전 4/02/2021 09:09:00 PM

테마가 깔끔하고 좋네요. 처음에는 구글 블로그 한국 공식 채널인 줄 알았습니다. ㅎㅎ
잘 보고 갑니다. 본인이 직접 하셔도 되지만 제가 나무위키에서 "구글 블로그 라벨 설정과 하위 카테고리 만들기 링크" 편집 요청을 승인했습니다. 천천히 완성해주시면 구글 블로그 이용자들에게 도움이 될 것 같습니다.
1. LiveBlogger 4년 전 4/18/2021 03:01:00 PM
  
  안녕하세요. 댓글을 늦게 확인했네요! 나무위키 편집만 해두고 승인이 안되어서 언제되지.. 기다렸는데 승인 요청을 직접 해주셨군요. 감사합니다.
korean community news admin 3년 전 8/06/2022 07:36:00 PM

여기다 댓글 달아봐야 누가 알겠삼? "notify me" 그런게 있다지만... 여러가지 google bloger에서 쓸 수 있는 Mods 개발을 좀 더 해주시면 감솨~ 🤩🥰😍 (1)지금 보면 google bloger Archive 연도별로 나오는데 금년도는 언제나 펼침 이거든여? 그거 어케 코드 좀 짜서 다 닫혀 있는 Mods 안되나여? 그거 코드 좀 공유해 주시면 감솨~ 🤩🥰😍 (2)글구 저쪽에 스킨... Null... 그거 좀 코드 수정 해서 배포 해주시면 안되나여? 그건 해주신다면 사례해 드림~ 당췌 그 스킨은 설치를 해봐야 다 깨져서 나와여~
korean community news admin 3년 전 8/06/2022 07:36:00 PM

이거 뭐여? 잡아 먹는데여?

구글 블로그 만들기