Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Widget Social Media Responsive

Cara Membuat Widget Social Media Responsive

Mumpung hawanya segar karena sore ini kota Solo diguyur hujan, saya akan membagikan cara membuat widget social media yang ringan dan responsive di Blogger. Contoh live demo bisa kamu lihat langsung di sidebar sisi kanan blog ini, atau di bagian bawah blog jika kamu akses dari HP.

Sebenarnya cara ini saya dapatkan dari SEOclive.com yang berjudul stylish transparent social media widget. Tutorial ini bisa kamu terapkan baik di platform Blogger atau Blogspot. Pada tutorial aslinya, icon social media yang digunakan memakai font icon dari Font Awesome.

Berhubung saya tidak mau memakai Java Script eksternal dari Font Awesome, saya memodifikasi script tersebut dengan memakai Base64 SVG icon dari IconFinder.com. Memang dari segi koding akan tampak panjang dan rumit, tapi gambar jadi sangat ringan saat di-load.

Penggunaan Base64 SVG juga sangat pantas diterapkan pada template VioMagz yang dari awalnya sudah cepat. Jika kamu mencari widget media sosial yang ringan dan cepat, ini tutorial yang kamu cari.

Cara Pasang Widget Social Media Responsif


Langsung saja kita coba memasukkan kode script widget social media responsive di blog. Dalam contoh pengaplikasian saya menerapkan script ini di Blogger.

Masuklah ke Dashboard blog kamu lalu pilih menu Layout. Tambahkan widget HTML/JavaScript pada sidebar atau lokasi manapun yang kamu inginkan.

Copy script di bawah ini ke dalam widget :

<style>
    ul.masaping-socmed-widget a:hover {
        color: #03c9a9
    }
    
    .masaping-socmed-widget.b-title li {
        text-align: center;
        background-color: #fff;
        width: 31.5%;
        border: 1px solid #eee
    }
    
    .masaping-socmed-widget.b-title a {
        text-transform: uppercase;
        text-decoration: none;
        margin: 10px auto 0;
        font-size: 10px
    }
    
    .masaping-socmed-widget li {
        display: inline-block;
        padding: 7px 0 0 7px;
        margin-bottom: 3px!important
    }
    
    .masaping-socmed-widget li:last-child {
        border-bottom: 1px solid #eee!important
    }
    
    .masaping-socmed-widget.b-title i {
        margin: 0 auto 10px;
        display: block
    }
    
    .masaping-socmed-widget.style-1 i {
        height: 32px;
        width: 32px;
        line-height: 32px;
        font-size: 20px;
        margin: 10px auto 0;
        text-align: center;
        color: #333
    }
</style>
<ul class='masaping-socmed-widget style-1 b-title'>
    <li>
        <a href='https://www.facebook.com/' title='Like facebook saya' target='_blank' rel='nofollow noopener'><img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjx0aXRsZS8+PGRlc2MvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLW9wYWNpdHk9IjAuNSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iSWNvbnMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjNDQ2MEEwIiBpZD0iQ29sb3ItIiBzdHJva2U9IiM0NDYwQTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xOTkuMDAwMDAwLCAtMTU5LjAwMDAwMCkiPjxwYXRoIGQ9Ik0yMjUuNjM4MzU1LDIwOCBMMjAyLjY0OTIzMiwyMDggQzIwMS4xODU2NzMsMjA4IDIwMCwyMDYuODEzNTkyIDIwMCwyMDUuMzUwNjAzIEwyMDAsMTYyLjY0OTIxMSBDMjAwLDE2MS4xODU4NSAyMDEuMTg1ODU5LDE2MCAyMDIuNjQ5MjMyLDE2MCBMMjQ1LjM1MDk1NSwxNjAgQzI0Ni44MTM5NTUsMTYwIDI0OCwxNjEuMTg1ODUgMjQ4LDE2Mi42NDkyMTEgTDI0OCwyMDUuMzUwNjAzIEMyNDgsMjA2LjgxMzc3OCAyNDYuODEzNzY5LDIwOCAyNDUuMzUwOTU1LDIwOCBMMjMzLjExOTMwNSwyMDggTDIzMy4xMTkzMDUsMTg5LjQxMTc1NSBMMjM5LjM1ODUyMSwxODkuNDExNzU1IEwyNDAuMjkyNzU1LDE4Mi4xNjc1ODYgTDIzMy4xMTkzMDUsMTgyLjE2NzU4NiBMMjMzLjExOTMwNSwxNzcuNTQyNjQxIEMyMzMuMTE5MzA1LDE3NS40NDUyODcgMjMzLjcwMTcxMiwxNzQuMDE2MDEgMjM2LjcwOTI5LDE3NC4wMTYwMSBMMjQwLjU0NTMxMSwxNzQuMDE0MzMzIEwyNDAuNTQ1MzExLDE2Ny41MzUwOTEgQzIzOS44ODE4ODYsMTY3LjQ0NjgwOCAyMzcuNjA0Nzg0LDE2Ny4yNDk1NyAyMzQuOTU1NTUyLDE2Ny4yNDk1NyBDMjI5LjQyNDgzNCwxNjcuMjQ5NTcgMjI1LjYzODM1NSwxNzAuNjI1NTI2IDIyNS42MzgzNTUsMTc2LjgyNTIwOSBMMjI1LjYzODM1NSwxODIuMTY3NTg2IEwyMTkuMzgzMTIyLDE4Mi4xNjc1ODYgTDIxOS4zODMxMjIsMTg5LjQxMTc1NSBMMjI1LjYzODM1NSwxODkuNDExNzU1IEwyMjUuNjM4MzU1LDIwOCBMMjI1LjYzODM1NSwyMDggWiIgaWQ9IkZhY2Vib29rIi8+PC9nPjwvZz48L3N2Zz4=' width='32' height='32' />
            <br/>facebook</a>
    </li>
    <li>
        <a href='https://twitter.com/' title='Ikuti saya di Twitter' target='_blank' rel='nofollow noopener'><img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZGF0YS1uYW1lPSJMYXllciA0NSIgaGVpZ2h0PSIyNCIgaWQ9IkxheWVyXzQ1IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGl0bGUvPjxjaXJjbGUgY3g9IjE2IiBjeT0iOCIgcj0iNCIgc3R5bGU9ImZpbGw6IzUyYzFmZiIvPjxwYXRoIGQ9Ik0xMi41ODMzMSw4LjgzMzMxQzEyLjM3NDg4LDguODMzMzEsMTIsOS4yNjU2MywxMiw5LjVBOC41LDguNSwwLDAsMSwzLjUsMThhOC41MjIxNyw4LjUyMjE3LDAsMCwxLTEuMjg0NzktLjEwNzNBMTEuNDE3MTcsMTEuNDE3MTcsMCwwLDAsMjAsOC40MTY2M0MyMCw3LjY4MSwxNS4zMTc1Nyw4LjgzMzMxLDEyLjU4MzMxLDguODMzMzFaIiBzdHlsZT0iZmlsbDojNTJjMWZmIi8+PHBhdGggZD0iTTEyLjU4MzMxLDguODMzMzFhMTEuMzg1LDExLjM4NSwwLDAsMS04LjY5NDUyLTQuMDI4QTMuOTM3NTgsMy45Mzc1OCwwLDAsMCwzLjM1LDYuNzcwODEsMy45NzkyLDMuOTc5MiwwLDAsMCw3LjMyOTE2LDEwLjc1YzIuMTI0ODIsMCw1Ljg5ODQ0LjAyMjY0LDYuMTQ2OTEtMS45NjE3OUMxMy4xODA1NCw4LjgxMTE2LDEyLjg4NDcsOC44MzMzMSwxMi41ODMzMSw4LjgzMzMxWiIgc3R5bGU9ImZpbGw6IzUyYzFmZiIvPjxwYXRoIGQ9Ik01LjI0NTg1LDEwLjA0MTYzYTMuOTM0MzcsMy45MzQzNywwLDAsMS0xLjg4OTc3LS40OTc3NGMtLjAwMDMxLjAyMDU3LS4wMDYxLjAzOTYxLS4wMDYxLjA2MDI0YTMuOTc5MiwzLjk3OTIsMCwwLDAsMy45NzkxOSwzLjk3OTE5YzIuMTk3NjMsMCw1LjI3NS0xLjU5NCw1LjI3NS0zLjc5MTY1QzEyLjYwNDE3LDguMjgyLDcuNDIyODUsMTAuMDQxNjMsNS4yNDU4NSwxMC4wNDE2M1oiIHN0eWxlPSJmaWxsOiM1MmMxZmYiLz48cGF0aCBkPSJNNy43MjY0MiwxMi45OTY0OWEzLjkwOTkxLDMuOTA5OTEsMCwwLDEtMy4wMjkwOS41MjI4NkEzLjk2NjM2LDMuOTY2MzYsMCwwLDAsOC40OTU4NSwxNi4zNzVhNS4yNTgzNSw1LjI1ODM1LDAsMCwwLDQuNjcwODItNC42NjY2N0MxMy4xNjY2Nyw5LjgxNDc4LDguODI4MzEsMTIuMjg4ODgsNy43MjY0MiwxMi45OTY0OVoiIHN0eWxlPSJmaWxsOiM1MmMxZmYiLz48cGF0aCBkPSJNMTcuNjEwNDEsNS4zNzkxNWMtMS4zMjIxNCwwLTEuNjM1NjIsMS42NjA0LjA3NSwxLjY2MDRhMy45NjYyOSwzLjk2NjI5LDAsMCwwLDMuNzU0LTIuNzEyMjJBNy40OTkwOSw3LjQ5OTA5LDAsMCwxLDE3LjYxMDQxLDUuMzc5MTVaIiBzdHlsZT0iZmlsbDojNTJjMWZmIi8+PHBhdGggZD0iTTE4LjgyOTE2LDYuNTM1NGE3LjUyMjA5LDcuNTIyMDksMCwwLDEtMi45MzcxNi0uNTkzYy0yLjcwODMxLTEuMTQ1NTEtNC4zNTUyNiwzLjM0My0uMTg3ODQsMy4zNDNBNy41MzM5Miw3LjUzMzkyLDAsMCwwLDIyLjA1NTc5LDUuODAzLDcuNTAyNjgsNy41MDI2OCwwLDAsMSwxOC44MjkxNiw2LjUzNTRaIiBzdHlsZT0iZmlsbDojNTJjMWZmIi8+PC9zdmc+' width='32' height='32' />
            <br/>twitter</a>
    </li>
    <li>
        <a href='https://www.instagram.com/' title='Follow instagram saya' target='_blank' rel='nofollow noopener'><img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjQgMjQiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGc+PHBhdGggZD0iTTE3LDIySDdjLTIuNzYxNDIzNiwwLTUtMi4yMzg1NzY5LTUtNVY3YzAtMi43NjE0MjM2LDIuMjM4NTc2NC01LDUtNWgxMGMyLjc2MTQyMzEsMCw1LDIuMjM4NTc2NCw1LDV2MTAgICBDMjIsMTkuNzYxNDIzMSwxOS43NjE0MjMxLDIyLDE3LDIyeiIgZmlsbD0iI0ZGRkZGRiIvPjxyYWRpYWxHcmFkaWVudCBjeD0iMi40NTgzMzMzIiBjeT0iMjIuMjA4MzM0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgaWQ9IlNWR0lEXzFfIiByPSIyNi44MTUyNzUyIj48c3RvcCBvZmZzZXQ9IjAiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkQzNUEiLz48c3RvcCBvZmZzZXQ9IjAuMjU0ODU0NCIgc3R5bGU9InN0b3AtY29sb3I6I0Y3OTY0QyIvPjxzdG9wIG9mZnNldD0iMC41OTk1MTQ1IiBzdHlsZT0ic3RvcC1jb2xvcjojRjA1QjcwIi8+PHN0b3Agb2Zmc2V0PSIwLjcxNzQ1NTYiIHN0eWxlPSJzdG9wLWNvbG9yOiNCRDYxODYiLz48c3RvcCBvZmZzZXQ9IjAuODUzMjI4OCIgc3R5bGU9InN0b3AtY29sb3I6Izg1NjU5QiIvPjxzdG9wIG9mZnNldD0iMC45NTA5NDgyIiBzdHlsZT0ic3RvcC1jb2xvcjojNUM2NkE5Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2xvcjojNDc2NkIwIi8+PC9yYWRpYWxHcmFkaWVudD48cGF0aCBkPSJNMTcuMDIxOTcyNywxSDYuOTc4MDI3M0MzLjY4MTY0MDYsMSwxLDMuNjgxNjQwNiwxLDYuOTc4MDI3M3YxMC4wNDM5NDUzICAgQzEsMjAuMzE4MzU5NCwzLjY4MTY0MDYsMjMsNi45NzgwMjczLDIzaDEwLjA0Mzk0NTNDMjAuMzE4MzU5NCwyMywyMywyMC4zMTgzNTk0LDIzLDE3LjAyMTk3MjdWNi45NzgwMjczICAgQzIzLDMuNjgxNjQwNiwyMC4zMTgzNTk0LDEsMTcuMDIxOTcyNywxeiBNMjEsMTcuMDIxOTcyN0MyMSwxOS4yMTUzMzIsMTkuMjE1MzMyLDIxLDE3LjAyMTk3MjcsMjFINi45NzgwMjczICAgQzQuNzg0NjY4LDIxLDMsMTkuMjE1MzMyLDMsMTcuMDIxOTcyN1Y2Ljk3ODAyNzNDMyw0Ljc4NDY2OCw0Ljc4NDY2OCwzLDYuOTc4MDI3MywzaDEwLjA0Mzk0NTMgICBDMTkuMjE1MzMyLDMsMjEsNC43ODQ2NjgsMjEsNi45NzgwMjczVjE3LjAyMTk3Mjd6IE0xMiw2Yy0zLjMwODU5MzgsMC02LDIuNjkxNDA2My02LDZzMi42OTE0MDYzLDYsNiw2czYtMi42OTE0MDYzLDYtNiAgIFMxNS4zMDg1OTM4LDYsMTIsNnogTTEyLDE2Yy0yLjIwNTU2NjQsMC00LTEuNzk0NDMzNi00LTRzMS43OTQ0MzM2LTQsNC00czQsMS43OTQ0MzM2LDQsNFMxNC4yMDU1NjY0LDE2LDEyLDE2eiBNMTgsNSAgIGMtMC41NTEyNjk1LDAtMSwwLjQ0ODczMDUtMSwxczAuNDQ4NzMwNSwxLDEsMXMxLTAuNDQ4NzMwNSwxLTFTMTguNTUxMjY5NSw1LDE4LDV6IiBmaWxsPSJ1cmwoI1NWR0lEXzFfKSIvPjxsaW5lYXJHcmFkaWVudCBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgaWQ9IlNWR0lEXzJfIiB4MT0iMC41MzM3ODIxIiB4Mj0iMjMuNDY2MjE3IiB5MT0iNi42NTMyMTQ5IiB5Mj0iMTcuMzQ2Nzg0NiI+PHN0b3Agb2Zmc2V0PSIwIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZGRkZGO3N0b3Atb3BhY2l0eTowLjIiLz48c3RvcCBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkZGRkY7c3RvcC1vcGFjaXR5OjAiLz48L2xpbmVhckdyYWRpZW50PjxwYXRoIGQ9Ik0xNy4wMjE5NzI3LDFINi45NzgwMjczQzMuNjgxNjQwNiwxLDEsMy42ODE2NDA2LDEsNi45NzgwMjczdjEwLjA0Mzk0NTMgICBDMSwyMC4zMTgzNTk0LDMuNjgxNjQwNiwyMyw2Ljk3ODAyNzMsMjNoMTAuMDQzOTQ1M0MyMC4zMTgzNTk0LDIzLDIzLDIwLjMxODM1OTQsMjMsMTcuMDIxOTcyN1Y2Ljk3ODAyNzMgICBDMjMsMy42ODE2NDA2LDIwLjMxODM1OTQsMSwxNy4wMjE5NzI3LDF6IiBmaWxsPSJ1cmwoI1NWR0lEXzJfKSIvPjwvZz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjxnLz48L3N2Zz4=' width='32' height='32' />
            <br/>instagram</a>
    </li>
    <li>
        <a href='https://plus.google.com/' title='Ikuti saya di Google+' target='_blank' rel='nofollow noopener'><img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0OHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0OCA0OCIgd2lkdGg9IjQ4cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjx0aXRsZS8+PGRlc2MvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLW9wYWNpdHk9IjAuMyIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iSWNvbnMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBpZD0iQ29sb3ItIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNDAwLjAwMDAwMCwgLTg2MC4wMDAwMDApIj48ZyBpZD0iR29vZ2xlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MDEuMDAwMDAwLCA4NjAuMDAwMDAwKSI+PHBhdGggZD0iTTIzLjcxMzYzNjQsMTAuMTMzMzMzMyBDMjcuMDI1LDEwLjEzMzMzMzMgMzAuMDE1OTA5MSwxMS4zMDY2NjY3IDMyLjM2NTkwOTEsMTMuMjI2NjY2NyBMMzkuMjAyMjcyNyw2LjQgQzM1LjAzNjM2MzYsMi43NzMzMzMzMyAyOS42OTU0NTQ1LDAuNTMzMzMzMzMzIDIzLjcxMzYzNjQsMC41MzMzMzMzMzMgQzE0LjQyNjg2MzYsMC41MzMzMzMzMzMgNi40NDU0MDkwOSw1Ljg0NDI2NjY3IDIuNjIzNDU0NTUsMTMuNjA0MjY2NyBMMTAuNTMyMjcyNywxOS42NDM3MzMzIEMxMi4zNTQ1OTA5LDE0LjExMiAxNy41NDkxNTkxLDEwLjEzMzMzMzMgMjMuNzEzNjM2NCwxMC4xMzMzMzMzIiBmaWxsPSIjRUI0MzM1IiBpZD0iRmlsbC0yIiBzdHJva2U9IiNFQTQzMzUiLz48cGF0aCBkPSJNOS44MjcyNzI3MywyNCBDOS44MjcyNzI3MywyMi40NzU3MzMzIDEwLjA4MDQzMTgsMjEuMDE0NCAxMC41MzIyNzI3LDE5LjY0MzczMzMgTDIuNjIzNDU0NTUsMTMuNjA0MjY2NyBDMS4wODIwNjgxOCwxNi43MzM4NjY3IDAuMjEzNjM2MzY0LDIwLjI2MDI2NjcgMC4yMTM2MzYzNjQsMjQgQzAuMjEzNjM2MzY0LDI3LjczNjUzMzMgMS4wODEsMzEuMjYwOCAyLjYyMDI1LDM0LjM4ODI2NjcgTDEwLjUyNDc5NTUsMjguMzM3MDY2NyBDMTAuMDc3MjI3MywyNi45NzI4IDkuODI3MjcyNzMsMjUuNTE2OCA5LjgyNzI3MjczLDI0IiBmaWxsPSIjRkJCQzA1IiBpZD0iRmlsbC0xIiBzdHJva2U9IiNGQkJDMDUiLz48cGF0aCBkPSJNMjMuNzEzNjM2NCwzNy44NjY2NjY3IEMxNy41NDkxNTkxLDM3Ljg2NjY2NjcgMTIuMzU0NTkwOSwzMy44ODggMTAuNTMyMjcyNywyOC4zNTYyNjY3IEwyLjYyMzQ1NDU1LDM0LjM5NDY2NjcgQzYuNDQ1NDA5MDksNDIuMTU1NzMzMyAxNC40MjY4NjM2LDQ3LjQ2NjY2NjcgMjMuNzEzNjM2NCw0Ny40NjY2NjY3IEMyOS40NDU1LDQ3LjQ2NjY2NjcgMzQuOTE3Nzk1NSw0NS40MzE0NjY3IDM5LjAyNDk1NDUsNDEuNjE4MTMzMyBMMzEuNTE3NzcyNywzNS44MTQ0IEMyOS4zOTk1NjgyLDM3LjE0ODggMjYuNzMyMzE4MiwzNy44NjY2NjY3IDIzLjcxMzYzNjQsMzcuODY2NjY2NyIgZmlsbD0iIzM0QTg1MyIgaWQ9IkZpbGwtMyIgc3Ryb2tlPSIjMzRBODUzIi8+PHBhdGggZD0iTTQ2LjE0NTQ1NDUsMjQgQzQ2LjE0NTQ1NDUsMjIuNjEzMzMzMyA0NS45MzE4MTgyLDIxLjEyIDQ1LjYxMTM2MzYsMTkuNzMzMzMzMyBMMjMuNzEzNjM2NCwxOS43MzMzMzMzIEwyMy43MTM2MzY0LDI4LjggTDM2LjMxODE4MTgsMjguOCBDMzUuNjg3OTU0NSwzMS44OTEyIDMzLjk3MjQ1NDUsMzQuMjY3NzMzMyAzMS41MTc3NzI3LDM1LjgxNDQgTDM5LjAyNDk1NDUsNDEuNjE4MTMzMyBDNDMuMzM5MzQwOSwzNy42MTM4NjY3IDQ2LjE0NTQ1NDUsMzEuNjQ5MDY2NyA0Ni4xNDU0NTQ1LDI0IiBmaWxsPSIjNDI4NUY0IiBpZD0iRmlsbC00IiBzdHJva2U9IiM0Mjg1RjQiLz48L2c+PC9nPjwvZz48L3N2Zz4=' width='32' height='32' />
            <br/>google+</a>
    </li>
    <li>
        <a href='https://api.whatsapp.com/send?phone=62xxxxx' title='Kirim pesan via WhatsApp' target='_blank' rel='nofollow noopener'><img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjx0aXRsZS8+PGRlc2MvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLW9wYWNpdHk9IjAuMyIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iSWNvbnMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjNjdDMTVFIiBpZD0iQ29sb3ItIiBzdHJva2U9IiM2N0MxNUUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02OTkuMDAwMDAwLCAtMzU5LjAwMDAwMCkiPjxwYXRoIGQ9Ik03MjMuOTkzMDMzLDM2MCBMNzIzLjk5MzAzMywzNjAuMDAwMzk4IEw3MjQuMDA2OTY3LDM2MC4wMDAzOTggQzczNy4yMzc3NDgsMzYwLjAwMDM5OCA3NDgsMzcwLjc2NTY4NSA3NDgsMzg0LjAwMDE5OSBDNzQ4LDM5Ny4yMzQzMTUgNzM3LjIzNzc0OCw0MDggNzI0LjAwNjk2Nyw0MDggQzcxOS4xMjY0MzQsNDA4IDcxNC41OTg2MDUsNDA2LjU0Njk3NSA3MTAuODA0NDQ5LDQwNC4wMzU1MzkgTDcwMS41Nzk2MDUsNDA2Ljk4Mzc5OCBMNzA0LjU3MDAyNiwzOTguMDY2OTQ3IEM3MDEuNjkyNjYxLDM5NC4xMTYwMjUgNzAwLDM4OS4yNDg0NTEgNzAwLDM4My45OTk4MDEgQzcwMCwzNzAuNzY1Mjg3IDcxMC43NjIyNTIsMzYwIDcyMy45OTMwMzMsMzYwIFogTTcxNy4yOTI4NSwzNzIuMTkwODM2IEM3MTYuODI3NDg4LDM3MS4wNzYyOCA3MTYuNDc0Nzg0LDM3MS4wMzQwNzEgNzE1Ljc2OTc3NCwzNzEuMDA1NDAxIEM3MTUuNTI5NzI4LDM3MC45OTE0NjQgNzE1LjI2MjIxNCwzNzAuOTc3NTI3IDcxNC45NjU2NCwzNzAuOTc3NTI3IEM3MTQuMDQ4NDUsMzcwLjk3NzUyNyA3MTMuMDg5NDYyLDM3MS4yNDU1MTQgNzEyLjUxMTA0MywzNzEuODM4MDMzIEM3MTEuODA2MDMzLDM3Mi41NTc1NzcgNzEwLjA1Njg0MywzNzQuMjM2MzggNzEwLjA1Njg0MywzNzcuNjc5MjAyIEM3MTAuMDU2ODQzLDM4MS4xMjIwMjMgNzEyLjU2NzU3MSwzODQuNDUxNzU2IDcxMi45MDU5NDQsMzg0LjkxNzY0OCBDNzEzLjI1ODY0OCwzODUuMzgyNzQzIDcxNy44MDA4MDgsMzkyLjU1MDMxIDcyNC44NTMyOTcsMzk1LjQ3MTQ5MiBDNzMwLjM2ODM3OSwzOTcuNzU3MTQ5IDczMi4wMDQ5MSwzOTcuNTQ1MzA3IDczMy4yNjAwNzQsMzk3LjI3NzMyIEM3MzUuMDkzNjU4LDM5Ni44ODIzMDggNzM3LjM5MzAwMiwzOTUuNTI3MjM5IDczNy45NzE0MjEsMzkzLjg5MTA0MyBDNzM4LjU0OTg0LDM5Mi4yNTQwNSA3MzguNTQ5ODQsMzkwLjg1NzE3MSA3MzguMzgwMjU1LDM5MC41NjA5MTIgQzczOC4yMTEwNjgsMzkwLjI2NDY1MiA3MzcuNzQ1MzA4LDM5MC4wOTU4MTYgNzM3LjA0MDI5OCwzODkuNzQyNjE1IEM3MzYuMzM1Mjg4LDM4OS4zODk4MTEgNzMyLjkwNzM3LDM4Ny42OTY2NzMgNzMyLjI1ODQ5LDM4Ny40NzA4OTQgQzczMS42MjM1NDMsMzg3LjIzMTE3OSA3MzEuMDE3MjU5LDM4Ny4zMTU5OTUgNzMwLjUzNzk2MywzODcuOTkzMzMgQzcyOS44NjA4MTksMzg4LjkzODY1MyA3MjkuMTk4MDA2LDM4OS44OTgzMSA3MjguNjYxNzg1LDM5MC40NzY0OTQgQzcyOC4yMzg2MTksMzkwLjkyODA1MSA3MjcuNTQ3MTQ0LDM5MC45ODQ1OTUgNzI2Ljk2OTEyMywzOTAuNzQ0NDgxIEM3MjYuMTkzMjU0LDM5MC40MjAzNDggNzI0LjAyMTI5OCwzODkuNjU3Nzk4IDcyMS4zNDA5ODUsMzg3LjI3MzM4OCBDNzE5LjI2NzM1NiwzODUuNDI1MzUgNzE3Ljg1NjkzOCwzODMuMTI1NzU2IDcxNy40NDgxMDQsMzgyLjQzNDQ4NCBDNzE3LjAzODg3MSwzODEuNzI5Mjc1IDcxNy40MDU5MDcsMzgxLjMxOTUyOSA3MTcuNzI5OTQ4LDM4MC45Mzg4NTIgQzcxOC4wODI2NTMsMzgwLjUwMTIzMiA3MTguNDIxMDI2LDM4MC4xOTEwMzYgNzE4Ljc3MzczLDM3OS43ODE2ODggQzcxOS4xMjY0MzQsMzc5LjM3MjczOCA3MTkuMzIzODg0LDM3OS4xNjA4OTcgNzE5LjU0OTU5OSwzNzguNjgxMDY4IEM3MTkuNzg5NjQ1LDM3OC4yMTU1NzUgNzE5LjYyMDA2LDM3Ny43MzU3NDYgNzE5LjQ1MDg3NCwzNzcuMzgyOTQyIEM3MTkuMjgxNjg3LDM3Ny4wMzAxMzkgNzE3Ljg3MTI2OSwzNzMuNTg3MzE3IDcxNy4yOTI4NSwzNzIuMTkwODM2IFoiIGlkPSJXaGF0c2FwcCIvPjwvZz48L2c+PC9zdmc+' width='32' height='32' />
            <br/>Whatsapp</a>
    </li>
    <li>
        <a href='http://xxxxx//feeds/posts/default?alt=rss' title='Ikuti Blog saya' target='_blank' rel='nofollow noopener'><img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0N3B4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0NyA0NyIgd2lkdGg9IjQ3cHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjx0aXRsZS8+PGRlc2MvPjxkZWZzLz48ZyBmaWxsPSJub25lIiBmaWxsLW9wYWNpdHk9IjAuMyIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iSWNvbnMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBmaWxsPSIjRkY2NTAwIiBpZD0iQ29sb3ItIiBzdHJva2U9IiNGRjY1MDAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDAuMDAwMDAwLCAtMzYyLjAwMDAwMCkiPjxwYXRoIGQ9Ik02MzEuNTEyODI5LDM5Ni4zMDI4MTMgTDYxNS40NDA1OTMsMzk2LjMwMjgxMyBDNjEzLjkzMTc0OCwzOTYuMzAyODEzIDYxMi43MDk0MjksMzk1LjA2OTUzMSA2MTIuNzA5NDI5LDM5My41OTcxODggQzYxMi43MDk0MjksMzkyLjEwNzk2OSA2MTMuOTMxNzQ4LDM5MC44OTAxNTYgNjE1LjQ0MDU5MywzOTAuODkwMTU2IEw2MzEuNTEyODI5LDM5MC44OTAxNTYgQzYzMy4wMDYxNDgsMzkwLjg5MDE1NiA2MzQuMjI4NDY3LDM5Mi4xMDc5NjkgNjM0LjIyODQ2NywzOTMuNTk3MTg4IEM2MzQuMjI4NDY3LDM5NS4wNjk1MzEgNjMzLjAwNjE0OCwzOTYuMzAyODEzIDYzMS41MTI4MjksMzk2LjMwMjgxMyBNNjE1LjQ0MDU5MywzNzQuNjIyNjU2IEw2MjMuMzQ4OTc0LDM3NC42MjI2NTYgQzYyNC44NTc4MTksMzc0LjYyMjY1NiA2MjYuMDgwMTM5LDM3NS44NDA0NjkgNjI2LjA4MDEzOSwzNzcuMzI4MjgxIEM2MjYuMDgwMTM5LDM3OC44MTc1IDYyNC44NTc4MTksMzgwLjA0OTM3NSA2MjMuMzQ4OTc0LDM4MC4wNDkzNzUgTDYxNS40NDA1OTMsMzgwLjA0OTM3NSBDNjEzLjkzMTc0OCwzODAuMDQ5Mzc1IDYxMi43MDk0MjksMzc4LjgxNzUgNjEyLjcwOTQyOSwzNzcuMzI4MjgxIEM2MTIuNzA5NDI5LDM3NS44NDA0NjkgNjEzLjkzMTc0OCwzNzQuNjIyNjU2IDYxNS40NDA1OTMsMzc0LjYyMjY1NiBNNjQ0Ljg1MjQ4NywzODAuNDEwNzgxIEM2NDMuOTAyNTc4LDM4MC4wMDQzNzUgNjM5LjgyNzcwOCwzODAuNDU1NzgxIDYzOC42OTU3MjIsMzc5LjQzMzQzOCBDNjM3Ljg5NjgzOCwzNzguNjk2NTYyIDYzNy44NDYwMjYsMzc3LjM2MzQzNyA2MzcuNTM0MDk0LDM3NS41ODQ1MzEgQzYzNy4wMTE4NTYsMzcyLjYwNjA5NCA2MzYuNzk0NDkyLDM3MS45MzEwOTQgNjM2LjI1MTA4MiwzNzAuNzU4MjgxIEM2MzQuMjc1MDQ1LDM2Ni41Nzg5MDYgNjI5LjUzODIwMywzNjMgNjI1LjIzNDY3OCwzNjMgTDYxNS4yNTk5MjcsMzYzIEM2MDcuNDEyMjM5LDM2MyA2MDEsMzY5LjQwNTQ2OSA2MDEsMzc3LjIyMjgxMiBMNjAxLDM5My44MDY3MTkgQzYwMSw0MDEuNjEgNjA3LjQxMjIzOSw0MDggNjE1LjI1OTkyNyw0MDggTDYzMS42NDgzMjgsNDA4IEM2MzkuNDk2MDE3LDQwOCA2NDUuODY0NSw0MDEuNjEgNjQ1LjkwOTY2NywzOTMuODA2NzE5IEw2NDYsMzgyLjMyMDQ2OSBDNjQ2LDM4Mi4zMjA0NjkgNjQ2LDM4MC45MDAxNTYgNjQ0Ljg1MjQ4NywzODAuNDEwNzgxIiBpZD0iQmxvZ2dlciIvPjwvZz48L2c+PC9zdmc+' width='32' height='32' />
            <br/>blogger</a>
    </li>
</ul>


Ganti URL yang saya tandai sesuai akun media sosial dan blog kamu. Tekan tombol Simpan lalu lihat hasil perubahannya.

Mudah, bukan? Jika kamu masih belum paham atau mengalami kesulitan, silahkan tulis di kotak komentar di bawah ini 😃

Update:

Setelah saya coba ternyata untuk social media icon dari WhatsApp tidak tampil jika browser kamu terpasang AdBlock atau aplikasi pemblokir iklan lainnya. Solusinya adalah dengan wraping atau menyembunyikan link api.whatsapp.com.

Caranya, copy paste link https://api.whatsapp.com/send?phone=62xxxxx ke layanan pemendek URL seperti Bitly, Goo.gl, dan sejenisnya. Semoga membantu.

Posting Komentar untuk "Cara Membuat Widget Social Media Responsive"