블로그 스팟에 복사 버튼이 있는 코드 상자를 추가하는 방법

블로그 스팟(Blogger)에 복사 버튼이 있는 코드 상자(Code Box)를 추가하는 방법에 대해 알아보겠습니다. Blogger는 워드프레스와 달리 플러그인이 존재하지 않기 때문에 원하는 기능을 직접 구현하는 수 밖에 없습니다.

아니면, 원하는 기능이 포함되어 있는 테마 템플릿을 구하는 방법도..(*￣０￣)ノ 있습니다만, 이것 역시 만만치가 않습니다.

내가 원하는 기능을 갖춘 템플릿을 구하기도 어려울 뿐 더러, 찾는다고 해도 대부분이 외국 사이트에서 유료로 판매하는 제품들이라 ㅇ.ㅇ;;

거기다 판매하는 얘들 중에 사기꾼도 더러 있더라구요 ㅠ.ㅠ;;

블로그 스팟(Blogger)이 장점도 많지만, 이런 점에서는 단점이 자꾸 드러나네요.

누군가에게는 꼭 필요로 할, 코드 상자를 추가하는 방법에 대해 알아보겠습니다.

Let’s start!

블로그 스팟(Blogger)에 복사 버튼이 있는 코드 상자(Code Box)를 추가하는 방법?
마무리

블로그 스팟(Blogger)에 복사 버튼이 있는 코드 상자(Code Box)를 추가하는 방법?

HTML, CSS , 자바 스크립트에 대해 잘 모르시더라도 겁 먹지 마세요. 이미 코드 박스 디자인은 나와 있으니, 테마 파일에 잘 붙여 넣으시기만 하면 됩니다.

1 단계 : 우선 블로그 스팟(Blogger)에 접속합니다.

Blogger.com - Create a unique and beautiful blog easily.

Publish your passions your way. Whether you’d like to share your knowledge, experiences or the lates...

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>