November 08, 2012

Widget Social Share Counter v2 Untuk Blogger

Hai Sobat Blogger !!!
Ne widget social share counter yang didesain keren untuk Blogger, nahh kali ini saya memposting versi 2nya sobat. Social share counter ini tidak kalah keren dengan versi pertamanya sobat. Jadi nunggu apalagi silahkan dicoba.
Social Share Counter v2
Langkah :
  1. Buka akun Blogger Anda
  2. Masuk ke Menu edit HTML, jangan lupa centang Expand Template Widget
  3. Cari kode dibawah ini :
]]></b:skin>
    4.  Pastekan kode dibawah ini, diatas pada kode diatas :
#socialbox, #socialbox ul, #socialbox ul li, #socialbox ul li p, #socialbox ul li p img, #socialbox ul li p span, #socialbox ul li p a{
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}
#socialbox{
    color: #768a96;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
    #socialbox ul{
        background: url(http://2.bp.blogspot.com/-7EWetyyZxfM/UBKl601O4jI/AAAAAAAACEY/u8PmF-xubfM/s320/john.png) repeat;
        border: 1px solid #d8dcdf !important;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0px 2px 4px #dfe4e7;
        -moz-box-shadow: 0px 2px 4px #dfe4e7;
        box-shadow: 0px 2px 4px #dfe4e7;
        list-style: none;
        margin: 0 !important;
        padding: 0;
    }
        #socialbox ul li{
            background-image: none;
            border-bottom: 1px solid #d8dcdf;
            height: 59px;
            list-style: none;
        }
        #socialbox ul li:last-child{
            border-bottom: none;
        }
            #socialbox ul li p{
                padding: 19px 9px 0 9px;
            }
                #socialbox ul li p img{
                    border: none;
                    margin-right: 10px;
                    position: relative;
                    top: 3px;
                    vertical-align: baseline;
                }
                #socialbox ul li p span{
                    color: #425763;
                    font-weight: bold;
                }
                #socialbox ul li p a.socialbox-button{
                    background: url(http://2.bp.blogspot.com/-7EWetyyZxfM/UBKl601O4jI/AAAAAAAACEY/u8PmF-xubfM/s320/john.png) no-repeat;
                    border: 1px solid #d8dcdf;
                    -webkit-border-radius: 3px;
                    -moz-border-radius: 3px;
                    border-radius: 3px;
                    color: #425763;
                    float: right;
                    font-size: 11px;
                    font-weight: bold;
                    line-height: 11px;
                    padding: 6px 10px;
                    position: relative;
                    text-decoration: none;
                    text-transform: uppercase;
                    top: -2px;
                }
                #socialbox ul li p a.socialbox-button:hover{
                    background: url(http://2.bp.blogspot.com/-7EWetyyZxfM/UBKl601O4jI/AAAAAAAACEY/u8PmF-xubfM/s320/john.png) 0 -27px no-repeat;
                }
                #socialbox ul li p a.socialbox-button:active{
                    background: url(http://2.bp.blogspot.com/-7EWetyyZxfM/UBKl601O4jI/AAAAAAAACEY/u8PmF-xubfM/s320/john.png) 0 -54px no-repeat;
                }
    5.  Save Template Anda
    6.  Sekarang, masuk ke menu Layout > Add Gadget > HTML/Javascript, pastekan kode dibawah ini :
<div id="socialbox">
    <ul>
        <li>
            <p>
                <a href="http://www.facebook.com/Username Facebook Disini" title="Like on Facebook" target="_blank"><img src="http://3.bp.blogspot.com/-6LzmGolIt-E/UBJAsxjTYGI/AAAAAAAACDA/zxNNt_gXZus/s320/facebook_16.png" alt="Facebook"></a><span>40,811</span> Fans                            </p>
        </li>
        <li>
            <p>
                <a href="http://twitter.com/Username Twitter Disini" title="Follow on Twitter" target="_blank"><img src="http://3.bp.blogspot.com/-w6hW1qtRhvE/UBI3HdTZMdI/AAAAAAAACBk/HVT1i3QJP_M/s320/twitter_16.png" alt="Twitter"></a><span>53,878</span> Followers                            </p>
        </li>
        <li>
            <p>
                <a href="http://www.youtube.com/Username Youtube Disini" title="Subscribe to Youtube Channel" target="_blank"><img src="http://3.bp.blogspot.com/-6xTKrCnZfaA/UBI3HpOAfgI/AAAAAAAACBw/WKQOOBjAsZU/s320/youtube_16.png" alt="YouTube"></a><span>12,659</span> Subscribers                            </p>
        </li>
        <li>
            <p>
                <a href="http://dribbble.com/Username Dribbble Disini" title="Follow on Dribbble" target="_blank"><img src="http://1.bp.blogspot.com/-R_Ap3abAHBs/UBJAtILEKcI/AAAAAAAACDM/mrnKJ50YqHk/s320/dribbble_16.png" alt="Dribbble"></a><span>1,579</span> Followers                            </p>
        </li>
        <li>
            <p>
                <a href="http://feeds.feedburner.com/ID Feedburner Disini" title="Subscribe to Feed" target="_blank"><img src="http://1.bp.blogspot.com/-BQaQ0GjENWQ/UBI3HPlwPDI/AAAAAAAACBY/i6-6hIS8qgQ/s320/feedburner_16.png" alt="Feedburner"></a><span>104,027</span> Subscribers                            </p>
        </li>
    </ul>
</div>
    7.  Ganti kode merah diatas dengan profil social sobat.

Semoga bermanfaat, terima kasih.

Related Posts

Widget Social Share Counter v2 Untuk Blogger
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

Show comments
Hide comments

Jika Ada Pertanyaan,Kritik,Saran,Dsb ...
Tolong Di Comment Di Kotak Komentar Yg tersedia,..
Bagi Anda Yg Ber-Komentar,..
Tolong Berkomentarlah Yg Baik,..
Karna Kalau Berbau SARA,Jorok,Mesum,Atau Porno
Akan Saya Jadikan SPAM Atau Saya HAPUS,.. !!!
(Gomen Buat Anonymous ID Saya Urus Belakangan)

NB : Klik Notify Me Dikanan Bawah Ini Biar Ntar Kalo Ane Sudah Balas Bisa Cepat Kalian Konfirmasi
Arigatou ^_^
Bery HackeR™