On this occasion I will share a  collection of cool and elegant social media widgets for bloggers . One fairly large source of traffic is Social Media or Social Media. More traffic means more income. Now many website or blog owners have social media widgets installed on their website or blog . But the appearance and shape is definitely different.

Functions of Social Media Widgets
The function of the Social Media Widget is to make it easier for visitors or readers to find our Social Media account . For example Facebook, Twitter, Google Plus or others.

A collection of cool and elegant social media widgets for bloggers
Although many have made or discussed this tutorial, but I share it at the same time from a combination of several Social Media Widgets that I know of.

#Widget Social Media With Counter Style 1
1. Log in to Blogger.com .
2. select THEMES menu > Edit HTML .
3. Enter the code below right ABOVE code </style> or ]]></b:skin>.

.social-box {
    width: 280px;
    padding: 10px 9px;
    margin: 0;
    overflow: hidden;
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
    text-align: center;
}
a.social-item-box {
    display: block;
    color: #4b4b4b;
    float: left;
    width: 64px;
    overflow: hidden;
    margin: 0;
    padding: 4px 0;
    background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhclksl3f-YcuDnud-ANc1fNhVvlDfx48lf0Lsh2ID7o2K8z4N1boMYMSGUj0miuxRF2_F1U82ee0zUE7UCIaFh3sHqYjMZQqcj8wJQIAGHsOkvOzYW7JlYICoTxhkLNFmphKd8BrH7DqDa/s1600/social-icon.png");
    background-repeat: no-repeat;
}
.social-item-outer {
    background: #f8f8f8;
    margin: 0 0 0 8px;
    overflow: hidden;
    float: left;
    display: inline-block;
}
.social-item-outer:hover {
    background: #fff;
}
.social-item-outer:nth-child(1):hover {
    box-shadow: 0px -2px 0px #E50700 inset;
}
.social-item-outer:nth-child(2):hover {
    box-shadow: 0px -2px 0px #0084C5 inset
}
.social-item-outer:nth-child(3):hover {
    box-shadow: 0px -2px 0px #6CAC00 inset;
}
.social-item-outer:nth-child(4):hover {
    box-shadow: 0px -2px 0px #00C3B7 inset;
}
.social-item-outer:hover {
    box-shadow: 0px -2px 0px #FF8168 inset;
}
.social-item-outer:first-child {
    margin-left: 0px;
}
.facebook-box {
    background-position: 7px 4px;
}
.rss-box {
    background-position: -73px 4px;
}
.twitter-box {
    background-position: -153px 4px;
}
.googleplus-box {
    background-position: -233px 4px;
}
.counter {
    margin: 60px 0 0 0;
    font-family: 'Oswald', Verdana, Sans-serif;
    line-height: 1.2em;
    font-size: 16px;
    font-weight: 500;
}
.social-title {
    color: #888;
    font-size: 11px;
}

4. Save.
5. Go to Layout > Add A Gadget > HTML/JavaScript . Then enter the code below in the Content column .

• Download

Replace the xxxxx code   with your Social Media URL . If the installation is correct, the results will be as drawn.

#Widget Social Media Style Spinning
1. Log in to  Blogger.com .
2.  Go to  Layout  >  Add A Gadget  >  HTML/JavaScript . Then enter the code below in the Content column  .

• Download

3. Save.

Replace the xxxxx code   with your Social Media URL . If the installation is correct, the results will be as drawn.

#Widget Social Media Simple Style 1

1. Log in to  Blogger.com .

2.  Go to  Layout  >  Add A Gadget  >  HTML/JavaScript . Then enter the code below in the Content column  .

• Download

3. Save.

Replace code  #  with your Social Media URL . If the installation is correct, the results will be as drawn.