Buat Widget Social Share Counter di Blogger

Tweet

D-Copy Blog | Tombol share sosial benar-benar sangat menarik untuk menciptakan tetapi terutama jika Anda menambahkan tombol berbagi sosial yang menarik maka cara terbaik untuk mendapatkan pelanggan yang lebih banyak. Dalam topik ini telah menciptakan sebuah gambar dengan beberapa efek avatar dengan menggunakan Photoshop dan juga menambahkan beberapa efek css untuk widget ini.

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 :

*------DCopy Social Share-------*
#DC-social-layout{
    min-width:200px;
    border:5px solid #E2E2E2;
}
#DC-social-layout h3 {
    font-family:Georgia, "Times New Roman", Times, serif !important;
    background: none repeat scroll 0 0 #DBDBDB;
    border: 1px solid #CCCCCC;
    color: #666666;
    font-weight: normal;
    line-height: 1.8em !important;
    margin: 0 auto;
    text-align:center;
}
a.subscribeSidebarBox {
    border: medium none;
    cursor: pointer;
    display: block;
    height: 55px;
    position: relative;
    min-width: 200px;
}
#sidebarSubscribe .sds_snc_icon {
    background-image: url(http://3.bp.blogspot.com/-4rlLPMFze5I/UBYM4WuhmrI/AAAAAAAACT0/Aasm68clEu4/s1600/social_icon_column_user.png);
    background-repeat:no-repeat scroll 0 0 transparent;
    height: 50px;
    width: 50px;
}
#sidebarSubscribe span {
    color: #6E6E6E;
    display: block;
    padding: 1px;
    position: absolute;
    text-shadow: 1px 1px 0 white;
}
#sidebarSubscribe .title {
    font-family:Helvetica, sans-serif;
    font-size: 10px; font-weight:bold;
    left: 65px;
    top: 8px;
}
#sidebarSubscribe .sds_snc_count {
    font-size: 20px;
    font-weight: bold;
    left: 65px;
    top: 23px;
}
#subscriberRSS .sds_snc_icon { background-position: -300px 0px; }
#sidebarFaceBook .sds_snc_icon { background-position: 0px 0px; }
#followTwitter .sds_snc_icon { background-position: -250px 0; }
#flickerPhoto .sds_snc_icon { background-position: -50px 0; }
#youtubeSubscribers .sds_snc_icon { background-position: -100px 0; }
#vimoVideos .sds_snc_icon { background-position: -150px 0; }
#subscribeEmail .sds_snc_icon { background-position: -200px 0; }
#githubSubscribe .sds_snc_icon { background-position: -600px 0; }
.dc_snc_compact {
    font-family:Georgia, "Times New Roman", Times, serif !important;
    min-width:200px;
    border:1px solid #CCCCCC;
    text-align:center;
}
.dc_snc_compact h3 {
    background: none repeat scroll 0 0 #DBDBDB;
    border: 1px solid #CCCCCC;
    color: #444444; font-weight: normal; line-height: 1.8em !important;
    margin: 0; padding: 0 0 0 7px;
    text-align:center;
}
.dc_snc_compact ul.sds_snc_compact_ul {
    list-style: none outside none !important;
    margin:0; padding:0;
    min-width:inherit;
    text-align:center;
    line-height:15px !important;
}
.dc_snc_compact ul.sds_snc_compact_ul li {
    float:left;
    list-style: none outside none !important;
    margin:0 0 5px 0px !important;
    padding:0 0 5px 3px !important;
    text-align: center;
    font-size:10px;
    width:90px !important;
    border:0px solid #CCC;
    height:80px !important;
}

.dc_snc_compact ul.sds_snc_compact_ul li a.compact_a:hover
{
    background: none repeat scroll 0 0 !important;  text-decoration:none !important;
}
.dc_snc_compact ul.sds_snc_compact_ul li .sds_snc_icon {
    display:block;
    background-image: url(http://3.bp.blogspot.com/-4rlLPMFze5I/UBYM4WuhmrI/AAAAAAAACT0/Aasm68clEu4/s1600/social_icon_column_user.png);
    background-repeat:no-repeat scroll 0 0 transparent;
    height: 50px;
    width: 48px;
    cursor:pointer;
    margin-left:20px;
}
.dc_snc_compact a.compact_a .sds_snc_count {
    font-family:Arial, Helvetica, sans-serif; color:#666666;
    display:block;
}
.dc_snc_compact a.compact_a .sds_snc_count:hover
{
    color:#FF0000; cursor:pointer; font-size:11px;
}
*------End DCopy Social Share-------*

    5.  Save Template Anda
    6.  Masuk ke Menu Layout > Add Gadget > HTML/Javascript
    7. Pastekan kode dibawah ini :

<div id="DC-social-layout"><div class="sidebarContainer" id="sidebarSubscribe"><a href="http://www.facebook.com/pages/ID Facebook Anda" target="_blank" class="subscribeSidebarBox" id="sidebarFaceBook">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Fans On Facebook</span>
                        <span class="sds_snc_count">49</span>
                    </a><a href="http://twitter.com/ID Twitter Anda" target="_blank" class="subscribeSidebarBox" id="followTwitter">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Twitter Followers</span>
                        <span class="sds_snc_count">28</span>
                    </a><a href="http://feeds.feedburner.com/ID Feedburner Anda" target="_blank" class="subscribeSidebarBox" id="subscriberRSS">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Rss Subscribers</span>
                        <span class="sds_snc_count">90</span>
                    </a><a href="http://www.youtube.com/ID Youtube Anda" target="_blank" class="subscribeSidebarBox" id="youtubeSubscribers">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Youtube  Subscribers</span>
                        <span class="sds_snc_count">2</span>
                    </a><a target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=ID Feed Burner Anda&amp;loc=en_US" class="subscribeSidebarBox" id="subscribeEmail">
                        <span class="sds_snc_icon"></span>
                        <span class="title">Subscribe For Updates</span>
                        <span class="sds_snc_count">Email</span>
                    </a> <div class="clear"></div>
                </div>
            </div>

     8.  Ganti ID Anda pada kode-kode yang diwarnai biru diatas.
     9.  Save Template Anda.