Flat UI tarzında sosyal medya butonları

Blogunuza veya sitenize guzel gorunumlu Flat Ul tarzinda  sosyal medya profil butonlarini paylasacagim sizlere

bana  her zaman flat ul tonundaki renkler gozume hos gelmistir

neyse fazla lafi uzatmayayim butonlari blogunuza eklemeniz icin  gadget ekle kismindan java/script bolumune altaki kodlari  koymaniz yeterlidir


kodlar icinde #  yerine sizin profil linklerinizi yazin.

<div class="entry-social">
<div class="fb">
<a href="#" target="_blank">Profilim</a>
</div>
<div class="twitter">
<a href="#" target="_blank">Profilim</a>
</div>
<div class="gplus">
<a href="#" target="_blank">Profilim</a>
</div>
<div class="linkedin">
<a href="#" target="_blank">Profilim</a>
</div>


</div>


<style>
.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/AVvXsEgrLqk-k7-Q26mDHam1eKWitmvt0R0YDC19JTC2iTAqRIWEOU09EJs6zytXiIVMDObT-Skr2aB5RDEaXemg6w6iiwNiSqqGg9lFe2QEnO7hC8qmIIxOgKPFcQJmGP8hisKGghIG7TPOnFeC/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/AVvXsEgaMHt9FsfVI_DC_jLkjiFjcZ-0KMpCZECokhasLjyVZN7wF9E886bx-L06MsFtXo4YCt3cQm6O0qMN6hFg4ezlNs8yUz3kO3KY2IFHVOw2dT5o92PlVfErwdbq4aOJ53uAa0Roau1UPuyZ/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/AVvXsEhZ_eb5jv7J300t3I-Y9zI7b_hAb_l47lqvbXsjcyML0_nWNcap8gjraInzlvL123AgMalNxGLhYOWkS4xRezkaN136aBoEMy-GHBLx5waQ7uZ7hlyoR6JbmrL6A_kx9cmehBe-l_-YIR0v/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/AVvXsEgoEUrDfB8ITdKOIouNF94vSGWr4XTqWq8onzmQKzpY0uTo0e5i4jTI86Xwn3hPngPPlNiCPLeDE7HTyjL_Vrmyf0nVVRm5HND8yDzuMw_zPbS38f_bjLt5pJKv6n0dplEH-4ADKa3B8EwU/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/AVvXsEimPGA2gq0yZB8K4mN_h8MPmuvf46Y60Hzd2Zkx6bbOCvg6Lv20efFDmh2fz6Ngiw-SCx_DC1Yu7D75oxy_AgQ3eUw29bjIVPcceG-PjO_M8teOKNDW_5o7PByGs14ubr_iugLC-8M2bib2/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/AVvXsEhtS4EYa_6sHzLZQhLKvlyo7qB2gUj1_L0MoOvSs_PyL9gY8Uw1E3a8ldHUG_JUiapatHMcviz4XhLzrlyxpAOiisLgUnSeAlkjjUaBBqC3wVkee1R94emKn60G-Inpna56XyuZKsVhE-RZ/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);}

</style>