Membuat Widget Social Subcription Bergaya Wordpress

Kali ini saya memiliki sebuah widget yang bagus dan menarik pula loh, widget yang bisa disebut dengan Social subcription ini memungkinkan kamu melihat jumlah followe twitter kamu, fans facebook kamu serta para pembaca setia kamu yang sudah berlangganan artikel kamu. Kira-kira tampilannya seperti diatas deh. Langsung saja caranya bisa kamu lihat disini:

1. Login ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu salin kode HTML/Javascript di bawah ini.

<style>
.rss-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEeke8M0VYPgEeZhfjrCvKSQKDCIAz1uiOzJmU3YszS14oVeDN1fZ_EZmvalRvfqvxmIKSmV8MoYs-rVfT9FGmLuYQfS9fLab_IGTBZC2cxe3hR87v8hBj-zfjgrmHuRXXevzD9ISWLYQ/s1600/rss+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 5px;
}

.rss-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvL42W3oe6R9YSUoNmt0gId-skJbVOx3k170edEIVPqQcLEv8PsdIyW5SuaqU566yZ_8iEE1IcWBKTXng9sco2Vq-jE_ICynCz5sDduir1gSQo_4To6dlDikDnaKdBmwejntlYh_CEvp4/s1600/rss.png) no-repeat;
}

.twitter-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjItAdw36grC7FOFMS6RYs0_jRxjuOnT1rtpMXAVwilNzqebqh5L2EWlSFa24d4K00k-lRX6k6rj0kudIjAjHumCd7IHhcX3uk9DLCFyLT1mNymoYlxmD9nSoT3vFMS38z-WTotrd1msY/s1600/twitter.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}

.twitter-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsWTSouyDLzxVuOpx7HkS62fURnKIMyrgcOIz3xMqOmNfc_YzjCibhkDV7oYYP__MzloHE7Sb0-3BFTFjTaCy1jkUHS_zy8ExdCRejO3hlr-tTffn9B8d16cmWavstFTcuH6Rw7n2D0po/s1600/twitter.png) no-repeat;
}

.facebook-hb {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeh9lHS69kEaywyAhS5Em4ZMbZkjlyk38UCwC7YuYamDIbQqLzHPy-OD368IUvlSO1kemYEb-9N0PqtLx88z3LH7MrcdbCJTXiE13eJdcDcLxBSgTjQ-2P_HOuJel-E52lggFi2tjVSjU/s1600/fb+sepia.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 10px;
}

.facebook-hb:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmF6E8_F7hVX71md5yNcxwMsXBXnsNrkHv_UBSunxBgkAv47Yae3-Ve1NBYnHozO9cn_8qp1GXNzURkwIehowQTYb_PfDfDFzOPk7VlxPxltMohyphenhyphen82IP3xV7kpfenDxOidlyaz6EWqSXg/s1600/facebook-logo.png) no-repeat;
}

.follower-rss, .follower-twitter, .follower-facebook {
    font-family: Georgia,  sans-serif, Times;
    font-size: 1.5em;
    font-style: italic;
    color: #D3C5B1;
    padding-top: 05px;
    text-shadow: 1px 1px #B2A99D;
}

.follower-rss a, .follower-twitter a, .follower-facebook a {
    color: #AA9C89;
}

.follower-rss span {
    font-size: 2.2em;
    font-weight: bold;
    font-style: italic;
}

.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
    font-style: italic;
}

.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
    font-style: italic;
}

</style>

<div class='rss-hb'>
    <div class='follower-rss'>
        <span>
            <a href='MASUKKAN-URL-FEEDBURNER-KAMU-DISINI'>MASUKKAN-JUMLAH-PEMBACA-FEEDBURNER-KAMU-DISINI</a>
        </span>loyal readers</div>
</div>
<div class='twitter-hb'>
    <div class='follower-twitter'>
        <span>
            <a href='MASUKKAN-URL-TWITTER-KAMU-DISINI' rel="nofollow">MASUKKAN-JUMLAH-FOLLOWER-TWITTER-KAMU-DISINI</a>
        </span>followers</div>
</div>
<div class='facebook-hb'>
    <div class='follower-facebook'>
        <span>
            <a href='MASUKKAN-URL-FANPAGE-FACEBOOK-KAMU-DISINI'>MASUKKAN-JUMLAH-FANS-FACEBOOK-KAMU-DISINI</a>
        </span>fans</div>
</div>

3. Simpan dan lihat hasilnya, cantik bukan sob ? :)

Postingan Terkait:

Posted in: Blogger,Widget