Cara Redesign Membuat Social Counter Seperti Template Simplify

Belajar redesign template terkadang menjadi sesuatu yang sangat menantang dan menyenangkan. Ketika kita berhasil merubah (redesign) dari tampilan blog maka ada rasa kebanggaan tersendiri. Para blogger mania biasanya sering meredesign template blognya supaya terlihat sedikit berbeda dari versi aslinya.

Banyak cara yang bisa kita lakukan dalam redesign template. Mulai dari merubah tampilan winget, menambah menu hingga mengganti warna dasar dari template. Melakukan redesign ini memang tidaklah mudah dan tidak juga sulit. Kita hanya perlu ketelitian dalam penempatan setiap kode script yang ada.

Didalam redesign template memang kita di hadapkan dengan kode yang rumit. Tapi sebetulnya yang di tuntut adalah keinginan dan niat dalam belajar. Banyak kok blogger yang tidak punya basik pendidikan tentang xml, html, javaScript tapi mereka bisa melakukanya. Intinya mereka mau belajar tahap demi tahap dan tidak malu untuk bertanya.

Ok tanpa panjang lebar lagi tentang belajar redesign sebagai bahan belajar awal saya punya cara membuat winget social counter seperti template simplify 4. Kode dari trik ini saya compare dari template premiumnya simplify. Jadi sebelumnya terimakasih untuk mbak Arlina.

Langkah-langkah yang harus kita lakukan sebagai berikut :

1. Buka blog kamu dan menuju ke dashboard.
2. Kemudian di bagian menu sebelah kiri pilih tema lalu pilih edit HTML.
3. Salin kode CSS berikut ini dan letakan diatas kode

]]></b:skin>

/* Social Media */
#socialcounter{overflow:hidden;margin:0 0 10px 0}
#socialcounter h2{margin:0 auto 4px auto}
#socialcounter .arlina_socialize{margin-left:-.5%;margin-right:-.5%}
#socialcounter .arlina_socialize:before,.arlina_socialize:after{content:"";display:table}
#socialcounter .arlina_socialize:after{clear:both}
#socialcounter .arlina_socialize .scl_social{margin:0 .5% 1%;width:32.3%;float:left;text-align:center;background:#111;border:1px solid rgba(0,0,0,0.03);transition:all .3s}
#socialcounter .arlina_socialize .scl_social.facebookx{background:#3e64ad}#socialcounter .arlina_socialize .scl_social.twitterx{background:#58ccff}#socialcounter .arlina_socialize .scl_social.bloggerx{background:#f79738}#socialcounter .arlina_socialize .scl_social.instagramx{background:#4d749f}#socialcounter .arlina_socialize .scl_social.googlex{background:#dd4b39}#socialcounter .arlina_socialize .scl_social.youtubex{background:#e62119}
#socialcounter .arlina_socialize .scl_social.facebookx:hover{background:#2d4980}#socialcounter .arlina_socialize .scl_social.twitterx:hover{background:#4aaeda}#socialcounter .arlina_socialize .scl_social.bloggerx:hover{background:#d78432}#socialcounter .arlina_socialize .scl_social.instagramx:hover{background:#3c5d81}#socialcounter .arlina_socialize .scl_social.googlex:hover{background:#bf3c2c}#socialcounter .arlina_socialize .scl_social.youtubex:hover{background:#c71f18}
#socialcounter .arlina_socialize .scl_social a{position:relative;overflow:hidden;display:block;color:#fff;padding:22px 5px}
#socialcounter .arlina_socialize .scl_social a:before{content:'';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 .arlina_socialize .scl_social:hover a:before{transform:rotate(-30deg) scale(1.3);}
#socialcounter .arlina_socialize .scl_social span{display:block}
#socialcounter .arlina_socialize .scl_social span.app_icon i{font-size:24px;margin-bottom:5px}
#socialcounter .arlina_socialize .scl_social span.app_type{font-size:13px;margin:5px auto 0 auto}
#socialcounter h2,#Label1 h2{background:#ffffff}

4. Langkah selanjutnya salin kode berikut ini lalu letakan tepat dibawah

<aside id="sidebar-wrapper">

<div id='socialcounter'>
<h2 class='ripplelink'><span>Media Sosial</span></h2>
<div class='arlina_socialize'>
   <div class='scl_social facebookx'>
     <a href='xxxx' 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='xxxx' 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='xxxx' 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='xxxx' 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 instagramx'>
      <a href='xxxx' rel='nofollow' target='_blank' title='Follow our Instagram'>
      <span class='app_icon'><i class='fa fa-instagram'/></span>
      <span class='app_type'>Instagram</span> </a>
   </div>
   <div class='scl_social youtubex'>
      <a href='xxxx' rel='nofollow' target='_blank' title='Visit our Channel'>
      <span class='app_icon'><i class='fa fa-youtube'/></span>
      <span class='app_type'>Youtube</span> </a>
   </div>
</div>
</div>