Cara Membuat Widget Social Media Counter Dengan FontAwesome Icon di Blogger

Cara Membuat Widget Social Media Counter Dengan FontAwesome Icon di Blogger - Halo, apa kabar sobat blogger semua? Pada kesempatan kali ini saya akan berbagi sedikit tips kepada kalian semua tentang Bagaimana Cara Membuat Widget Social Media Counter Dengan FontAwesome Icon di Blogger. Seperti yang kita ketahui, jika keberadaan social media sangat penting bagi sebuah blog ataupun website. Dimana social media dapat berperan aktif dalam meningkatkan perkembangan blog yang kita kelola, tentu social media selain sebagai tempat berpromosi blog, banyak hal lain juga yang bisa kita dapatkan dengan berinteraksi dengan berbagai social media.

Dengan kita menambahkan link menuju social media dari blog kita, seperti facebook, twitter, google+, atau social media yang lain, hal ini tentu akan memudahkan pengunjung blog kita untuk langsung berinteraksi dengan kita melalui social media tersebut. Selain itu, jika social media milik blog yang kita kelola memiliki banyak pengikut atau follower, tentu hal ini juga akan memudahkan kita untuk melakukan promosi dan blog yang kita kelolapun lebih cepat populer dimata pengunjung.

Baiklah, langsung saja. Bagi kamu yang penasaran dan sudah tidak sabar lagi ingin langsung memasang widget social media counter dengan icon fontawesome. Kamu bisa langsung mengikuti langkah-langkah pemasangannya dibawah ini. Sebelum itu, kamu juga bisa melihat preview dari widget social media counter kali ini pada gambar yang sudah saya siapkan dibawah ini.

Preview

Cara Membuat Widget Social Media Counter Dengan FontAwesome Icon di Blogger

1. Masuk ke akun blogger kamu, lalu klik template > edit html
2. Kemudian cari kode </head>, dan paste css FontAwesome berikut ini diatas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Note: if your blog already have fontawesome icon stylesheet then you don't need to do it again,just skip this step.

3.  Selanjutnya, cari kode ]]></b:skin> dan paste kode css berikut diatas kode ]]></b:skin>

/* Social Media with counter Widget by http://semua-tutorialku.blogspot.com */
.list-unstyled {
  padding-left: 0;
  list-style: none;
  margin: 2px
}
.list-inline li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 10px
}
.SemuaTutorialkuBlog-colored-social .fa,
.SemuaTutorialkuBlog-social-icons .fa {
  font-size: 16px
}
.SemuaTutorialkuBlog-colored-social .fa,
.SemuaTutorialkuBlog-social-icons .fa {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out
}
.SemuaTutorialkuBlog-colored-social .fa,
.SemuaTutorialkuBlog-social-icons .fa {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #FFF;
  color: rgba(255, 255, 255, 0.8)
}
.SemuaTutorialkuBlog-colored-social.icon-circle .fa,
.SemuaTutorialkuBlog-social-icons.icon-circle .fa {
  border-radius: 50%
}
.SemuaTutorialkuBlog-colored-social.icon-rounded .fa,
.SemuaTutorialkuBlog-social-icons.icon-rounded .fa {
  border-radius: 2px
}
.SemuaTutorialkuBlog-colored-social.icon-flat .fa,
.SemuaTutorialkuBlog-social-icons.icon-flat .fa {
  border-radius: 0
}
.SemuaTutorialkuBlog-colored-social .fa:hover,
.SemuaTutorialkuBlog-colored-social .fa:active,
.SemuaTutorialkuBlog-social-icons .fa:hover,
.SemuaTutorialkuBlog-social-icons .fa:active {
  color: #FFF
}
.SemuaTutorialkuBlog-colored-social.icon-zoom .fa:hover,
.SemuaTutorialkuBlog-colored-social.icon-zoom .fa:active,
.SemuaTutorialkuBlog-social-icons.icon-zoom .fa:hover,
.SemuaTutorialkuBlog-social-icons.icon-zoom .fa:active,
.SemuaTutorialkuBlog-social-sidebar li:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1)
}
.SemuaTutorialkuBlog-colored-social.icon-rotate .fa:hover,
.SemuaTutorialkuBlog-colored-social.icon-rotate .fa:active,
.SemuaTutorialkuBlog-social-icons.icon-rotate .fa:hover,
.SemuaTutorialkuBlog-social-icons.icon-rotate .fa:active {
  -webkit-transform: scale(1.1) rotate(360deg);
  -moz-transform: scale(1.1) rotate(360deg);
  -ms-transform: scale(1.1) rotate(360deg);
  -o-transform: scale(1.1) rotate(360deg);
  transform: scale(1.1) rotate(360deg)
}
.SemuaTutorialkuBlog-colored-social .fa-dribbble,
.SemuaTutorialkuBlog-social-icons .fa-dribbble:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-dribbble:hover .SemuaTutorialkuBlog-sicon {
  background-color: #F46899
}

.SemuaTutorialkuBlog-colored-social .fa-stumbleupon,
.SemuaTutorialkuBlog-social-icons .fa-stumbleupon:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-stumbleupon:hover .SemuaTutorialkuBlog-sicon {
  background-color: #eb4924
}
.SemuaTutorialkuBlog-colored-social .fa-reddit,
.SemuaTutorialkuBlog-social-icons .fa-reddit:hover {
  background-color: #5f99cf
}
.SemuaTutorialkuBlog-colored-social .fa-facebook,
.SemuaTutorialkuBlog-social-icons .fa-facebook:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-facebook:hover .SemuaTutorialkuBlog-sicon {
  background-color: #3C599F
}
.SemuaTutorialkuBlog-colored-social .fa-rss,
.SemuaTutorialkuBlog-social-icons .fa-rss:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-rss:hover .SemuaTutorialkuBlog-sicon {
  background-color: #f26522
}
.SemuaTutorialkuBlog-colored-social .fa-flickr,
.SemuaTutorialkuBlog-social-icons .fa-flickr:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-flickr:hover .SemuaTutorialkuBlog-sicon {
  background-color: #d51007
}
.SemuaTutorialkuBlog-colored-social .fa-flickr,
.SemuaTutorialkuBlog-social-icons .fa-flickr:hover {
  background-color: #FF0084
}
.SemuaTutorialkuBlog-colored-social .fa-instagram,
.SemuaTutorialkuBlog-social-icons .fa-instagram:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-instagram:hover .SemuaTutorialkuBlog-sicon {
  background-color: #685243
}
.SemuaTutorialkuBlog-colored-social .fa-foursquare,
.SemuaTutorialkuBlog-social-icons .fa-foursquare:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-foursquare:hover .SemuaTutorialkuBlog-sicon {
  background-color: #0086BE
}
.SemuaTutorialkuBlog-colored-social .fa-github,
.SemuaTutorialkuBlog-social-icons .fa-github:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-github:hover .SemuaTutorialkuBlog-sicon {
  background-color: #070709
}
.SemuaTutorialkuBlog-colored-social .fa-google-plus,
.SemuaTutorialkuBlog-social-icons .fa-google-plus:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-googleplus:hover .SemuaTutorialkuBlog-sicon {
  background-color: #CF3D2E
}
.SemuaTutorialkuBlog-colored-social .fa-instagram,
.SemuaTutorialkuBlog-social-icons .fa-instagram:hover {
  background-color: #A1755C
}
.SemuaTutorialkuBlog-colored-social .fa-linkedin,
.SemuaTutorialkuBlog-social-icons .fa-linkedin:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-linkedin:hover .SemuaTutorialkuBlog-sicon {
  background-color: #0085AE
}
.SemuaTutorialkuBlog-colored-social .fa-pinterest,
.SemuaTutorialkuBlog-social-icons .fa-pinterest:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-pinterest:hover .SemuaTutorialkuBlog-sicon {
  background-color: #CC2127
}
.SemuaTutorialkuBlog-colored-social .fa-twitter,
.SemuaTutorialkuBlog-social-icons .fa-twitter:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-twitter:hover .SemuaTutorialkuBlog-sicon {
  background-color: #32CCFE
}
.SemuaTutorialkuBlog-colored-social .fa-vk,
.SemuaTutorialkuBlog-social-icons .fa-vk:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-vk:hover .SemuaTutorialkuBlog-sicon {
  background-color: #375474
}
.SemuaTutorialkuBlog-colored-social .fa-soundcloud,
.SemuaTutorialkuBlog-social-icons .fa-soundcloud:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-soundcloud:hover .SemuaTutorialkuBlog-sicon {
  background-color: #FF4100
}
.SemuaTutorialkuBlog-colored-social .fa-vine,
.SemuaTutorialkuBlog-social-icons .fa-vine:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-vine:hover .SemuaTutorialkuBlog-sicon {
  background-color: #35B57C
}

.SemuaTutorialkuBlog-colored-social .fa-youtube,
.SemuaTutorialkuBlog-social-icons .fa-youtube:hover,
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-youtube:hover .SemuaTutorialkuBlog-sicon {
  background-color: #C52F30
}
.top-social ul li {
  margin: 0;
  padding: 0
}
div#socialicons-top {
  float: left
}
.top-social .list-unstyled {
  margin: 0
}
.SemuaTutorialkuBlog-socialicons {
  text-align: center;
  overflow: auto;
  font-size: 22px;
  margin: 0 -8px
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-socialInner {
  position: relative;
  overflow: hidden;
  padding-left: 8px
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-social {
  float: left;
  width: 25%
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-sinn {
  padding-right: 8px
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-sinn:hover .SemuaTutorialkuBlog-sicon {
  color: #fff
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-sicon {
  display: block;
  padding: 10px 0;
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-facebook .SemuaTutorialkuBlog-sicon {
  color: #3B5998
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-googleplus .SemuaTutorialkuBlog-sicon {
  color: #DD4B39
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-twitter .SemuaTutorialkuBlog-sicon {
  color: #2AA9E0
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-instagram .SemuaTutorialkuBlog-sicon {
  color: #685243
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-pinterest .SemuaTutorialkuBlog-sicon {
  color: #CC2028
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-youtube .SemuaTutorialkuBlog-sicon {
  color: #DE1829
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-vine .SemuaTutorialkuBlog-sicon {
  color: #35B57C
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-soundcloud .SemuaTutorialkuBlog-sicon {
  color: #FF4100
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-vk .SemuaTutorialkuBlog-sicon {
  color: #45668e
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-foursquare .SemuaTutorialkuBlog-sicon {
  color: #f94877
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-github .SemuaTutorialkuBlog-sicon {
  color: #333333
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-dribbble .SemuaTutorialkuBlog-sicon {
  color: #ea4c89
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-stumbleupon .SemuaTutorialkuBlog-sicon {
  color: #eb4924
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-linkedin .SemuaTutorialkuBlog-sicon {
  color: #0085AE
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-rss .SemuaTutorialkuBlog-sicon {
  color: #f26522
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-flickr .SemuaTutorialkuBlog-sicon {
  color: #FF0084
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-sicon {
  background: #F5F5F5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-scount {
  display: block;
  color: #FFFFFF;
  background: #007ABE;
  padding: 5px 0;
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-scount:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: aSemuaTutorialkuBlogolute;
  pointer-events: none;
  border-color: rgba(238, 238, 238, 0);
  border-bottom-color: #007ABE;
  border-width: 4px;
  margin-left: -4px
}
.SemuaTutorialkuBlog-socialicons .SemuaTutorialkuBlog-scount:hover {
  background: #222222;
}

4. Kemudian Simpan Template.

Nah, langkah selanjutnya untuk memasang widget social media counter ini, kamu bisa melakukan langkah sederhana dibawah ini.

1. Klik tab Tata Letak / Layout di blog kamu

2. Kemudian klik Add Gadget > pilih HTML/Javascript widget

3. Lalu paste kode HTML berikut didalam konten box widget tersebut.

<div class="SemuaTutorialkuBlog-socialicons">
<div class="SemuaTutorialkuBlog-socialInner">
  <!--Facebook-->
    <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-facebook SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Facebook">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-facebook"></i></span>
      <span class="SemuaTutorialkuBlog-scount">3.1K</span>
      </a>
      </div>
      </div>
  <!--Google Plus-->
    <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-googleplus SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Google Plus">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-google-plus"></i></span>
      <span class="SemuaTutorialkuBlog-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Twitter-->
  <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-twitter SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Twitter">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-twitter"></i></span>
      <span class="SemuaTutorialkuBlog-scount">1.4K</span>
      </a>
    </div>
    </div>
  <!--Instagram-->
  <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-instagram SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Instagram">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-instagram"></i></span>
      <span class="SemuaTutorialkuBlog-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Pinterest-->
  <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-pinterest SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Pinterest">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-pinterest"></i></span>
      <span class="SemuaTutorialkuBlog-scount">4.5K</span>
      </a>
    </div>
    </div>
  <!--Youtube-->
  <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-youtube SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="YouTube">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-youtube"></i></span>
      <span class="SemuaTutorialkuBlog-scount">2.8K</span>
      </a>
    </div>
    </div>
  <!--Vine-->
  <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-vine SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Vine">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-vine"></i></span>
      <span class="SemuaTutorialkuBlog-scount">3.3K</span>
      </a>
    </div>
    </div>
  <!--SoundCloud-->
  <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-soundcloud SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="SoundCloud">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-soundcloud"></i></span>
      <span class="SemuaTutorialkuBlog-scount">3.9K</span>
      </a>
    </div>
    </div>
 
      <!--VK-->
      <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-vk SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="VK">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-vk"></i></span>
      <span class="SemuaTutorialkuBlog-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!---->
      <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-foursquare SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Foursquare">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-foursquare"></i></span>
      <span class="SemuaTutorialkuBlog-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--GitHub-->
      <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-github SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="GitHub">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-github"></i></span>
      <span class="SemuaTutorialkuBlog-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--Dribbble-->
      <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-dribbble SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Dribbble">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-dribbble"></i></span>
      <span class="SemuaTutorialkuBlog-scount">3.9K</span>
      </a>
    </div>
    </div>
 
     <!--Stumbleupon-->
      <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-stumbleupon SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Stumbleupon">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-stumbleupon"></i></span>
      <span class="SemuaTutorialkuBlog-scount">3.4K</span>
      </a>
    </div>
    </div>
     <!--Linkedin-->
      <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-linkedin SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Linkedin">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-linkedin"></i></span>
      <span class="SemuaTutorialkuBlog-scount">1.5K</span>
      </a>
    </div>
    </div>
     <!--Rss-->
      <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-rss SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tibse="Rss">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-rss"></i></span>
      <span class="SemuaTutorialkuBlog-scount">1.9K</span>
      </a>
    </div>
    </div>
     <!--Flickr-->
      <div class="SemuaTutorialkuBlog-social">
  <div class="SemuaTutorialkuBlog-flickr SemuaTutorialkuBlog-sinn">
      <a href='#' target='_blank' tiSemuaTutorialkuBloge="flickr">
      <span class="SemuaTutorialkuBlog-sicon"><i class="fa fa-flickr"></i></span>
      <span class="SemuaTutorialkuBlog-scount">2.9K</span>
      </a>
    </div>
    </div>
    </div>
</div>

Note: Jangan lupa untuk mengganti link social media diatas dengan milik kamu.

4. Simpan Widget, selesai.

Nah, Itulah sedikit tips Cara Membuat Widget Social Media Counter Dengan FontAwesome Icon di Blogger. Semoga artikel ini bisa bermanfaat bagi kamu semua, sampai jumpa. Selamat mencoba..