티스토리 블로그 떠다니는 버튼, 플로팅 버튼 기능 만들기

왼쪽: 데스크톱 / 오른쪽: 모바일

⚡ 티스토리 플로팅 버튼 만들기

---

블로그 후원과 카카오톡 오픈채팅 연결 링크를 블로그에 플로팅 버튼으로 구현했습니다.

 

최상단 사진을 보면 모바일에도 대응되도록 만들었으며 소소한 애니메이션까지 추가해봤습니다.

 

별거 없이 굉장히 쉽기 때문에 본인 블로그에 기능을 추가하시려는 분들은 5분이면 충분합니다.

---

📌 관리 > 꾸미기 > 스킨편집 > html 편집

블로그를 커스텀하기 위해 위와 같은 경로로 html 편집 창으로 진입합니다.

---

📌 CSS

.float-button-container {
	z-index: 1000;
	position: fixed;
	transform: translate(-50%, 0%);
	left: 50%;
	bottom: 30px;

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	padding:0 10px;

	background: white;
	height: 40px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
	border:1px solid #e9e9e9;
	border-radius: 30px;
	text-decoration: none !important;
}

.float-button {
	display: flex;
	align-items: center;
	padding:0 20px;

	cursor: pointer;
	color:#2b2b2b !important;
	font-size: 13px;
	text-decoration: none !important;
	white-space: nowrap;
	font-weight: bold;
	transition: 0.5s;
}

.float-button:hover {
	transform: translate(0%, -20%);
}

.float-button-image {
	height: 20px;
	margin-right:5px;
}

• float-button-container
  버튼들을 감싸고 있는 컨테이너 입니다.
  position:fixed를 통해 하단에 고정하였고
  display:flex를 이용해 내부 요소들을 배치해 주었습니다.
  
  
• float-button
  display:flex를 이용해 내부 요소들을 정렬했습니다.
  색상, 폰트, 애니메이션 원하시는 대로 입맛에 맛게 커스텀 하시면 됩니다.
• float-button-image
  저는 높이 20px로 세팅해놨는데 알맞게 설정해주세요.

---

📌 html

<!-- Floating Buttons -->
<div class='float-button-container'>
  <button class="float-button">
    <img class="float-button-image" src="이미지URL" />
    커피 쏘기
  </button>
  <a class="float-button" href="이동할URL" target="_blank">
      <img class="float-button-image" src="이미지URL" />
    오픈 채팅
  </a>
</div>
<!-- Floating Buttons End -->

어떤 기능을 추가할 때는 button을 통해 이벤트를 처리하고,

링크를 이용할 때는 a 태그를 이용하면 됩니다.

 

두 경우 모두 고려해서 레이아웃을 동일하게 만들었기 때문에 원하는 기능에 따라 태그만 바꾸시면 됩니다.

 

이미지 아이콘은 티스토리에 이미지를 업로드하거나 이미지 링크를 넣어주면 되는데,

다운받고 티스토리에 넣어주기는 귀찮으니까 아래 사이트에서 링크만 복사해서 넣어줍니다.

Free Icons and Stickers - Millions of images to download

 

그럼 관리하기 편하도록 body 태그 바로 밑에 코드를 붙여넣어 주고 적용을 눌러서 결과물을 확인합니다.