Social Media Link List Gadget For Blogger

On In , 1 Comment
We have already seen how to create a colorful sticky social media bar for Blogger. Here is a social media Link List gadget for your blog. This is an HTML gadget and will work perfectly with Awesome Blogger template. See the below screenshot. Adding this widget to your blog is a simple task. From your Blog's Dashboard, navigate to Layout and select Add a Gadget. Select HTML/JavaScript and copy-paste one of the below codes:

social media link list
----------------------------------------------------------------------------------------------------------------------
Code for Dark:
-----------------------------------------------------------------------------------------------------------------------
<div class="anjanablogsm">
<ul><li class="facebook"><a href="#">Facebook</a></li>
<li class="linkedin"><a href="#">Linkedin</a></li>
<li class="twitter"><a href="#">Twitter</a></li>
<li class="flickr"><a href="#">Flickr</a></li>
<li class="pinterest"><a href="#">Pinterest</a></li>
<li class="google"><a href="#">Google+</a></li>
<li class="reddit"><a href="#">Reddit</a></li></ul></div>

<style>.anjanablogsm {margin: 0;padding: 0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;background-color: #3E403D;border: solid 1px #3A3C39;} 
.anjanablogsm ul {padding: 0 0 7px 0!important; margin: 0;list-style: none;} .anjanablogsm li {margin: 0 0 -15px 0; border:none!important;.anjanablogsm li a {padding: 8px 12px 8px 34px;background-color: #484A47;display: block;margin: 1px;color: #fff!important;text-shadow: 0px -1px 0px #939069;text-decoration: none;-moz-border-radius: 5px;-webkit-border-radius: 5px;background-repeat: no-repeat;background-position: 10px 8px;}.anjanablogsm li a:hover {background-color: #FF1493;text-decoration: none;}

.anjanablogsm .facebook a {background-image: url("http://4.bp.blogspot.com/-F0-i0ro2pQ8/U9jislkmyVI/AAAAAAAAHOc/KPFIr3l9rJY/s1600/fb.png");}
.anjanablogsm .linkedin a {background-image: url("http://1.bp.blogspot.com/-VKIKxRsVHvQ/VR6DHnFfpfI/AAAAAAAAH7w/M7kb70BP7Y0/s1600/linkedin.png");}
.anjanablogsm .twitter a {background-image: url("http://4.bp.blogspot.com/-nmLClBQoEQs/VR6ITs9llQI/AAAAAAAAH8A/opSBDuIRuSg/s1600/Twitter.png");}
.anjanablogsm .flickr a {background-image: url("http://2.bp.blogspot.com/-HHwtCm6kI1E/VR5s6xcHTeI/AAAAAAAAH68/bVgL1FAbGWY/s1600/flickr.png");}
.anjanablogsm .pinterest a {background-image: url("http://3.bp.blogspot.com/-Olr_PUd0EME/VR6IXg_aITI/AAAAAAAAH8I/xZgYm2AzBfI/s1600/pinterest.png");}
.anjanablogsm .google a {background-image: url("http://4.bp.blogspot.com/-v2K5jHQL8rQ/VR6CCaAeN2I/AAAAAAAAH7o/TVBx1fYjEYQ/s1600/Google%2Bplus.png");}
.anjanablogsm .reddit a {background-image: url("http://4.bp.blogspot.com/-V_NMfIv1DI8/U9Zr3DIv8nI/AAAAAAAAHNM/9AINgPk3xHA/s1600/reddit.png");}</style>


----------------------------------------------------------------------------------------------------------------------
Code for Light:
----------------------------------------------------------------------------------------------------------------------
<div class="anjanablogsm"> <ul><li class="facebook"><a href="#">Facebook</a></li>
<li class="linkedin"><a href="#">Linkedin</a></li>
<li class="twitter"><a href="#">Twitter</a></li>
<li class="flickr"><a href="#">Flickr</a></li>
<li class="pinterest"><a href="#">Pinterest</a></li>
<li class="google"><a href="#">Google+</a></li>
<li class="reddit"><a href="#">Reddit</a></li></ul></div>

<style>.anjanablogsm {margin: 0;padding: 0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;background-color: #F1F1F1;border: solid 1px #F1F2D8;} .anjanablogsm ul {padding: 0 0 7px 0!important; margin: 0;list-style: none;} .anjanablogsm li {margin: 0 0 -15px 0; 
border:none!important;.anjanablogsm li a {padding: 8px 12px 8px 34px;background-color: #DBDACA;display: block; margin: 1px;color: #A2A2A2!important; text-shadow: 0px -1px 0px #939069;text-decoration: none;-moz-border-radius: 5px;-webkit-border-radius: 5px;background-repeat: no-repeat;background-position: 10px 8px;} .anjanablogsm li a:hover {background-color: #B1AE87;text-decoration: none;color: #FFF!important; text-decoration:none;}

.anjanablogsm .facebook a {background-image: url("http://4.bp.blogspot.com/-F0-i0ro2pQ8/U9jislkmyVI/AAAAAAAAHOc/KPFIr3l9rJY/s1600/fb.png");}
.anjanablogsm .linkedin a {background-image: url("http://1.bp.blogspot.com/-VKIKxRsVHvQ/VR6DHnFfpfI/AAAAAAAAH7w/M7kb70BP7Y0/s1600/linkedin.png");}
.anjanablogsm .twitter a {background-image: url("http://4.bp.blogspot.com/-nmLClBQoEQs/VR6ITs9llQI/AAAAAAAAH8A/opSBDuIRuSg/s1600/Twitter.png");}
.anjanablogsm .flickr a { background-image: url("http://2.bp.blogspot.com/-HHwtCm6kI1E/VR5s6xcHTeI/AAAAAAAAH68/bVgL1FAbGWY/s1600/flickr.png");}
.anjanablogsm .pinterest a {background-image: url("http://3.bp.blogspot.com/-Olr_PUd0EME/VR6IXg_aITI/AAAAAAAAH8I/xZgYm2AzBfI/s1600/pinterest.png");}
.anjanablogsm .google a {background-image: url("http://4.bp.blogspot.com/-v2K5jHQL8rQ/VR6CCaAeN2I/AAAAAAAAH7o/TVBx1fYjEYQ/s1600/Google%2Bplus.png");}
.anjanablogsm .reddit a {background-image: url("http://4.bp.blogspot.com/-V_NMfIv1DI8/U9Zr3DIv8nI/AAAAAAAAHNM/9AINgPk3xHA/s1600/reddit.png");}</style>


Replace "#" with your social media links and Save the Gadget. Done!

1 comment:

  1. I love it :) did it on seanshaver.blogspot.com
    please make a post on how you made that "you may also like" panel. It would really help me in my blog. Thanks in advance!

    ReplyDelete