워드프레스 버튼 추가하는 방법 (확대버튼, 카운트다운)

이 포스팅은 워드프레스 버튼 추가하는 방법으로 확대버튼과 카운트다운이 작동하는 버튼을 추가하는 방법을 소개하고자합니다. 다른 어떤 플러그인도 설치하지않고 다만 CSS를 각 버튼의 특성에 맞게 약간 만 추가 하면 됩니다. 확대버튼과 카운트다운버튼는 좀 더 문서를 생동감있게 만들어 줍니다.

본 포스팅에서는 워드프레스에서 카운트다운 버튼을 손쉽게 추가하는 방법을 안내하겠습니다. 기본적인 HTML, CSS, 그리고 워드프레스의 편집기능을 활용하여 간편하게 원하는 위치에 카운트다운 버튼을 삽입할 수 있습니다.

따라서, 여러분은 복잡한 코딩 지식이나 전문적인 웹 개발 능력이 없더라도 간단한 단계만을 따라가면서 손쉽게 워드프레스 블로그에 독특한 카운트다운 버튼을 추가할 수 있을 것입니다. 이제 함께 시작해보겠습니다.


워드프레스 버튼 만들기 (확대버튼, 카운트다운) 문구가 적혀있는 썸네일 이미지이다.


워드프레스 버튼 추가하는 방법

워드프레스에서는 버튼 추가하는 방법이 기본적으로 슬래시(/)누른 후 버튼을 입력하는 방법이 있긴합니다. 하지만 더 역동적인 효과를 주고 싶고 꾸미고 싶을때가 있습니다. 간단하게 바로 버튼을 추가하는 방법을 알려드리겠습니다.

확대버튼 (크로스오버 확대버튼)



먼저 확대버튼 하는 방버을 알려드리겠습니다. 워드프레스에서 외모를 클릭 후 추가 CSS로 접속합니다.


워드프레스 외모카테고리의 추가CSS 버튼을 표시하였다.


추가CSS를 누른다면 1,2,3 줄로 입력칸이 나오는데 텍스트파일의 스크립트를 작성해줍니다.


워드프레스 추가 CSS 입력하는 이미지이다.


이렇게 복사하여 붙여 넣어주면 됩니다. 버튼의 크기는 Padding 12px 120px 되어있습니다. 사용자의 크기에 알맞게 조절해줍니다. 그리고 폰트 사이트 18px되어있습니다. 칼라와 크로스오버시 칼라 그리고 확대비율(scale), 버튼의 라운드 크기, 등 각각 알맞게 수정할 수 있습니다.

보튼 칼라색상 PPT에서 참조하도록 이미지를 캡쳐하였다.


모바일에서도 확인가능하도록 되어있습니다. 수정이 완료되었다면 발행하여 css추가를 완료하여 줍니다.

이번에는 이제 글을 작성시 에 버튼을 추가할때는 슬러시 / 입력후 사용자정의 html를 작성하여줍니다.

image 4

카운트다운 버튼

이번에는 카운트다운 버튼입니다. 카운트다운 버튼은 사용자가 버튼을 클릭시에 시간이 카운트되면서 설정된 시간이 지난후에 버튼이 활성화되는 기능의 버튼을 말합니다.

카운트다운 버튼의 CSS 코드를 다운 받았다면 이전과 마찬가지로 CSS추가에 추가한 후 글을 작성해주시면 됩니다.

카운트다운 버튼 CSS를 추가하였다면 HTML에서도 해당 버튼을 추가해야합니다. 제가 추가하여 다운로드 받으신 버튼처럼 생성되는것을 보실수 있으실 것입니다.

샘플로 카운트다운 버튼과 크로스오버 확대버튼을 캡쳐한 사진이다.


어떻게 하면 블로그에 역동성과 다이나믹을 줄 수 있을가 고민하여 크로스오버시 색상과 확대되는 기능을 알게되었습니다. 그리고 해외사이트에서 보통 자료를 다운로드시 카운트다운이 되는 것을 종종 경험하였는데 이번에 저도 한번해보면서 공부하였습니다.

의견사항있다면 댓글남겨주시면 감사하겠습니다.

이 게시물이 얼마나 유용했습니까?

평점을 매겨주세요

평균 평점 0 / 5. 투표수: 0

지금까지 투표한 사람이 없습니다. 가장 먼저 게시물을 평가해보세요

댓글 남기기