Pada kesempatan kali ini saya akan membagikan tutorial mengenai
Cara Memasang social media Follower responsive di Blog. cara yang satu ini terbilang cukup mudah dari pada cara yang lain. dan social yang saya tawarkan ini tentunya tidak memiliki kekurangan menu. dan tentunya dengan tampilan yang simple, responsive,
Sialhkan kalian pilih menu pada bagian berikut yang ingin di pasang
➤ Widget Social Media Simple | Facebook, Twitter, Google+, Youtube
➤ Widget Social Media Sedang | Facebook, Twitter, Google+, Youtube,Linkedin, Instagram
➤ Widget Social Media Full | All Social Media
Cara memasang Widget Social media counternya, silahkan ikut langkah dengan baik dan benar di bawah ini:
𐇐 Langkah pertama masuk ke menu Template ➜ Edit Html
𐄂 Selanjutnya kalian cari kode </head>
𐄂 Setelah ketemu, masukan css dibawah ini tepat diatasnya
<style type="text/css">
#social_media_counter a{color:white;text-decoration:none}
#social_media_counter .mas{margin-bottom:10px;position:relative;overflow:hidden;border-radius:3px;padding:0;background:black;color:white;display:block}
#social_media_counter .mas .item{padding:5px}
#social_media_counter .mas i:before{padding:5px}
#social_media_counter .mas i:after{content:'';width:1px;height:90%;background-color:rgba(255,255,255,0.37);position:absolute;right:-1px;top:5px}
#social_media_counter .mas i{display:inline-block;position:relative;width:25px;padding:5px}
#social_media_counter .mas .count{text-align:left;width:45%;display:inline-block}
#social_media_counter .mas .col_follow{float:right;padding:5px 12px;background:#ffffff4d;width:76px;text-align:left}
@media screen and (max-width:300px){
#social_media_counter .mas .count{width:auto}
}
@media screen and (max-width:250px){
#social_media_counter .mas .count{width:auto;float:right;margin-right:10px}
#social_media_counter .mas i{width:45%}
#social_media_counter .mas i:after{top:0;height:100%}
#social_media_counter .mas .col_follow{width:100%;padding:5px 0;text-align:center}
}
#social_media_counter .tamvan_dribbble{background:#ea4c89}
#social_media_counter .tamvan_facebook{background:#3a5795}
#social_media_counter .tamvan_instagram{background:#517fa4}
#social_media_counter .tamvan_google{background:#dd4b39}
#social_media_counter .tamvan_youtube{background:#b31217}
#social_media_counter .tamvan_pinterest{background:#cb2027}
#social_media_counter .tamvan_soundcloud{background:#f50}
#social_media_counter .tamvan_vimeo{background:#45bbff}
#social_media_counter .tamvan_twitter{background:#00a5e5}
#social_media_counter .tamvan_behance{background:#0079ff}
#social_media_counter .tamvan_vine{background:#00a478}
#social_media_counter .tamvan_vk{background:#507299}
#social_media_counter .tamvan_foursquare{background:#2d5be3}
#social_media_counter .tamvan_linkedin{background:#0077b5}
</style>
kode by: mastamvan https://mastamvan.blogspot.co.id/
𐄂 Save Template
𐄂 Sekarang kalian tinggal Memasukan kode Html dan Javascriptnya.
𐄂 Kalian masuk ke menu
Tataletak ➜ Tambahkan Widget, cari
HTML/ JavaScript.
𐄂 Setelah ketemu, buka Html/ JavaScript lalu copy salah satu kode di bawah ini dan pastekan ke ko kotak yang sudah disediakan
Pilihan Widget Social Media Counter
𐄂
Widget Social Media Simple | Facebook, Twitter, Google+, Youtube
<div id="social_media_counter">
<div class="mas tamvan_facebook">
<i class="fa fa-facebook"></i>
<a class="item facebook"><span class="count"></span><span class="col_follow">Likes</span></a>
</div>
<div class="mas tamvan_twitter">
<i class="fa fa-twitter"></i>
<a class="item twitter"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_google">
<i class="fa fa-google-plus"></i>
<a class="item google"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_youtube">
<i class="fa fa-youtube"></i>
<a class="item youtube"><span class="count"></span><span class="col_follow">Subscribers</span></a>
</div>
</div>
<script src="https://rawgit.com/mastamvan/backup/master/socialmediasimple.js"></script>
<script>
$('#social_media_counter').SocialCounter({
//Get Usernames
facebook_user: 'blogmastamvan',
google_plus_id: '104992141840871245115',
youtube_user: 'envato',
twitter_user: 'Teja_7x',
//Get Access Tokens,keys,client_ids
google_plus_key:'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
facebook_token:'1627334644211864|3_tGe7MNSzumVcKxMyJUTqZAlz4',
youtube_key:'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
});
</script>
kode by: mastamvan https://mastamvan.blogspot.co.id/
𐄂
Widget Social Media Sedang | Facebook, Twitter, Google+, Youtube,Linkedin, Instagram
<div id="social_media_counter">
<div class="mas tamvan_facebook">
<i class="fa fa-facebook"></i>
<a class="item facebook"><span class="count"></span><span class="col_follow">Likes</span></a>
</div>
<div class="mas tamvan_twitter">
<i class="fa fa-twitter"></i>
<a class="item twitter"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_google">
<i class="fa fa-google-plus"></i>
<a class="item google"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_youtube">
<i class="fa fa-youtube"></i>
<a class="item youtube"><span class="count"></span><span class="col_follow">Subscribers</span></a>
</div>
<div class="mas tamvan_instagram">
<i class="fa fa-instagram"></i>
<a class="item instagram"><span class="count"> </span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_linkedin">
<i class="fa fa-linkedin"></i>
<a class="item linkedin"><span class="count"></span><span class="col_follow">Connections</span></a>
</div>
</div>
<script src="https://rawgit.com/mastamvan/backup/master/socialmediasedang.js"></script>
<script>
$('#social_media_counter').SocialCounter({
//Get Usernames
facebook_user: 'blogmastamvan',
instagram_user: 'teja7x',
google_plus_id: '104992141840871245115',
youtube_user: 'envato',
twitter_user: 'Teja_7x',
//Get Access Tokens,keys,client_ids
instagram_token:'1295650148.1677ed0.dd10fd7af1784e6c8c93b1b806d120c2',
google_plus_key:'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
facebook_token:'1627334644211864|3_tGe7MNSzumVcKxMyJUTqZAlz4',
youtube_key:'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
linkedin_oauth: 'AQVi_jbCbb6NLtPnhNQMd3UFtgQNHreimKptTxo3iiyVhtrTJ8j31_5u3Xi-UjSGP25WejBKdEE5vyd8B2gWhW-hhrqTgDqSq-CS6OxUMGjuYxF9su-8mImn1A7H-ibiQtYPzlwBpIU0QiIqklFXBT7sXS6JGjczy0jrAQgtECYy7bpaTJ4'
});
</script>
𐄂 Widget Social Media Full | All Social Media
<div id="social_media_counter">
<div class="mas tamvan_facebook">
<i class="fa fa-facebook"></i>
<a class="item facebook"><span class="count"></span><span class="col_follow">Likes</span></a>
</div>
<div class="mas tamvan_twitter">
<i class="fa fa-twitter"></i>
<a class="item twitter"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_google">
<i class="fa fa-google-plus"></i>
<a class="item google"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_instagram">
<i class="fa fa-instagram"></i>
<a class="item instagram"><span class="count"> </span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_linkedin">
<i class="fa fa-linkedin"></i>
<a class="item linkedin"><span class="count"></span><span class="col_follow">Connections</span></a>
</div>
<div class="mas tamvan_youtube">
<i class="fa fa-youtube"></i>
<a class="item youtube"><span class="count"></span><span class="col_follow">Subscribers</span></a>
</div>
<div class="mas tamvan_vine">
<i class="fa fa-vine"></i>
<a class="item vine"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_pinterest">
<i class="fa fa-pinterest"></i>
<a class="item pinterest"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_dribbble">
<i class="fa fa-dribbble"></i>
<a class="item dribbble"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_soundcloud">
<i class="fa fa-soundcloud"></i>
<a class="item soundcloud"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_vimeo">
<i class="fa fa-vimeo"></i>
<a class="item vimeo"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_github">
<i class="fa fa-github"></i>
<a class="item github"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_behance">
<i class="fa fa-behance"></i>
<a class="item behance"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_vk">
<i class="fa fa-vk"></i>
<a class="item vk"><span class="count"></span><span class="col_follow">Followers</span></a>
</div>
<div class="mas tamvan_foursquare">
<i class="fa fa-foursquare"></i>
<a class="item foursquare"><span class="count"></span><span class="col_follow">Friends</span></a>
</div>
</div>
<script src="https://rawgit.com/mastamvan/backup/master/socialmediafull.js"></script>
<script>
$('#social_media_counter').SocialCounter({
//Get Usernames
dribbble_user: 'juanv911',
facebook_user: 'blogmastamvan',
instagram_user: 'teja7x',
google_plus_id: '104992141840871245115',
youtube_user: 'envato',
pinterest_user: 'tejasukmana99',
soundcloud_user_id: 'juanv911',
vimeo_user: 'vimeocuration',
github_user: 'desandro',
twitter_user: 'Teja_7x',
behance_user: 'juanv911',
vine_user: '952223981988110336',
vk_id: '66748',
foursquare_user: 'mo3aser',
//Get Access Tokens,keys,client_ids
dribbble_token: 'Tokens',
instagram_token:'1295650148.1677ed0.dd10fd7af1784e6c8c93b1b806d120c2',
google_plus_key:'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
facebook_token:'1627334644211864|3_tGe7MNSzumVcKxMyJUTqZAlz4',
youtube_key:'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
soundcloud_client_id:'TOKEN',
vimeo_token:'TOKEN',
behance_client_id:'TOKEN',
foursquare_token:'TOKEN',
linkedin_oauth: 'TOKEN'
});
</script>
kode by: mastamvan https://mastamvan.blogspot.co.id/
Catatan:
Silahkan ganti Username dan Token yang ada pada Script di bawah ini sesuai dengan akun Social Media kalian.
//Get Usernames
dribbble_user: 'juanv911',
facebook_user: 'blogmastamvan',
instagram_user: 'teja7x',
google_plus_id: '104992141840871245115',
youtube_user: 'envato',
pinterest_user: 'tejasukmana99',
soundcloud_user_id: 'juanv911',
vimeo_user: 'vimeocuration',
github_user: 'desandro',
twitter_user: 'Teja_7x',
behance_user: 'juanv911',
vine_user: '952223981988110336',
vk_id: '66748',
foursquare_user: 'mo3aser',
//Get Access Tokens,keys,client_ids
dribbble_token: 'Tokens',
instagram_token:'1295650148.1677ed0.dd10fd7af1784e6c8c93b1b806d120c2',
google_plus_key:'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
facebook_token:'1627334644211864|3_tGe7MNSzumVcKxMyJUTqZAlz4',
youtube_key:'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
soundcloud_client_id:'TOKEN',
vimeo_token:'TOKEN',
behance_client_id:'TOKEN',
foursquare_token:'TOKEN',
linkedin_oauth: 'TOKEN'
Jika icony tidak tampil, silahkan tambahkan kode ini di atas
</head>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
Kalau Followersnya yang tidak tampil kalian tambahkan kode di bawah ini tepat di atas kode
</head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
𐄂 Kalo sudah silahkan save Templateya dan lihat hasilnya
Terimakasih banyak sudah mengunjungi Blog
tkjarch. semoga tutorial ini dapat memberikan manfaat.
