Widget Share Button for Blogspot

HTML


<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>

CSS

.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/AVvXsEjQ5bkmZfb9w_BBVK_Qq8X85x-D_uTLLfSWrGgP0BzvpdDvff_oGWk7wAb0JxX2zRZZe6AOoh651o_KrRakANaD6EAKXDBlne7RGwYfvIBv3f7Xc121eiXkQ1EWwfauGnot7mDsmm5rbJp2/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/AVvXsEiYAivgZEVItUBczOBs45e93RriQv3bY6JQHch_-s9USBWUSg6m9cZZ9glniGpU-cxr1JKiw7ODQrct-1gEWM9kKTDfn9xa8pscYBD3Fz7MT0vv28CZNbtnQVF8J3YfI9H5xjuFOmF8l77m/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/AVvXsEiecbWyk3iJdKC2d70ZNyPBoCNECXyAw_BiTbFymzZlr3EZgETDwX6SVNa8hbPLbj8zNOWggPpvgkF2Ha42IfA-tWbJIQv_QItV5ReLyQm_SUgnym65BUtH2TtOHmOlc3iWQ3iQdlVoFsvH/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/AVvXsEgNu3wiA54C5M7OgwjAvYNEAAZVFLPl4GsTjhSLx1T26BIsyagM-SzOJLt1X4IOsoQQt-EW72cgCIvy6rp3RawhLBkCEzH5O4YqkZV5pRG4afwQrV9CxXYmYALaFrPobcRAHbmfzECdQMtu/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/AVvXsEhLkHWtKtFXyiGiT3yjmtV5N8yRgcd5mUOisWGOa7aFdo7EQGepg-7sdUrX1zv_nV1oelxFo8Kah1x8pqXsGnDyh4tQQ0TGy3RuB12Vs6PBhfK_5TafRWS5ohbRVenreFzbFhLHZ1OoGo3w/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/AVvXsEiXr7btK2zqaF0AQQVd4OYl-j7UWY211MgA-tvY9qI4kbVwwRGsKlsb3bLqbfd9ZvCX1GYq_9EVPp-n_cu9Au97NCiv-qOkhQ-nsjxejRm52fwZ8PozdRPZug3I_6onS1JmoHyx8LFT2ktI/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);}

View

Bagikan Artikel ini