어떻게 사이트나 블로그에 사람을 끌어당기는 공유 단추를 추가합니까
우선, 왜 사이트나 블로그에 공유 버튼을 추가해야 하는지, 왜 그것은 웹 개발의 중요한 구성 부분입니까?
우리 시작합시다!
먼저 웹 페이지의 기본 레이아웃을 추가하고 공유 버튼에 사용할 소셜 미디어 아이콘을 포함하는 스타일시트 링크를 추가합니다.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Share this!</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css" rel="stylesheet">
</head>
<body>
<div class="sbutton">
<a href="#" target="_blank" class="sbutton reddit" tooltip="Reddit"><i class="fab fa-reddit"></i></a>
<a href="#" target="_blank" class="sbutton fb" tooltip="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" target="_blank" class="sbutton twitt" tooltip="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" target="_blank" class="sbutton linked" tooltip="Linkedin"><i class="fab fa-linkedin"></i></a>
</div>
</body>
</html>
주의:
<a> 요소에서 인용된 클래스는 배경색과 경계를 설정하는 데 사용되며, <i> 요소에서 정의된 클래스는 실제 소셜 미디어 아이콘을 표시하는 데 사용되며, 이전에 포함된 링크 here에서 인용됩니다.이제 공유 단추에 스타일을 추가합시다
<style>
.sbutton {
width: 60px;
height: 60px;
position: fixed;
left: 20px;
border-radius: 25%;
text-align: center;
margin-top: 20px;
color: white;
cursor: pointer;
}
.sbutton > i {
font-size: 38px;
line-height: 60px;
}
.sbutton.reddit {
background: darkorange;
}
.sbutton.twitt {
background: #03A9F4;
margin-top: 100px;
}
.sbutton.fb {
background: #3F51B5;
margin-top: 180px;
}
.sbutton.linked {
background: rgb(10, 128, 224);
margin-top: 260px;
}
</style>
우리는
sbutton 클래스를 정의했는데 이 클래스는 우리의 공유 단추를 포함하고 다음과 같은 속성을 부여할 것이다.
text-align: center; 속성이 있습니다.margin-top: 20px; 속성으로 맨 위에 있는 아이콘을 sbutton 용기 맨 위에서 아래로 20px를 놓는 데 사용됩니다.cursor: pointer 용기에 <i> 요소의 스타일을 설정하여 38px의 글씨체 크기를 계승한다.sbutton 용기의 맨 위에서 100px를 아래로 배치합니다.sbutton 속성을 80px 증가시킵니다.마지막으로 아주 중요한 일!
보시다시피, 저희 공유 단추의 href 속성은 아무런 효과가 없습니다.
공유 단추를 통해 공유된 링크를 예로 들자.
아이콘의 href 속성 URL을 각 소셜 미디어 플랫폼의 게시물 페이지에 제공하고 새 게시물에 우리의 예시 링크를 포함하도록 하겠습니다.
<div class="sbutton">
<a href="https://www.reddit.com/submit?url=https://dev.to/code_jedi" target="_blank" class="sbutton reddit" tooltip="Reddit"><i class="fab fa-reddit"></i></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://dev.to/code_jedi" target="_blank" class="sbutton fb" tooltip="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="https://twitter.com/share?url=https://dev.to/code_jedi" target="_blank" class="sbutton twitt" tooltip="Twitter"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url=https://dev.to/code_jedi" target="_blank" class="sbutton linked" tooltip="Linkedin"><i class="fab fa-linkedin"></i></a>
</div>
Reddit:
페이스북:
트위터:
영영:
다음은 기능 공유 버튼의 모양입니다.
이제 블로그 또는 웹 사이트에 추가할 수 있습니다.
이전에 사용한 the stylesheet의 클래스를 인용하여 Whatsapp이나 RSS와 같은 더 많은 소셜 미디어 아이콘을 추가할 수 있습니다.
이 박문은 여기까지입니다. 당신이 유용하다고 느끼기를 바랍니다!
있다면 더 많은 개발 블로그에 관심을 가져야 한다.
바이이👋
Reference
이 문제에 관하여(어떻게 사이트나 블로그에 사람을 끌어당기는 공유 단추를 추가합니까), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/code_jedi/how-to-add-attractive-share-buttons-to-your-website-or-blog-59bm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
