Step 1: Go to Themes > click on the Edit HTML under three dots symbol
Step 2: Copy the following code and paste it in below the <body>
<div class='sidenav' id='mySidenav'>
<a class='fa fa-facebook' href='#' id='facebook' style='text-align:right;' target='_blank' />
<a class='fa fa-twitter' href='#' id='twitter' style='text-align:right;' target='_blank' />
<a class='fa fa-pinterest' href='#' id='pinterest' style='text-align:right;' target='_blank' />
<a class='fa fa-youtube' href='#' id='youtube' style='text-align:right;' target='_blank' />
</div>
Step 3:
Step 4: Replace href='#' with your facebook, twitter, pinterest, and youtube links
Step 5: Copy the below code and paste it in below <head>
<style>
#mySidenav a {
position: absolute;
position:fixed;
z-index:9;
left: -10px;
transition: 0.3s;
padding: 10px;
width: 40px;
text-decoration: none;
font-size: 15px;
color: white;
border-radius: 0 5px 5px 0;
}
#mySidenav a:hover {
left: 0;
}
#facebook {
top: 41%;
background-color: #3B5998;
}
#twitter {
top: 47%;
background-color: #55ACEE;
}
#pinterest {
top: 53%;
background-color: #cb2027;
}
#youtube {
top: 59%;
background-color: #bb0000;
}
</style>
Step 6:
0 Comments