Friday, September 28, 2018

Create Social Media Widget With Font Awesome Icon (Valid AMP)

    Create Social Media Widget With Font Awesome Icon using CSS

    Social Media is one of the media that becomes a business field. Many people sell products and services only by utilizing social media such as Facebook, Twitter, Instagram and Google Plus. They don't even have a website, only relying on social media as a promotional field.

    For those of you who have a website, of course social media widgets are also important so that your interactions and website visitors are wider. With this you can also use your website as a medium to develop your social media.

    This time, I will share a tutorial on how to create a Social Media Widget using CSS.

    I made this widget complete with popular social media icons, namely Facebook, Instagram, Google Plus and Twitter. I get the icon by using Font Awesome 4.7.

    You can apply this widget to all CMS because it only uses CSS and HTML. But this time, I will explain the application on Blogger.com

    Utilizing CSS: before To Place Icon

    Please go to Blogger.com and open one of your blogs. Then open the Themes - Edit HTML tab. You need to add Font Awesome before the </head> tag. Please copy and paste the code below

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">

    Then copy the CSS code below. For those of you who use non-AMP templates, copy before ]]</b:skin> . For those of you who use the Blogger AMP template, copy it under  <style amp-custom='amp-custom'>

    
    #sosmed {
      max-width:315px;
      width:100%;
      max-height:300px;
      background:transparent;
      position:relative;
      overflow:hidden;
      margin:0;
      text-align:center;
      text-align: align;
      text-justify: inter-word;
    }
    #sosmed a{color:#444;text-align:align;display:inline-block;text-decoration:none;width:calc(48%);height:48%;margin:4px 0;background:#f5f5f5}
    #sosmed a:hover{background:#444}
    /*facebook plus*/
    #sosmed a.fb:before{display:block;content:"\f230";font-family:FontAwesome;font-size:40px;padding:45px}
    #sosmed a.fb:hover{color:#1B9CFC}
    /*instagram plus*/
    #sosmed a.ig:before{display:block;content:"\f16d";font-family:FontAwesome;font-size:40px;padding:45px}
    #sosmed a.ig:hover{color:#B33771}
    /*google plus*/
    #sosmed a.plus:before{display:block;content:"\f0d4";font-family:FontAwesome;font-size:40px;padding:45px}
    #sosmed a.plus:hover{color:#FD7272}
    /*twitter*/
    #sosmed a.tw:before{display:block;content:"\f081";font-family:FontAwesome;font-size:40px;padding:45px}
    #sosmed a.tw:hover{color:#25CCF7}

    When it's finished, click SAVE Template.

    Info
    The CSS above, I used CSS :before to call the awesome font icon into the class that I created. For information, css:before will place the class before the main content in your class / selector

    For those of you who want to replace the Icon I made, please change the fontawesome unicode. look at https://fontawesome.com/v4.7.0/icons/ for unicode fontawesome that can place.

    Add Social media Widget to Blogger.com

    Next, we will add a new Widget on the Blogger template. Click the Layout tab, then click Add a Gadget, then a pop-up window will appear.

    Select HTML/Javascript and paste the code below, replace all social media URL,  and click Add/Ok.

    
    <div id='sosmed'>
      <a href='https://facebook.com/username' class='fb' target='_blank' rel='nofollow noopener'></a>
      <a href='https://instagram.com/username' class='ig' target='_blank' rel='nofollow noopener'></a>
      <a href='https://plus.google.com/username' class='plus' target='_blank' rel='nofollow noopener'></a>
      <a href='https://twitter.com/username' class='tw' target='_blank' rel='nofollow noopener'></a>
    </div>

    * Ganti semua username dengan username akun sosial media anda.

    For Demo Widget, please click the button below

    By only utilizing CSS, you can create easily. Can be seen from the results of the combination of CSS: before and: hover above, the social media widget looks more attractive.

    That's the tutorial on How to create a Social Media Widget with Awesome Fonts on Blogger. May be useful

    Read Other Blogger HTML Tricks: