Social media follow us buttons for blogger

Preview

This is social media button with bubble effect i already give you same social media like this but i just change px of this button and also images by which it looks great.

To add this button to blogger follow some quick steps-

• Go to blogger dashboard.
• Now go to layout and add html/javascript.
• Paste the following html code in it.

<div dir="ltr" style="text-align: left;" trbidi="on"> 

<ul id="bubble2">

<li>

        <a href="YOUR-TWITTER-LINK" title="Follow me on Twitter">

            <img alt="Follow me on Twitter" class="small" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSkyKd7r6F8lBPjkVRRl3Eh-VhzoYk8xyq61Q8SLrjOrt_ZWXQYkWyj1faRZ9n5GKQ0DkYf59bhyphenhyphenrG3VU6g5l-rjmMipD9GENlEImdKhb9uKJePOAacpIUtIMXZ-XOXw5bB3ATrkNYh6_z/s1600/tw.png?w=96" />

            <img alt="Follow me on Twitter" class="large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDX1feFBhb3V71fx6pUIkBo66QHmppA4BHGjAlS7JOQeaa43FF4yUNy4HxX7XnX8sLi-2969dQCE3qEiWw5ewosEaIMirjsqf1JX5MSnOvjtCKGmncA_FA0UfWUHJCyMGjzvJ_KVBthyphenhyphenaD/s1600/tw2.png" />

        </a>

      </li>

<li>

        <a href="YOUR-FACEBOOK-LINK" title="I'm on Facebook">

            <img alt="I'm on Facebook" class="small" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAjvU5lj5LJSfxAIOoo_WTKTBcQQ44m59xp1aHMN9YH1naOVqPHqiOACfRdmhCjgKTqqiAsP_jVQhDNbvgYKd238CrB2KsGN3BRQ7IFBkbeoR7Q-Q2B7piOhxqadbRiekvMl7tauRj36Qy/s1600/fb.png" />

            <img alt="I'm on Facebook" class="large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg268LsN7EeSnJWOrzHa3mi2h5-w1VLiS21CQxrQR_nlflyf0HEJQn6zIeJpZ9hEKo9Cc7vlng2r9q4SKUp_4KO5cMBPSizYZ5abnnI4Bs2owjQjDwRxAWlMKRfip0642oInrItx104qjEp/s1600/fb2.png?w=580" />

        </a>

      </li>

<li>

        <a href="YOUR-FEEDBURNER-LINK" title="Full RSS Feed">

            <img alt="Full RSS" class="small" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWf1vS8Sm1HK7zTN2FV9Wywr2i4P7-YRKE2mp2QXsLCSI9qCBll2aEePNVJwaaQM3IgpCMTg_EONYOpeCtbsjblzAHkcz_kM2Tvyi6idiwmfwXxT9R6ctzqhKinMHGtdE6tYvALW9KUFcU/s1600/rss.png" />

            <img alt="Full RSS" class="large" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTNIoS-IdY_k6Z4U2SFKwfmjYlGyyYu5DE8vm5_v_0JR4K3mTxzQVhhnARdl27h69rL5FJyjYbDre1x9kPp9pmGC2ABUMqJ5cBEhqx3RJ4pfI2tBXIcqU_A4oqXGOWU-UModtq9B4jo4pi/s1600/rss2.png" />

        </a>

      </li>?

Don't Forget to replace YOUR-TWITTER-FACEBOOK-RSS-LINK 

Now we need to design this button for that wee need to paste Css code.

• Go To Blogger > Layout > Edit HTML.
• Search For ]]></b:skin>
• And paste the code below just above ]]></b:skin>

#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: -8px;

    margin-left: -8px;

    z-index: 1000;

}?

Now Save it.


If you are facing any problem then comment below.