Cara menambah Widget Social Media
1. Buka Blogger terlebih dahulu.
2. Pilih Blog mu.
3. Klik Tata Letak.
4. Tambahkan Gadget. Lalu pilih HTML/JavaScript.
5. Tambahkan code HTML dibawah ini :
<style>
.social-follow ul li{border: 1px solid rgb(226, 226, 226);display:inline;float:left;overflow:hidden; margin-left: 5px;}
.social-follow ul li .icon{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvU1AteFRZSjVLdWs);}
.social-follow ul li a{background:#F1F1F1;float:left;transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;-webkit-transition:all .2s;width:30px;height:30px;}
.social-follow .facebook{background-position: 0 0px !important;}
.social-follow .facebook:hover{background-color:#3b5997; background-position:0px -30px !important;}
.social-follow .twitter{background-position:-30px -60px !important;}
.social-follow .twitter:hover{background-color:#00aced; background-position:-30px -90px !important;}
.social-follow .g-p{background-position:-88px -60px !important;}
.social-follow .g-p:hover{background-color:#dd4b39; background-position:-88px -90px !important;}
.social-follow .pinterest{background-position:-60px -60px !important;}
.social-follow .pinterest:hover{background-color:#cb2027; background-position:-60px -90px !important;}
.social-follow .youtube{background-position:-120px -60px !important; width:55px !important;}
.social-follow .youtube:hover{background-color:#ff0000; background-position:-120px -90px !important;}
.social-follow .linkedin{background-position:-173px -61px !important;}
.social-follow .linkedin:hover{background-color:#006699; background-position:-173px -91px !important;}
.social-follow .rss{background-position:-204px -61px !important;}
.social-follow .rss:hover{background-color:#ff6600; background-position:-204px -90px !important;}
</style>
<div class="social-follow">
<ul>
<li><a class="facebook icon" href="http://www.facebook.com/yudhaweb" target="_blank"></a></li>
<li><a class="g-p icon" href="https://plus.google.com/u/0/+AkbarSaputraolilyudha" rel="author" target="_blank"></a></li>
<li><a class="twitter icon" href="http://www.twitter.com/AkbarSaputra_ID" target="_blank"></a></li>
<li><a class="pinterest icon" href="http://www.pinterest.com/yudhaweb" target="_blank"></a></li>
<li><a class="youtube icon" href="http://www.youtube.com/user/UC8x9Hi1Z1fN3k__G5ZTB2LA" target="_blank"></a></li>
<li><a class="linkedin icon" href="http://www.linkedin.com/yudhaweb" target="_blank"></a></li>
<li><a class="rss icon" href="http://feeds.feedburner.com/yudhaweb" target="_blank"></a></li>
</ul>
</div>
.social-follow ul li{border: 1px solid rgb(226, 226, 226);display:inline;float:left;overflow:hidden; margin-left: 5px;}
.social-follow ul li .icon{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvU1AteFRZSjVLdWs);}
.social-follow ul li a{background:#F1F1F1;float:left;transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;-webkit-transition:all .2s;width:30px;height:30px;}
.social-follow .facebook{background-position: 0 0px !important;}
.social-follow .facebook:hover{background-color:#3b5997; background-position:0px -30px !important;}
.social-follow .twitter{background-position:-30px -60px !important;}
.social-follow .twitter:hover{background-color:#00aced; background-position:-30px -90px !important;}
.social-follow .g-p{background-position:-88px -60px !important;}
.social-follow .g-p:hover{background-color:#dd4b39; background-position:-88px -90px !important;}
.social-follow .pinterest{background-position:-60px -60px !important;}
.social-follow .pinterest:hover{background-color:#cb2027; background-position:-60px -90px !important;}
.social-follow .youtube{background-position:-120px -60px !important; width:55px !important;}
.social-follow .youtube:hover{background-color:#ff0000; background-position:-120px -90px !important;}
.social-follow .linkedin{background-position:-173px -61px !important;}
.social-follow .linkedin:hover{background-color:#006699; background-position:-173px -91px !important;}
.social-follow .rss{background-position:-204px -61px !important;}
.social-follow .rss:hover{background-color:#ff6600; background-position:-204px -90px !important;}
</style>
<div class="social-follow">
<ul>
<li><a class="facebook icon" href="http://www.facebook.com/yudhaweb" target="_blank"></a></li>
<li><a class="g-p icon" href="https://plus.google.com/u/0/+AkbarSaputraolilyudha" rel="author" target="_blank"></a></li>
<li><a class="twitter icon" href="http://www.twitter.com/AkbarSaputra_ID" target="_blank"></a></li>
<li><a class="pinterest icon" href="http://www.pinterest.com/yudhaweb" target="_blank"></a></li>
<li><a class="youtube icon" href="http://www.youtube.com/user/UC8x9Hi1Z1fN3k__G5ZTB2LA" target="_blank"></a></li>
<li><a class="linkedin icon" href="http://www.linkedin.com/yudhaweb" target="_blank"></a></li>
<li><a class="rss icon" href="http://feeds.feedburner.com/yudhaweb" target="_blank"></a></li>
</ul>
</div>
6. Lalu, klik Simpan.
CATATAN :
Link bewarna Putih, ganti dengan Link Media Sosial anda masing - masing.
Comments
Post a Comment