Membuat Social Icon Keren Spesial Gratis

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Lama gak sempet buat postingan baru soalnya sibuk banget gan. Nah kebetulan sekarang ada waktu jadi gw pengen share yang keren ni gan, pasti loe demen. Pada kesempatan kali ini gw pengen share bagaimana cara membuat social icon keren hanya dengan CSS gan.

Contoh social iconnya seperti yang ada di blog ini, kalo di sentuh ada efek slidingnya gan. Cuma info aja social icon ini murni CSS gak pake gambar icon beneran gan. Social icon keren ini hasil karya gw sendiri, dan sempat pengen gw pake buat guest post di blog laen tapi gak jadi gan.

Kalo loe tertarik dengan social icon ini silahkan aja disimak langsung cara membuatnya gan. Cara buatnya gampang, tinggal nambahin widget aja di blog gan. Tanpa banyak basa-basi lagi, langsung kita praktekan aja gan.

Membuat Social Icon Keren Hanya Dengan CSS

• Pertama loe masuk ke Blogger lalu pilih Layout dan klik Add a Gadget terus tambahkan widget HTML/JavaScript gan. Lalu copy dan pastein kode yang gw kasi di bawah ini di widget baru itu gan.

• Kalo kalian mau pasang di Wordpress langkahnya sama, tinggal nambahin Text Widget ke sidebar blog Wordpressnya, dan copy paste kode dibawah ini gan.
  

<!-- Social Icon Keren Dengan CSS Efek Sliding by http://www.seociyus.blogspot.com/ -->

<style type="text/css">

/*start Facebook Icon*/
#SC a.sos1{
opacity:0.7;
margin:5px 5px 20px 20px;
padding:7px 5px 5px 5px;
background:#0282c2;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #0282c2,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtUIK7eTHAcCBFyksIrg8mnSLhZhNVveemXOwLBu7MGA32JmTsJfk1-7YWuDrAW39BP5r-iLo09AOktWVkDQ_orpK0FsaucLUdLqQqFSa_G5Yj-W-rx1Bnf8HC5QRjcl2Hk8OIcrg788Vr/s1600/Web-Facebook+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos1:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #0282c2,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Facebook Icons*/

/*Start Google+ Icons*/
#SC a.sos2{
opacity:0.7;
margin:5px;
padding:7px 5px 5px 5px;
background:#d44137;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #d44137,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTclly0Kko8xJ2pT3gYetR5FzSna7b81io1Vmszp3pOqgkiYGuH3yBz9TmZ9sefnjz99qhmvWeHCECmJ0btoXx5YxTe2sDmTrC4qp7Qlec81YunZjfWPwcX5-xhxPDoxA1ekUDumso-TQj/s1600/Web-Google+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos2:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #d44137,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Google+ Icons*/

/*Start Twitter Icons*/
#SC a.sos3{
opacity:0.7;
margin:5px;
padding:7px 5px 5px 5px;
background:#63c8f7;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #63c8f7,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwZ7GMZLf2aBhWG5QiyPqDy-K5ICHcxY8xuWJ_Rfoy4JeUKp3bISCnFrNMeH6pK3j2Jg8gCcK8mX4V0pvfRtJ6tryBHc6p9s8_lqV0EuVmzeq7pJ1J0KqYxT6Z0F_XC8b22JshV2uKD53n/s1600/Web-Twitter+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos3:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #63c8f7,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Twitter Icons*/

/*Start RSS Icons*/
#SC a.sos4{
opacity:0.7;
margin: 5px;
padding:7px 5px 5px 5px;
background:#fc9c14;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #fc9c14,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhldJaTKS2hCEX_uFIkJUoCUh4i7ZJ52FbYgghstDy8psQJDC-0LuNa9G6pzXQEhVuRareaojX6cg1jPWrHOdHDeA9YQ5Wt94KG-Y950Sw0wEjSWghaVYwaqGRjg95JYe8HO18rlKyhYw59/s1600/Web-RSS+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos4:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #fc9c14,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End RSS Icons*/
</style>

<center><div id="SC">
<a href="URL-FACEBOOK-PROFILE" class="sos1" rel="nofollow" target="_blank" title="Like us on Facebook">Icon</a>
<a href="URL-GOOGLE PLUS-PROFILE" class="sos2" rel="author" target="_blank" title="Follow us on Google+">Icon</a>
<a href="URL-TWITTER-PROFILE" class="sos3" rel="nofollow" target="_blank" title="Follow us on Twitter">Icon</a>
<a href="URL-RSS-FEED" class="sos4" rel="nofollow" target="_blank" title="Grab Our Rss Feed ">Icon</a>
</div></center><div align='right'><a href='http://seociyus.blogspot.com/2013/05/membuat-social-icon-keren-spesial-gratis.html' target='blank'><small>[Get This Icon]</small></a></div>

<!-- Jangan Dirubah-rubah Kodenya Nanti Tampilannya Gak Karuan Gan -->

• Sekarang tinggal ganti aja tulisan yang gw highlight dengan alamat akun sosial media dan rss feed blog loe, kalo udah beres tinggal di Save gan. Jangan dirubah-rubah kodenya dan juga ganti tulisan Icon karena bakal bikin tampilan social iconnya jadi berantakan gan.

Sekarang coba di buka blognya buat ngeliat hasil dari social icon kerennya gan.Cuma sekedar info kalo social icon keren ini gak suport di browser IE gan.

Note : Tolong jangan dihapus link ke postingan ini ya, kalo gak suka di isi nofollow aja gan.

Sekian dulu yang bisa gw share kali ini, semoga kalian suka dengan social icon keren CSS ini. Kalo ada masalah dalam membuat atau memasangnnya silahkan ditanyakan dan jangan lupa ninggalin sepatah dua patah kata di kotak komentar di bawah gan.

 

Scourse : www.seociyus.com

Authors : *2RI$1* TURISWAN

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Authors : *2RI$1* TURISWAN
Terimakasih Anda telah membaca tulisan / artikel di atas tentang :
Judul : Membuat Social Icon Keren Spesial Gratis
Rating : ★★★★★ 5 100% based on 999999 ratings. 10 user reviews.
Ditulis Oleh : Unknown
Semoga informasi mengenai Membuat Social Icon Keren Spesial Gratis bisa memberikan manfaat bagi Anda. Jangan lupa Komentar Anda sangat dibutuhkan, di bawah ini.

Subscribe Untuk Mendapatkan UPDATE Artikel Terbaru!

Enter your email address:

Like This Article :

Share This Article :

Authors : Unknown

Akun Media Sosial :