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

Menambahkan Thumbnail Avatar Pada Post Info

Thumbnail Avatar | Berikut ini cara menambahkan thumbnail avatar pada post info yang terdapat di blog ini.

Thumbnail avatar ini nantinya akan muncul di halaman postingan blog, silahkan ikuti beberapa langkah penerapannya.

1. Buka Dashboard Blogger
2. Klik Template dan buka Edit HTML
3. Cari kode .info-post
   ( pastikan terdapat <b:if cond='data:blog.pageType == &quot;item&quot;'> )
4. Jika sudah ketemu ganti semua code .post-info dengan code dibawah ini

.post-info {background:transparent;margin-top:5px;margin-bottom:5px;color:#fff;font-size:12px;text-align:left;padding:0;box-shadow:none;}
.post-info a {display:inline;background:transparent;color:#666;padding:4px 6px 4px 6px;transition:all .3s ease-out;}
.post-info a:hover {color:#e76e66;}
.author-info, .time-info, .comment-info, .label-info, .review-info {
margin-right:8px!important;display:inline-block;color:#666;padding:10px;}
.post-info .avatar-author {float:left;border:0;padding:0;width:38px;height:38px;box-shadow:none;}

5. Kemudian terapkan kode di bawah ini tepat sebelum </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s38$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>
</b:if>

6. Cari kode di bawah ini

<b:includable id='post' var='post'>

7. Selanjutnya cari kode di bawah ini

<div class='post-info'>

8. Terapkan kode di bawah ini tepat setelah kode di atas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
</b:if>

9. Setelah diterapkan akan tampil seperti ini

<div class='post-info'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;amp;callback=av&quot;'/>
</b:if>

10. Simpan dan lihat hasilnya !!

Source : Arlina Design

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/AVvXsEjx4EUZ9Sm9xdfTYR_kHC60AFTnAPrwLP2BiXH7EKbHi_QU6phImueG7YotiUKwFWFnFXxp1PQV6Z4jkMGkFANSkXqwkDYbyzG4q9DnHydfjd6YPYv3NYu-rzeId9T943XtA6eEnChPoVPa/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/AVvXsEjx4EUZ9Sm9xdfTYR_kHC60AFTnAPrwLP2BiXH7EKbHi_QU6phImueG7YotiUKwFWFnFXxp1PQV6Z4jkMGkFANSkXqwkDYbyzG4q9DnHydfjd6YPYv3NYu-rzeId9T943XtA6eEnChPoVPa/s1600/Dposeidon+Logo.jpg dengan gambar sobat
Link	Ganti # pada kode diatas dengan link social media sobat