Cara Membuat Widget Follower Keren Di Blog

Bagi kalian yang mempunyai blog dan ingin agar sosial media banyak yang like maka coba lah untuk memasang widget sosial media ini di blog kalian
Langsung tutorialnya...
Masuk Blogger -> Template, Edit HTML
Cari Kode / Scipt Berikut.
]]></b:skin> atau </style>
Masukan CSS berikut di atasnya!!

*/CSS TAMVAN*/
#buttonbg {
    width: 260px;
    margin: 10px 20px;
    padding: 0;
}

#buttonbg li {
    cursor: pointer;
    height: 48px;
    position: relative;
    list-style-type: none;
}

#buttonbg .icon {
    background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHER2zImoBotcqUmt9wJ2ogiUghdlUoLCZ5izO-hB-hWk8HI3by_y-_I1LRxvRBh1aLyC6hByODAGLNpkSJaloYzF28d4Grzliv0aG_crUGguVSd4UmMRzHx8_KCklqVqgIwP147vT760/s1600/blsocial12.png') 0 0 no-repeat;
    background-color: rgba(217, 30, 118, .42);
    border-radius: 30px;
    display: block;
    color: #141414;
    float: none;
    height: 48px;
    line-height: 48px;
    margin: 5px 0;
    position: relative;
    text-align: left;
    text-indent: 90px;
    text-shadow: #333 0 1px 0;
    white-space: nowrap;
    width: 48px;
    z-index: 5;
    -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
    transition: width .25s ease-in-out, background-color .25s ease-in-out;
    -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
    -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
    -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
    box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
    text-decoration: none;
}

#buttonbg span:hover {
    visibility: hidden;
}

#buttonbg span {
    display: block;
    top: 15px;
    position: absolute;
    left: 90px;
}

#buttonbg .icon {
    color: #fafafa;
    overflow: hidden;
}

#buttonbg .fb {
    background-color: rgba(45,118,185, .42);
    background-position: 0 -382px;
}

#buttonbg .twit {
    background-color: rgba(0, 161, 223, .42);
    background-position: 0 -430px;
}

#buttonbg .google {
    background-color: rgba(167, 0, 0, .42);
    background-position: 0 -478px;
}

#buttonbg .pint {
    background-color: rgba(204, 0, 0, .42);
    background-position: 0 -526px;
}

#buttonbg .linked {
    background-color: rgba(0, 87, 114, .42);
    background-position: 0 -574px;
}

#buttonbg .deviant {
    background-color: rgba(76, 122, 74, .42);
    background-position: 0 -622px;
}

#buttonbg .ytube {
    background-color: rgba(170, 0, 0, .42);
    background-position: 0 -670px;
}

#buttonbg .rss {
    background-color: rgba(255,109, 0, .42);
    background-position: 0 -718px;
}

#buttonbg li:hover .icon {
    width: 250px;
}

#buttonbg li:hover .icon {
    background-color: #d91e76;
}

#buttonbg li:hover .fb {
    background-color: #2d76b9;
    background-position: 0 2px;
}

#buttonbg li:hover .twit {
    background-color: #00A1DF;
    background-position: 0 -46px;
}

#buttonbg li:hover .google {
    background-color: #A70000;
    background-position: 0 -94px;
}

#buttonbg li:hover .pint {
    background-color: #C00;
    background-position: 0 -142px;
}

#buttonbg li:hover .linked {
    background-color: #005772;
    background-position: 0 -190px;
}

#buttonbg li:hover .deviant {
    background-color: #4C7A4A;
    background-position: 0 -238px;
}

#buttonbg li:hover .ytube {
    background-color: #A00;
    background-position: 0 -286px;
}

#buttonbg li:hover .rss {
    background-color: #EC5601;
    background-position: 0 -334px;
}

#buttonbg .icon:active {
    bottom: -2px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
}