Cara membuat widget sosial media di blog berserta counter follower

pada kali ini xhteam akan membagikan tutorial cara membuat widget sosial media diblog berserta follow counter nya atau jumlah followernya. social media button ini akan otomatis menampilkan jumlah followernya sobat hanya perlu menambahkan username social media sobat yaa... ok langsung ke tutorialnya.

Cara membuat widget sosial media

1. login ke akun blogger kalian

2. setelah login masuk ke menu Tata Letak , tambahkan widget ,pilih html/javascript

3. sobat masukan code dibawah ini


<style>
#bungkus_social{color:white;background-color:#f9f9f9;margin:10px}#bungkus_social .item{padding:12px;font-size:11px;border-radius:5px;float:left;margin:0 10px 10px 0;background:grey;text-align:center;min-width:90px;min-height:130px;border-bottom:10px solid rgba(0,0,0,.15);text-transform:uppercase}#bungkus_social .item.facebook{background:#3a5795}#bungkus_social .item.instagram{background:#517fa4}#bungkus_social .item.google{background:#dd4b39}#bungkus_social .item.youtube{background:#b31217}#bungkus_social .item.pinterest{background:#cb2027}#bungkus_social .item.twitter{background:#00a5e5}#bungkus_social .item i{border-radius:100%;background:#2c1c1c1a;width:38%;margin:0 auto}#bungkus_social .item i,#bungkus_social .item .count{padding:10px;display:block;font-size:30px}#bungkus_social .item .count{font-weight:600}#total,#total_k{padding:10px;font-weight:bold;font-size:20px}#total:before,#total_k:before{content:'Total Fans:';font-weight:normal}#bungkus_social .item{color:#fff}@media screen and (max-width:265px){#bungkus_social .item{width:100%;padding:0}#bungkus_social .item i{background:transparent}}
</style>
<div id="bungkus_social">
    <a class="item twitter"><i class="fa fa-twitter"></i><span class="count"></span>Followers</a>
    <a class="item facebook"><i class="fa fa-facebook"></i><span class="count"></span>Likes</a>
    <a class="item instagram"><i class="fa fa-instagram"></i><span class="count"> </span>Followers</a>
    <a class="item google"><i class="fa fa-google-plus"></i><span class="count"></span>Followers</a>
    <a class="item youtube"><i class="fa fa-youtube"></i><span class="count"></span>Subscribers</a>
    <a class="item pinterest"><i class="fa fa-pinterest"></i><span class="count"></span>Followers</a>
</div>
<script type='text/javascript' src='https://rawgit.com/mastamvan/backup/master/social_counter.js'></script>
<script>
    $('#bungkus_social').SocialCounter({
        //Get Usernames
        facebook_user: 'clone.dwiki',
        instagram_user: 'Teja7x',
        google_plus_id: '104992141840871245115',
        youtube_user: 'MrGaziyama',
        pinterest_user: 'tejasukmana99',
        twitter_user: 'Teja_7x',
        //Get Access Tokens,keys,client_ids
        instagram_token: '1466232857.b8ae3c3.de2526f6c4a04c329bcc4d3d91f5aea0',
        google_plus_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
        facebook_token: '1627334644211864|3_tGe7MNSzumVcKxMyJUTqZAlz4',
        youtube_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
    });
</script>

4. sobat ganti kode username berikut dengan username sosial media sobat


facebook_user: 'clone.dwiki',
        instagram_user: 'Teja7x',
        google_plus_id: '104992141840871245115',
        youtube_user: 'MrGaziyama',
        pinterest_user: 'tejasukmana99',
        twitter_user: 'Teja_7x',

jika sudah selesai tinggal klik simpan dan lihatlah hasilnya

jika icon tidak tampil silahkan gunakan cara dibawah ini

caranya salin css dibawah ini dan tempel diatas </head>


<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

jika counter followernya tidak tampil sobat tambahkan kode css dibawah ini dan tempelkan diatas </head>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

ok sekian dulu dari admin cara membuat widget sosial media diblog semoga artikel ini bermaanfaat untuk kita semua... terimakasih happy blogging jangan lupa share artikel ini ke teman teman kalian xD