Membuat Social Media Keren Beserta Jumlah Follower Keren

Tutorial kali ini saya share tentang Cara Membuat Social Media Keren dan Jumlah Follower di Blog. Gimana cara pasangnya? silahkan ikuti tuto...

Tutorial kali ini saya share tentang Cara Membuat Social Media Keren dan Jumlah Follower di Blog. Gimana cara pasangnya? silahkan ikuti tutorial berikut ini. Untuk live demo silahkan lihat gambar di bawah ini.

Social Media Keren

<style>
.btrix_widget{
margin-bottom:20px;
overflow:hidden;
clear: both;
border: 1px solid black;
width: 300px;
}
.btrix_widget li{
line-height:15px;
float:left;
width:75px;
height:87px;
padding:7px 0 10px;
-moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear;
list-style:none;
}
.btrix_widget li a{display:block;text-align:center;}
.btrix_widget li a strong{ background:url(http://4.bp.blogspot.com/-DHkZX7Y0FXs/UVvNYBepQVI/AAAAAAAAAc8/_EA1lwrFxqA/s1600/bt-icons.png) no-repeat;display:block; opacity:0.7; height:51px; margin-bottom:5px; -webkit-transition: opacity ease-in-out 0.4s;  -moz-transition: opacity ease-in-out 0.4s;  -o-transition: opacity ease-in-out 0.4s;  transition: opacity ease-in-out 0.4s;}
.btrix_widget li a:hover strong{opacity:1;}
.btrix_widget li:hover a{text-decoration: none;}
.btrix_widget li.rss-subscribers a strong{ background-position:center -1084px ;}
.btrix_widget li.rss-subscribers a:hover strong{ background-position:center -1139px ;}
.btrix_widget li.rss-subscribers span{display:block;font-size:21px;}
.btrix_widget li.facebook-fans a strong { background-position:center -1192px ;}
.btrix_widget li.facebook-fans a:hover strong { background-position:center -1246px ;}
.btrix_widget li.twitter-followers a strong{ background-position:center -868px;}
.btrix_widget li.twitter-followers a:hover strong{ background-position:center -922px;}
.btrix_widget li.youtube-subs a strong{ background-position:center -976px;}
.btrix_widget li.youtube-subs a:hover strong{ background-position:center -1030px;}
.btrix_widget li span{display:block;font-size:21px;}
.btrix_widget li a small{color:#777;}
</style>
<br/>
<div class="widget btrix_widget">
    <ul style="margin-left: -40px;">
        <center>
        <h1>Connect with Us</h1>
        </center>
        <li class="rss-subscribers">
            <a href="http://feeds.feedburner.com/masdabang">
            <strong></strong>
            <span>548</span>
            <small>RSS Feed</small>
            </a>
        </li>
        <li class="twitter-followers">
            <a href="https://twitter.com/02IQb4L">
            <strong></strong>
            <span>5,245</span>
            <small>Followers</small>
            </a>
        </li>
        <li class="facebook-fans">
            <a href="https://www.facebook.com/muhammadiqbalBlog">
            <strong></strong>
            <span>2,298</span>
            <small>Fans</small>
            </a>
        </li>
        <li class="youtube-subs">
            <a href="https://www.youtube.com/channel/UCHHIUtMvcCoCAz9_rNl-DIQ">
            <strong></strong>
            <span>1,202</span>
            <small>Subscribers</small>
            </a>
        </li>
    </ul>
</div>

Cara Pemasangannya :

Login ke accunt blogger sobat.
Pilih rancangan atau tatak letak kemudian, Klik tambah gadget.
Pilih opsi HTML/Javascript
Lalu copy-pastekan salah saatu kode dibawah ini.
Keterangan :
1. Silahkan ganti http://feeds.feedburner.com/masdabang dengan URL Feedburner Sobat
2. Silahkan ganti https://twitter.com/02IQb4L dengan URL Twitter Sobat
3. Silahkan ganti https://www.facebook.com/muhammadiqbalBlog dengan URL Fanpage Sobat
4. Silahkan ganti https://www.youtube.com/channel/UCHHIUtMvcCoCAz9_rNl-DIQ dengan URL Youtube Sobat 

Atau Pilih Tampilan keren seperti di bawah ini, cara pemasangannya sama seperti yang di atas.

<style>
.rss-mbt {
    background: url(https://lh5.googleusercontent.com/_u4rBCfM4eII/TXM3kMMZ6iI/AAAAAAAABWs/mvD4oZKpcYA/RSS1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.twitter-mbt {
    background: url(https://lh4.googleusercontent.com/_u4rBCfM4eII/TXM4FmiiE3I/AAAAAAAABW0/aXFjV0nLT7Q/TWITTER1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.facebook-mbt {
    background: url(https://lh3.googleusercontent.com/_u4rBCfM4eII/TXM3FmsFCZI/AAAAAAAABWg/2fp5bNd5HWY/FACEBOOK1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}
.follower-rss, .follower-twitter, .follower-facebook {
    font-family: Georgia,  sans-serif, Times;
    font-size: 1.1em;
        font-style:italic;
        color:#289728;
}
.follower-rss span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#FFB93C;    
}
.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#6DB6E6;    
}
.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#3889BA;    
}
</style>
<div class="rss-mbt">
    <div class="follower-rss">
        <span>515</span> loyal readers
    </div>
    <a href="ADD RSS FEED URL HERE" rel="nofollow">RSS feed</a> | <a href="ADD RSS EMAIL FEED URL HERE" target="_blank" rel="nofollow">E-mail</a>
</div>
<div class="twitter-mbt">
    <div class="follower-twitter">
        <span>1058</span> followers
    </div>
    <a href="ADD YOUR TWITTER URL HERE" target="_blank" rel="nofollow" title="I definitely follow you back">Follow us on Twitter!</a>
</div>
<div class="facebook-mbt">
    <div class="follower-facebook">
        <span>260</span> followers
    </div>
    <a href="ADD YOUR FACEBOOK URL HERE" target="_blank" rel="nofollow">Join us on Facebook!</a>
</div>

Keterangan Silahkan ganti Tulisan URL yang di beri warna berbeda dengan URL MEDIA SOCIAL sobat.

Terakhir klik save dan selesai. Demikianlah artikel tentang Membuat Social Media Keren Beserta Jumlah Follower Keren