Cara Membuat Social Icon Flat UI Share Button Di Blogspot

Cara Membuat Social Icon Flat UI Share Button Di Blogspot

Demo Lihat Disini

*  buka blog agan
*  pilih template >>> edit HTML
*  Cari kode ini ]]></b:skin>
*  Copy kode dibawah dan letakkan diatas kode ]]></b:skin>

body {background: url('http://wallpoper.com/images/00/34/20/13/green-nature_00342013.jpg');background-height:100%;background-repeat:no-repeat;background-attachment:fixed;background-position:center;font-family: 'Open Sans',Tahoma, Verdana, Arial, sans-serif, Faruma, Faseyha;}em{color:#D54135;font-size:1.1em;}h1{color:green;text-shadow: 2px 2px #000000;}



.entry-social {margin-bottom: 20px;color: rgb(126, 126, 126);display: block;font-family: 'Open Sans',Tahoma, Verdana, Arial, sans-serif, Faruma, Faseyha;font-size: 14px;font-weight: normal;height: auto;line-height:23.799999237060547px;margin-bottom: 20px;width: 100%;
width: 100%;float:left;border: solid 0px #aaa;text-align: center;}

.entry-social div {display: block;width:138px;margin:2px;display: inline-block;  
    vertical-align: middle;}

.entry-social a {text-decoration:none;display: block;padding-left: 20px;color: #FFFFFF !important;font-weight: bold;transition:background-color .3s;    }

.entry-social .fb a {padding: 7px 10px 7px 26px;background: #3B5999 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNjQD_chQZj4Mv2EgWUTBeyLMi9l3K7S2TXU6HMvgqFcMm1FQyO_YbMZXxDmTTxmvpWi2LqgOEhrDncGONR40MTnaDS6qK5rIffFc5m1Y33vmFXkiUAuJJdw-Y0y3vTY9ReqmUnZ0I-yAw/s1600/fb14.png') no-repeat 10px center;}

.entry-social .twitter a {padding: 7px 10px 7px 32px;background: #01BBF6 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSAhyBUsOr_yttGab-Iq4_v6NiopbCCuRrcELJITwk2W6H0qHx9DQZs9TokUBjUx2qJg2AhYLNaO9dmMQ8m8Ihuanxd0CLyhyw1sXwEXB5mzCrjIa4f-uJDIviaPupB3wSrBoeeZDmmm-r/s1600/twitter14.png') no-repeat 8px center;}

.entry-social .gplus a {padding: 7px 10px 7px 32px;background: #D54135 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq4vYc6S70Csqw4K5zt0NnUyBx4Nqu91a8Vj27rLsU_MQgQf5tMqJNv0o74AXd_4Jec6hyphenhyphenamH0ple3aohw6sx2hXOyxNizvFKyJsN4KSyY9rbiHDiEr5gEqOr9aTGNInqX_ZDajqgiccPZ/s1600/gplus14.png') no-repeat 10px center;}

.entry-social .linkedin a {padding: 7px 10px 7px 32px;background: #136F9B url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuNTqtGo4Dgq7-cs5fTqUWxaMAKMeGEK98eJc6olmrswHUPBRHpk_ZmaCP4dwJumkBqxlR8_Y3CD1nRBPb2aOyWjsz8guLrOT6lkLiRwzTdjOH4Pmm51HI9Y2_FbQTR9FGQdTbe6ok9sj/s1600/linkedin14.png') no-repeat 10px center;}

.entry-social .pinterest a {padding: 7px 10px 7px 32px;background: #CB2027 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizV245G7YAvYO2oDtqj0-mrpkVgF6G6VXx34ITQd0_RYj-fXhQUFoFO2SDN6BOdBgEKgBo-7OtpS3chpffa80j0ZT2E-nP2RFw2M0xfyDJ62LvBlxQCYOXaavsKlkLC5KHdPn-Bmwi484a/s320/pinterest14.png') no-repeat 10px center;}

.entry-social .delicious a {padding: 7px 10px 7px 32px;background: #3173D1 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6dCSOpJMcXFIJwFESruyEC_W8NfPtkY7lK3iyoV0Uos3nFQ67D8hmLSGUqNW3pSUaP3aGLfSKWAbQzfud2ge8uSkeROYYVBhojkdS21nUoymxkv01HtQYnT2UEHC6_4bVtgOYtJrIPXng/s320/delicious14.png') no-repeat 10px center;}

.entry-social .fb a:hover {background-color: rgb(50, 75, 129);}
.entry-social .twitter a:hover {background-color: rgb(1, 159, 211);}
.entry-social .gplus a:hover {background-color: rgb(191, 52, 40);}
.entry-social .linkedin a:hover {background-color: rgb(15, 89, 125);}
.entry-social .pinterest a:hover {background-color: rgb(174, 28, 35);}
.entry-social .delicious a:hover {background-color: rgb(38, 90, 168);}

*  kemudian cari kode ini <data:post.body/>
*  Copy kode dibawah dan letakkan dibawah kode <data:post.body/>

<div class="entry-social">
<div class="fb">
<a href="Your_Facebok_Page" target="_blank">Facebook</a>
</div>
<div class="twitter">
<a href="Your_twitter_Profile" target="_blank">Twitter</a>
</div>
<div class="gplus">
<a href="Your_Googleplus_Follow" target="_blank">Google+</a>
</div>
<div class="linkedin">
<a href="Your_Linkedin_Profile" target="_blank">Linkedin</a>
</div>
<div class="pinterest">
<a href="You_Pinterest_Page" target="_blank">Pinterest</a>
</div>
<div class="delicious">
<a href="Your_Delicious_Profile" target="_blank">Delicious</a>
</div>
</div>

[  Catatan  ]
Ganti warna merah dengan url sosmed mu

*  Terakhir silahkan di save template

###  GOOD  LUCK  ###