Cara Membuat Sosial Media Conter Widget Flat UI

Membuat sosial media counter di blog

Selamat pagi.. kali ini saya akan membagikan trik cara membuat widget social media counter yang bisa anda gunakan sebagai media promosi blog dan memudahkan pengunjung mengakses blog anda kapanpun tanpa harus mencarinya di search engine google dll.

Social media conter ini terletak di bagian sidebar atas yang sejajar 1 baris, diantaranya terdiri dari facebook, twitter, blogger, google+ dan youtube channel. Anda juga dapat mengganti media sosial diatas sesuai keinginan anda.

Jika anda tertarik untuk membuatnya, berikut langkah-langkahnya:

Sosial media Counter Flat UI


Tempatkan CSS berikut diatas </style>

/* Sosmed Counter by Ricky */
#socialcounter{overflow:hidden;margin:0 0 10px 0}
#socialcounter h2{margin:0 auto 4px auto}
#socialcounter .ricky_socialiku{margin-left:-.5%;margin-right:-.5%}
#socialcounter .ricky_socialiku:before,.ricky_socialiku:after{content:&quot;&quot;;display:table}
#socialcounter .ricky_socialiku:after{clear:both}
#socialcounter .ricky_socialiku .scl_social{margin:0 .5% 1%;width:19%;float:left;text-align:center;background:#111;border:1px solid rgba(0,0,0,0.03);transition:all .3s}
#socialcounter .ricky_socialiku .scl_social.facebookx{background:#3e64ad}#socialcounter .ricky_socialiku .scl_social.twitterx{background:#58ccff}#socialcounter .ricky_socialiku .scl_social.bloggerx{background:#f79738}#socialcounter .ricky_socialiku .scl_social.googlex{background:#dd4b39}#socialcounter .ricky_socialiku .scl_social.youtubex{background:#e62119}
#socialcounter .ricky_socialiku .scl_social.facebookx:hover{background:#2d4980}#socialcounter .ricky_socialiku .scl_social.twitterx:hover{background:#4aaeda}#socialcounter .ricky_socialiku .scl_social.bloggerx:hover{background:#d78432}#socialcounter .ricky_socialiku .scl_social.googlex:hover{background:#bf3c2c}#socialcounter .ricky_socialiku .scl_social.youtubex:hover{background:#c71f18}
#socialcounter .ricky_socialiku .scl_social a{position:relative;overflow:hidden;display:block;color:#fff;padding:22px 5px}
#socialcounter .ricky_socialiku .scl_social a:before{content:&#39;&#39;;position:absolute;left:0;right:0;bottom:0;top:0;background-image:linear-gradient(150deg,rgba(0,0,0,0.02) 45%,rgba(255,255,255,.12) 45%);transition:all .6s}
#socialcounter .ricky_socialiku .scl_social:hover a:before{transform:rotate(-30deg) scale(1.3);}
#socialcounter .ricky_socialiku .scl_social span{display:block}
#socialcounter .ricky_socialiku .scl_social span.app_icon i{font-size:20px;margin-bottom:5px}
#socialcounter .ricky_socialiku .scl_social span.app_type{font-size:10px;margin:5px auto 0 auto}
#socialcounter h2,#Label1 h2{background:#fff}

Kemudian Letakan Kode HTML berikut ini tepat dibawah <div id="sidebar-wrapper">

<div id='socialcounter'>
<h2 class='ripplelink'><span>Follow</span></h2>
<div class='ricky_socialiku'>
   <div class='scl_social facebookx'>
      <a href='https://www.facebook.com/trikricky/' rel='nofollow' target='_blank' title='Like our Facebook'>
      <span class='app_icon'><i class='fa fa-facebook'/></span>
      <span class='app_type'>Facebook</span> </a>
   </div>
   <div class='scl_social twitterx'>
      <a href='https://www.twitter.com/' rel='nofollow' target='_blank' title='Follow our Twitter'>
      <span class='app_icon'><i class='fa fa-twitter'/></span>
      <span class='app_type'>Twitter</span>
      </a>
   </div>
   <div class='scl_social bloggerx'>
      <a href='https://www.blogger.com/follow-blog.g?blogID=7106032244507869187' rel='nofollow' target='_blank' title='Join our Site'>
      <span class='app_icon'><i class='fa fa-user'/></span>
      <span class='app_type'>Blogger</span> </a>
   </div>
   <div class='scl_social googlex'>
      <a href='https://plus.google.com/114289848161495045267/about' rel='nofollow' target='_blank' title='Get in touch'>
      <span class='app_icon'><i class='fa fa-google-plus'/></span>
      <span class='app_type'>Google+</span> </a>
   </div>
   <div class='scl_social youtubex'>
      <a href='https://www.youtube.com/channel/UCn2_76YvwgWaL9eUQo5MN0A' rel='nofollow' target='_blank' title='Visit our Channel'>
      <span class='app_icon'><i class='fa fa-youtube'/></span>
      <span class='app_type'>Channel</span> </a>
   </div>
</div>
</div>

Ganti kode yang ditandai merah dengan Link tujuan Sosial media anda

Simpan template anda dan lihat hasilnya.

Demikian Trik dan cara membuat widget sosial media counter flat UI, semoga bermanfaat.
Advertisement
Advertisement

Tidak masalah seberapa lambat kau berjalan, asalkan kau tak berhenti.