기본적으로 3개의 탭을 사용할 수 있으며 하나의 게시물에 최대 4개의 탭을 추가할 수 있습니다.
Tabs Post.txt
를 다운로드합니다.- 텍스트 파일을 열어 기존 코드를 모두 복사합니다.
- Blogger 게시물 편집기에서 아이콘을 클릭하고 HTML 보기를 선택하여 HTML 모드로 전환합니다.
- 이전에 복사한 모든 코드를 게시물에 붙여넣습니다.
처음에 원하는 탭을 표시하려면?
표시하려는 탭의 <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.