Social Network Pure CSS V2

Social Network | Kali itni saya akan share tentang Social Network Pure CSS V2. Pada article yang lalu saya juga pernah memposting Social Network tapi fungsinya sama ko', dan terserah kalian pilih yang mana.

Cara Penerapan :

1. Masuk ke tata letak

2. Tambahkan Widget > HTML/JavaScript ( Judul Kosongkan )

3. Copy code dibawah ini dan paste ke dalam HTML / Javascript tadi.

<div id='social_networks'>
<ul>
<li class='sorting-01 facebook' title='Follow us on Facebook'><a href='#' target='_blank'><i class='fa fa-facebook'></i><span class='inv'></span></a></li>
<li class='sorting-02 youtube' title='Follow us on Youtube'><a href='#' target='_blank'><i class='fa fa-youtube'></i><span class='inv'></span></a></li>
<li class='sorting-03 twitter' title='Follow us on Twitter'><a href='#' target='_blank'><i class='fa fa-twitter'></i><span class='inv'></span></a></li>
<li class='sorting-04 pinterest' title='Follow us on Pinterest'><a href='#' target='_blank'><i class='fa fa-pinterest'></i><span class='inv'></span></a></li>
<li class='sorting-05 googleplus' title='Follow us on Google+'><a href='#' target='_blank'><i class='fa fa-google-plus'></i><span class='inv'></span></a></li>
</ul>
</div>

<style>
/* CSS Social Network Sidebar */
#social_networks {text-align: center;display: block;margin: 0 auto;lear: both;background: #fff;padding: 10px;}
#social_networks ul {display:block;margin:0 auto;padding:0;list-style:none;}
#social_networks li{text-align:center;display:inline-block;margin:0 5px;width:36px;
height:36px;transition:All 0.6s ease-out;}
#social_networks li:hover{color:#eee;cursor:pointer;}
#social_networks li:hover a{color:#fff;}
#social_networks li a{display:inline-block;color:#aaa;line-height:36px;font-size:1.2em;transition:All 0.3s ease-out;}
#social_networks li a:hover{color:#fff;}
#social_networks li a span{display:none;}
#social_networks li.facebook,#social_networks li.twitter,#social_networks li.youtube,#social_networks li.googleplus,#social_networks li.pinterest{text-align:center;background:none;cursor:pointer;box-shadow:0 0 0 1px #ddd;border-radius:100%;background-image: linear-gradient(110deg, #f56954 0%, #f56954 50%, transparent 50%, transparent 100%);background-size:200%;background-position:150% 0;background-repeat:no-repeat;
transition: background-position .4s ease, color .4s ease;}
#social_networks li a.facebook:hover,#social_networks li a.twitter:hover,#social_networks li a.youtube:hover,#social_networks li a.googleplus:hover,#social_networks li a.pinterest:hover{color:#fff;}
#social_networks li.facebook:hover,#social_networks li.twitter:hover,#social_networks li.youtube:hover,#social_networks li.googleplus:hover,#social_networks li.pinterest:hover{color:#fff;background-position:0 0;box-shadow:0 0 0 1px #f56954;}</style>

Konfigurasi

Opsi	Keterangan
Background Image	Ganti #f56954 dengan Warna sesuai template anda
Link	Ganti # pada kode diatas dengan link social media sobat

Dedi  Thursday, March 26, 2015 

Blogging CSS Widget