Cara Pasang Widget Social Media di Blogger

Cara Pasang Widget Social Media di Blogger - Perlu agan ingat bahwa social button yang akan saya bagikan hanyalah sebuah tombol tautan. Jadi, bukan termasuk tombol share. Css ini biasa dipasang di widget blogger untuk memberitahukan kepada para pengunjung bahwa kita memiliki akun media sosial. Oke lanjut ke tutorial memasanag widget sosial media di blogger.

Tampilan social button responsive

Cara Pasang Widget Social Media di Blogger

1. Masuk ke Dashboard blogger > Template > Edit HTML. Cari tag </head> lalu letakan kode berikut ini tepat diatasnya.

<style type='text/css'>
#social-counts{position:relative}
#social-counts > li{display:block;float:left;padding:0;width:22.5%;margin:0 10px 0 0;overflow:hidden;border-radius:3px}#social-counts > li:last-child{margin:0}
#social-counts > li > a{display:block;font-size:20px;font-weight:700;height:40px;line-height:40px;padding:0 20px;opacity:.99;background-size:200% auto}
#social-counts > li:last-child > a{margin-bottom:0}
#social-counts >li > a:hover,#social-counts > li > a:focus{background-position:right center;color:#fff}
#social-counts > li > a > .fa{color:#fff;display:table;line-height:40px;text-align:center;margin:auto;vertical-align:middle}
.social-facebook{background:#3C599F;background-image:linear-gradient(15deg,#3C599F 0%,#7392dd 51%,#3C599F 100%)}
.social-twitter{background:#32CCFE;background-image:linear-gradient(15deg,#32CCFE 0%,#80ddfb 51%,#32CCFE 100%)}
.social-rss{background:#f26522}.social-youtube{background:#bb0000}
.social-blogger{background:#f39c12;background-image:linear-gradient(15deg,#f39c12 0%,#fac571 51%,#f39c12 100%)}
.social-whatsapp{background:#128c7e}
.social-instagram{background:#517fa6;background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)}
</style>

Simpan.

2. Masuk ke Tata Letak > Tambah Widget HTML > Masukan kode berikut.

<ul id="social-counts" class="social-counts">
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-facebook">
      <span class="fa fa-facebook" title="Like our Facebook"></span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-twitter">
      <span class="fa fa-twitter" title="Follow our Twitter"></span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-instagram">
      <span class="fa fa-instagram" title="Follow our Instagram"></span>
      </a>
   </li>
   <li>
      <a href="#" target="blank" rel="nofollow noopener" class="social-blogger" title="Follow our Site">
      <span class="fa fa-user"></span>
      </a>
   </li>
</ul>

Simpan.


3. Silahkan klik tombol dibawah ini untuk melihat tampilan Demo.

Demo

Related Posts