Widget Sosial

Dah lama gak di urus blog ini jadi terlantar, kiarna kesibukan yang padat. Mumpung ada waktu luang saya akan share tutorial tentang menambahan widget sosial yang keren dari bawaan blogger. Silahkan ikuti tutorial dibawah ini.:)

1. Masuk ke blogger
2. Masuk ke menu Template - Edit HTML
3. Cari kode ]]>
atau dan copy kode di bawah ini  tepat di atas nya

/*----Social Media----*/
.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}.tl-colored-social .fa,.tl-social-icons .fa{font-size:16px}.tl-colored-social .fa,.tl-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}.tl-colored-social .fa,.tl-social-icons .fa{width:35px;height:35px;line-height:35px;text-align:center;color:#FFF;color:rgba(255,255,255,0.8)}.tl-colored-social.icon-circle .fa,.tl-social-icons.icon-circle .fa{border-radius:50%}.tl-colored-social.icon-rounded .fa,.tl-social-icons.icon-rounded .fa{border-radius:2px}.tl-colored-social.icon-flat .fa,.tl-social-icons.icon-flat .fa{border-radius:0}.tl-colored-social .fa:hover,.tl-colored-social .fa:active,.tl-social-icons .fa:hover,.tl-social-icons .fa:active{color:#FFF}.tl-colored-social.icon-zoom .fa:hover,.tl-colored-social.icon-zoom .fa:active,.tl-social-icons.icon-zoom .fa:hover,.tl-social-icons.icon-zoom .fa:active,.tl-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)}.tl-colored-social.icon-rotate .fa:hover,.tl-colored-social.icon-rotate .fa:active,.tl-social-icons.icon-rotate .fa:hover,.tl-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)}.tl-colored-social .fa-dribbble,.tl-social-icons .fa-dribbble:hover{background-color:#F46899}.tl-colored-social .fa-stumbleupon,.tl-social-icons .fa-stumbleupon:hover{background-color:#eb4924}.tl-colored-social .fa-reddit,.tl-social-icons .fa-reddit:hover{background-color:#5f99cf}.tl-colored-social .fa-facebook,.tl-social-icons .fa-facebook:hover{background-color:#3C599F}.tl-colored-social .fa-rss,.tl-social-icons .fa-rss:hover{background-color:#f26522}.tl-colored-social .fa-lastfm,.tl-social-icons .fa-lastfm:hover{background-color:#d51007}.tl-colored-social .fa-flickr,.tl-social-icons .fa-flickr:hover{background-color:#FF0084}.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover{background-color:#685243}.tl-colored-social .fa-foursquare,.tl-social-icons .fa-foursquare:hover{background-color:#0086BE}.tl-colored-social .fa-github,.tl-social-icons .fa-github:hover{background-color:#070709}.tl-colored-social .fa-google-plus,.tl-social-icons .fa-google-plus:hover{background-color:#CF3D2E}.tl-colored-social .fa-instagram,.tl-social-icons .fa-instagram:hover{background-color:#A1755C}.tl-colored-social .fa-linkedin,.tl-social-icons .fa-linkedin:hover{background-color:#0085AE}.tl-colored-social .fa-pinterest,.tl-social-icons .fa-pinterest:hover{background-color:#CC2127}.tl-colored-social .fa-twitter,.tl-social-icons .fa-twitter:hover{background-color:#32CCFE}.tl-colored-social .fa-vk,.tl-social-icons .fa-vk:hover{background-color:#375474}.tl-colored-social .fa-soundcloud,.tl-social-icons .fa-soundcloud:hover{background-color:#FF4100}.tl-colored-social .fa-vine,.tl-social-icons .fa-vine:hover{background-color:#35B57C}.tl-colored-social .fa-xing,.tl-social-icons .fa-xing:hover{background-color:#00555C}.tl-colored-social .fa-youtube,.tl-social-icons .fa-youtube:hover{background-color:#C52F30}.top-social ul li{margin:0;padding:0}div#socialicons-top{float:left}.top-social .list-unstyled{margin:0}
.tl-socialicons{text-align:center;overflow:auto;font-size:22px;}.tl-socialicons .tl-socialInner{position:relative;overflow:hidden;}.tl-socialicons .tl-social{float:left;width:33.3333333333%}.tl-socialicons .tl-sinn:hover .tl-sicon{color:#fff}.tl-socialicons .tl-sicon{display: block;font-size: 18px;margin: 0 auto;height: 50px;line-height: 50px;width: 50px;}.tl-socialicons .tl-facebook .tl-sicon{background-color:rgba(59, 89, 152, 1);color:#fff}.tl-socialicons .tl-googleplus .tl-sicon{background-color:#DD4B39;color:#fff}.tl-socialicons .tl-twitter .tl-sicon{background-color:#1da1f2;color:#fff}.tl-socialicons .tl-instagram .tl-sicon{background-color:#405de6;color:#fff}.tl-socialicons .tl-pinterest .tl-sicon{background-color:#bd081c;color:#fff}.tl-socialicons .tl-youtube .tl-sicon{background-color:#DE1829;color:#fff;}.tl-socialicons .tl-vine .tl-sicon{background-color:rgba(0, 180, 136, 1);color:#fff;}.tl-socialicons .tl-soundcloud .tl-sicon{background-color:#ff8800;color:#fff;}.tl-socialicons .tl-vk .tl-sicon{background-color:#45668e;color:#fff}.tl-socialicons .tl-foursquare .tl-sicon{background-color:#f94877;color:#fff}.tl-socialicons .tl-github .tl-sicon{background-color:#333333;color:#fff}.tl-socialicons .tl-dribbble .tl-sicon{background-color:#ea4c89;color:#fff}.tl-socialicons .tl-sicon{-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}.tl-socialicons .tl-scount{display:block;color:#fff;padding:5px 0 0 0;position:relative;font-size:13px;font-weight:bold}
.simple-social .list-inline li{margin-bottom:5px;padding:0;}
.tl-sinn{border:1px solid transparent;margin:2px;padding:8px 5px;}
.tl-sinn:hover{background:#F5F5F5;border:1px solid #eeeeee;}
.tl-facebook.tl-sinn{background:rgba(59,89,152,1);}
.tl-googleplus.tl-sinn{background:rgba(221,75,57,1);}
.tl-twitter.tl-sinn{background:rgba(42,169,224,1);}
.tl-instagram.tl-sinn{background:#405de6;}
.tl-pinterest.tl-sinn{background:rgba(189,8,28,1);}
.tl-youtube.tl-sinn{background:rgba(222,24,41,1);}
.tl-vine.tl-sinn{background:rgb(5, 176, 133)}
.tl-soundcloud.tl-sinn{background:rgba(255,136,0,1);}
.tl-vk.tl-sinn{background:rgba(69,102,142,1);}
.tl-foursquare.tl-sinn{background:rgba(249,72,119,1);}
.tl-github.tl-sinn{background:rgba(51,51,51,1);}
.tl-dribbble.tl-sinn{background:rgba(234,76,137,1);}
4.Tata letak.
5. Add Gadget -> HTML/Javascript.
6. Copy Kode Di Bawah Ini

<span class="tl-sicon"><i class="fa fa-facebook"></i></span>
      <span class="tl-scount">3.1K</span>
      </a>
      </div>
      </div>
  
    <div class="tl-social">
  <div class="tl-googleplus tl-sinn">
      <a href='#' target='_blank' title="Google Plus">
      <span class="tl-sicon"><i class="fa fa-google-plus"></i></span>
      <span class="tl-scount">2K</span>
      </a>
    </div>
    </div>
  
  <div class="tl-social">
  <div class="tl-twitter tl-sinn">
      <a href='#' target='_blank' title="Twitter">
      <span class="tl-sicon"><i class="fa fa-twitter"></i></span>
      <span class="tl-scount">1.4K</span>
      </a>
    </div>
    </div>
  
  <div class="tl-social">
  <div class="tl-instagram tl-sinn">
      <a href='#' target='_blank' title="Instagram">
      <span class="tl-sicon"><i class="fa fa-instagram"></i></span>
      <span class="tl-scount">2K</span>
      </a>
    </div>
    </div>
  
  <div class="tl-social">
  <div class="tl-pinterest tl-sinn">
      <a href='#' target='_blank' title="Pinterest">
      <span class="tl-sicon"><i class="fa fa-pinterest"></i></span>
      <span class="tl-scount">4.5K</span>
      </a>
    </div>
    </div>
  
  <div class="tl-social">
  <div class="tl-youtube tl-sinn">
      <a href='#' target='_blank' title="YouTube">
      <span class="tl-sicon"><i class="fa fa-youtube"></i></span>
      <span class="tl-scount">2.8K</span>
      </a>
    </div>
    </div>
  
  <div class="tl-social">
  <div class="tl-vine tl-sinn">
      <a href='#' target='_blank' title="Vine">
      <span class="tl-sicon"><i class="fa fa-vine"></i></span>
      <span class="tl-scount">3.3K</span>
      </a>
    </div>
    </div>
  
  <div class="tl-social">
  <div class="tl-soundcloud tl-sinn">
      <a href='#' target='_blank' title="SoundCloud">
      <span class="tl-sicon"><i class="fa fa-soundcloud"></i></span>
      <span class="tl-scount">3.9K</span>
      </a>
    </div>
    </div>
    
      
      <div class="tl-social">
  <div class="tl-vk tl-sinn">
      <a href='#' target='_blank' title="VK">
      <span class="tl-sicon"><i class="fa fa-vk"></i></span>
      <span class="tl-scount">3.9K</span>
      </a>
    </div>
    </div>
      
      <div class="tl-social">
  <div class="tl-foursquare tl-sinn">
      <a href='#' target='_blank' title="Foursquare">
      <span class="tl-sicon"><i class="fa fa-foursquare"></i></span>
      <span class="tl-scount">3.9K</span>
      </a>
    </div>
    </div>
      
      <div class="tl-social">
  <div class="tl-github tl-sinn">
      <a href='#' target='_blank' title="GitHub">
      <span class="tl-sicon"><i class="fa fa-github"></i></span>
      <span class="tl-scount">3.9K</span>
      </a>
    </div>
    </div>
      
      <div class="tl-social">
  <div class="tl-dribbble tl-sinn">
      <a href='#' target='_blank' title="Dribbble">
      <span class="tl-sicon"><i class="fa fa-dribbble"></i></span>
      <span class="tl-scount">3.9K</span>
      </a>
    </div>
    </div></div></div>
</div>
Next
This is the current newest page
Previous
Next Post »
Thanks for your comment