Cara Membuat Widget Subscribe Sosial Media Responsive

Cara Membuat Widget Subscribe Sosial Media Responsive - Selamat datang di Imamkunblog.com kali ini saya membahas lagi seputar Tutorial Blogger lagi yaitu cara Membuat Tombol Subscribe Sosial Media di Blogger.

Widget kali ini sangatlah responsive, ringan dan fast loading, jadi tidak bakalan memeprlambat loading blog sobat dan kali ini diterapkan pada area bawah postingan blogger. Jadi visitor dapat mensubscribe sosial media sobat apabila blog sobat dianggap bermanfaat dan bagus.

Widget sosial media ini sangat penuh akan warna-warni yang dapat memukau dan tampilan yang keren dan didesain se baik mungkin. Widget Sosial Subscribe ini menggunakan CSS yang sangat ringan.

Nah, jika sobat tertarik ingin memasangnya sobat bisa mengikuti langkah-langkah pemasangannya dibawah ini dan saya sarankan ikuti langkahnya dengan teliti supaya tidak terjadi kesalahan pada saat pemasangannya nanti.

Dan untuk DEMO nya saya sudah persiapkan pada akhir artikel ini, jadi sebelum sobat berpikiran ingin memasangnya sobat bisa pertimbangkan terlebih dahulu apakah cocok buat sobat atau tidak dengan melihat demonya.

Cara Membuat Widget Subscribe Sosial Media Responsive

Pertama sobat login ke Blogger.com jika sudah masuk ke dasboard blogger sobat pilih Theme/Template > Edit HTML.

Kemudian cari kode ]]></b:skin> dan jika sudah ketemu copy dan pastekan kode dibawah ini tepat diatas kode ]]></b:skin>

.widgetsubscribe {
position: relative;
margin: 15px auto;
padding: 8px 3px;
width:500px;
border: 1px solid #52e052;
background: #e9fbe9;
}
.titlesubscribe p{
background: #52e052;
width:73px;
left: -12px;
margin-top: 0px;
font: bold 14px Tahoma;
padding: 5px 0px 6px 10px;
position: relative;
float:left;
}
.titlesubscribe :before {
content: ' ';
position: absolute;
bottom: -8px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 0 8px;
border-color: #55B05A transparent transparent transparent;
}
.titlesubscribe :after {
content: ' ';
position: absolute;
top: -8px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent #52A435 transparent;
}
.subscribe-social{
overflow: hidden;
}
.subscribe-social a{
display: block;
color: #fff !important;
font: bold 12px Tahoma;
text-align: center;
text-decoration: none;
transition: border-radius 0.50s;
padding: 7px 0px;
}
.subscribe-social a:hover{
border-radius: 10px 0px;
}
.subscribe-social div{
float: left;
margin-right: 5px;
width: 79px;
}
.subscribe-social .subscribefacebook a{
background: #3B5999;
}
.subscribe-social .subscribefacebook a:hover{
background: #52e052;
}
.subscribe-social .subscribetwitter a{
background: #01BBF6;
}
.subscribe-social .subscribetwitter a:hover{
background: #52e052;
}
.subscribe-social .subscribegoogleplus a{
background: #D54135;
}
.subscribe-social .subscribegoogleplus a:hover{
background: #52e052;
}
.subscribe-social .subscriberss a{
background: #fb8938;
}
.subscribe-social .subscriberss a:hover{
background: #52e052;
}
.subscribe-social .subscribeyoutube a{
background: #ff0000;
}
.subscribe-social .subscribeyoutube a:hover{
background: #52e052;
}
.subscribe-social .subscribeyoutube{
margin-right: 0;
}

Jika sudah maka selanjutnya sobat cari lagi kode <data:post.body/> dan pastekan kode dibawah ini tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widgetsubscribe'>
<div class='titlesubscribe'>
<p>Subscribe</p></div>
<div class='subscribe-social'>
<div class='subscribefacebook'>
<a href='LINK SOSIAL  MEDIA SOBAT' target='_blank' title='Follow Me on Facebook'>Facebook</a>
</div>
<div class='subscribetwitter'>
<a href='LINK SOSIAL  MEDIA SOBAT' target='_blank' title='Follow Me on Twitter'>Twitter</a>
</div>
<div class='subscriberss'>
<a href='LINK SOSIAL  MEDIA SOBAT' target='_blank' title='Subscribe on RSS'>RSS</a>
</div>
<div class="subscribeyoutube">
<a href="LINK SOSIAL  MEDIA SOBAT" target="_blank" title='Subscribe on Youtube'>Youtube</a>
</div>
</div>
</div>
</b:if>

Sobat ganti "LINK SOSIAL MEDIA SOBAT" dengan link sosial media sobat Seperti Facebook, twitter, RSS ataupun Youtube.

Dan langkah terakhir adalah simpan template. Untuk melihat demo sobat bisa kunjungi hasil demonya dibawah ini.

Download

Demikianlah Cara Membuat Widget Subscribe Sosial Media di Blogger. Jika ada mengalami masalah pemasangan sobat dapat komentar dibawah dan semoga bermanfaat.

Happy Blogging!!