MEMBUAT AKUN SOCIAL TERBARU

• 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://pendidikanpesantren-toniardi.blogspot.co.id/ -->

<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/AVvXsEh_zax-qhEcMcsPYeGwdb_4ljS1VpduwzlMuvzPDVPDvWhmHI1i8hSEIsUwZlU5WMXHh5svubI0g9Uqi9lDSheDtly3mZnyq4Y6-PChOeZYzq7MrC_IMYZRK0bSoVAA3tZH6githopMRPcx/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/AVvXsEgtZD-NuywcUy8tVb-xtp2AUl4AP-KaqU1O1rcvh-krMeARQ2BtOJ03u_qefZzNElhtaUdi7Vn_EI03-W17L8P0QMF5DVXibZU-gIJyVlOeGuX7g-5HqfCv8gg0Bxj8WZwdubC2QLzEKgwh/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/AVvXsEifvGiTTtCofufT34FyiTIl6OWUMprfMcKUW9ZarsOoRYpxHb85NNXPd91dtnMci3uZDdP6iaY57Df-mAkAF1D7x-SmFkP6P7M0vr0NkT0YFERekW5iEt5NI7N_5KBkbwayu8X0B11sVzMT/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/AVvXsEjGVymmpZzrb-rkDl1aUyAF_IamxQc0pkFMxHQUrqjIKQKKvBz7XLrybGeypZehcr__qwjA1IEM1Y9f0EBvblRBu4aDyob725VYJlsnD81tNlsK-U0JSuGYn2a7xnbfBvqXQIXsMKp72XAY/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://pendidikanpesantren-toniardi.blogspot.co.id/search/label/INTERNET' 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 akun 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.