Cara Memasang social media Follower responsive

Cara Memasang social media Follower responsive

1/03/2018

Baca Juga



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,

Demonya kalian bisa lihat disini Demo Social Media Counter

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.

Artikel Terkait

Next
« Prev Post
Previous
Next Post »

1 komentar:

Write komentar
achantepadgham
AUTHOR
March 4, 2022 at 12:41 PM delete

Casino - Wrigley Fieldhouse at Harrah's Lake Tahoe
Casino at Harrah's Lake Tahoe. Harrah's Lake Tahoe. 1 ๊ฐ•์›๋„ ์ถœ์žฅ๋งˆ์‚ฌ์ง€ review. Casino. Lake Tahoe. ์„œ์‚ฐ ์ถœ์žฅ์ƒต 0 reviews. ์˜์ •๋ถ€ ์ถœ์žฅ์ƒต 0 ํƒœ๋ฐฑ ์ถœ์žฅ์•ˆ๋งˆ user reviews. ์˜์ฃผ ์ถœ์žฅ๋งˆ์‚ฌ์ง€ Hotel. 1 night. Save up to 70%.

Reply
avatar

Silahkan tinggalkan pesan jika Anda punya saran, kritik, atau pertanyaan seputar topik pembahasan.
catatan:
- silahkan tinggalkan pesan yang relevan
- komentar yang baik dan mengenai seputar Blog
- dilarang meninggalkan link aktif
Terima kasih untuk kerja samanya. (By Admin) ConversionConversion EmoticonEmoticon

Subscribe to: Post Comments (Atom)