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 ]]>
2. Masuk ke menu Template - Edit HTML
3. Cari kode ]]>
/*----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);}
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>