Social Bookmarks với hiệu ứng CSS



Xin chào mọi người, hôm nay em sẽ giới thiệu cho mọi người một thủ thật tạo Social Bookmarks với hiệu ứng CSS mà em vừa "nghiên cứu" được. Demmo nằm ở bên dưới. Di chuột vào để xem hiệu ứng nhé!









Mọi người thấy thế nào? Mướt nhỉ? Cái này em nghĩ khá là hợp cho các Personal và Simple Theme. Nào, chúng ta cùng bắt đầu thôi:
Vào   Bố cục  >>  Thêm tiện ích HTML  và dán code sau vào:
<style>
.social_bookmarks {
    margin: 0px 5px 0px 0px;
    position: relative;
    z-index: 150;
    right: -20px;
    bottom: -5px;
}
.social_bookmarks li {
    border-radius: 40px 40px 40px 40px;
    float: left;
    height: 100%;
    margin-left: -9px;
    overflow: hidden;
    padding: 0;
    position: relative;
}
.social_bookmarks li:hover {
    z-index: 10;
}
.social_bookmarks li a {
    word-wrap: normal;
    display: block;
    float: left;
    height: 100%;
    line-height: 40px;
    margin: 0px;
    min-height: 40px;
    outline: medium none;
    overflow: hidden;
    padding: 0px;
    position: relative;
    text-indent: 110%;
    width: 40px;
    z-index: 3;
}
.social_bookmarks_facebook a {
    background: url("https://lh6.googleusercontent.com/-xCpvam2KeSI/UVb6N-uY3JI/AAAAAAAAAt8/w8lhfkvV_Tg/s512/icon-facebook.png") no-repeat scroll center 0 transparent;
}
.social_bookmarks_twitter a {
    background: url("https://lh5.googleusercontent.com/-CaImtzJChTc/UVb6POBCasI/AAAAAAAAAuE/8WOseJFjzwg/s512/icon-twitter.png") no-repeat scroll center 0 transparent;
}

.social_bookmarks_pinterest a {
    background: url("https://lh4.googleusercontent.com/-VXtIspk2jAk/UVb6NX0s64I/AAAAAAAAAt0/3sFG24HNCqA/s512/icon-pinterest.png") no-repeat scroll center 0 transparent;
}
.dark_bg_color .social_bookmarks li a {
    background-position: center -43px;
}
.social_bookmarks_facebook:hover a, div .social_bookmarks_facebook .css_3_hover {
    background-color: #37589B;
    background-position: center -43px;
}
.social_bookmarks_twitter:hover a, div .social_bookmarks_twitter .css_3_hover {
    background-color: #46D4FE;
    background-position: center -43px;
}

.social_bookmarks_pinterest:hover a, div .social_bookmarks_pinterest .css_3_hover {
    background-color: #CB2027;
    background-position: center -43px;
}
#searchform {
    float: left;
    margin: 0;
    position: relative;
}

.header_meta {
    height: 60px;
   margin: 10px;
}
</style>

<div class="header_meta">
<ul class='social_bookmarks icon_count_3'>


<li class='social_bookmarks_twitter'><a href='Địa chỉ Fanpage'>Twitter</a></li>


<li class='social_bookmarks_facebook'><a href='Địa chỉ Fanpage'>Facebook</a></li>



<li class='social_bookmarks_pinterest'><a href='Địa chỉ Fanpage'>Pinterest</a></li></ul>

</div>
Vì trình độ CSS của em còn gà mờ nên chỉ làm được có thế. Có thể có một số lỗi mắc phải trên một số trình duyệt mà em không biết. Vì vậy nếu test xong mà bị lỗi thì mọi người cứ comment bên dưới. Em sẽ cố gắng khắc phục.
Nếu nhiều Like hoặc +1 thì bài sau em sẽ share cách tạo Share box dạng này :)))


Responses

15 Respones to " Social Bookmarks với hiệu ứng CSS "

VanLinhEx said...

Cái này hồi trc có thấy đâu đó rồi
P/s : tình hình thi cử sao rồi ku ? Ok chứ ?


March 30, 2013 at 11:28 PM
Karl Carsten said...

Cái này có bên WP bác à, em áp dụng vào blogger thì bị lỗi do ảnh hưởng của các thuộc tính có sẵn. Không biết bác thấy thế nào chứ bên trinh duyệt của em cũng ổn rồi. Còn việc thi cử thì ;((


March 31, 2013 at 7:53 AM
Phúc Tuấn said...

Chào bạn.
Cảm ơn bạn đã ghé thăm Webkiemtien24h và đề nghị đặt liên kết. Bạn vui lòng cung cấp thêm thông tin 2 blog của bạn theo mẫu TẠI ĐÂY, đồng thời gắn liên kết đến Webkiemtien24h trên 2 blog của bạn để thực hiện trao đổi liên kết nhé.


April 5, 2013 at 11:27 PM
Akat Suki said...

Đã add site này của bạn nhưng site http://vnzap.com/ mình có qua nhưng không comment được , bạn coi fix lỗi luôn site kia đi.
Bạn add mình như sau nhé
URL: http://laodongblog.blogspot.com/
Tiêu đề hiện: LaoDongBlog
Tiêu đề ẩn: Thủ Thuật Windows 8-Phần Mềm Miễn Phí-Hình Nền Đẹp | LaoDongBlog
Bạn cho mình thông tin để mình add vào nhé.


April 6, 2013 at 12:14 AM
Lee Min said...

blog đẹp quá,sang nhà mình chém phát


April 25, 2013 at 6:09 PM
Xem Boi said...

Thank đã chia sẽ nhé . Blog làm đẹp quá ta.


May 3, 2013 at 5:37 PM
iwin said...

Đúng rồi mình làm bên wp thì dc mà blog thì bị lỗi là do đâu ta !


June 20, 2013 at 3:51 PM
Akat Suki said...

Admin blog này đâu nhỉ? sao k thấy hồi âm, chỉnh dùm cái backlink ta.


June 25, 2013 at 6:26 PM
tai game iwin said...

code chuẩn lắm bạn .


January 4, 2014 at 6:54 AM
teen teen 4.0 said...

thank admin đã chia sẽ nhé


January 4, 2014 at 6:55 AM
Chi Thùy said...

Hiêu ứng rất hay!
Chi Thùy – Người Mẫu
-------------------------------------------------------------------
• Xem chi tiết về Những địa điểm chụp ảnh cưới tuyệt đẹp ở TP.HCM
• Hoặc Nhung dia diem chup anh cuoi tuyet dep o TP.HCM


April 12, 2015 at 4:11 AM
huy cong said...

Cảm ơn đã chia sẽ bài viết rất hay và chi tiết
..........................
Huy Real
Đam Mê Thể Thao
ca cuoc bong da l ca cuoc bong da


June 11, 2015 at 11:31 AM
Năng Lượng Mặt Trời said...

Cảm ơn bạn đã chia sẻ thông tin.
.....................................................
Sunpo Corporation
Chuyên kinh doanh máy nước nóng năng lượng mặt trời – liên doanh Úc và Israel.
Tel: 08. 3984 3985 – 0984 53 22 55
Mail: info@sunpo.com.vn
Click xem chi tiết: Chuyên máy nước nóng năng lượng mặt trời Sunpo hoặc chuyen may nuoc nong nang luong mat troi Sunpo


March 4, 2016 at 10:27 AM

Post a Comment

FRIENDS

VanLinhEx Blog Duy Pham Blog BKAV giá rẻ Namkna Blog Đinh Công Thành ChinhTruc Blog VnZap! VnBlogExpress LaoDongBlog Thienhieu Vận chuyển nhà LuatIT Blog Kiếm tiền trên mạng Thế giới APKKiếm Tiền Trên Mạng GiangLe - Chia set phần mềm
Return to top of page Copyright © 2011 | Platinum Theme