Widget Social Subscription Responsive

Baca Juga

Responsive Social Subscription Widget - Ada banyak cara sederhana untuk menampilkan Widget Berlangganan untuk sebuah blog. Salah satunya  dengan memasang Widget Social Subscription pada bagian footer.

Tidak bisa dipungkiri bahwa jejaring sosial mempunyai peranan penting dalam meningkatkan lalu lintas visitor yang lumayan signifikan, namun dalam memilih widget kita harus menyesuaikanya dengan apa yang kita butuhkan.

Nah bagi yang sedang mencari Widget Social Subscription untuk blog Responsive sepertinya widget ini bisa dijadaikan referensi karena telah mendukung tampilan mobile. Widget ini mirip dengan widget Metro style dengan beberapa perubahan sehingga terlihat lebih elegan.

Cara memasangnya pada Blogger

• Login ke Blogger
• Masuk ke bagian Layout / Tata Letak
• Klik Tambahkan Gadget.
• Pilih HTML/Javascript.
• Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

<style scoped='scoped'>
.Mbt-Social-metro { 
    width: 960px; 
    float: left; 
    margin: 0; 
    padding: 1em 0; 
}
.Mbt-Social-metro ul { 
    margin: 0; 
    padding: 0; 
}
.Mbt-Social-metro ul li { 
    list-style: none; 
    list-style-type: none; 
    padding: 0; 
    text-transform: none; 
    margin: 0; 
    float: left; 
    display: inline-block; 
    width: 20%; 
}
.Mbt-Social-metro ul li a { 
    font-size: 80%; 
    color: #fff!important; 
    display: block; 
}
.Mbt-Social-metro ul li a:hover { 
    color: #000!important; 
    background-color: #999; 
    text-decoration: none; 
}
idc-scoail ul li a, ul li a:hover { 
    -moz-transition: all 0.3s ease-in-out; 
    transition: all 0.3s ease-in-out; 
    -webkit-transition: all 0.3s ease-in-out; 
}
.Mbt-Social-metro ul li .rss { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPIrQdpCTEeQ_3dFrP3atXukpHJ7a3C9mZBrcV4y6C48wF5pRyWwx2vOXBxDd7UKi-sVwTlj6wjTRr34SYTJ8ZrmeExuX7fvaYqL7CDaYeZGWohGtE3bBRD-u0c_eSsgTuTH8jXK3QKU9I/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.Mbt-Social-metro ul li .twitter { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ND6deGbSQqxljSJwZtrW45Q5NI4cci3MneFNNcu5UbvRt7v9DKmUBblFMtLKWLMW9C8v86SIUu2rpoEvd446ecLNsuRCfiCR50RVRDQlpjbY_AZEkd7JtgFjoxXxCiXuAnRXxVwS5MiH/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.Mbt-Social-metro ul li .facebook { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdIqpXJ9ZcyrpYhwQ4UxFuf82lseoQpDQXrnCy1o5F-KuGOe_luGb_0oEV55P-Krjpg4ahll9w7ROXrMzQnTnFpdxepWzfCxiBC8qYgqUQhaCbUT3253RP6Clo58ntKghpo91qGJAh5NdV/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.Mbt-Social-metro ul li .google { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivheS5SGc3SIprrqMbgD91iR9a66EUntJr2E9IOKeCnd1d7AIewmZCoK6dJ43kA2VJQpBHAwOVrkQUlnFvS5VF-YX0zUlHWka-VD6ZoP9QgQwtanBPnu8BZX0gLqeaoaAJgjqNL5uv_c5O/s1600/google.png") no-repeat scroll 10px center #D44937; 
    background-size: 20px; 
    padding: 10px 50px; 
}
.Mbt-Social-metro ul li .linkedin { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0z_HU1C3StxI58WoG5irYZpML8XT0MhE9XrLQhy2wM6GpmGoSHv20l4q1WEP4zvXU8iIOfPQ7cytDutsFNvdkefM-QX8QglU8JK-X2B_iwyESVgIzTFoSg91-cjbvgaHfkZLQsbiVidw7/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; 
    background-size: 20px; 
    padding: 10px 50px; 
}
/* width of 768px */ 
@media only screen and (min-width: 768px) and (max-width: 959px) { 
    .Mbt-Social-metro ul li { 
        width: 50%; 
    }; 
}
/* width of 480px */ 
@media only screen and (min-width: 480px) and (max-width: 767px) { 
    .Mbt-Social-metro ul li { 
        width: 50%; 
    }; 
}
/* width of 320px */ 
@media only screen and (max-width: 480px) { 
    .Mbt-Social-metro ul li { 
        width: 100%; 
    }; 
}
</style>
<div class='Mbt-Social-metro'> 
<ul> 
<li><a class='rss' href='http://feeds.feedburner.com/PenghuniDumay' title="Subscribe our Feed">Subscribe our Feed</a></li> 
<li><a class='twitter' href='https://twitter.com/penghuni_dumay' title="FFollow me on Twitter">Follow me on Twitter</a></li> 
<li><a class='facebook' href='https://www.facebook.com/pages/Penghuni-Dumay/219976191476398' title="Find me on Facebook">Find me on Facebook</a></li> 
<li><a class='google' href='https://plus.google.com/u/0/112006181062808322643' title="Join me on Google">Join me on Google+</a></li> 
<li><a class='linkedin' href='http://in.linkedin.com' title="Connect with LinkedIn">Connect with LinkedIn</a></li> 
</ul> 
</div>

Keterangan :
Sesuaikan yang berwarna biru

Jika sobat Dumay tidak memiliki kolom widget tunggal pada footer silahkan baca artikel Cara Membuat Kolom Baru Dibawah Footer setelah itu seret widget pada kolom yang telah dibuat.

Selesai dan lihat hasilnya.sekian semoga bermanfaat.