Cara Membuat Social Network Pure CSS

Social Network | Pada kesempatan kali ini saya akan membagikan pengalaman saya yaitu Cara Membuat Social Network. Sebetulnya sih widget ini sudah terdapat di templatenya mbak Arlina namun saya belum mengerti yang mana CSSnya dan HTMLnya. Ya maklum lahhh...

Oke langsung aja..
Berikut toturialnya.

Langkah 1 : Masuk ke akun blogger masing-masing !

Langkah 2 : Klik tab tata letak

Langkah 3 : Tambahkan Gadget > HTML / Javascript ( Judul di kosongkan saja )

Langkah 4 : Copy kode di bawah ini kedalamnya

<div class='arlina-profile'>
<div class='image-wrap'>
<img alt='Arlina Design' class='img-circle author_avatar img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJyMq-0cCh-v6WZrUhSzehLUg3cGTRYBb-s806aiFmB4PgARNiCSP3LpwIo7fg6Yil_vW3XKdfb5v6wNSS13hMYXkWnmqyIxh4dtFK_RNVoWpSZ62VB3U0el9IIuJgWM_8dAmBzRmODno/s1600/Dposeidon+Logo.jpg'/>
<div class='social linear-3s'>
<div class='social-inner'>
<a href='#' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook'/></i></a>
<a href='#' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter'/></i></a>
<a href='#' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus'/></i></a>
<a href='#' target='_blank' title='Follow Us On Pinterest'><i class='fa fa-pinterest'/></i></a></div>
</div></div>
<style>
/* CSS Author Widget */
.arlina-profile {padding:15px 10px;text-align:center;}
.arlina-profile .image-wrap {position:relative;overflow:hidden;border-radius:50%;
-webkit-transform: translate3d(0px,0px,0px);transform: translate3d(0px,0px,0px);width:80%;
height:auto;margin:0 auto;margin-bottom:15px;}
.arlina-profile .image-wrap:before {content: '';display:block;position:absolute;
border-radius:50%;border:10px solid #f9f9f9;border-image-source:initial;border-image-slice:initial;border-image-width:initial;border-image-outset:initial;border-image-repeat:initial;opacity:0.7;margin:auto;top:0px;right:0px;bottom:0px;left:0px;
-webkit-transition: all 0.4s linear;transition: all 0.4s linear;}
.arlina-profile .social {position:absolute;width:92.5%;height:92.5%;border-radius:50%;
background-color:#f9f9f9;opacity:0;margin:auto;top:0px;right:0px;bottom:0px;left:0px;font-size:0px;text-align:center;-webkit-transform: scale(0.5);transform: scale(0.5);-webkit-transition: all 0.3s linear;transition: all 0.3s linear;}
.social.linear-3s .social-inner {position:absolute;width:100%;padding:15px 0;top:50%;left:50%;
-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.social-inner .fa {margin:0px 5px;font-size:16px;color:#fff;width:14px;height:14px;padding:8px;
border-radius:50%;}
.image-wrap:hover .social.linear-3s {opacity:0.95;-webkit-transform: scale(1);transform: scale(1);}
.image-wrap:hover:before {-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}
.arlina-profile h4.arlina-name a {font-size:18px;margin-bottom:10px;display:block;
color:#333;}
.social-inner .fa-google-plus {background:#d64431!important;}
.social-inner .fa-twitter {background:#00aced!important;}
.social-inner .fa-facebook {background:#3b5998!important;}
.social-inner .fa-pinterest {background:#cb2027!important;}
</style>

Konfigurasi

Opsi	Keterangan
Gambar	Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLJyMq-0cCh-v6WZrUhSzehLUg3cGTRYBb-s806aiFmB4PgARNiCSP3LpwIo7fg6Yil_vW3XKdfb5v6wNSS13hMYXkWnmqyIxh4dtFK_RNVoWpSZ62VB3U0el9IIuJgWM_8dAmBzRmODno/s1600/Dposeidon+Logo.jpg dengan gambar sobat
Link	Ganti # pada kode diatas dengan link social media sobat

Dedi

Add Comment

Tips Blogger, Widget

Jumat, 13 Februari 2015

About Admin Lycoris

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Kamizake

Cara Membuat Social Network Pure CSS

About Admin Lycoris

Related Posts