티스토리 공감버튼 가운데 정렬하기

안녕하세요! 오늘은 티스토리 공감버튼을 가운데 정렬하여 눈에 잘 띄도록 만들어 보겠습니다.

 

 

● 공감버튼은 기본적으로 좌측정렬 되어 있습니다.

아래 그림을 보면 공감버튼이 좌측정렬 되어 있는것을 보실 수 있습니다.

---

공감버튼이 왼쪽 정렬되어 있는 모습

 

---

● 공감버튼을 가운데 정렬하면 버튼이 눈에 더 잘 띄게 되고, 심리적 안정감을 줍니다.

아래는 공감버튼이 가운데 정렬된 화면입니다.

---

공감버튼이 가운데 정렬된 화면

 

---

 

가운데 정렬

---

 

 

● 공감버튼을 가운데 정렬하려면 스킨의 CSS를 수정해야 합니다.

다음의 화면으로 이동해줍니다.

[블로그 관리] > [스킨 편집] > [HTML 편집] > [CSS]

 

 

 

 

---

● CSS에 아래의 코드를 추가해 줍니다.

* 추가해야할 소스코드

/* 공감버튼 가운데 정렬 */ 
.container_postbtn {text-align:center;}
.container_postbtn button{vertical-align:top!important;}
.container_postbtn. postbtn_like{display:inline-block;float:none!important}

 

* 추가해야할 곳 찾기

-> 어느곳에 추가해도 상관은 없지만, 기존에 있는 .container_postbtn 을 찾아서 근처에 넣어줍니다.

추가해주면 아래와 같이 됩니다.

 

* 결과 설명

아래 코드의 위에서부터 3줄까지는 원래 있던 코드이고, /* 공감버튼 가운데 정렬*/ 부터 아래 4줄은 추가한 코드입니다.

.container_postbtn {
	margin: 53px 0 55px;
	padding: 0 !important;
}
/* 공감버튼 가운데 정렬 */ 
.container_postbtn {text-align:center;} 
.container_postbtn button{vertical-align:top!important;}
.container_postbtn. postbtn_like{display:inline-block;float:none!important}

 

 

---

 

● 공감버튼이 가운데 정렬된 화면입니다.

 

---

공감버튼이 가운데 정렬된 화면

 

 

---

티스토리 애드센스 승인 후, 한달간 수익 공개

수익형 블로그 운영 노하우

---

 

아래의 좋아요♥︎ 를 클릭해 주시면, 글 작성에 큰 힘이 됩니다 :)