블로그스팟 링크버튼 간단하게 만들기

블로그스팟 링크버튼 간단하게 만들기에 대해 알아 봅니다. 구글 블로그인 블로그스팟의 경우 단순히 링크를 거는 것보다 링크버튼을 사용하면 훨씬 직관적이므로, 클릭율을 높일 수 있습니다. 


블로그스팟 링크버튼
블로그스팟 링크버튼 만들기


블로그스팟 링크버튼 간단하게 만들기

블로그스팟에 링크 버튼을 만들때 버튼 소소를 자동으로 생성해주는 가장 일반적인 사이트로서 많이 이용되는 곳이 바로 CSS 버튼 자동 생성기 사이트입니다. 

이하에서는 위 자동 생성기 사이트에서 링크버튼 만드는 방법을 알아 본 다음 그 링크버튼을 블로그스팟 블로그에 직접 삽입하는 방법에 대하여 순차적으로 살펴봅니다. 


링크버튼 만드는 방법

그럼 먼저 위 CSS 버튼 자동 생성기 사이트에서 원하는 링크버튼을 만드는 방법에 대하여 살펴 봅니다


CSS버튼 자동생성기 바로가기  


CSS버튼 자동생성기
CSS버튼 자동생성기 사이트


1. CSS버튼 자동생성기 사이트에 접속합니다. 로그인하지 않아도 됩니다. 

2. 자신이 원하는 버튼을 만들면 됩니다. 

가. 오른쪽에서 글자, 테두리, 버튼을 눌러 글자크기, 넓이 등을 조절합니다. 

나. 왼쪽에서 버튼 색상을 조절하고, 버튼글자를 원하는 링크 제목으로 변경합니다. 또한 글자를 굵게 표시하고 싶으면 이를 체크합니다. 

3. 기타 원하는 대로 조절하여 링크버튼모양을 완성합니다. 


링크버튼 삽입하는 방법

그럼 완성된 링크버튼을 블로그스팟에 삽입하는 방법을 알아보겠습니다. 

링크버튼
완성된 링크버튼


1. 버튼 모양이 완성되었으면 왼쪽 하단의 코드를 Ctrl + A, Ctrl + C를 눌러 복사합니다.

2. 블로그스팟에서 작성하는 글로 돌아갑니다. 

블로그스팟
블로그스팟

가. 링크버튼을 삽입할 부분에 '링크버튼삽입부분'과 같이 적당한 표현을 해둡니다.
나. 왼쪽 상단의 연필모양의 아이콘을 클릭하여 HTML 보기를 클릭하여 HTML 모드로 진입합니다.  

HTML 모드
HTML 모드

3. HTML 모드에 진입하여 '링크버튼삽입부분'의 앞과 뒤부분에 커서를 위치시킨다음 엔터를 눌러 링크버튼을 삽입할 부분을 구분해두면 편합니다. 

코드붙여넣기
코드 붙여넣기

4. 위 '링크버튼삽입부분'에 블럭을 지정한 다음 Ctrl + V를 하여 위에서 복사한 코드를 위 '링크버튼삽입부분'이라는 글자 부분에 붙여넣기를 합니다. 

링크버튼이 삽입된 모습

5. 왼쪽 상단부분의 연필모양을 눌러 다시 HTML 모드에서 '새글작성보기 모드'로 전환하면 위와 같이 링크버튼이 삽입된 것을 알 수 있습니다. 보기 편하게 가운데 정렬합니다. 

링크넣기
링크버튼에 링크넣기


6. 위 링크버튼에 마우스로 블럭을 지정한 다음(또는 커서를 갖다놓은 상태) 상단의 링크 표시를 눌러 원하는 사이트의 링크주소와 제목을 입력하고 하단의 적용을 눌러 저장하면 됩니다. 

완성된 링크버튼
완성된 링크버튼


7. 완성된 링크버튼의 모양을 확인하기 위해서는 미리보기 또는 게시를 하여야 합니다. 위는 미리보기를 하여 완성된 모양을 확인한 것입니다. 
 

결론

블로그스팟 링크버튼을 간단하게 만드는 방법에 대하여 알아보았습니다. CSS버튼 자동생성기 사이트에서 위와 같이 쉽게 만들어 블로그스팟에 삽입할 수 있으니 많이 활용하시기 바랍니다.