• Recent Uploads

    How to Add Social Media Follow Us Buttons/widgets to Blogger Sidebar.

    November 11, 2018 0
    Adding social media buttons to your blog helps you to make you more connected to the peoples and visitors can easily can connected to us in order to get future posts from us


    Why use follow us buttons?

    As I told you above, there as many benefits of using it on your site. Below are some 
    quick pros that you should know before applying it to your blog.
    • Increase your followers/fans in a more faster way.
    • Gain referral traffic/audience to your blog posts.
    • Create Facebook pages and grow your brand.
    • Gain trust and create engagement between you & your readers.
    • Turn your first-time visitors to a lifetime subscriber.

    You'll get more benefits after implementing it to your blogger site.

    Ways to add follow us social buttons?

    There are mainly two ways by which you can install the social widget on your blog.

    1. You can add custom JavaScript codes to HTML widget on your layout page.

    2. You can use short scripts from another social media tool provider websites to show
     follow us buttons on your site. This method can be a little tricky, during the process
     you might need to change your template codes.

    Adding Social Media icons using Custom JavaScript Codes

    Copy the below codes and paste it on your layout page's HTML gadget. If you're 
    confused? read the below post.


    Note: Before pasting the below codes to your blog, change the blue codes into 
    your actual social media account URL.

    1.Horizontal Social media icons with names:-

    Horizontal Social icons
    Horizontal Social media icons with names



    <a href="your url goes here"><div class="fb-icon-bg"></div>
        <div class="fb-bg"></div>
      <a href="your url goes here">
      <div class="twi-icon-bg"></div>
        <div class="twi-bg"></div></a>
      <a href="your url goes here">  <div class="g-icon-bg"></div>
        <div class="g-bg"></div>
      </a>
    <a href="your url goes here">
      <div class="lin-icon-bg"></div>
        <div class="lin-bg"></div>
      </a>
    <style>
    .fb-bg:hover, .twi-bg:hover, .g-bg:hover, .lin-bg:hover {background:#303030;}
    .fb-icon-bg {
     background: #354f88;
     height: 37px;
     margin: 0 0 -37px 0;
     width: 41px; 
    }
    .fb-icon-bg:after {
     content: "\f09a"; font-family: FontAwesome;
      display: block;
      padding: 9px 10px 5px 15px;
    color:#fff;
    }
    .fb-bg {
     background: #3b5998;
     display: block;
     height: 37px;
     margin: 0 0 10px 41px;
    }
    .fb-bg:after {
     color: #fff;
     content: "Follow Us on Facebook";
     height: 37px;
     left: 8%;
     position: relative;
     top: 22%;
     width: 41px; 
    }
    .fb-bg:hover{
      cursor: pointer;
    }
    .fb-bg:active{
      background: #354f88;
    }
    /* Twitter */
    .twi-icon-bg:after {
     content: "\f099"; font-family: FontAwesome;
      display: block;
      padding: 11px 10px 6px 11px;
    color:#fff;
    }
    .twi-icon-bg {
     background: #40a2d1;
     height: 37px;
     margin: 0 0 -37px 0;
     width: 41px; 
    }
    .twi-bg {
     background: #45b0e3;
     height: 37px;
     margin: 0 0 10px 41px;
    }
    .twi-bg:after {
     color: #fff;
     content: "Follow Us on Twitter";
     height: 37px;
      left: 11%;
     position: relative;
     top: 22%;
      width: 41px; 
    }
    .twi-bg:hover {
      cursor: pointer;
    }
    .twi-bg:active {
      background: #40a2d1;
    }
    /* Google+ */
    .g-icon-bg:after {
     content: "\f0d5"; font-family: FontAwesome;
      display: block;
      padding: 11px 10px 6px 13px;
    color:#fff;
    }
    .g-icon-bg {
     background: #ce3e26;
     height: 37px;
     margin: 0 0 -37px 0;
     width: 41px; 
    }
    .g-bg {
     background: #de4c34;
     height: 37px;
         margin: 0 0 10px 41px;
    }
    .g-bg:after {
     color: #fff;
     content: "Follow Us on Google+";
     height: 37px;
     left: 10%;
     position: relative;
     top: 22%;
     width: 41px; 
    }
    .g-bg:hover {
      cursor: pointer;
    }
    .lin-icon-bg {
        background: #075e8c;
        height: 37px;
        margin: 0 0 -37px 0;
        width: 41px;
    }
    .lin-icon-bg:after {
        content: "\f0e1";
        font-family: FontAwesome;
        display: block;
        padding: 11px 10px 6px 13px;
        color: #fff;
    }
    .lin-bg {
        background: #0077B5;
        height: 37px;
        margin: 0 0 10px 41px;
    }
    .lin-bg:after {
        color: #fff;
        content: "Follow Us on Linkedin";
        height: 37px;
        left: 10%;
        position: relative;
        top: 22%;
        width: 41px;
    }
    .ins-icon-bg {
        background: #ffc238;
        height: 37px;
        margin: 0 0 -37px 0;
        width: 41px;
    }
    .ins-icon-bg:after {
        content: "\f16d";
        font-family: FontAwesome;
        display: block;
        padding: 11px 10px 6px 13px;
        color: #fff;
    }
    .ins-bg {
        background: #ffd438;
        height: 37px;
        margin-left: 41px;
    }
    .ins-bg:after {
        color: #fff;
        content: "Follow us on Instagram";
        height: 37px;
        left: 10%;
        position: relative;
        top: 22%;
        width: 41px;
    }
    </style></a>

    rounded social media buttons:-










    CODE//
    <div class="social-counter">

          <a class="count facebook" href="enter your own facebook url">
            <div class="icon"><i class="fa fa-facebook"></i></div>
            <p><span>Facebook</span></p>
            <p class="action-btn">Like</p>
          </a>
         <!-- TWITTER -->
          <a class="count twitter" href="enter urs url">
            <div class="icon"><i class="fa fa-twitter"></i></div>
            <p><span>Twitter</span></p>
            <p class="action-btn">Follow</p>
          </a>

          <!-- YOUTUBE -->
          <a class="count youtube" href="enter your urli">
            <div class="icon"><i class="fa fa-youtube"></i></div>
            <p><span>YouTube</span></p>
            <p class="action-btn">Subscribe</p>
          </a>

          <!-- GOOGLE PLUS -->
          <a class="count google-plus" href="enter ur url">
            <div class="icon"><i class="fa fa-google-plus"></i></div>
            <p><span>Google+</span></p>
            <p class="action-btn">+1</p>
          </a>

          <!-- LINKEDIN -->
          <a class="count linkedin" href="enter ur url">
            <div class="icon"><i class="fa fa-linkedin"></i></div>
            <p><span>LinkedIn</span></p>
            <p class="action-btn">Follow</p>
          </a>

        </div>

    <style>
    .social-counter{
    padding: 0;
    display: block;
    }

    .count{
    display: block;
    padding: 7px 0;
    text-align: left;
    transition: all 0.5s ease;
    }

    .count:hover{
      background: rgba(0,0,0,0.033);
      transform: scale(1.065);
    }

    .count .icon{
      background: #aaa;
      display: inline-block;
      float: left;
      color: white;
      font-size: 22px;
      margin-left: 5px;
      text-align: center;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      text-shadow: 0 0 3px rgba(0,0,0,0.2);
      display: table;
    }

    .count .icon i{
      display: table-cell;
      vertical-align: middle;
    }

    .count p{
      display: inline-block;
      font-size: 13px;
      color: #888;
      margin: 11px;
    }

    .count p span{
      color: black;
      font-size: 18px;
      font-weight: bold;
      padding-right: 2px;
    }

    .count .action-btn{
      float: right;
      display: inline-block;
      background: #aaa;
      color: white;
      padding: 3px 6px;
      border-radius: 3px;
      font-size: 14px;
      margin: 11px;
    }

    /*== COLORS ==*/

    .facebook .icon{background:#3b5999;}

    .facebook .action-btn{background:#3b5999;}

    .facebook .icon i{padding-top:2px;}

    .twitter .icon{background:#55acee;}

    .twitter .action-btn{background:#55acee;}

    .twitter .icon i{padding-top:2px;}

    .youtube .icon{background:#cd201f;}

    .youtube .action-btn{background:#cd201f;}

    .youtube .icon i{font-size:24px}

    .google-plus .icon{background:#dd4b39;}

    .google-plus .action-btn{background:#dd4b39;}

    .google-plus .icon i{font-size: 18px; padding-top: 1px;}

    .instagram .icon{background:#e4405f;}

    .instagram .action-btn{background:#e4405f;}

    .rss .icon{background:#f57d00;}

    .rss .action-btn{background:#f57d00;}

    .social-counter-2 .linkedin, .linkedin .icon,.linkedin .action-btn{background:#0077B5}

    .social-counter-2 .vimeo, .vimeo .icon,.vimeo .action-btn{background:#1ab7ea}

    .social-counter-2 .vk, .vk .icon,.vk .action-btn{background:#4c75a3}

    .social-counter-2 .tumblr, .tumblr .icon,.tumblr .action-btn{background:#34465d}

    .social-counter-2 .pinterest, .pinterest .icon,.pinterest .action-btn{background:#bd081c}

    .social-counter-2 .stumbleupon, .stumbleupon .icon,.stumbleupon .action-btn{background:#eb4924}

    .social-counter-2 .reddit, .reddit .icon,.reddit .action-btn{background:#ff5700}

    .social-counter-2 .yelp, .yelp .icon,.yelp .action-btn{background:#af0606}

    .social-counter-2 .weibo, .weibo .icon,.weibo .action-btn{background:#df2029}

    .social-counter-2 .producthunt, .producthunt .icon,.producthunt .action-btn{background:#da552f}

    .social-counter-2 .whatsapp, .whatsapp .icon,.whatsapp .action-btn{background:#25D366}

    .social-counter-2 .vine, .vine .icon,.vine .action-btn{background:#00b489}

    .social-counter-2 .slack, .slack .icon,.slack .action-btn{background:#3aaf85}

    .social-counter-2 .dribbble, .dribbble .icon,.dribbble .action-btn{background:#ea4c89}

    .social-counter-2 .flickr, .flickr .icon,.flickr .action-btn{background:#ff0084}

    .social-counter-2 .behance, .behance .icon,.behance .action-btn{background:#131418}

    .behance .icon i{font-size:18px;}

    .social-counter-2 .foursquare, .foursquare .icon,.foursquare .action-btn{background:#f94877}

    .social-counter-2 .snapchat, .snapchat .icon,.snapchat .action-btn{background:#FFFC00}

    .snapchat .icon i{font-size:24px;text-shadow: -1px 0 black,0 -1px black, 1px 0 black, 0 1px black}

    .snapchat .action-btn{text-shadow: 0 0 1px black}

    </style>
    Adding Social Media Codes to blogger
    1. Copy the given codes above and head over to blogger > layout page.



    2. In the sidebars click on add a gadget.




    3. Click HTML/JavaScript Add: to add third-party functionality or other code to
     your blog.


    4. Paste the codes in the content box, add a title and click save.















     5. Click save arrangements and you're done!

    Adding Social Media Codes to Blogger

    Tags:
    Author Image

    About EveTech

    Subscribe to: Post Comments ( Atom )

    Author Details

    EveTech is a one place where you can get all the technical stuff which belongs to everyone and anyone can use this very easily ... plz stay tuned with us and it will give us more motivation and will give us inspiration to bring more reliable things.