Main menu

Pages

Social media buttons for blogger


Introduction

In this tutorial I’m gonna show you how to add stylish social media buttons to your blogger blog.

Steps

fontawesome.com - add a new kit

  • Then open that kit
fontawesome.com - "Your kits" list
  • copy the script 
 
fontawesome.com - copy kit code

  • Then go to blogger to add that script to your HTML
  • So go to you blogger -> Theme -> Edit HTML
  • Add the script you copied under <head>
  • Instead of using a Kit , you can use CDN   , check this out for the difference between a kit and CDN
  • Then between
    <b:skin><![CDATA[
    and
    ]]></b:skin>
    you can put some CSS to style the social media icons
  • A ready to use CSS code that I found on w3schools 


/*The following style applies to any font awesome icon */
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
}
.fa:hover {
color: grey;
}

/*Specific color for each icon*/
/* Facebook */
.fa-facebook {
background: #3B5998;
color: white;
}
/* Twitter */
.fa-twitter {
background: #55ACEE;
color: white;
}
/* Youtube*/
.fa-youtube {
background: #bb0000;
color: white;
}


  • Now let’s add the social media icons to your page
  • Go to blogger layout
  • Add a widget -> HTML/Javascript
  • Paste this code below
<a href”A link to your facebook page here” class=’fa fa-facebook’></a>
<a href”A link to your twitter here” class=’fa fa-twitter></a>
<a href”A link to your youtube channel here” class=’fa fa-youtube></a>


  • Replace the text in red with your social media links
  • Now click add widget and save

Comments