Diberdayakan oleh Blogger.

Widget share sosial media counter V.2

Zaidan-halo sobat kembali ane share widget2 keren nih yg mau ane bawain berupa sosial media,dan yg ini merupakan versi kedua,berikut screenshotnya
Nah langsung aja deh
  • masuk blogger
  • ambil template
  • edit html
  • cari code ]]></b:skin>
  • kemdian copy code dibawah tepat di atas ]]></b:skin>
 #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;
                }
Nah simpan template
  • skrg ambil tata letak-tambah widget-HTML/javaScript-masukan code 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>
 Kemudian simpan
notes:silahkan ubah yg berwarna merah menjadi ID/USERNAME masing2

semoga bermanfaat,makasih

8 komentar:

Unknown mengatakan...

wah mntapp sob.. ada total"nya .. :D

Anonim mengatakan...

keren gann...

Anonim mengatakan...

izin pratek dehh keren tuh sosmed nyaa

Admin mengatakan...

iya keren lagi :)

Anonim mengatakan...

izin praktek sobat....


Kunjungan Baliknya....

Mahdianto mengatakan...

pengen praktekin, tapi udah kebanyakan widgetnya

Admin mengatakan...

haha coba aja mas di blog lain

Anonim mengatakan...

mantap gan
salam blogwalking

Posting Komentar

-saya akan berusaha untuk selalu merespon pertanyaan anda
-diharapkan memakai kata baku jika berkomentar
-ingat berkomentarlah yang bermutu , revelan , dan tidak promosi dan spam