IJMuAN02pVKE2uZHXG2JnZAHGfjon49GBXjko1rk

블로그스팟 슬라이드 갤러리 적용 방법

블로소득
블로소득
Update:
블로그스팟을 사용하다보면 갤러리 기능이 매우 단순하다는 것을 느낄수 있습니다.
사진을 추가하면 정말 사진 한장만 추가되는 모습을 볼 수 있는데요!
이러한 단점을 보완해줄 블로그스팟에 슬라이드 갤러리를 적용해보도록 하겠습니다.

아이디어 제공해주신 구독자 HYUONGDOCK KIM님께 감사의 인사를 드립니다.


블로그스팟 슬라이드 갤러리

슬라이드 갤러리가 도움 될 블로그는 여행, 음식, IT/테크 등 사진이 많이 들어가는 주제일겁니다.
사진 크기를 줄여서 2장 정도 보여줄수 있도록 할수 있지만 PC에서만 그렇게 보이고, 모바일에서는 한줄로 보이기 때문에 사실상 블로그스팟 갤러리는 레이아웃, 슬라이드 기능이 없는것이죠!



사진 크기를 줄이면 위와 같이 2장을 한줄에 보이게 할 순 있지만, PC에서만 이렇게 보인다는 단점이..이런 단점을 보완할 블로그스팟 슬라이드 갤러리 코드를 알려드릴께요!

블로그스팟 슬라이드 갤러리 Code

슬라이드 갤러리 코드는 총 3개로 구분되어 있습니다. 아주 쉽게 적용가능하니 겁먹지 않으셔도 됩니다.
  1. </head> 앞에 넣을 CSS 코드
  2. </body> 앞에 넣을 자바스크립트 코드
  3. 새 글쓰기(본문)안에 넣을 코드
이렇게 3개의 코드로 구분되어 있는데요!
1번과 2번 코드는 한번에 추가할거라서 아주 빠르게 적용가능하니 따라해보시기 바랍니다.

(1) CSS 코드 넣기

1. 블로그스팟 테마 > HTML 편집을 누릅니다.


2. 검색(컨트롤+F)을 해서 </head>를 찾습니다.

3. </head> 앞에 아래 코드를 복사해서 붙여넣습니다.
<style>
  .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    border: 2px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
  }
  .mySlides {
    display: none;
  }
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white !important; /* 여기에 !important 추가 */
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.5);
  text-decoration: none !important;
}

  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  .prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
  }
  .slideshow-title {
    text-align: center;
    padding: 10px;
    background-color: #f1f1f1;
    font-weight: bold;
  }
  .slide-indicator {
    text-align: center;
    padding: 10px;
  }
  .dot {
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
  }
  .active-dot {
    background-color: #717171;
  }
</style>

(2) 자바스크립트 코드 넣기

1. 이어서 검색(컨트롤+F)을 눌러서 </body>를 찾습니다.

2. </body> 앞에 아래 코드를 붙여넣기 합니다.
<script>
//<![CDATA[
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function showSlides(n) {
  var slides = document.getElementsByClassName("mySlides");
 
  if (n > slides.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = slides.length;
  }
 
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
 
  slides[slideIndex-1].style.display = "block";
}
//]]>
</script>

(3) 본문에 슬라이드 갤러리 추가하기

1. CSS와 자바스크립트 코드를 테마에 추가했다면 이제 본문에 사진만 넣어주면 끝납니다.
2. 먼저 글을 작성하고, 슬라이드 갤러리에 포함시킬 사진을 2~3장 추가합니다.
3. 이 상태에서 HTML 편집 메뉴로 들어가서 슬라이드 갤러리가 나타날 곳에 아래 코드를 넣습니다.
<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="https://blogger.googleusercontent.com/사진주소1.jpeg" style="width: 100%;" />
  </div>
  <div class="mySlides fade">
    <img src="https://blogger.googleusercontent.com/사진주소2.jpeg" style="width: 100%;" />
  </div>
  <div class="mySlides fade">
    <img src="https://blogger.googleusercontent.com/사진주소3.jpeg" style="width: 100%;" />
</div>
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>
이렇게 사진을 넣으면 원하는 위치에 슬라이드 갤러리가 추가됩니다.
만약, 슬라이드 갤러리를 자주 사용하신다면 아래 코드만 설정 > 글 템플릿에 추가해서 사용하는 방법도 있습니다. 이렇게 템플릿에 코드를 추가해두면 새 글쓰기 할 때마다 자동으로 코드가 추가되어 나옵니다.

<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://blogger.googleusercontent.com/사진주소(반복).jpeg" style="width: 100%;" />
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
다양한 기능은 없지만, 이렇게 자급자족(?)해서 만들어사용하는 재미가 있는 블로그스팟입니다.
지금은 워드프레스, 티스토리에 밀려서 힘을 못쓰고 있지만 언젠가는 빛을 볼거라 생각합니다. 감사합니다.

Related Posts

로드 중…
✖