블로그 스팟(Blogger)에 복사 버튼이 있는 코드 상자(Code Box)를 추가하는 방법에 대해 알아보겠습니다. Blogger는 워드프레스와 달리 플러그인이 존재하지 않기 때문에 원하는 기능을 직접 구현하는 수 밖에 없습니다.
아니면, 원하는 기능이 포함되어 있는 테마 템플릿을 구하는 방법도..(* ̄0 ̄)ノ 있습니다만, 이것 역시 만만치가 않습니다.
내가 원하는 기능을 갖춘 템플릿을 구하기도 어려울 뿐 더러, 찾는다고 해도 대부분이 외국 사이트에서 유료로 판매하는 제품들이라 ㅇ.ㅇ;;
거기다 판매하는 얘들 중에 사기꾼도 더러 있더라구요 ㅠ.ㅠ;;
블로그 스팟(Blogger)이 장점도 많지만, 이런 점에서는 단점이 자꾸 드러나네요.
누군가에게는 꼭 필요로 할, 코드 상자를 추가하는 방법에 대해 알아보겠습니다.
Let’s start!
블로그 스팟(Blogger)에 복사 버튼이 있는 코드 상자(Code Box)를 추가하는 방법?
HTML, CSS , 자바 스크립트에 대해 잘 모르시더라도 겁 먹지 마세요. 이미 코드 박스 디자인은 나와 있으니, 테마 파일에 잘 붙여 넣으시기만 하면 됩니다.
1 단계 : 우선 블로그 스팟(Blogger)에 접속합니다.
2 단계 : Blogger 대시보드에서 테마를 클릭합니다.
3 단계 : ‘맞춤설정’ 버튼 옆에 있는 아래쪽 화살표 아이콘을 클릭합니다.
4 단계 : HTML 편집을 선택하면 편집 페이지로 리디렉션됩니다.
5 단계 : 다음 코드를 검색하여 코드 바로 위에 CSS 코드를 붙여넣습니다.
검색할 코드 : ]]></b:skin>
]]></b:skin>
.cBox{position:relative;background:#fff;width:100%;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.1);padding:20px;margin:30px 0 30px} .cBox .cBoxH{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px} .cBox .cBoxH span{margin:0;font-weight:700;font-family:inherit;font-size:1.1rem} .cBox .cBoxB{cursor:pointer;display:inline-flex;align-items:center;padding:12px;outline:0;border:0;border-radius:50%;background:#056aff;transition:all .3s ease;-webkit-transition:all .3s ease} .cBox .cBoxB:hover{opacity:.8} .cBox .cBoxB .icn{flex-shrink:0;display:inline-block;width:18px;height:18px;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><rect x='5.54615' y='5.54615' width='16.45385' height='16.45385' rx='4'/><path d='M171.33311,181.3216v-8.45385a4,4,0,0,1,4-4H183.787' transform='translate(-169.33311 -166.86775)'/></svg>");background-size:cover;background-repeat:no-repeat;background-position:center} .cBox .cBoxB.copied{background:#2dcda7} .cBox .cBoxB.copied .icn{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 24 24'><path d='M22 11.07V12a10 10 0 1 1-5.93-9.14'/><polyline points='23 3 12 14 9 11'/></svg>")} .cBox pre{min-height:350px;margin:0;background:#f6f6f6;padding:15px;border-radius:5px;color:#08102b;font-size:.8rem;font-family:monospace;overflow:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch} .cBox pre::before, .cBox pre::after{content:''} .darkMode .cBox{background:#2d2d30} .darkMode .cBox pre{background:#252526;color:#fffdfc} .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards} @media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}} @keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}} @-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}} .darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
6 단계 : 다음 코드를 검색하여 바로 아래에 다음 HTML을 붙여넣어 태그를 지정합니다. 찾지 못하면 이미 구문 분석되었을 수 있습니다.
검색할 코드 : <body>
<body>
<div id='toastNotif' class='tNtf'></div>
7 단계 : 이제 다음 코드를 검색하여 바로 위에 다음 JavaScript 코드를 태그에 추가합니다. 찾지 못하면 이미 구문 분석되었을 수 있습니다.
검색할 코드 :
</body>
</body>
<script>/*<![CDATA[*/ function copyC(e,t){var o=document.getElementById(e),n=document.getElementById(t),e=getSelection(),t=document.createRange();e.removeAllRanges(),t.selectNodeContents(n),e.addRange(t),document.execCommand("copy"),e.removeAllRanges(),o.classList.add("copied"),document.getElementById("toastNotif").innerHTML="<span>Copied to Clipboard!</span>",setTimeout(()=>{o.classList.remove("copied")},3e3)} /*]]>*/</script>
8 단계 : 마지막으로 변경 사항을 저장합니다.
완료되었습니다! 이제 블로그 게시물에서 코드박스(Codebox)를 표시하려는 모든 위치에서 아래 HTML 코드를 사용하세요.
<!--[ Code Box 1 ]--> <div class='cBox'> <div class='cBoxH'> <!--[ Heading ]--> <span>HTML</span> <!--[ Copy Button ]--> <button id='copy1' class='cBoxB' onclick="copyC('copy1','code1')"> <i class='icn'></i> </button> </div> <!--[ Content ]--> <div id='code1'> <pre>Your_codes_here</pre> </div> </div> <!--[ Code Box 2 ]--> <div class='cBox'> <div class='cBoxH'> <!--[ Heading ]--> <span>CSS</span> <!--[ Copy Button ]--> <button id='copy2' class='cBoxB' onclick="copyC('copy2','code2')"> <i class='icn'></i> </button> </div> <!--[ Content ]--> <div id='code2'> <pre>Your_codes_here</pre> </div> </div> <!--[ Code Box 3 ]--> <div class='cBox'> <div class='cBoxH'> <!--[ Heading ]--> <span>JS</span> <!--[ Copy Button ]--> <button id='copy3' class='cBoxB' onclick="copyC('copy3','code3')"> <i class='icn'></i> </button> </div> <!--[ Content ]--> <div id='code3'> <pre>Your_codes_here</pre> </div> </div>
마무리
지금까지 블로그 스팟(Blogger)에 코드박스를 추가하는 방법에 대해 알아보았습니다. Blogger가 초기 셋팅은 힘이 들지만, 셋팅만 완성되면 구글 서버의 가호를 받을 수 있으니, 마냥 나쁜 것만은 아니죠. (*゜ー゜*)
셋팅이 완성되는 그날까지 모두 화이팅! 입니다.
그럼 다음에는 더 좋은 글로 찾아뵙겠습니다.
![](https://stepslow.com/wp-content/uploads/2023/11/a-girl-in-glasses-sticker-art-watercolor-headshot2.webp)
아래 링크한 글들도 추천 드려요