Membuat Tombol sosial versi 1 dengan sentuhan CSS.
Memang Belum terlalu Ekstrim Tampilanya ?
Tapi cukup bagus untuk Para Pemula,Atau Ingin Sekedar Dibagkan kepada Teman teman Anda. Dalam penerapannya Cukup Mudah sehingga anda tidak perlu menyimpan / mendownload kembali tempelate anda ! Berikut cara penerapanya :
1. Login ke Blogger
2. Pilih tempelate / Racangan
3. Untuk Menerapkanya anda Harus Teliti, Karena tampilan rancangan Blogger telah Diperbaharui 4. cari kode Berikut ]]></b:skin> ,untuk Memudahkan pencarian tekan CTRL+F
5.Masukan Kode Berikut ini Diatasnya :
<style gallery1993>
@import url(http://weloveiconfonts.com/api/?family=brandico|zocial);
*{ margin:0; padding:0; box-sizing:border-box; }
html{ padding:20px 0px; font-size:16px; line-height:1em; color:white; font-family:sans-serif; background-color:#222; }
a{ text-decoration:none; }
#social-links{
background:#add8e6;
width:200px;
height:auto;
margin:auto;
padding:20px;
}
#social-icons li{
display:block;
margin-bottom:10px;
padding:0px 0px 0px 10px;
font-size:1.75em;
line-height:1.75em;
list-style-type:none;
border-radius:8px;
}
#social-icons li:last-child{ margin:0; }
#social-icons li a{ display:block; }
.facebook{
background-color:#3B5998;
box-shadow:inset 0px 0px 3px 0px #879DCC, 0px 0px 3px 1px #132D63 ;
}
.twitter{
background-color:#4099ff;
box-shadow:inset 0px 0px 3px 0px #96C8FF, 0px 0px 3px 1px #1559A6 ;
}
.linkedin{
background-color:#4875B4;
box-shadow:inset 0px 0px 3px 0px #92B0DA, 0px 0px 3px 1px #173F75 ;
}
.forrst{
background-color:#778e72;
box-shadow:inset 0px 0px 3px 0px #B5C7B1, 0px 0px 3px 1px #2F5C25 ;
}
.github{
background-color:#999;
box-shadow:inset 0px 0px 3px 0px #C2C2C2, 0px 0px 3px 1px #4D4D4D ;
}
.instagram{
background-color:#4E433C;
box-shadow:inset 0px 0px 3px 0px #A79A91, 0px 0px 3px 1px #332014 ;
}
.facebook, .twitter, .linkedin, .forrst, .github, .instagram{
-moz-transition:all .2s ease-in;
-webkit-transition:all .2s ease-in;
-o-transition:all .2s ease-in;
transition:all .2s ease-in;
}
.facebook:hover{
box-shadow:inset 0px 0px 7px 0px #132D63;
background-color:#3E4E72;
}
.twitter:hover{
box-shadow:inset 0px 0px 7px 0px #1559A6;
background-color:#5487BF;
}
.linkedin:hover{
box-shadow:inset 0px 0px 7px 0px #173F75;
background-color:#4A6487;
}
.forrst:hover{
box-shadow:inset 0px 0px 7px 0px #2F5C25;
background-color:#5D6A5B;
}
.github:hover{
box-shadow:inset 0px 0px 7px 0px #4D4D4D;
background-color:#737373;
}
.instagram:hover{
box-shadow:inset 0px 0px 7px 0px #332014;
background-color:#473E38;
}
/*Transitions*/
[class*="brandico-"]:before, [class*="brandico-"]:after,
[class*="zocial-"]:before, [class*="zocial-"]:after{
-moz-transition:all .2s ease-in;
-webkit-transition:all .2s ease-in;
-o-transition:all .2s ease-in;
transition:all .2s ease-in;
-webkit-font-smoothing: subpixel-antialiased;
}
[class*="brandico-"]:before { font-family: 'brandico', sans-serif; }
[class*="brandico-"]:after{ vertical-align:middle; font-size:.5em; font-family:Helvetica; font-weight:bold; }
[class*="zocial-"]:before { font-family: 'zocial', sans-serif;}
[class*="zocial-"]:after{ vertical-align:middle; font-size:.5em; font-family:Helvetica; font-weight:bold; }
.zocial-facebook{
-moz-text-shadow: 0px 1px 2px #3E4E72;
-webkit-text-shadow: 0px 1px 2px #3E4E72;
-o-text-shadow: 0px 1px 2px #3E4E72;
text-shadow: 0px 1px 2px #3E4E72;
}
.zocial-facebook:before{
color:#879DCC;
}
.zocial-facebook:after{
content:"Facebook";
padding:0px 0px 0px 30px;
letter-spacing:1px;
color:#879DCC;
}
.zocial-twitter{
-moz-text-shadow: 0px 1px 2px #5487BF;
-webkit-text-shadow: 0px 1px 2px #5487BF;
-o-text-shadow: 0px 1px 2px #5487BF;
text-shadow: 0px 1px 2px #5487BF;
}
.zocial-twitter:before{ color:#96C8FF; }
.zocial-twitter:after{ content:"Twitter"; padding:0px 0px 0px 19px; letter-spacing:1px; color:#96C8FF; }
.zocial-linkedin{
-moz-text-shadow: 0px 1px 2px #4A6487;
-webkit-text-shadow: 0px 1px 2px #4A6487;
-o-text-shadow: 0px 1px 2px #4A6487;
text-shadow: 0px 1px 2px #4A6487;
}
.zocial-linkedin:before{
color:#92B0DA;
}
.zocial-linkedin:after{
content:"Linkedin";
padding:0px 0px 0px 23px;
letter-spacing:1px;
color:#92B0DA;
}
.zocial-forrst{
-moz-text-shadow: 0px 1px 2px #5D6A5B;
-webkit-text-shadow: 0px 1px 2px #5D6A5B;
-o-text-shadow: 0px 1px 2px #5D6A5B;
text-shadow: 0px 1px 2px #5D6A5B;
}
.zocial-forrst:before{
color:#B5C7B1;
}
.zocial-forrst:after{
content:"Forrst";
padding:0px 0px 0px 29px;
letter-spacing:1px;
color:#B5C7B1;
}
.brandico-github{
-moz-text-shadow: 0px 1px 2px #737373;
-webkit-text-shadow: 0px 1px 2px #737373;
-o-text-shadow: 0px 1px 2px #737373;
text-shadow: 0px 1px 2px #737373;
}
.brandico-github:before{ color:#C2C2C2; }
.brandico-github:after{ content:"Github"; padding:0px 0px 0px 21px; letter-spacing:1px; color:#C2C2C2; }
.brandica-instagram{
-moz-text-shadow: 0px 1px 2px #3B3430;
-webkit-text-shadow: 0px 1px 2px #3B3430;
-o-text-shadow: 0px 1px 2px #3B3430;
text-shadow: 0px 1px 2px #3B3430;
}
.brandico-instagram:before{
color:#A79A91;
}
.brandico-instagram:after{
content:"Instagram";
padding:0px 0px 0px 23px;
letter-spacing:1px;
color:#A79A91;
}
[class*="brandico-"]:hover, [class*="brandico-"]:hover:before, [class*="brandico-"]:hover:after,
[class*="zocial-"]:hover, [class*="zocial-"]:hover:before, [class*="zocial-"]:hover:after{
text-shadow:0px 0px 1px #333;
}
.zocial-facebook:hover:before, .zocial-facebook:hover:after, .zocial-facebook{
color:#132D63;
}
.zocial-twitter:hover:before, .zocial-twitter:hover:after{
color:#1559A6;
}
.zocial-linkedin:hover:before, .zocial-linkedin:hover:after{
color:#173F75;
}
.zocial-forrst:hover:before, .zocial-forrst:hover:after{
color:#2F5C25;
}
.brandico-github:hover:before, .brandico-github:hover:after{
color:#4D4D4D;
}
.brandico-instagram:hover:before, .brandico-instagram:hover:after{
color:#3B3430;
}
</style gallery1993>
Note : Background bisa diganti Sesuai Tampilan Blog anda Saaat ini. Cari kode yang berwarna merah diatas dan ganti sesuai keiinginan anda.
jika sudah benar pemasanganya lanjutkan ;
6. cari kode <body> Letakan dibawah nya ? 7. Letakan Kode berikut ini dibawah kode tersebut :
<div id="social-links">Atau anda ingin Menaruhnya ditempat lain ??
<ul id="social-icons">
<li class="facebook"><a class="zocial-facebook" href="#"></a></li>
<li class="twitter"><a class="zocial-twitter" href="#"></a></li>
<li class="linkedin"><a class="zocial-linkedin" href="#"></a></li>
<li class="forrst"><a class="zocial-forrst" href="#"></a></li>
<li class="github"><a class="brandico-github"href="#"></a></li>
<li class="instagram"><a class="brandico-instagram" href="#"></a></li>
</ul>
</div>
Misalnya pakai HTML java script , monggo ?
silahkan saja,asal jangan ngawur !!hehe..
Jika Belum berhasil, atau ada masalah silahkan berkomentar !
Karena sudah saya coba ,dan hasilnya seperti screenshot diatas.
Sekian untuk tutorial saya Kali ini,semoga dapatMembantu anda terimakasih.
Posting Komentar