galang capricorn: Memasang Widget Social Subscribe Minimalis With CS

Memasang Widget Social Subscribe Minimalis With CSS – lama rasanya tidak membahas widget social subscribe, dan pada tutorial kali ini kembali akan membahas widget media social subscribe yang sederhana menggunakan CSS. Widget social subscribe ini bisa diterapkan dengan mudah didalam area posting, tepatnya di bawah posting blog. Jika pada tutorial Cara Membuat Author Box Dibawah Posting Blogger widget social subscribe sudah sekaligus saya gabungkan pada widget tersebut, namun apabila ingin memasang widget social subscribe saja maka cara pemasangannya pun masih sama persis seperti pada tutorial tersebut. Untuk membuat widget social subscribe agar tampil di bawah posting blog caranya bisa mengikuti langkah-langkah yang ada dibawah. Seperti tampilannya yang sederhana, untuk membuat widget social subscribe ini juga cukup sederhana dan dengan warna-warna yang sudah sesuai dengan warna widget aslinya. Apabila ingin memasangnya kedalam blog, berikut tutorialnya untuk cara Memasang Widget Social Subscribe Minimalis With CSS di bawah posting blog.

1. Login akun blogger.
2. Selanjutnya klik Template dan pilih Edit HTML.
3. Copy kode berikut ini lalu paste di atas 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;
}

4. Copy lagi kode berikut ini kemudian paste dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='widgetsubscribe'>
<div class='titlesubscribe'>
<p>Subscribe</p></div>
<div class='subscribe-social'>
<div class='subscribefacebook'>
<a href='https://www.facebook.com/andestyle' target='_blank' title='Follow Me on Facebook'>Facebook</a>
</div>
<div class='subscribetwitter'>
<a href='https://twitter.com/rizkyandes' target='_blank' title='Follow Me on Twitter'>Twitter</a>
</div>
<div class='subscribegoogleplus'>
<a href='https://plus.google.com/104093787575230359634' target='_blank' title='Follow Me on Google+'>Google+</a>
</div>
<div class='subscriberss'>
<a href='http://feeds.feedburner.com/masandes' target='_blank' title='Subscribe on RSS'>RSS</a>
</div>
<div class="subscribeyoutube">
<a href="http://youtube.com/AndesJunkies" target="_blank" title='Subscribe on Youtube'>Youtube</a>
</div>
</div>
</div>
</b:if>

Keterangan:
Ganti tulisan warna merah dengan social ID masing-masing.

5. Langkah terkahir klik Simpan Template dan lihat hasilnya.

Demikian langkah-langkah tutorial cara Memasang Widget Social Subscribe Minimalis With CSS di bawah posting blog, sangat mudah tentunya.

Memasang Widget Social Subscribe Minimalis With CS

ADMIN