I have created a social sharing button for my WordPress site with the help of some online tutorial and it works great. The sharing button perfectly appeared at the bottom of every post. Now I wanted a vertical and fixed floating social share bar for every post. How do I edit this code? so that the sharing button appears vertically on the side of each post. FYI WordPress is Genesis.

function gossip_social_sharing_buttons($content) {
global $post;
if(is_single() || is_home()){

    // Get current page URL 
    $gossipURL = urlencode(get_permalink());

    // Get current page title
    $gossipTitle = htmlspecialchars(urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8')), ENT_COMPAT, 'UTF-8');
    // $gossipTitle = str_replace( ' ', '%20', get_the_title());

    // Get Post Thumbnail for pinterest
    $gossipThumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );

    // Construct sharing URL without using any script
    $twitterURL = 'https://twitter.com/intent/tweet?text='.$gossipTitle.'&url='.$gossipURL.'&via=ShoppersGossip';
    $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u='.$gossipURL;
    $pinterestURL = 'https://pinterest.com/pin/create/button/?url='.$gossipURL.'&media='.$gossipThumbnail[0].'&description='.$gossipTitle;


    // Add sharing button at the end of page/post content
    $content .= '<div class="gossip-social">';
    $content .= '<a class="gossip-link gossip-twitter" href="'. $twitterURL .'" target="_blank" rel="noopener noreferrer nofollow">Twitter</a>';
    $content .= '<a class="gossip-link gossip-facebook" href="'.$facebookURL.'" target="_blank" rel="noopener noreferrer nofollow">Facebook</a>';
    $content .= '<a class="gossip-link gossip-pinterest" href="'.$pinterestURL.'" data-pin-custom="true" target="_blank" rel="noopener noreferrer nofollow">Pinterest</a>';
    $content .= '</div>';


    return $content;
}else{
    // if not a post/page then don't include sharing button
    return $content;
}}; add_filter( 'the_content', 'gossip_social_sharing_buttons');

CSS

.gossip-link {
padding: 6px 14px!important;
color: #fff!important;
font-size: 14px;
border-radius: 3px!important;
border-bottom: none!important;
margin-right: 6px;
cursor: pointer;
margin-top: 2px;
display: inline-block;
text-decoration: none;
font-weight: 700;
}

.gossip-social {
margin: 20px 0 40px;
font-size: 14px;
}

.gossip-link:hover {
color: #fff;
}

.gossip-twitter {
background: #00aced;
}

.gossip-twitter:hover {
background: #0397d4;
}

.gossip-facebook {
background: #3B5997;
}

.gossip-facebook:hover {
background: #2d4372;
}

.gossip-pinterest {
background: #bd081c;
}

.gossip-pinterest:hover {
background: #9e0616;
}

Can anybody help, please?