If you want to learn how can you add social media buttons to blogger just follow me and do this steps
Go to your blog and press on layout, Add a gadget, HTML/Java script, put the code and press save, save arrangement
Note
You must put one code so choose any code 1 or 2 or 3 or 4
You must delete these stars (**) in any code and put the URL like (Facebook URL, Twitter URL, Youtube URL, Google plus URL)
The code number 1
<style>
.social-ballbdrs {padding: 5;margin-left:-30px;}.social-ballbdrs li, .social-ballbdrs li, .social-ballbdrs li {float: left;margin-right: 10px;background-color: #CCCCCC;display: inline;border-radius:50%;border:solid #999999 1px;box-shadow:0 0 5px 2px #999 inset;}.social-ballbdrs li a {-moz-transition: all 0.3s ease 0s;display: block;float: left;height: 100%;width: 40px;height: 40px;text-indent: -9999px;}.social-ballbdrs li.facebookball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_2zDMltMcDhrFOruBHMwj9lsuCDCPB-kS0Ie_VJFViLuLNUpd2JojXRVkt85ecrf-ob6uNl686Q1PdU_3cm3I73eJwG5x7fpZYs4J2_-nP9lvEtmVd5aroGfbcdMNVQma8Uu6d10T8Yv/s1600/FACEBOOK.png') no-repeat 0 0;}.social-ballbdrs li.facebookball a:hover {background-color: #3b5998;}.social-ballbdrs li.googleplusball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCJ7UfmBF-TAS1S5fRm5YWHp62a1PX9yYad2PXR4iklllRPAewuEwcnRT7eHaOJwb_ed1r4unE-zimzOk3rgUTibUdJzh5HsC9u1rvBRe0_RBTVKzzQjl9ok60KH6qBRkuRO82v3juvnDm/s1600/googleplus.png') no-repeat 0 0;}.social-ballbdrs li.googleplusball a:hover {background-color: #d94a39;}.social-ballbdrs li.rssball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY7N8gJCC8uDdTay_X6kj5cHl3bSSEsVd_dxiOp_NuZbRNoO0Lb0khhjXbujh9k3Ow7AqG09fLB3hnjiReu0ag2abXutUYBjM2IosYCt08uXXWe32qKZUvWb1WtBtMu5XVa8SGwSHMSovn/s1600/rssbd.png') no-repeat 0 0;}.social-ballbdrs li.rssball a:hover {background-color: #fe9900;}.social-ballbdrs li.twitterball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQ2btRBzGrBZ40i-J5G68yvPQqoSWnescCbvABLXPmI5x4md8Pb05DsHOjR_xrcxzn1JPNRY2VgKl8nFGELaQ0vFkuYWPppAVbti-Y0wIIxpmaCyLp-FtKMvXGF3jWgwgomZmyQ26MT0v/s1600/TWITTER.png') no-repeat 0 0;}.social-ballbdrs li.twitterball a:hover {background-color: #48c4d2;}.social-ballbdrs li.youtubeball a {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSN2nm5KeVBpxm9UEf10Gm6euiWe53cmsglWF7IX1S2-3lIUtoThq4luHs6WccTzW5XNKXC0t9EDvv7ZWLTDwjbwAk5g5rPtL9vo748HA55ThlHJBl58tBmq3oEzHwZZLUX08aX-ZMqjJb/s1600/youtube.png') no-repeat 0 0;}.social-ballbdrs li.youtubeball a:hover {background-color: #f45750;}.social-ballbdrs li a:hover {background-position: 0 -40px;box-shadow:3px 3px 10px 2px #333 INSET;border-radius:50%;}.social-ballbdrs li a:visited,.social-ballbdrs li a:active{background-position: 0 -40px;box-shadow:3px 3px 10px 2px #333 INSET;border-radius:50%;}</style>
<!-- www.madad2.blogspot.com -->
<div class="social-ballbdrs">
<ul>
<li class="twitterball">
<a target="_blank" href="**" rel="nofollow" title="twitter">
</a>
</li>
<li class="googleplusball">
<a target="_blank" href="**" rel="nofollow" title="Google plus">
</a>
</li>
<li class="facebookball">
<a target="_blank" href="#" rel="nofollow" title="facebook">
</a>
</li>
<li class="rssball">
<a target="_blank" href="**" rel="nofollow" title="rss">
rss
</a>
</li>
<li class="youtubeball">
<a target="_blank" href="**" rel="nofollow" title="youtube">
</a>
</li>
</ul>
</div>
The code number 2
<style>
#bdrs-social {margin:0px auto;width: 300px;}#bdrs-social .bdbox-social a:link,.bdbox-social a:visited{float:left;width:32px;height:32px;margin:0 5px;padding:0;text-indent:-9999em;box-shadow:3px 3px 3px rgba(0,0,0,0.3);background-color:transparent;background-size:100% auto;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2unA3Gkp1phzQDJ5nj0SnA7sW1SnecGhRWUsGNyMgRQTB5aeKzkTc19VOGqj0K573Gpl021CpnoTrpiJUoOzUTOGIwDqJjg5pvspcfnYk90t2Gf7giSbx0hNkc9K8ZxmM1ZUr9TVpy7gJ/s1600/BRS01-sosial.png');background-repeat:no-repeat;}#bdrs-social .bdbox-social a:hover,.bdbox-social a:active {box-shadow:3px 3px 7px #333 INSET;}#bdrs-social .bdbox-social a:first-child{margin-left:3px}#bdrs-social .bdbox-social a:last-child{margin-right:0}#bdrs-social .bdrs-rss{background-position:0 0}#bdrs-social .bdrs-goo{background-position:0 -32px}#bdrs-social .bdrs-fac{background-position:0 -64px}#bdrs-social .bdrs-lin{background-position:0 -96px}#bdrs-social .bdrs-tum{background-position:0 -128px}#bdrs-social .bdrs-twi{background-position:0 -160px}#bdrs-social .bdrs-wor{background-position:0 -192px}</style>
<!-- www.madad2.blogspot.com -->
<div id="bdrs-social">
<div class="bdbox-social" >
<a class="bdrs-goo" href="**" rel="publisher" target="_blank" title="Google plus">
</a>
<a class="bdrs-fac" href="**" rel="nofollow" target="_blank" title="facebook">
</a>
<a class="bdrs-twi" href="**" rel="nofollow" target="_blank" title="twitter">
</a>
<a class="bdrs-lin" href="**" rel="nofollow" target="_blank" title="LinkedIn">
</a>
<a class="bdrs-tum" href="**" rel="nofollow" target="_blank" title="Tumblr">
</a>
<a class="bdrs-rss" href="**" rel="external" target="_self" title="RSS Feed">
RSS Feed
</a>
</div>
</div>
The code number 3
<style>
#socialbdrssliding a{font-family: 'Open Sans', Helvetica, Arial, sans-serif;width: 40px;transition:width 0.4s;-webkit-transition:width 0.4s;-moz-transition:width 0.4s;overflow: hidden;}#socialbdrssliding a:hover{width: 100px;overflow: hidden;}#socialbdrssliding {float: right;position: relative;height: 40px;}#socialbdrssliding ul { margin: 0; }#socialbdrssliding li,#socialbdrssliding li a,#socialbdrssliding li .bdrs-thumb,#socialbdrssliding li .bdrs-title {display: block;position: relative;width: 40px;height: 40px;}#socialbdrssliding li,#socialbdrssliding li a,#socialbdrssliding li .bdrs-title {float: left;width: auto;overflow: hidden;}#socialbdrssliding li a {width: 40px;line-height: 40px;color: #E9E9E9;font-size: 11px;font-weight: bold;text-shadow: 1px 2px 2px #000;text-decoration: none;}#socialbdrssliding li .bdrs-thumb { float: left; }#socialbdrssliding li.bdrs-facebook a { background-color: #3B5998; }#socialbdrssliding li.bdrs-facebook .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_2zDMltMcDhrFOruBHMwj9lsuCDCPB-kS0Ie_VJFViLuLNUpd2JojXRVkt85ecrf-ob6uNl686Q1PdU_3cm3I73eJwG5x7fpZYs4J2_-nP9lvEtmVd5aroGfbcdMNVQma8Uu6d10T8Yv/s1600/FACEBOOK.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-gplus a { background-color: #d94a39; }#socialbdrssliding li.bdrs-gplus .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCJ7UfmBF-TAS1S5fRm5YWHp62a1PX9yYad2PXR4iklllRPAewuEwcnRT7eHaOJwb_ed1r4unE-zimzOk3rgUTibUdJzh5HsC9u1rvBRe0_RBTVKzzQjl9ok60KH6qBRkuRO82v3juvnDm/s1600/googleplus.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-twitter a { background-color: #3CF; }#socialbdrssliding li.bdrs-twitter .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQ2btRBzGrBZ40i-J5G68yvPQqoSWnescCbvABLXPmI5x4md8Pb05DsHOjR_xrcxzn1JPNRY2VgKl8nFGELaQ0vFkuYWPppAVbti-Y0wIIxpmaCyLp-FtKMvXGF3jWgwgomZmyQ26MT0v/s1600/TWITTER.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-rss a { background-color: #F88F16; }#socialbdrssliding li.bdrs-rss .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY7N8gJCC8uDdTay_X6kj5cHl3bSSEsVd_dxiOp_NuZbRNoO0Lb0khhjXbujh9k3Ow7AqG09fLB3hnjiReu0ag2abXutUYBjM2IosYCt08uXXWe32qKZUvWb1WtBtMu5XVa8SGwSHMSovn/s1600/rssbd.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-youtube a { background-color: #BD3518; }#socialbdrssliding li.bdrs-youtube .bdrs-thumb { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSN2nm5KeVBpxm9UEf10Gm6euiWe53cmsglWF7IX1S2-3lIUtoThq4luHs6WccTzW5XNKXC0t9EDvv7ZWLTDwjbwAk5g5rPtL9vo748HA55ThlHJBl58tBmq3oEzHwZZLUX08aX-ZMqjJb/s1600/youtube.png") no-repeat 0 -40px; }#socialbdrssliding li.bdrs-facebook a:hover, #socialbdrssliding li.bdrs-youtube a:hover, #socialbdrssliding li.bdrs-rss a:hover, #socialbdrssliding li.bdrs-twitter a:hover, #socialbdrssliding li.bdrs-gplus a:hover {background-color:#666;}</style>
<!-- www.madad2.blogspot.com -->
<div id="socialbdrssliding">
<ul>
<li class="bdrs-gplus">
<a href="**" target="_blank" rel="nofollow" title="google plus">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
</div>
</a>
</li>
<li class="bdrs-facebook">
<a href="**" target="_blank" rel="nofollow" title="facebook">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
</div>
</a>
</li>
<li class="bdrs-twitter">
<a href="**" target="_blank" rel="nofollow" title="twitter">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
</div>
</a>
</li>
<li class="bdrs-rss">
<a href="**" target="_blank" rel="nofollow" title="rss feed">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
RSS
</div>
</a>
</li>
<li class="bdrs-youtube">
<a href="**" target="_blank" rel="nofollow" title="youtube">
<div class="bdrs-thumb">
</div>
<div class="bdrs-title">
</div>
</a>
</li>
</ul>
</div>
The code number 4
<div align="center">
<ul class="spicesocialwidget">
<li class="facebook">
<a href="**" rel="nofollow" target="_blank" title="facebook">
</a></li>
<li class="twitter">
<a href="**" rel="nofollow" target="_blank" title="twitter">
</a></li>
<li class="googleplus">
<a href="**" rel="nofollow" target="_blank" title="googleplus">
</a></li>
<li class="linkedin">
<a href="**" rel="nofollow" target="_blank" title="linkedin">
</a></li>
<li class="pinterest">
<a href="**" rel="nofollow" target="_blank" title="pinterest">
</a></li>
<li class="youtube">
<a href="**" rel="nofollow" target="_blank" title="youtube">
</a></li>
<li class="rss">
<a href="**" rel="nofollow" target="_blank" title="rss">
</a></li>
</ul>
</div>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghb65oItwGi8Nl9GgxXOwnpRB6Zp9DfqTMaqed9COxv1EtbbgZo5eJnGIP7lgX84jNcjicge98BgHPTShYJM_h_oKZKq9-JWM5lCpuUHN9jTJa7Xsxwf4rK5n2HdIDo6fyGt0cqH0e3T6i/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghb65oItwGi8Nl9GgxXOwnpRB6Zp9DfqTMaqed9COxv1EtbbgZo5eJnGIP7lgX84jNcjicge98BgHPTShYJM_h_oKZKq9-JWM5lCpuUHN9jTJa7Xsxwf4rK5n2HdIDo6fyGt0cqH0e3T6i/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}
ul.spicesocialwidget li.pinterest a{ background-position:-160px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}
ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>
No comments:
Post a Comment