구글 블로그 탭(Tab) 메뉴 만들기
alt="구글 블로그 Blogger 탭 만드는 방법"
width="1280"
height="720"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHr4MiAxvvFp626vWcEGuqL2hyphenhyphen0Q3K_SDZ4EqjMIr1twbjGCUjL6Al81hlJvdMzBm76HxFi_W8-CabdkMoXNgS_eUjAqkLutJ_reH3oLXN3KlqxVCxvNRDnZTpCjCM8FV1KpCk9SNFUUQ/s0/post-tabs.png"
/>
기본적으로 3개의 탭을 사용할 수 있으며 하나의 게시물에 최대 4개의 탭을
추가할 수 있습니다.
Tabs Post.txt를 다운로드합니다.- 텍스트 파일을 열어 기존 코드를 모두 복사합니다.
Blogger 게시물 편집기에서
>- 이전에 복사한 모든 코드를 게시물에 붙여넣습니다.
Tabs Post.txt
2kb
class="button"
aria-label="Download"
href
="https://drive.google.com/uc?export=download&id=1nPdA74eVf_DZoneA9SUZBPwyCOVaCxoq"
rel="noreferrer"
target="_blank"
> >
처음에 원하는 탭을 표시하려면?
표시하려는 탭의 <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>전체 코드는 아래와 같습니다.
id="preT-2"
type="radio"
name="preTab"
checked
/>
<!--[ 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}method="post"
target="_blank"
style="margin-top:auto;margin-bottom:auto;"
>
value="<p>적용이 잘 되었나요? <a href='https://urliveblogger.blogspot.com/2021/03/how-to-add-tabs-to-blogger-blogspot-with-html-css-javascript.html'>✔</a> <a href='https://urliveblogger.blogspot.com/p/ask-question.html' style='color:red;'>✘</a></p>
<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'>
<div class='tbHd scrlH'>
<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'>
<div class='tbText-1'>
First tab here...
</div>
<div class='tbText-2'>
Second tab here...
</div>
<div class='tbText-3'>
Third tab here...
</div>
</div>
<style>
.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}
</style>"
type="hidden"
/>
value="https://urliveblogger.blogspot.com/p/tryityourself.html"
type="hidden"
/>
value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwc3kJgV4VdSW7N6voGTWToRFe2oVK2XUw6HTaobmItZJUC9MUiN95Tl3HKdgtUHKFLreOWW7HQ70zLhsNavJKtl6VLrZICSJjjjNE4BinRS9MssfWPUvYlITeSpkc1-iPUVO-mCsTF58/s0/product-experts-blogger-sfc-746x359.png"
type="hidden"
/>
value="직접 사용해보기"
type="submit"
style="padding:12px 24px;cursor:pointer;"
/>
미리 보기
콘텐츠 확장을 위한 샘플 텍스트
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.