Latest News

Thursday, 18 December 2014
Home > SOCIAL ICON > Bubble Social Icons On CSS

Bubble Social Icons On CSS

Add a Bubble Social Icons On CSS on website or blogger. Let us follow the below steps.

Step 1: Go to Blogger Click the Dashboard then
Step 2: Now Click on Template->Edit HTML-> Proceed
Step 3: Now Find this code ]]></b:skin> by pressing Ctrl + F
Step 4: Copy the code from below and Paste it  Before/above ]]></b:skin>
div#content {
 width: 1024px;
 margin: 50px auto 0px auto;
 text-align: center;
}

#bubble {
 list-style: none;
 margin: 0px;
 padding: 0px;
}
#bubble li {
 display: inline-block;
 margin: 0px;
 padding: 0px;

}

#bubble li a.icon {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf9OLimxCYtLkKnNqtWthz4EgSYw2Oxm8ez_gPpq_tjQP_M-gdzYV7SozgieYdi_aYQGiMRCaZc6WGcdf2qAOgEwgA4cMYjdn86DSDu8UImPXiPqbqZYm8uZnDMCQOPQPoogdYFFMpb04/s1600/sprites.png) no-repeat;
 border: none;
 display: block;
 width: 128px;
 height: 128px;
 text-indent: -9999px;
}

#bubble li a.feed {
 background-position: -139px -12px;
}
#bubble li a.feed:hover {
 background-position: -13px -12px;
}
#bubble li a.email {
 background-position: -139px -149px;
}
#bubble li a.email:hover {
 background-position: -13px -149px;
}
#bubble li a.twitter {
 background-position: -139px -283px;
}
#bubble li a.twitter:hover {
 background-position: -13px -283px;
}
#bubble li a.facebook {
 background-position: -139px -422px;
}
#bubble li a.facebook:hover {
 background-position: -13px -422px;
}
#bubble li a.delicious {
 background-position: -139px -559px;
}
#bubble li a.delicious:hover {
 background-position: -13px -559px;
}
#bubble li a.technorati {
 background-position: -139px -698px;
}
#bubble li a.technorati:hover {
 background-position: -13px -698px;
}
#bubble2 {
 list-style: none;
 margin: 20px 0px 0px;
 padding: 0px;
}
#bubble2 li {
 display: inline-block;
 margin: 0px 5px;
 padding: 0px;
 width: 72px;
 height: 72px;
}

#bubble2 li a img {
 position: relative;
 border: none;
}

#bubble2 li a img.large {
 display: none;
}

#bubble2 li a:hover img.small {
 display: none;
 z-index: 0;
}

#bubble2 li a:hover img.large {
 display: block;
 margin-top: -28px;
 margin-left: -28px;
 z-index: 1000;
}
#bubble li, #bubble2 li {
    display: inline;
} 
Step 5: Click the Layout and Add a Gadget then
Step 6: Click the HTML/JavaScript then
Step 7: Copy the Below code And Paste on it.
<div id="content">
 <h3>
Using CSS Sprites</h3>
<ul id="bubble">
<li>
        <a class="icon feed" href="http://blogsitedesigns.blogspot.in/" title="Full RSS Feed">Full RSS Feed</a>
      </li>
<li>
        <a class="icon email" href="http://blogsitedesigns.blogspot.in/" title="Feed via Emal">Feed via email</a>
      </li>
<li>
        <a class="icon twitter" href="http://blogsitedesigns.blogspot.in/" title="Full RSS Feed">Follow me on Twitter</a>
      </li>
<li>
        <a class="icon facebook" href="http://blogsitedesigns.blogspot.in/" title="Full RSS Feed">Follow me on Facebook</a>
      </li>
<li>
        <a class="icon delicious" href="http://blogsitedesigns.blogspot.in/" onclick="window.open('http://blogsitedesigns.blogspot.in', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Full RSS Feed">Save me</a>
      </li>
<li>
        <a class="icon technorati" href="http://blogsitedesigns.blogspot.in/" title="Full RSS Feed">Fave me</a>
      </li>
</ul>
<h3>
The Use Of Image Replacement</h3>
<ul id="bubble2">
<li>
        <a href="http://blogsitedesigns.blogspot.in/" title="Full RSS Feed">
         <img alt="Full RSS" class="small" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Ulocpwawg886PvF1Of3IGM_LIWVSsv3HX911AFxyotMfnCWB9xDLUvxBN7Fl_WiEwBDzQVnxwAFogqkPvgxOq-I5C5Ymnx0EvExQ3SSDoGzKvT6eF3w6gnnd8T8O-9eiAVoxPoDCY_I/s1600/feed.png" />
         <img alt="Full RSS" class="large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIVkUNz9CHUgaMF4HnfgOhlkmL6V0XDXVZ8N_2_EVKTcpWQ_nM8yifxviIOYZZmLA8buVjh3P0E_1wbdTL_5a9cr9TdYEtHJj_OrSdYlXYn2OZIjWU3vacaXi9puurSQJOCub5Nl0M9eQ/s1600/feed_large.png" />
        </a>
      </li>
<li>
        <a href="http://blogsitedesigns.blogspot.in/" title="Feed via Emal">
         <img alt="Feed via Emal" class="small" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK6hqguZfPRT__FJ9FOJjw2BpYUwgV8Ehe1ruKQyQXg1rExJJPxICz77qhSzZNWWrXyCu2roTNDTMckVpu7r2VNY_g4Ia7jUVuiIpn8EcpEy8iYxBgZ0FXifY_m47e-EPTjpZE7whV9Yw/s1600/email.png" />
         <img alt="Feed via Emal" class="large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Fx3DfwM_3u4ibb5PhEe5UmbKVlOF-21iayIWGGPdNvaG2PNoH8SVoIleSFLv6naRYiNTIy1MOE7eWEy4MiEzvM2w6yKhRUIYtNsJ2I1smrnrlsgl_LC1ChuJ9zNOqzmLeYa3MlL9wWw/s1600/email_large.png" />
        </a>
      </li>
<li>
        <a href="http://blogsitedesigns.blogspot.in/" title="Follow me on Twitter">
         <img alt="Follow me on Twitter" class="small" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9I7A_t2wUvgkcigp6XvVjkLHGNCwGfuXfszS-D0bHtqwf-Tx5WTN3ggeGm6uTAuS4NexsJnNZ5ZjiodzmH6XJBYBY6M2rjStMkOHsEsOqcWEogc21sR8sNg4tfOgjVtARurcmj7SiYw/s1600/twitter.png" />
         <img alt="Follow me on Twitter" class="large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj82oR3SF74tq6opJ7y9vLfryT7QWpS0wYt0IATv1-kUJMmls0t87qBcD-gSwfiMC_lHHE6LQJjP1Nb1DX5XpbaG7k4GekE5dEpjLOf4XI9jwzo3TVDw_SCxKxePNqcAPj6Xaz-UNhdh_Q/s1600/twitter_large.png" />
        </a>
      </li>
<li>
        <a href="http://blogsitedesigns.blogspot.in/" title="I'm on Facebook">
         <img alt="I'm on Facebook" class="small" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfV4reZjXXsHGPsPURe7O6yS0NpS9ZcI2X2xdC_Cqkxr2mOLcIXjvaeOwI18-Yr3xqEVrhJRLOT3UnT_hZHOlg8IBNI1YxX_DUJFBOISW32A2Zv7Q6HiQqxfstoaRQOZx5VFlQyqH9o0I/s1600/facebook.png" />
         <img alt="I'm on Facebook" class="large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7nDzJn3amHlZLnJSwMLYaYwXB7TNwfmU-KGheslw5oVt6KIFoWQK-OAJm1m9n7omTAYpBQMzJZLNfvjZXoaDIoUkWDRrlZpahtUnvShmCkTFRWw4LjUuQqvTuoWzVLcGrpxAAWL78CTg/s1600/facebook_large.png" />
        </a>
      </li>
<li>
        <a blogsitedesigns.blogspot.in="" delicious="" false="" href="http://blogsitedesigns.blogspot.in onclick=" http:="" return="" title="Save me" toolbar="no,width=550,height=550" window.open="">
         <img alt="Save me" class="small" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7qtzIzAhgEAe3olfbEUi6yX_s1yPL91xFM1HK7jXBGmQlD-BNdIBh8XBeUuKv2HIC0EJXMZYxPw62UMfpB9R4VrtrOCqbsU442SCO7aN-7mF4zkN5KnD0rKtgaqKYjqIBoIk78UN8gU/s1600/delicious.png" />
         <img alt="Save me" class="large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Yf8uINRCBRXp8e3RX9qI3H8k5J7XcDx0I-6fgVVsIRufRCiRcla_JziHlhsTdMlYAwdIPDnS3zwCUY13Xb7oPKm9qM1yXNBgC9WkelldUbWKly35ks7GzAXBuEVduS8YeK4xFZwhyphenhyphenb8/s1600/delicious_large.png" />
        </a>
      </li>
<li>
        <a href="http://blogsitedesigns.blogspot.in/" title="Fave me on Technorati">
         <img alt="Fave me on Technorati" class="small" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlyX2rPEJN6qQWg93Alz-RM3qkZ9F5joiy4VU9U1Oon7H58XsN2iD-dHAdFYOX4zp25ujIFABuWnLwqdk4kfmyULP_3TNoYSFafOPN44Nz2AM2X25TPGfWvvttd3ljcWMltvE20DDW1fE/s1600/technorati.png" />
         <img alt="Fave me on Technorati" class="large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGVvx3KbEO_M-OxHTtXW0Hi9gKXVLRxwyL3pHFkdtN0kcwk99jIE9NEjUu9DWd-4qIgTlgb6TGv5Lq7HNednaX2d_ddw2KhSHOoCVZgvA2iKWoR1YKocw2HRoZMMMCIxNYLY8ZTk4vQNg/s1600/technorati_large.png" />
        </a>
      </li>
</ul>
</div>
</div>

Step 8: Change the Red Colored Images Link with your Image.
Step 9: Change the Green Colored Name with your Social website Link with your Image.
Step 10: Save it and It will works.
 
Bubble Social Icons On CSS
157 KB
Bubble Social Icons On CSS
View a Sample
Posted by at 21:58
  • Blogger Comments
  • Facebook Comments

0 comments:

Post a Comment

Item Reviewed: Bubble Social Icons On CSS Description: Rating: 5 Reviewed By: Unknown
Subscribe to: Post Comments (Atom)
Scroll to Top