무언가 궁금해서 검색을 통해 들어온 방문자들의 블로그 체류시간을 길게 하는 방법 중 하나로 바로가기 버튼생성이 있는데요~ 아래 글을 보시고 차근차근 따라 하시면 쉽게 만드실수 있답니다
먼저 바로가기 버튼을 디자인 할수 있는 사이트를 찾아서 버튼을 생성해야 하는데요
아래는, 바로가기 버튼을 디자인하는 데 도움이 되는 사이트들이예요
이러한 사이트들은 버튼 디자인에 필요한 템플릿, 아이콘, 색상 팔레트 등을 제공하여 사용자가 쉽게 원하는 디자인을 만들 수 있도록 도와준답니다
Canva (https://www.canva.com/ko/): Canva는 다양한 디자인 도구를 제공하여 바로가기 버튼을 손쉽게 디자인할 수 있습니다. 사용자는 템플릿을 사용하거나 완전히 사용자 정의된 디자인을 만들 수 있습니다.
Figma (https://www.figma.com/): Figma는 협업 및 디자인 툴로 유명한데, 사용자는 다양한 UI 요소를 디자인하고 공유할 수 있습니다. 바로가기 버튼을 만드는 데 사용할 수 있는 다양한 도구를 제공합니다.
Adobe Spark (https://www.adobe.com/uk/express/create/button): Adobe Spark는 간단한 인터페이스를 통해 바로가기 버튼을 만들 수 있는 온라인 플랫폼입니다. 다양한 디자인 요소와 템플릿을 활용하여 전문적인 버튼을 만들 수 있습니다.
Buttons Generator (https://www.bestcssbuttongenerator.com/): Buttons Generator는 다양한 스타일의 CSS 버튼을 만들 수 있는 온라인 도구입니다. 다양한 옵션을 통해 사용자 정의된 바로가기 버튼을 만들 수 있습니다.
저는 주로 Buttons Generator 사이트를 사용하는데요
1. 우선 Buttons Generator 웹사이트에 접속합니다.
2. 디자인 옵션 선택: 원하는 디자인 옵션을 선택합니다. 예를 들어, 버튼의 색상, 모양 및 크기를 선택할 수 있습니다.
3. 디자인 설정: 선택한 디자인 옵션을 사용하여 버튼의 디자인을 설정합니다. 예를 들어, 색상을 선택하고 버튼의 크기를 조정합니다.
4. 텍스트 입력: 버튼에 표시될 텍스트를 입력합니다. 이 텍스트는 버튼을 클릭했을 때 사용자를 어디로 이동시킬지를 나타냅니다.
5. CSS 코드 확인: 생성된 버튼의 CSS 코드를 확인합니다. 이 코드는 버튼의 스타일을 정의합니다.
6. 버튼 다운로드 또는 코드 복사: 생성된 CSS 코드를 다운로드하거나 복사하여 웹사이트에 적용합니다.
7. 웹사이트에 적용(블로그): 다운로드한 CSS 파일을 웹사이트에 업로드하거나, 복사한 CSS 코드를 웹사이트의 서식 시트에 붙여넣어 적용합니다.
HTML 편집 모드로 전환한 다음 다음 코드를 삽입합니다.
여기서 "링크주소"에는 바로가기 버튼을 클릭했을 때 이동할 대상의 주소(URL)를 입력하고, "이미지주소"에는 업로드한 버튼 이미지의 주소(URL)를 입력합니다.
8. 저장 및 게시: HTML 코드를 추가한 후, 시각적 편집 모드로 전환하여 버튼이 올바르게 표시되는지 확인합니다. 변경 사항을 저장하고 블로그를 게시합니다. 이제 블로그에는 사용자가 바로가기 버튼을 클릭하여 지정된 링크로 즉시 이동할 수 있습니다.
9. 블로그 글쓰기를 할때 서식에 저장해둔 버튼을 불러오면 끝입니다
제가 만든 바로가기 버튼이예요
어설프지만 한개씩 차근차근 블로그에 정보 올려 볼께요^^
바로가기