domingo, 6 de novembro de 2016

Social Media Counter widget Blogger

Social-Media-Counter-Widget-Blogger

Hoje vamos mostrar como instalar esse widget by mastanvan ele é elegante e tem um layout bem diferenciado isso traz inovação com contadores o que cria maior impacto se você deseja adicionar isso na sua sidebar do Blogger siga os passos abaixo:

Como adicionar widget social counter blogger 

Faça login no Blogger no painel do Blogger Procure por layout:
então adicionar novo gadget procure por JavaScript 
e adicione o seguinte código:



<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: 'userfacebook',
        instagram_user: 'Userid',
        google_plus_id: 'Google Plus Id',
        youtube_user: 'youtubeuser',
        pinterest_user: 'Pinterestuser',
        twitter_user: 'Twitter user',
        //Get Access Tokens,keys,client_ids
        instagram_token: '1466232857.b8ae3c3.de2526f6c4a04c329bcc4d3d91f5aea0',
        google_plus_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
        facebook_token: '1627334644211864|3_tGe7MNSzumVcKxMyJUTqZAlz4',
        youtube_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
    });
</script>

Salve e pronto.

Obs faça as alterações o que esta realçado em amarelo pelos ids da rede social e se o icone não aparecer contador adicione o seguinte código acima de </head> no código do template:

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

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

 








NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner