[티스토리 최적화]CSS, 스킨 커스터마이징 정리

티스토리 공감 버튼 앞에 멘트 자동으로 붙이기

https://gg-l.tistory.com/36

티스토리 공감앞에 글자 넣기어서 방문자 늘리기!

이 분의 포스팅을 전적으로 참고하였다!

나중에 css 복구해야 할 때 보기 위해서 남겨두는 기록이기도 하다.ㅎㅎ

/* 추천 구걸을 위한 내용 */ 
.container_postbtn:before { 
	content: " 도움이 되셨다면 공감 꾹❤\a▼로그인 없이 가능합니다▼";
	white-space: pre; overflow-wrap: break-word; 
	color: #666; font-size: 14px; font-weight: bold; 
	position: absolute;	top: -20px;
	left: calc(50% - 125px);
	width: 250px;
	text-align: center;
}

위 코드를 css 빈 공간에 붙여넣으면

다음과 같이 기본적인 멘트가 나온다.

 

움직이는 공감 버튼 만들기

https://hkebi.tistory.com/1786

티스토리 공감 하트 움직이게 하는 방법

여기를 참고해서

/* 하트 CSS 추가 */ .ico_like { position: relative; animation: ico_like 1s infinite; margin:0 auto } .ico_like:before, .ico_like:after { position: absolute; content: ""; top: 0; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } .ico_like:after { left: 0; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; } @keyframes ico_like { 0% { transform: scale( .75 ); } 20% { transform: scale( 1 ); } 40% { transform: scale( .75 ); } 60% { transform: scale( 1 ); } 80% { transform: scale( .75 ); } 100% { transform: scale( .75 ); } }

를 css 제일 아래에 붙여넣었다.

이렇게!
공감 버튼이 살아 움직인다 ㅎㅎ

티스토리 공감 버튼 중앙 정렬

https://itfix.tistory.com/463

티스토리 공감, 공유 버튼 가운데 정렬 및 버튼 삭제

위 블로그를 참고했다. 

/* 공감버튼 가운데 정렬 */

.container_postbtn .postbtn_like { float: none !important; display: inline-block; }

.container_postbtn { text-align: center; }

.container_postbtn button { vertical-align: top !important; }

 

위 코드를 css의 아무곳에나 붙여넣으면 끝.

나는 공감 멘트 바로 밑에 붙여넣었다.

 

오.. 훨씬 예뻐졌다!!

인용 따옴표 닫기

https://iter.kr/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC-%EC%9D%B8%EC%9A%A9%EA%B5%AC-%EB%94%B0%EC%98%B4%ED%91%9C-%EB%8B%AB%EA%B8%B0/

티스토리 인용구 따옴표 닫기, 인용구 닫기 따옴표 추가 방법

22.08.01

이 블로그 글을 참고해서 인용구 따옴표 닫기로 CSS 수정 완료! CSS 맨 하단에 추가했다.