BloggerにSNSフォローボタンを追加する

利用しているSNSのフォローボタンを追加してみました。「レイアウト」設定の「HTLM/Javascript」ガジェットの追加で以下のコードを追加します。以上、簡単なのであります。下記コードを利用される場合は、ご自身のSNSプロフィールURLに変更してください。

気が向いたらフォローお願いします！！

 

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="social">
    <a href="https://www.facebook.com/tomohiko.ariki" class="fb" title="Join us on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
    <a href="https://x.com/tomohiko_ariki" class="tw" title="Join us on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    <a href="https://www.instagram.com/tomohikoariki/" class="insta" title="Join us on Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
    <a href="https://www.youtube.com/@tomohikoariki" class="in" title="Join us on Linked In"><i class="fa fa-youtube" aria-hidden="true"></i></a>
</div>
<style>
.social {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.social a {
  text-decoration: none !important;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 20px;
  font-size: 25px;
  overflow: hidden;
  position: relative;
  color: #212121;
  border: 2px solid #212121;
  transition: all 0.2s linear 0s;
}
.social a i {
  position: relative;
  z-index: 3;
  display: inline-block;
  vertical-align: middle;
}
.social a:last-child {
  margin-right: 0px;
}
.social a:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.social a:after {
  content: "";
  display: block;
  width: 90%;
  height: 90%;
  top: -110%;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  background-color: #333;
  border-radius: 50%;
}
.social a:hover {
  color: white;
}
.social a:hover:after {
  top: 5%;
  transition: all 0.2s linear 0s;
}