Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger

Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger


Pelajar Design - Pada kesempatan kali ini saya akan membagikan Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger. Salah satu sumber trafik yang lumayan besar adalah Sosial Media Atau Media Sosial.

Semakin banyak trafik berarti semakin banyak juga penghasilan yang diperoleh. Sekarang banyak pemilik Website Atau Blog yang memasang Widget Sosial Media pada Website Atau Blognya. Namun tampilan dan bentuknya pasti berbeda.

# Fungsi Dari Widget Media Sosial

Fungsi dari Widget Sosial Media adalah mempermudah pengunjung atau pembaca untuk menemukan akun Sosial Media kita. Misalnya Facebook, Twitter, Google Plus atau yang lainnya.

Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger

Walaupun sudah banyak yang membuat atau membagas tutorial ini, namun saya membagikannya sekaligus dari gabungan beberapa Widget Sosial Media yang saya ketahui.

# Widget Sosial Media Dengan Counter Style 1

1. Masuk ke Blogger.com.
2. pilih menu TEMA > Edit HTML.
3. Masukkan kode dibawah ini tepat DIATAS kode </style> atau ]]></b:skin>.

.social-box {
    width: 280px;
    padding: 10px 9px;
    margin: 0;
    overflow: hidden;
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
    text-align: center;
}

a.social-item-box {
    display: block;
    color: #4b4b4b;
    float: left;
    width: 64px;
    overflow: hidden;
    margin: 0;
    padding: 4px 0;
    background-image: url("http://4.bp.blogspot.com/-L1iBWk1cut4/VGsgavLj62I/AAAAAAAAEFU/1x3e5PzTSK8/s1600/social-icon.png");
    background-repeat: no-repeat;
}

.social-item-outer {
    background: #f8f8f8;
    margin: 0 0 0 8px;
    overflow: hidden;
    float: left;
    display: inline-block;
}

.social-item-outer:hover {
    background: #fff;
}

.social-item-outer:nth-child(1):hover {
    box-shadow: 0px -2px 0px #E50700 inset;
}

.social-item-outer:nth-child(2):hover {
    box-shadow: 0px -2px 0px #0084C5 inset
}

.social-item-outer:nth-child(3):hover {
    box-shadow: 0px -2px 0px #6CAC00 inset;
}

.social-item-outer:nth-child(4):hover {
    box-shadow: 0px -2px 0px #00C3B7 inset;
}

.social-item-outer:hover {
    box-shadow: 0px -2px 0px #FF8168 inset;
}

.social-item-outer:first-child {
    margin-left: 0px;
}

.facebook-box {
    background-position: 7px 4px;
}

.rss-box {
    background-position: -73px 4px;
}

.twitter-box {
    background-position: -153px 4px;
}

.googleplus-box {
    background-position: -233px 4px;
}

.counter {
    margin: 60px 0 0 0;
    font-family: 'Oswald', Verdana, Sans-serif;
    line-height: 1.2em;
    font-size: 16px;
    font-weight: 500;
}

.social-title {
    color: #888;
    font-size: 11px;
}

4. Simpan.
5. Masuk ke Tata Letak > Add A Gadget > HTML/JavaScript. Lalu masukkan kode dibawah pada kolom Content.

<div class='social-box'>
    <div class='social-item-outer'>
        <a class='social-item-box facebook-box' href='http://www.facebook.com/xxxxx'>
            <div class='counter'>
                76.098
            </div>
            <span class='social-title'>Fans</span>
        </a>
    </div>

    <div class='social-item-outer'>
        <a class='social-item-box twitter-box' href='http://twitter.com/xxxxx'>
            <div class='counter'>
                6.987
            </div>
            <span class='social-title'>Followers</span>
        </a>
    </div>

    <div class='social-item-outer'>
        <a class='social-item-box googleplus-box' href='http://plus.google.com/xxxxx'>
            <div class='counter'>
                4.987
            </div>
            <span class='social-title'>Followers</span>
        </a>
    </div>

    <div class='social-item-outer'>
        <a class='social-item-box rss-box' href='/feeds/posts/default/xxxxx'>
            <div class='counter'>
                398
            </div>
            <span class='social-title'>Subcribers</span>
        </a>
    </div>
</div>

6. Simpan.

Ganti kode xxxxx dengan URL Sosial Media Kalian. Jika pemasangan benar maka hasilnya akan seperti digambar.
Widget Sosial Media Dengan Counter

# Widget Sosial Media Elegan

1. Masuk ke Blogger.com.
2. Masuk ke Tata Letak > Add A Gadget > HTML/JavaScript. Lalu masukkan kode dibawah pada kolom Content.

<a href='http://www.twitter.com/xxxxx' target='_blank'><img alt='Twitter'
        src='https://lh6.googleusercontent.com/-40NMu9YKlek/VJ66NcYZy3I/AAAAAAAAI5Y/9Yn9ZtLQb18/s32-no/twitter.png'
        title='Twitter' /></a>
<a href='http://www.facebook.com/xxxxx' target='_blank'><img alt='Facebook'
        src='https://lh6.googleusercontent.com/-DDBzF64PrRQ/VJ66Llwc7uI/AAAAAAAAI44/9cZaAsCSBOM/s32-no/facebook.png'
        title='Facebook' /></a>
<a href='http://plus.google.com/xxxxx' target='_blank'><img alt='Google Plus'
        src='https://lh4.googleusercontent.com/-87tOc499YgM/VJ66MM6smeI/AAAAAAAAI48/CpqKtTJyhSs/s32-no/google.png'
        title='Google Plus' /></a>
<a href='http://instagram.com/xxxxx' target='_blank'><img alt='Instagram'
        src='https://lh4.googleusercontent.com/-3MPofh4xhe4/VJ66Ma_XWaI/AAAAAAAAI5E/6d8mLJBvFFU/s32-no/instagram.png'
        title='Instagram' /></a>
<a href='http://www.youtube.com/xxxxx' target='_blank'><img alt='Youtube Channel'
        src='https://lh3.googleusercontent.com/-iuHC7JsIgz0/VJ_WHFriyOI/AAAAAAAAI9I/S2gf8lcU8uA/s32-no/youtube%2Bicon.png'
        title='Youtube Channel' /></a>

3. Simpan.

Ganti kode xxxxx dengan URL Sosial Media Kalian. Jika pemasangan benar maka hasilnya akan seperti digambar.

Widget Sosial Media Elegan

# Widget Sosial Media Style Kotak

1. Masuk ke Blogger.com.
2. Masuk ke Tata Letak > Add A Gadget > HTML/JavaScript. Lalu masukkan kode dibawah pada kolom Content.

<div class="metro-social">
    <li><a class="fb" href="https://www.facebook.com/xxxxx"></a></li>
    <li><a class="tw" href="https://twitter.com/xxxxx"></a></li>
    <li><a class="gp" href="https://plus.google.com/+xxxxx"></a></li>
    <li><a class="pi" href="https://id.pinterest.com/xxxxx"></a></li>
    <li><a class="in" href="https://www.instagram.com/xxxxx"></a></li>
    <li><a class="yt" href="https://www.youtube.com/xxxxx"></a></li>
    <li><a class="fd" href="http://feeds.feedburner.com/xxxxx"></a></li>
</div>
<div style="text-align: center;">
    <style>
        .metro-social {
            width: 285px
        }

        .metro-social li {
            position: relative;
            cursor: pointer;
            padding: 0;
            list-style: none
        }

        .metro-social .fb,
        .tw,
        .gp,
        .pi,
        .in,
        .yt,
        .fd {
            z-index: 7;
            float: left;
            margin: 1px;
            position: relative;
            display: block
        }

        .metro-social .fb {
            background: url(//goo.gl/6xmUk) no-repeat center center #1f69b3;
            width: 140px;
            height: 141px
        }

        .metro-social .tw {
            background: url(//goo.gl/oyiFK) no-repeat center center #43b3e5;
            width: 68px;
            height: 70px
        }

        .metro-social .gp {
            width: 69px;
            height: 70px;
            background: url(//goo.gl/oT0kF) no-repeat center center #da4a38
        }

        .metro-social .pi {
            background: url(//goo.gl/dvgUz4) no-repeat center center #d73532;
            width: 68px;
            height: 69px
        }

        .metro-social .in {
            background: url(//goo.gl/3QdDFB) no-repeat center center #b73b8c;
            width: 69px;
            height: 69px
        }

        .metro-social .yt {
            background: url(//goo.gl/56pVY9) no-repeat center center #e64a41;
            width: 140px;
            height: 69px
        }

        .metro-social .fd {
            background: url(//goo.gl/lhBP1) no-repeat center center #e9a01c;
            width: 140px;
            height: 69px
        }

        .metro-social li:hover .fb {
            background: url(//goo.gl/MH8AP) no-repeat center center #1f69b3
        }

        .metro-social li:hover .tw {
            background: url(//goo.gl/hHRHv) no-repeat center center #43b3e5
        }

        .metro-social li:hover .gp {
            background: url(//goo.gl/wva4B) no-repeat center center #da4a38
        }

        .metro-social li:hover .pi {
            background: url(//goo.gl/IORvy) no-repeat center center #d73532
        }

        .metro-social li:hover .in {
            background: url(//goo.gl/bjuaEI) no-repeat center center #b73b8c
        }

        .metro-social li:hover .yt {
            background: url(//goo.gl/k8kdb2) no-repeat center center #e64a41
        }

        .metro-social li:hover .fd {
            background: url(//goo.gl/CjzDP) no-repeat center center #e9a01c
        }
    </style>
</div>

3. Simpan.

Ganti kode xxxxx dengan URL Sosial Media Kalian. Jika pemasangan benar maka hasilnya akan seperti digambar.
Widget Sosial Media Style Kotak

# Widget Sosial Media Style Spinning

1. Masuk ke Blogger.com.
2. Masuk ke Tata Letak > Add A Gadget > HTML/JavaScript. Lalu masukkan kode dibawah pada kolom Content.

 <style>
     #MH_socialicons img {
         /* Spinning Social Icons Widget*/
         -moz-transition: all 0.8s ease-in-out;
         -webkit-transition: all 0.8s ease-in-out;
         -o-transition: all 0.8s ease-in-out;
         -ms-transition: all 0.8s ease-in-out;
         transition: all 0.8s ease-in-out;
     }

     #MH_socialicons img:hover {
         -moz-transform: rotate(360deg);
         -webkit-transform: rotate(360deg);
         -o-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         transform: rotate(360deg);
     }

     /* Spinning Social Icons Widget*/
 </style>
 <center>
     <p id="MH_socialicons">
         <a href="https://www.facebook.com/xxxxx"><img
                 src="http://3.bp.blogspot.com/-eG9bPvyOXro/UPBYTmI8VEI/AAAAAAAAJqI/TFBZzBxJ59c/s1600/NBT+facebook+icon.png" /></a>
         <a href="https://twitter.com/xxxxx"><img
                 src="http://4.bp.blogspot.com/-dB0P2JmL6QA/UPBYVfvhyII/AAAAAAAAJqU/HFD5UeTJck8/s1600/NBT+twitter+icon.png" /></a>
         <a href="https://plus.google.com/+xxxxx"><img
                 src="http://1.bp.blogspot.com/-XU8OI90JZQc/UPBYUKmev_I/AAAAAAAAJqM/FPgdcMimraQ/s1600/NBT+google+plus+icon.png" /></a>
         <a href="https://www.youtube.com/xxxxx"><img
                 src="http://1.bp.blogspot.com/-YNToKMeHx9A/UPBYWVeeq5I/AAAAAAAAJqc/HEpC_PsZBsY/s1600/NBT+youtube+icon.png" /></a>
     </p>
 </center>

3. Simpan.

Ganti kode xxxxx dengan URL Sosial Media Kalian. Jika pemasangan benar maka hasilnya akan seperti digambar.
Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger

# Widget Sosial Media Style Bar

1. Masuk ke Blogger.com.
2. Masuk ke Tata Letak > Add A Gadget > HTML/JavaScript. Lalu masukkan kode dibawah pada kolom Content..

<style>
    .techornate-social-buttons ul {
        padding-left: 0;
        list-style: none
    }

    .techornate-social-buttons li a {
        text-transform: uppercase;
        text-decoration: none;
        padding: 10px 1px 10px 10px;
        letter-spacing: 2px;
        font-size: 10px;
        color: #fff;
        display: block;
        border-radius: 3px
    }

    .techornate-social-buttons ul li {
        margin-bottom: 10px;
        width: 100%
    }

    .techornate-social-buttons li a i {
        width: 35px;
        height: 14px;
        float: right;
        padding: 0 0 0 10px;
        margin: 0;
        font-size: 14px;
        line-height: 14px;
        border-left: 1px solid #B1B1B1
    }

    .techornate-social-buttons li a.social-btn-facebook {
        background: #3b5998
    }

    .techornate-social-buttons li a.social-btn-twitter {
        background: #1da1f2
    }

    .techornate-social-buttons li a.social-btn-youtube {
        background: #cd201f
    }

    .techornate-social-buttons li a.social-btn-instagram {
        background: #405de6
    }

    .techornate-social-buttons li a.social-btn-google {
        background: #dd4b39
    }
</style>
<div class="techornate-social-buttons">
    <ul class="sidebar-social clearfix">
        <li><a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li>
        <li><a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li>
        <li><a href="#" class="social-btn-google">Follow on Google+ <i class="fa fa-google"></i> </a></li>
        <li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
        <li><a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fas-youtube"></i> </a></li>
    </ul>
</div>

4. Simpan.

Ganti kode # dengan URL Sosial Media Kalian. Jika pemasangan benar maka hasilnya akan seperti digambar.

Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger

# Widget Sosial Media Simple Style 1

1. Masuk ke Blogger.com.
2. Masuk ke Tata Letak > Add A Gadget > HTML/JavaScript. Lalu masukkan kode dibawah pada kolom Content.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<style type='text/css'>
    /* Social Media Widget */
    ul.widget_socmed {
        display: block;
        text-align: center;
        text-decoration: none;
        margin: 0;
        padding: 10px 5px
    }

    ul.widget_socmed li.socmed_button {
        display: inline-block;
        list-style: none;
        margin: 0;
        padding: 0
    }

    .socmed_button .fa {
        padding: 10px;
        font-size: 30px;
        width: 30px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        border-radius: 10%
    }

    .socmed_button .fa:hover {
        opacity: 0.7
    }

    .socmed_button .fa-facebook {
        background: #3961b7;
        color: white
    }

    .socmed_button .fa-twitter {
        background: #67abcb;
        color: white
    }

    .socmed_button .fa-google-plus {
        background: #dd4b39;
        color: white
    }

    .socmed_button .fa-linkedin {
        background: #1690c9;
        color: white
    }

    .socmed_button .fa-youtube {
        background: #bb0000;
        color: white
    }

    .socmed_button .fa-instagram {
        background: #885812;
        color: white
    }

    .socmed_button .fa-pinterest {
        background: #dc4e53;
        color: white
    }
</style>
Social Media Icon
<ul class='widget_socmed'>
    <li class='socmed_button'><a href="#" class="fa fa-facebook"></a></li>
    <li class='socmed_button'><a href="#" class="fa fa-google-plus"></a></li>
    <li class='socmed_button'><a href="#" class="fa fa-instagram"></a></li>
    <li class='socmed_button'><a href="#" class="fa fa-linkedin"></a></li>
    <li class='socmed_button'><a href="#" class="fa fa-youtube"></a></li>
    <li class='socmed_button'><a href="#" class="fa fa-pinterest"></a></li>
    <li class='socmed_button'><a href="#" class="fa fa-twitter"></a></li>
</ul>

3. Simpan.

Ganti kode # dengan URL Sosial Media Kalian. Jika pemasangan benar maka hasilnya akan seperti digambar.
Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger

# Widget Sosial Media Simple Style 2

1. Masuk ke Blogger.com.
2. Masuk ke Tata Letak > Add A Gadget > HTML/JavaScript. Lalu masukkan kode dibawah pada kolom Content.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<style type='text/css'>
    /* Social Media Widget */
    ul.my_widget_socmed {
        display: block;
        text-align: center;
        text-decoration: none;
        margin: 0;
        padding: 10px 5px
    }

    ul.my_widget_socmed li.my_socmed_button {
        display: block;
        list-style: none;
        margin: 0 0 5px 0;
        padding: 0;
        overflow: hidden
    }

    .my_socmed_button a {
        padding: 5px 10px;
        font-size: 20px;
        font-family: arial;
        text-align: left;
        text-decoration: none;
        margin: 0;
        display: block
    }

    .my_socmed_button a:hover {
        opacity: 0.7
    }

    .my_socmed_button a.facebook {
        background: #3961b7;
        color: white
    }

    .my_socmed_button a.twitter {
        background: #67abcb;
        color: white
    }

    .my_socmed_button a.googleplus {
        background: #dd4b39;
        color: white
    }

    .my_socmed_button a.linkedin {
        background: #1690c9;
        color: white
    }

    .my_socmed_button a.youtube {
        background: #bb0000;
        color: white
    }

    .my_socmed_button a.instagram {
        background: #885812;
        color: white
    }

    .my_socmed_button a.pinterest {
        background: #dc4e53;
        color: white
    }
</style>
Social Media Icon
<ul class='my_widget_socmed'>
    <li class='my_socmed_button'><a class='facebook' href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
    <li class='my_socmed_button'><a class='googleplus' href="#"><i class="fa fa-google-plus"></i> Google+</a></li>
    <li class='my_socmed_button'><a class='instagram' href="#"><i class="fa fa-instagram"></i> Instagram</a></li>
    <li class='my_socmed_button'><a class='linkedin' href="#"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
    <li class='my_socmed_button'><a class='youtube' href="#"><i class="fa fa-youtube"></i> Youtube</a></li>
    <li class='my_socmed_button'><a class='pinterest' href="#"><i class="fa fa-pinterest"></i> Pinterest</a></li>
    <li class='my_socmed_button'><a class='twitter' href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
</ul>

3. Simpan.

Ganti kode # dengan URL Sosial Media Kalian. Jika pemasangan benar maka hasilnya akan seperti digambar.
Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger

# Widget Sosial Media Simple Style 3

1. Masuk ke Blogger.com.
2. Masuk ke Tata Letak > Add A Gadget > HTML/JavaScript. Lalu masukkan kode dibawah pada kolom Content.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<style type='text/css'>
    /* Social Media Widget */
    ul.my_widget_sm {
        display: block;
        text-align: center;
        text-decoration: none;
        margin: 0;
        padding: 10px 5px
    }

    ul.my_widget_sm li.smb {
        display: block;
        list-style: none;
        margin: 0 5px 5px 0;
        padding: 0;
        overflow: hidden;
        width: calc(50% - 12px);
        float: left
    }

    .smb a {
        padding: 5px 10px;
        font-size: 20px;
        font-family: arial;
        text-align: left;
        text-decoration: none;
        margin: 0;
        display: block
    }

    .smb a:hover {
        opacity: 0.7
    }

    .smb a.facebook {
        background: #3961b7;
        color: white
    }

    .smb a.twitter {
        background: #67abcb;
        color: white
    }

    .smb a.googleplus {
        background: #dd4b39;
        color: white
    }

    .smb a.linkedin {
        background: #1690c9;
        color: white
    }

    .smb a.youtube {
        background: #bb0000;
        color: white
    }

    .smb a.instagram {
        background: #885812;
        color: white
    }

    .smb a.pinterest {
        background: #dc4e53;
        color: white
    }
</style>
Social Media Icon
<ul class='my_widget_sm'>
    <li class='smb'><a class='facebook' href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
    <li class='smb'><a class='googleplus' href="#"><i class="fa fa-google-plus"></i> Google+</a></li>
    <li class='smb'><a class='instagram' href="#"><i class="fa fa-instagram"></i> Instagram</a></li>
    <li class='smb'><a class='linkedin' href="#"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
    <li class='smb'><a class='youtube' href="#"><i class="fa fa-youtube"></i> Youtube</a></li>
    <li class='smb'><a class='pinterest' href="#"><i class="fa fa-pinterest"></i> Pinterest</a></li>
    <li class='smb'><a class='twitter' href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
</ul>

3. Simpan.

Ganti kode # dengan URL Sosial Media Kalian. Jika pemasangan benar maka hasilnya akan seperti digambar.

Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger

# Widget Sosial Media Simple Style 3

1. Masuk ke Blogger.com.
2. Pilih menu TEMA > Edit HTML.
3. Kemudian simpan kode dibawah ini tepat DIATAS kode </head>.

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

4. Simpan.
5. Kemudian masuk ke menu Tata Letak > Add A Gadget > HTML/JavaScript. Kemudian masukkan kode dibawah ini pada kolom Content.

<style type="text/css">
    <!--
    .cont-sosmed {
        background: transparent;
        height: 100px;
        margin: 0 auto;
        max-width: 300px;
        padding: 0;
        position: relative;
        width: 100%;
    }

    .cont-sosmed ul {
        font-family: "trebuchet ms", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: normal;
        list-style: none !important;
        ;
        margin: 0 10px;
        padding: 0;
        text-align: center;
    }

    .cont-sosmed ul li {
        display: inline-block;
        float: left;
        margin: 0;
        padding: 0;
        position: absolute;
        transition: all 1s ease 0s;
        width: 50%;
    }

    .cont-sosmed ul li:hover {
        width: 100%;
    }

    .cont-sosmed ul li a {
        color: #fff !important;
        display: block;
        padding: 5px 0;
        text-decoration: none;
    }

    .cont-sosmed ul li a:hover {
        background: rgba(0, 0, 0, 0.15);
    }

    li.sosial-fb {
        background: #3b5998 !important;
        left: 0;
        top: 0;
        z-index: 10;
    }

    li.sosial-gp {
        background: #db4437 !important;
        right: 0;
        top: 0;
    }

    li.sosial-ig {
        background: #885a4d !important;
        left: 0;
        top: 30px;
        z-index: 10;
    }

    li.sosial-tw {
        background: #55acee !important;
        right: 0;
        top: 30px;
    }

    li.sosial-fl {
        background: #fe6602 !important;
        left: 0;
        top: 60px;
        width: 100% !important;
    }

    li.sosial-gp:hover,
    li.sosial-tw:hover {
        z-index: 10;
    }
    -->
</style>

<div class="cont-sosmed" itemprop="mainEntity" itemscope="itemscope" itemtype="http://schema.org/Person">
    <link href="http://www.pelajardzgn.my.id/" itemprop="url" />
    <ul>
        <li class="sosial-fb"><a href="https://www.facebook.com/xxxxx" itemprop="sameAs" rel="nofollow"
                target="_blank" title="Facebook"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a>
        </li>
        <li class="sosial-gp"><a href="https://plus.google.com/+xxxxx" itemprop="sameAs" rel="nofollow"
                target="_blank" title="Google Plus"><i class="fa fa-google-plus-square" aria-hidden="true"></i>
                Google+</a></li>
        <li class="sosial-ig"><a href="https://www.instagram.com/xxxxx" itemprop="sameAs" rel="nofollow"
                target="_blank" title="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a></li>
        <li class="sosial-tw"><a href="https://twitter.com/xxxxx" itemprop="sameAs" rel="nofollow" target="_blank"
                title="Twitter"><i class="fa fa-twitter-square" aria-hidden="true"></i> Twitter</a></li>
        <li class="sosial-fl"><a href="https://www.blogger.com/follow.g?blogID=7717322207379664325"
                itemprop="sameAs" rel="nofollow" target="_blank" title="Follow Blog"><i class="fa fa-plus-square"
                    aria-hidden="true"></i> Follow</a></li>
    </ul>
</div>

Ganti kode xxxxx dengan URL Sosial Media Kalian. Jika pemasangan benar maka hasilnya akan seperti digambar.
Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger

Bagaimana artikel tentang Kumpulan Widget Sosial Media Keren Dan Elegan Untuk Blogger? Mudah bukan. Apabila kalian memiliki pertanyaan seputar blogger silahkan komen dibawah ya.

You may like these posts