Hovering over these social buttons they will transform into colorful style. If you want to see demo first then take a look at the following screenshot and demo. Now, let's start the tutorial:
You May Like To Read:
How to Add Social Buttons With Hover Effect To Blogger Blog
Add Social Widget To Blogger
- Go to Dashboard > Design > Page Elements.
- Click Add A Gadget. In window, select HTML/Javascript .
- Copy the code below and paste it inside the box.
- Save The Gadget
Adding Social Widget To WordPress
- Go to Dashboard > Appearance > Widgets > Available Widgets
- Drag Text Widget Into a Sidebar.
- Paste In The Code.
- Save Widget & Its Done
Code For Social Subscription Widget
<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#rb-social-hover{position:relative;width:240px;height:217px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkSswEOuzr7d1nTdv9rCw7Bfqbe-bOLW_UoDtyo6vHvAT63aBi9Pto5Y469NQv_fSL-vb2u_K7nZn5D8o7xsOoXp3dkbuKowOLhQUTmC0xk9kqdRWF2sVn3KHcXCPISw4xW13EFQ5ck0/s1600/vintage.png");}#rb-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#rb-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#rb-social-hover #links{position:absolute;bottom:0;width:100%;}#rb-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#rb-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#rb-social-hover a.twitter:hover{background:#79dbff;}#rb-social-hover a.facebook:hover{background:#6e9bee;}#rb-social-hover a.google:hover{background:#00be00;}#rb-social-hover a.pinterest:hover{background:#cb2027;}#rb-social-hover a.rss:hover{background:#ffae42;}#rb-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style>
<div id="rb-social-hover">
<div id="links"><a href="http://twitter.com/BlogsDaddy" class="twitter" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho87icE00XHFEYVeGYZ21dWw_I56SbDywQZG66IFnf5HDDbN099mQpZ5blcejpOSHub8XUpuOqVyc9xG2zxXkfix2E1Eghm0I3pgno2f67ese679rpQE6yeGBt0k1j-hfX_kqpoCxVCYU/s1600/twitter.png" /></div></a>
<a href="http://www.facebook.com/BlogsDaddy" class="facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2B3Jk8GsWkafuaa_ea-UcPdnUJI7Uy7671pElK0S9h2r2TrWilFTrclthPtnoh0JcMhF9toDpx_pv64dRhBTJfN9VPvLFRtD_iLvyMUtCp3Wh754euZKWJxMuQSv6Ww0M65WIA4xW4Bo/s1600/FB.png" /></div></a>
<a href="https://plus.google.com/u/0/117100549673033253859" class="google" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi44qKij8xQMt4K1i9uew37aa7ip_dfepa681z35FlFskZS4ShCmdhEEunWfvpVzS05cnRN6eY_qXyikY2q-YigtSJTrBSlbU9T5X48penyniUj_X14bwgimpFe92V7EIhX2sreEn-3fxQ/s1600/google.png" /></div></a>
<a href="http://pinterest.com/gaganmasoun" class="pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiPsSz3lZAdHuDTgdFV5VPHp31IBbxtO_2f2PeY9rgdSQ4FBQHlAsL4MqmTzNfmra6aij7okqVfNdIRGr91IJa7rjs346vNDt_9drGJaaRlRrOsTppAhJg5fonA7W9Q2Oj8J6v0gj1iBI/s1600/pin.png" /></div></a>
<a href="http://feeds.feedburner.com/BlogsDaddy" class="rss" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdnqLiS-ntdlanhGAOocezw2aFisTRBA6bYajfnaWHlVvx2aqEI1kw_1tUXd6MF51zhRKBgddwl-VqU2cWTmABI-npVoLZS09vD9BEtyVLsEVr87L8cgCt0NePOpJsldM-DZeokAm1-Vo/s1600/rss.png" /></div></a>
</div></div>
- Save Widget and It's Done
Remember Notes
Replace other Yellow Highlighted URL's With Your Social Profile URL's as Mentioned Above In Code.
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.
0 comments:
Post a Comment