BLOGGER TIPS :ALL TIPS AND TRICKS FOR NEW BLOGGER

HARDIK PATEL HOW TO ADD SOCIAL MEDIA GADGETS IN BLOGGER/WEBSITES ~ BLOGGER TIPS

Thursday, April 24, 2014

HOW TO ADD SOCIAL MEDIA GADGETS IN BLOGGER/WEBSITES

1:57 AM

HOW TO ADD SOCIAL MEDIA GADGETS IN BLOGGER/WEBSITES

STEP 1

GO TO BLOGGER ACCOUNT

STEP 2

GO TO LAYOT THEN GO ADD HTML/JAVASCRIPT

STEP 3

ADD BELOW HTML CODE IN BOX ( AS GIVEN BELOW PICTURE )

<style>
.metro-social{width:315px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .facebookbt,.twitterbt,.googleplusbt,.pinterestbt,.linkedinbt,.youtubebt,.rssbt{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .facebookbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .twitterbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-twitter.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .googleplusbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-google+plus.png) no-repeat center center #da4a38;width:69px;height:70px}
.metro-social .pinterestbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .linkedinbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .youtubebt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .rssbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .facebookbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-facebook1.png) no-repeat center center #1f69b3}
.metro-social li:hover .twitterbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-twitter1.png) no-repeat center center #43b3e5}
.metro-social li:hover .googleplusbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-google+plus1.png) no-repeat center center #da4a38}
.metro-social li:hover .pinterestbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-pinterest1.png) no-repeat center center #d73532}
.metro-social li:hover .linkedinbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-linkedin1.png) no-repeat center center #0097bd}
.metro-social li:hover .youtubebt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-youtube1.png) no-repeat center center #e64a41}
.metro-social li:hover .rssbt{background:url(http://technoratan.in/wp-content/uploads/2014/04/bt-feed1.png) no-repeat center center #e9a01c}
</style>
<div class="metro-social">
<br />
<li><a class="facebookbt" href="YOUR ID"></a></li>
<li><a class="twitterbt" href="YOUR ID"></a></li>
<li><a class="googleplusbt" href="YOUR ID"></a></li>
<li><a class="pinterestbt" href="YOUR ID"></a></li>
<li><a class="linkedinbt" href="YOUR ID/"></a></li>
<li><a class="youtubebt" href="YOUR ID"></a></li>
<li><a class="rssbt" href="http://YOUR ID></a></li>
</div>
<center>
<span id="linkit"><a href="http://technoratan.in/blogger-tips/metro-style-social-media-widget-blogger">Get This Social Widget</a></span></center>

STEP 4

ADD YOUR SOCIAL MEDIA ID IN THIS BOX