Responsive Social Network đẹp cho blogspot chèn dưới footer

By Unknown

Thứ Bảy, 6 tháng 9, 2014

Social Network (mạng xã hội) chèn dưới bài viết cho blogspot được Tuấn Phan viết khá nhiều nhưng lần này mình hướng dẫn các bạn chèn dưới footer với CSS Responsive đẹp.

DEMO

Responsive Social Network đẹp cho blogspot chèn dưới footer

Responsive Social Network bao gồm các mạng xã hội lớn như Youtube, Google, Facebook, In, Tweet...có hiệu ứng đẹp khi chúng ta rê chuột vào biểu tượng. Cách này dành cho những bạn thích làm đẹp template của mình.
Để tiến hành chèn Social Network vào template chúng ta đăng nhập vào tài khoản blogger của bạn sau đó chọn Mẫu >> Chỉnh sửa HTML >> Ctrl+F tìm đến thẻ ]]></b:skin> và chèn đoạn CSS bên dưới lên trên nó

CSS Responsive Social Network

/* CSS Social Network */
#social_networks{width:100%;background:#000;border-bottom:5px solid #0BAA97;border-top:5px solid #C7F3B6;float:right;display:block;padding-right:5%;}
#social_networks ul {background:#000;display:block;float:right;height:32px;margin:0 auto;padding:5px;}
#social_networks li{display:inline-block;float:right;width:32px;height:32px;
opacity:0.6;background-position:left top;transition:All 0.4s ease;}
#social_networks li:hover{opacity:1;background-position:left -32px;}
#social_networks li a{display:inline-block;width:32px;height:32px;}
#social_networks li a:hover{background:transparent;color:#ddd;box-shadow:none;}
#social_networks li a span{display:none;}
#social_networks li.facebook{background-image:url(http://3.bp.blogspot.com/-9ou8A7WFiy0/U17P3ExpUWI/AAAAAAAACgQ/yb_QKEjM0JM/s1600/social_network_facebook.png);}
#social_networks li.twitter{background-image:url(http://4.bp.blogspot.com/-hFVGbhzmOiY/U17P_E_LdqI/AAAAAAAAChE/V5NhA_lyVtA/s1600/social_network_twitter.png);}
#social_networks li.linkedin{background-image:url(http://1.bp.blogspot.com/-G3bPnh1ejd0/U17P59mbfkI/AAAAAAAACgk/FOq0SQIvSek/s1600/social_network_linkedin.png);}
#social_networks li.tumblr{background-image:url(http://4.bp.blogspot.com/--Zlo0ilxuDQ/U17P8Y5PujI/AAAAAAAACg4/yKvIPjlF2ZU/s1600/social_network_tumblr.png);}
#social_networks li.vimeo{background-image:url(http://4.bp.blogspot.com/-yn2yMPvZIJA/U17P_F8YjyI/AAAAAAAAChI/LIoHupBsJUg/s1600/social_network_vimeo.png);}
#social_networks li.skype{background-image:url(http://4.bp.blogspot.com/-H6kgTdMNhNY/U17P8A0MezI/AAAAAAAACg0/F18xPYtnprM/s1600/social_network_skype.png);}
#social_networks li.youtube{background-image:url(http://3.bp.blogspot.com/-OCKvKbUveko/U17P_lFFnAI/AAAAAAAAChU/18MDanegwXc/s1600/social_network_youtube.png);}
#social_networks li.myspace{background-image:url(http://4.bp.blogspot.com/-4VdqQv66nE8/U17P71j6EiI/AAAAAAAACgs/qPzYDRFvEIM/s1600/social_network_myspace.png);}
#social_networks li.googleplus{background-image:url(http://1.bp.blogspot.com/-eGupsHE7YQY/U17P4NRmoqI/AAAAAAAACgc/ts3pm2_bGko/s1600/social_network_googleplus.png);}
#social_networks li.deviantart{background-image:url(http://3.bp.blogspot.com/-_lEfD7RhvDw/U17P263jHuI/AAAAAAAACgE/OZjBS9GsyMo/s1600/social_network_deviantart.png);}
#social_networks li.flickr{background-image:url(http://1.bp.blogspot.com/-SGmoX6EmxLQ/U17P3CQceII/AAAAAAAACgI/reD0MUxoQE0/s1600/social_network_flickr.png);}

/* Responsive */
@media screen and (max-width:600px){
#social_networks{text-align:center;margin:0 auto;}
}
@media screen and (max-width:430px){
#social_networks{text-align:center;margin:0 auto;}
}
@media screen and (max-width:384px){
#social_networks{text-align:center;margin:0 auto;}
#social_networks ul{bottom:20px;}
}
@media screen and (max-width:320px){
#social_networks{text-align:center;margin:0 auto;}
#social_networks ul{bottom:20px;}
}
@media screen and (max-width:240px){
#social_networks{text-align:center;margin:0 auto;}
#social_networks ul{bottom:20px;}
}

Sau khi chèn CSS xong chúng ta tìm đến thẻ </footer> và chèn đoạn code HTML bên dưới lên trên hoặc dưới </footer> tùy theo bạn muốn chọn vị trí hiển thị . Sau đó Lưu lại và xem kết quả

Code HTML Responsive Social Network đẹp cho blogspot

<div id='social_networks'>
<ul><!--Social Icons Started Started-->
  <li class='sorting-01 facebook'><a href='#'><span class='inv'>Facebook</span></a></li>
<!--Replase With Facebook URL-->
<li class='sorting-03 twitter'><a href='#'><span class='inv'>twitter</span></a></li>
<!--Replase With Twitter URL-->
<li class='sorting-02 googleplus'><a href='#'><span class='inv'>googleplus</span></a></li>
<!--Replase With Google Plus URL-->
<li class='sorting-05 linkedin'><a href='#'><span class='inv'>linkedin</span></a></li>
<!--Replase With linkedin URL-->
<li class='sorting-10 youtube'><a href='#'><span class='inv'>youtube</span></a></li>
<!--Replase With Youtube URL-->
<li class='sorting-06 flickr'><a href='#'><span class='inv'>flickr</span></a></li>
<!--Replase With Flicker URL-->
<li class='sorting-04 vimeo'><a href='#'><span class='inv'>vimeo</span></a></li>
<!--Replase With Vimeo URL-->
<li class='sorting-05 deviantart'><a href='#'><span class='inv'>deviantart</span></a></li>
<!--Replase With Deviant ART URL-->
</ul><!--Social Icons Started End-->
</div>
<div class='clear'/> 

Thay # bằng link bạn muốn trỏ đến . Chúc các bạn thành công !

Tag : Chia sẻ, CSS, Responsive