How to Add beautiful Social share Widget With mouse hover effect in Blogger by Harshit

06:13 AUXINS 0 Comments

Hi everyone today I will tell you how to add beautiful social share widget with mouse hover effect in Blogger .In this widget  I have carefully designed you will get social network connect and rss subscription with an an search box
...............................................................................................................................................................
STEPS TO FOLLOWED BY YOU.
...............................................................................................................................................................


  • Go to Blogger>Template>Edit HTML.
  • Search for the ]]></b:skin> tag in the HTML by the Help of Ctrl+F.
  • And place the code before that I said before that.



#search{width:400px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_5Ius8WoqyzsLS27Fb1qpbw1yoE7ugYZn7Tr_1X7hzYsumD7tOXXPPCCRRm882ObfNBzNSL-YQ8lXdMBh2YQhaBqwJiF7g79yZUh2Wdl_iWKRFt0JVRGIwUMWR0D-20lUbqpip070AV4/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:90%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}


.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

Then again search for <div id='sidebar-wrapper'> tag
And paste the code before that I said Before that.

<div class='topsearch'>
<div class='clerfix' id='search'>
    <form action='/search' id='searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search here...&quot;;}' onfocus='if (this.value == &quot;Search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Search here...'/>
        <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDbOHrRFKrFpFLCzwM1SFD6jf0xvvKYGYDe91v5lNd8fAADdmVegq4Nk2Wn1lp3wJod_KWPyN2TwwS0a4eN7ejmmYDNcnmhdDpgTzZur2QQ4VyXCXQ9BSSnLFPIzXYzsvCAKqJBWAQYmY/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<div style='clear:both;'/>

<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3i45GWHMnJ-KqME2UY2xJ3sivN4Z7zpSr2gVbO5fiTZNUTCab1g1dutXOWJtHMH9Wj57WrNd2N3aBfAJMa1oZf3JKTTxCE_zAGrB_pzRY8YfiHCG1WHIbK4hO7T4LqWcpL9j_zoG5I82q/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Subscribe to our RSS Feeds!</a>
</div>
                     
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/kharshit801'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW7b36Uh4XmOrlwX-qS_Vay25x7sk5QWD9zCRHFsxtYKGBVXTzprQqiQdiAzvLlWJYyXp5iE82HNesdRT5jqvY3Q4JKl9rRIbJS85Ob_o6yn4HnfVP8oN84sfKUptzjQGp2dKaDN3HpCHR/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/kharshit801'>Follow Us on Twitter!</a>
</div>

<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/k7tipsBloggertips'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg70kfrgESvaJLUgS_CkkCgoVL4ztPv5t0AtL1Y4gF_f45rj6abC0TkAz0oL4nw2JS3PFU4kcYpDVjK68ygHQLc6sQZ8p4XOPtFcrULuL4CR2vQJ-TKYGhRtT31m8CBahazMf9rSIWLxqDl/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/k7tipsbloggertips'>Follow us on Facebook!</a>
</div>

<div style='clear:both;'/>

<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqvVRvxXMlid0h5Hn32ABLEzMregRioPG511kL7F2NTxJ1FEbO91n4EFehNJcxtQExuKIH1cM3jV1OkYLfyqJ7I84_Q_TUBFeY4A6MTFcFnVKr8diGOhh0yRnLJZz53406WsQbmqbBz-Y/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu9Bw0J6S6xXkeupLyh4koAY1s8FnffYe6b1NfKWiCVncukMDrPgqvtp092u5i2QC7IsiDWfnJB8I8DnfC-54WzWxiG_RLoVcNTK601Txo4sChJYS2Z9WXpvC2h9VNPGc1Jz_uHwg_xRA/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNK5rHHXwBIOZZHbQAv0ra3yGKbtQQUTZZjEcvklmGfSWoHCcOL00ltuG9ox3QCnEHflvIW1ASAYOIpNr90_RddhlriEDYOoTrvWDR4BYl6Ubb3Qoz2maGmm4L9pOhgIMOLIHGWyIA6TM/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0-9AJoUKNvK63XZkSMjQ_6J1NcDsAo5RLLmSu4V4gEwNeg7yehMCg1BILqvuUfiLgi1SA-bfLi1k2aX68LHFJ9Afw4D5-lI4fTx8ILlFlhCu1pE3P2uLsk4FL7KrZNRFAyL6JU9ObDIo/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixGTWCUFX3UtTH3ULGkOsP0qpjY2s14-quy3MzEtmDNDsLHJ8sP5UJaSbFe2H8WacDA5hnXEm6-JnuOCd1SelisqG7f3raWDRF_ijj4-1Jp4WbWygVvvD19C3BGc98YAeJCshpn4G_Nn8/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxRkRWxfkF8vrdk60AiJ4jDC1sT0ZMU8XKvP_5wNwGgyFrF-8Uwb-2oZyJxWGE25dKB9cvAdQHAnn2vzwTLiHFtxT5E4w6fb37kaJnU1Xg7VqotIK4zjUQoKrYG1GmCEptXkAm4og3x70/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr5dCMQOg7G4kkmoZIxFCTOkGpKWbY168vbxvmv0mwFp7-hBCQ6q8Qr_PCy3ldMptrDl4xeuGosysbLg6vaJdndKB_4nMLAQbXNwyu-1QRmVUq1FaE2HSVs3KIt2Rl_ZlQegGMVd00VhY/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>
Just replace the http://twitter.com/kharshit801 with your twitter profile link.
And also replace the http://facebook.com/k7tipsbloggertips with your facebook username link.


  • Save your Template.
                                                                                 Bye

0 comments:

Subscribe to: Post Comments (Atom)