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 mempunyai akun media sosial. Oke lanjut ke tutorial memasanag widget sosial media di blogger.
Simpan.
3. Silahkan klik tombol dibawah ini untuk melihat tampilan Demo.
Demo
 |
| Tampilan social button responsive |
Cara Pasang Widget Social Media di Blogger
1. Masuk ke Dashboard blogger > Template > Edit HTML. Cari tag </head> kemudian letakan isyarat berikut ini sempurna 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 isyarat 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="Cara Pasang Widget Social Media di Blogger"></span> </a> </li> <li> <a href="#" target="blank" rel="nofollow noopener" class="social-twitter"> <span class="fa fa-twitter" title="Cara Pasang Widget Social Media di Blogger"></span> </a> </li> <li> <a href="#" target="blank" rel="nofollow noopener" class="social-instagram"> <span class="fa fa-instagram" title="Cara Pasang Widget Social Media di Blogger"></span> </a> </li> <li> <a href="#" target="blank" rel="nofollow noopener" class="social-blogger" title="Cara Pasang Widget Social Media di Blogger"> <span class="fa fa-user"></span> </a> </li> </ul>Simpan.
3. Silahkan klik tombol dibawah ini untuk melihat tampilan Demo.
Demo
