CSS3 Social Media Icons - CSS3 biểu tượng Social Media

1,154 0 0
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,828
Được Like
12,687
CSS3 Social Media Icons - CSS3 biểu tượng Social Media

CSS3 Social Media Icons là các biểu tượng mạng xã hội mà bạn có thể đặt bất cứ nơi nào trên trang web của bạn nhưng với mục đích của tài liệu này, chúng tôi sẽ đặt chúng ở phía trên bên phải header của bạn. Những biểu tượng không phải là tệp hình ảnh nhưng đơn giản chỉ là tùy chỉnh font và CSS padding làm cho giống như biểu tượng mạng xã hội. Điều này có nghĩa là khi bạn phóng to các biểu tượng hoặc nhìn từ một màn hình có độ phân giải cao, nó sẽ được sắc nét và sạch sẽ không có vấn đề gì kích thước. Nó có thể không làm việc trong tất cả các trình duyệt.

SocialMediaIcons3.jpg


SocialMediaIcons4.jpg

​
Bước 1: Tải các nút CSS Social Media ở đây: http://medialoot.com/item/css-social-media-buttons/

Bước 2: Vào: http://createcss3.com/ kiểm tra @font-face section và browse cho tập tin socialglyphs-webfont.tff phía trong folder font đó là bên trong thư mục social media icons. Upload và lưu những gì họ cung cấp cho bạn về máy tính của bạn.


Bước 3: Giải nén tập tin socialglyphs-webfont.zip và upload folder phía trong gọi là fonts lên thư mục gốc nơi cài đặt Xenforo của bạn.

Bước 4: Vào AdminCP/Appearance/Styles/Templates
Mở template: logo_block
Đặt mã html của các nút CSS bạn muốn trên hook header_logo. Hãy chắc chắn rằng bạn thay thế các liên kết sau đây với các liên kết trang web của riêng bạn. Ví dụ.
Mã: 
<a href="https://plus.google.com/" class="google" target="_blank" title="Google"></a>
<a href="http://www.linkedin.com/" class="linkedin" target="_blank" title="LinkedIn"></a>
<a href="https://facebook.com/" class="fbook" target="_blank" title="Facebook"></a>
<a href="http://twitter.com/" class="twitt" target="_blank" title="Twitter"></a>
</xen: hook>

Bước 5: Vào AdminCP/Appearance/Styles/Templates
Mở template: EXTRA.CSS và thêm:
Mã: 
@font-face {
    font-family: 'Conv_socialglyphs-webfont';
    src: url('fonts/socialglyphs-webfont.eot');
    src: local('☺'), url('fonts/socialglyphs-webfont.woff') format('woff'), url('fonts/socialglyphs-webfont.ttf') format('truetype'), url('fonts/socialglyphs-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
a:link { opacity: 1; }
a:hover { opacity: 0.9;}
a:active { opacity: 0.75; }
.google {
    display: block;
    text-decoration: none;
    float: right;
    color: white;
    margin-left:3px;
    width:20px;
    height:20px;
    font-family: 'Conv_socialglyphs-webfont';
    font-weight: 100;
    font-size:15px;
    line-height:1.5;
    text-align: center;
    text-shadow:0px -1px 0px rgba(0,0,0,0.35);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true)";zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true);
    background-color: #404040;
    background-image:-moz-linear-gradient(50% 0% -90deg,rgb(81,81,81) 0%,rgb(53,53,53) 100%);
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(81,81,81)),color-stop(1, rgb(53,53,53)));
    background-image:-webkit-linear-gradient(-90deg,rgb(81,81,81) 0%,rgb(53,53,53) 100%);
    background-image:-o-linear-gradient(-90deg,rgb(81,81,81) 0%,rgb(53,53,53) 100%);
    background-image:-ms-linear-gradient(-90deg,rgb(81,81,81) 0%,rgb(53,53,53) 100%);
    background-image:linear-gradient(-90deg,rgb(81,81,81) 0%,rgb(53,53,53) 100%);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff515151,endColorstr=#ff353535,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff515151,endColorstr=#ff353535,GradientType=0);
}
.google:after {
    content: "C";
    color: white;
}
.linkedin {
    display: block;
    text-decoration: none;
    float: right;
    color: white;
    margin-left:3px;
    width:20px;
    height:20px;
    font-family: 'Conv_socialglyphs-webfont';
    font-weight: 100;
    text-align: center;
    font-size:15px;
    line-height:1.2;
    text-shadow:0px -1px 0px rgba(0,0,0,0.35);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true)";zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true);
    background-color: #4B9DCA;
    background-image:-moz-linear-gradient(50% 0% -90deg,rgb(99,170,209) 0%,rgb(54,145,196) 100%);
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(99,170,209)),color-stop(1, rgb(54,145,196)));
    background-image:-webkit-linear-gradient(-90deg,rgb(99,170,209) 0%,rgb(54,145,196) 100%);
    background-image:-o-linear-gradient(-90deg,rgb(99,170,209) 0%,rgb(54,145,196) 100%);
    background-image:-ms-linear-gradient(-90deg,rgb(99,170,209) 0%,rgb(54,145,196) 100%);
    background-image:linear-gradient(-90deg,rgb(99,170,209) 0%,rgb(54,145,196) 100%);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff63aad1,endColorstr=#ff3691c4,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff63aad1,endColorstr=#ff3691c4,GradientType=0);
}
.linkedin:after {
    content: "E";
    color: white;
}
.fbook {
    display: block;
    text-decoration: none;
        float: right;
        color: white;
        margin-left:3px;
        height: 20px;
        width: 20px;
        font-family: 'Conv_socialglyphs-webfont';
        font-size: 19px;
        line-height: 1.2;
        text-align: left;
        background-color: #5D83BA;
        background-image:-moz-linear-gradient(50% 0% -90deg,rgb(113,146,194) 0%,rgb(72,115,177) 100%);
        background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(113,146,194)),color-stop(1, rgb(72,115,177)));
        background-image:-webkit-linear-gradient(-90deg,rgb(113,146,194) 0%,rgb(72,115,177) 100%);
        background-image:-o-linear-gradient(-90deg,rgb(113,146,194) 0%,rgb(72,115,177) 100%);
        background-image:-ms-linear-gradient(-90deg,rgb(113,146,194) 0%,rgb(72,115,177) 100%);
        background-image:linear-gradient(-90deg,rgb(113,146,194) 0%,rgb(72,115,177) 100%);
        border-radius: 3px 3px 3px 3px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.75), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
        text-decoration: none;
        text-indent: 8px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35);
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border-radius:3px;
        -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
        -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
        box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff7192c2,endColorstr=#ff4873b1,GradientType=0)";
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff7192c2,endColorstr=#ff4873b1,GradientType=0);
}
.fbook:after {
    content: "A";
    color: white;
}
.twitt {
    display: block;
    text-decoration: none;
    float: right;
    color: white;
    margin-left:3px;
    width:20px;
    height:20px;
    font-family: 'Conv_socialglyphs-webfont';
    font-weight: 100;
    font-size:15px;
    line-height:1.3;
    text-align: center;
    text-shadow:0px -1px 0px rgba(0,0,0,0.35);
    -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true)";zoom:1;
    filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=0,OffY=1,Color=#40ffffff,Positive=true);
    background-color: #37afd7;
    background-image:-moz-linear-gradient(50% 0% -90deg,rgb(109,197,226) 0%,rgb(7,156,206) 100%);
    background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0, rgb(109,197,226)),color-stop(1, rgb(7,156,206)));
    background-image:-webkit-linear-gradient(-90deg,rgb(109,197,226) 0%,rgb(7,156,206) 100%);
    background-image:-o-linear-gradient(-90deg,rgb(109,197,226) 0%,rgb(7,156,206) 100%);
    background-image:-ms-linear-gradient(-90deg,rgb(109,197,226) 0%,rgb(7,156,206) 100%);
    background-image:linear-gradient(-90deg,rgb(109,197,226) 0%,rgb(7,156,206) 100%);
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    box-shadow:0px 1px 1px rgba(0,0,0,0.75) ,inset 0px 1px 0px rgba(255,255,255,0.25);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6dc5e2,endColorstr=#ff079cce,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff6dc5e2,endColorstr=#ff079cce,GradientType=0);
}
.twitt:after {
    content: "B";
        color: white;
}

Bước 6: Vào AdminCP/Appearance/Styles/Templates
Mở template: login_bar.css

Tìm #loginBar #loginBarHandle

Thay đổi margin-right: 20px; thành margin-right: 100px;

và bạn đã hoàn tất.

(Không bắt buộc)

Bước 7: Để thêm các biểu tượng chỉ cần nhìn vào các tập tin CSS và html trong file đầu tiên bạn tải về. Sao chép và dán html vào logo_block, làm cho một số CSS để phù hợp với các nút đã được thêm vào trong EXTRA.css và đừng quên tăng margin-right của login_bar.css và tài khoản cho các nút bạn đã thêm.

Bước 8: Để thay đổi kích thước hình ảnh và văn bản (biểu tượng) chơi xung quanh với một phần của mã CSS cho mỗi biểu tượng.
Mã: 
    width:20px;
    height:20px;
    font-family: 'Conv_socialglyphs-webfont';
    font-weight: 100;
    font-size:15px;
    line-height:1.5;
    text-align: center;

Chúc các bạn thành công.


Nguồn: xenforo.com​
 
Bài viết liên quan
Xin hỏi addon thêm nội dung từng chuyên mục ( rút gọn ) - ( mở rộng ) ? bởi nhuttran913,
Dark/Light Mode Automatic Toggle Switch/jsdmat - Tự động chuyển đổi chế độ tối/sáng/jsdmat XenForo 2 0.4.0 bởi PVS,
Make the media slider horizontal scroll arrows more visible - Làm cho các mũi tên cuộn ngang của media slider hiển thị rõ ràng hơn cho XenForo 2.2 bởi PVS,
Make collapsible sub-forums of a forum with no parent in forum list - Tạo sub-forum thu gọn của diễn đàn không có parent trong forum list XenForo 2 bởi PVS,
Dark mode / Light Mode switcher button - Nút chuyển đổi chế độ Sáng/Tối cho XenForo 2 bởi PVS,
Adding Social Media Icons to the Headar Section - Thêm các biểu tượng Social vào Header XenForo 2 bởi PVS,
Được quan tâm
link không dấu bởi sanhpv,
Bài viết mới
link không dấu bởi sanhpv,
làm như thế này như thế nào ạ bởi phamnguyen,
Sao profile post của mình k hiện bởi sanhpv,
Hỏi về rank bị dài bởi boyngheo21,
Xenforo modification bởi urkyfight,
Nội Dung Chỉ Hiển Thị Vị Trí Trang categories bởi muabandalat,
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Other 2x Adding Social Media Icons to the Headar Section - Thêm các biểu tượng Social vào Header XenForo 2 Template Modifications 0
PVS Social Media Slider - Slider truyền thông xã hội 1.0 Template Modifications 0
PVS Nút xác thực đăng nhập Social Network trên Sidebar Template Modifications 0
PVS Socialize Your MemberCard - Hiện mạng xã hội trên MemberCard Template Modifications 0

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom