BLOGSPOT
Cách tạo blog miễn phí trên Blogspot đầy đủ các bước 2024 Cách kích hoạt giao diện điện thoại trên Blogger Hướng dẫn cách sao lưu và phục hồi dữ liệu trên Blogspot Cách thêm mô tả tìm kiếm bài viết chuẩn SEO trên Blogspot Cách sử dụng Permalink trên Blogspot để giúp bài viết chuẩn SEO hơn Cách sử dụng Google Friend Connect trên Blogspot đơn giản nhất Cách tạo form liên hệ trên Blogspot bằng Google Docs Cách sử dụng Robots.txt để tối ưu SEO trên Blogspot Cách thêm Metro UI Social Profile Widget v3.0 vào Blogspot Cách sử dụng thẻ tiêu đề robot tùy chỉnh chuẩn SEO cho bài đăng trên Blogspot Hướng dẫn đầy đủ các tính năng SEO trên Blogspot Cách thiết lập kích thước hình ảnh tối đa trong các bài viết trên Blogspot Cách chuyển hướng lỗi 404 trên Blogspot đơn giản nhất Cách chèn nút Tweet Twitter vào bài viết trên Blogspot Cách chèn thêm nút Pinterest vào bài viết trên Blogspot Cách sao lưu bài viết, trang và bình luận trên Blogspot đơn giản nhất Cách thay đổi địa chỉ URL trên Blogspot đơn giản nhất Cách tùy chỉnh form liên hệ trên Blogspot Cách mở giao diện bình luận mới theo theme và phiên bản trên Blogspot Cách tắt chế độ Text Selection trên Blogspot Cách cài tiện ích thống kê trên Blogspot Cách tạo profile tác giả dưới bài viết trên Blogspot Chuyển hướng đến trang chủ khi gặp lỗi 404 trên Blogspot Cách chèn tiện ích Social Profile Widget vào Blogspot Cách tạo Favicon trên Blogspot Cách thêm thanh cuộn vô hạn trên Blogspot Cách kích hoạt tính năng Quick Edit Pencil trên Blogspot Cách thêm thẻ Alt và title vào hình ảnh trong bài viết Blogspot Hướng dẫn hiển thị tiêu đề bài viết và tên trang trên Blogspot Tìm hiểu HTML Editor trong Blogspot Cách xóa và ẩn thông báo trạng thái trên Blogspot Cách khắc phục lỗi OpenID trên Blogspot Cách vô hiệu hóa bình luận trong bài đăng trên Blogspot Cách thiết kế giao diện bình luận bằng mã CSS trên Blogspot Hướng dẫn bật HTTPS trên Blogspot giúp tăng độ uy tín cho blog
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Cách chèn tiện ích Social Profile Widget vào Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách chèn tiện ích CSS Social Profile Widget trên [Blogspot], đây là một thủ thuật rất hữu ích mà các bạn cần nên biết và áp dụng cho trang blog của mình.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Tiện ích [CSS Social Profile Widget] là một những công cụ hiệu quả giúp người dùng có thể quảng bá trang blog của mình thông qua các trang mạng xã hội khác nhau. Qua đó, tiện ích độc đáo này sẽ cho phép bạn kết nối tài khoản mạng xã hội và trang blog của bạn dễ dàng hơn. Ngoài ra với tiện ích này, người truy cập vào trang blog của bạn sẽ được tiếp cận các trang xã hội của bạn để thuận tiện hơn trong việc kết bạn, giao lưu hoặc theo dõi nhau.

Trong đó, bốn nền tảng mạng xã hội lớn nhất hiện nay như Facebook, Twitter, Pinterest và Linkedin đều sẽ được tính hợp sẵn trong tiện ích này.

Để có thể chèn tiện ích CSS Social Profile Widget trên trang blogspot của mình, mời các bạn hãy làm theo các bước hướng dẫn ngay sau đây.

Bài viết này được đăng tại [free tuts .net]

1. Các phiên bản của tiện ích CSS Social Profile Widget

Hầu hết các widget này đều có một diện mạo rất độc đáo với nhiều hiệu ứng khác nhau. Hiện tại, tiện ích này có sẵn với 3 phiên bản khác nhau. Bạn có thể chọn một trong những tùy chọn này để sử dụng, bao gồm:

Widget 1: Hiệu ứng lửa

/* Burning Social Profile Gadget by Tech Prevue */

<style type="text/css">

.tps {list-style:none;margin-top:10px;}

.tps li {float:left;background-repeat:no-repeat;display:inline;}

.tps li a {display:block; width:32px; height:32px; position:relative;}

li.fb {background-image:url("//goo.gl/R6wDVf");background-position: 0 0;width:32px;height:32px;}

li.gp {background-image:url("//goo.gl/R6wDVf");background-position: 0 -34px;width:32px;height:32px;}

li.tw {background-image:url("//goo.gl/R6wDVf");background-position: 0 -68px;width:32px;height:32px;}

li.ln {background-image:url("//goo.gl/R6wDVf");background-position: 0 -102px;width:32px;height:32px;}

li.fd {background-image:url("//goo.gl/R6wDVf");background-position: 0 -136px;width:32px;height:32px;}

#tps:hover li { opacity:0.2; }

#tps li {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms;}

#tps li a strong {opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms;}

#tps li:hover {opacity:1;}

#tps li:hover a strong {opacity:1; top:-10px;}

</style>

<div class="tps" id="tps">

<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>

<li class="tw"><a href="http://www.twitter.com/techprevue" target="_new" title="Follow on Twitter"></a></li>

<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>

<li class="ln"><a href="http://www.linkedin.com/in/vinayprajapati" target="_new" title="LinkedIn Professional Network"></a></li>

<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>

</div>

Widget 2: Nền hiệu ứng tuyết trắng

/* Snow White Square Social Profile Gadget by Tech Prevue */

<style type="text/css">

.tps {list-style:none;margin-top:10px;}

.tps li {float:left;background-repeat:no-repeat;display:inline;}

.tps li a {display:block; width:32px; height:32px; position:relative;}

li.fb {background-image:url("//goo.gl/chaAwq");background-position: 0 0;width:32px;height:32px;}

li.gp {background-image:url("//goo.gl/chaAwq");background-position: 0 -34px;width:32px;height:32px;}

li.tw {background-image:url("//goo.gl/chaAwq");background-position: 0 -68px;width:32px;height:32px;}

li.ln {background-image:url("//goo.gl/chaAwq");background-position: 0 -102px;width:32px;height:32px;}

li.fd {background-image:url("//goo.gl/chaAwq");background-position: 0 -136px;width:32px;height:32px;}

#tps:hover li { opacity:0.2; }

#tps li {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms;}

#tps li a strong {opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms;}

#tps li:hover {opacity:1;}

#tps li:hover a strong {opacity:1; top:-10px;}

</style>

<div class="tps" id="tps">

<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>

<li class="tw"><a href="http://www.twitter.com/techprevue" target="_new" title="Follow on Twitter"></a></li>

<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>

<li class="ln"><a href="http://www.linkedin.com/in/vinayprajapati" target="_new" title="LinkedIn Professional Network"></a></li>

<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>

</div>

Widget 3: Thiết kế tròn hiệu ứng

/* Shine Round Social Profile Gadget by Tech Prevue */

<style type="text/css">

.tps {list-style:none;margin-top:10px;}

.tps li {float:left;background-repeat:no-repeat;display:inline;}

.tps li a {display:block; width:32px; height:32px; position:relative;}

li.fb {background-image:url("//goo.gl/Ilf79x");background-position: 0 0;width:32px;height:32px;}

li.gp {background-image:url("//goo.gl/Ilf79x");background-position: 0 -34px;width:32px;height:32px;}

li.tw {background-image:url("//goo.gl/Ilf79x");background-position: 0 -68px;width:32px;height:32px;}

li.ln {background-image:url("//goo.gl/Ilf79x");background-position: 0 -102px;width:32px;height:32px;}

li.fd {background-image:url("//goo.gl/Ilf79x");background-position: 0 -136px;width:32px;height:32px;}

#tps:hover li { opacity:0.2; }

#tps li {-webkit-transition-property: opacity; -webkit-transition-duration: 500ms; -moz-transition-property: opacity; -moz-transition-duration: 500ms;}

#tps li a strong {opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms;}

#tps li:hover {opacity:1;}

#tps li:hover a strong {opacity:1; top:-10px;}

</style>

<div class="tps" id="tps">

<li class="fb"><a href="https://www.facebook.com/techprevue" target="_new" title="Like Facebook Page"></a></li>

<li class="tw"><a href="http://www.twitter.com/techprevue" target="_new" title="Follow on Twitter"></a></li>

<li class="gp"><a href="https://plus.google.com/103741144523748761550" target="_new" title="Follow on Google+"></a></li>

<li class="ln"><a href="http://www.linkedin.com/in/vinayprajapati" target="_new" title="LinkedIn Professional Network"></a></li>

<li class="fd"><a href="/feeds/posts/default" target="_new" title="Subscribe RSS Feed"></a></li>

</div>

2. Cách chèn tiện ích CSS Social Profile Widget trên Blogspot

Để thêm tiện ích này trên blog, các bạn cần thêm tiện ích HTML / Javascript vào blog của mình với các bước thực hiện như sau:

Bước 1: Truy cập vào trang quản lý blogspot của mình, bạn tìm đến mục Bố cục trong menu và chọn tùy chọn Thêm tiện ích.

chen tien ich css 0 PNG

Bước 2: Trong cửa sổ danh sách tiện ích vừa mở ra, thì bạn hãy tìm đến tiện ích có tên HTML/Javascript và nhấn dấu cộng ở bên cạnh.

chen tien ich css 2 PNG

Bước 3: Sau khi bạn chọn HTML/Javascript thì trang blog sẽ xuất hiện giao diện như sau:

chen tien ich css 3 PNG

Bước 4: Sau đó bạn hãy copy một trong 3 đoạn code ở phần trên và ô nhập nội dung, trong ví dụ này mình chọn widget 2: nền hiệu ứng tuyết trắng để làm minh họa:

chen tien ich css PNG

Bước 5: Giờ bạn nhấn Lưu để lưu các đoạn code này lại. Ngay sau đó, trên trang blog của bạn sẽ hiển thị tiện ích CSS Social Profile Widget như hình dưới đây.

chen tien ich css 1 PNG

Ngoài ra, tiện ích này còn có thể được sử dụng trên bất kỳ blog hoặc trang web nào hỗ trợ các tiện ích HTML và CSS, ví dụ như WordPress, Tumblr, Web...

Lưu ý: Trong tiện ích này, bạn nên thay đổi các địa chỉ URL bằng tên và địa chỉ của trang blog và mạng xã hội của mình.

Vậy là mình đã vừa hướng dẫn các bạn cách chèn tiện ích CSS Social Profile Widget trên Blogspot đơn giản nhất. Mong rằng bài viết này sẽ hữu ích đối với các bạn. Chúc các bạn thực hiện thành công!

Cùng chuyên mục:

Cách thiết kế giao diện bình luận bằng mã CSS trên Blogspot

Cách thiết kế giao diện bình luận bằng mã CSS trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách thiết kế giao diện…

Cách vô hiệu hóa bình luận trong bài đăng trên Blogspot

Cách vô hiệu hóa bình luận trong bài đăng trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách vô hiệu hóa bình…

Cách khắc phục lỗi OpenID trên Blogspot

Cách khắc phục lỗi OpenID trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách khắc phục lỗi Blogger…

Cách xóa và ẩn thông báo trạng thái trên Blogspot

Cách xóa và ẩn thông báo trạng thái trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách xóa và ẩn thông…

Tìm hiểu HTML Editor trong Blogspot

Tìm hiểu HTML Editor trong Blogspot

Trong bài viết này ta sẽ tìm hiểu khái niệm cơ bản về HTML Editor…

Hướng dẫn hiển thị tiêu đề bài viết và tên trang trên Blogspot

Hướng dẫn hiển thị tiêu đề bài viết và tên trang trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách tùy chỉnh hiển thị…

Hướng dẫn bật  HTTPS trên Blogspot giúp tăng độ uy tín cho blog

Hướng dẫn bật HTTPS trên Blogspot giúp tăng độ uy tín cho blog

Trong bài viết này mình sẽ hướng dẫn các bạn cách kích hoạt HTTPS trên…

Cách thêm thẻ Alt và title vào hình ảnh trong bài viết Blogspot

Cách thêm thẻ Alt và title vào hình ảnh trong bài viết Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách thêm thẻ Alt và…

Cách kích hoạt tính năng Quick Edit Pencil trên Blogspot

Cách kích hoạt tính năng Quick Edit Pencil trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách kích hoạt tính năng…

Cách thêm thanh cuộn vô hạn trên Blogspot

Cách thêm thanh cuộn vô hạn trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách thêm thanh cuộn vô…

Cách tạo Favicon trên Blogspot

Cách tạo Favicon trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách tạo Favicon tùy chỉnh…

Chuyển hướng đến trang chủ khi gặp lỗi 404 trên Blogspot

Chuyển hướng đến trang chủ khi gặp lỗi 404 trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách tự động chuyển hướng…

Cách tạo profile tác giả dưới bài viết trên Blogspot

Cách tạo profile tác giả dưới bài viết trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách tạo profile của tác…

Cách cài tiện ích thống kê trên Blogspot

Cách cài tiện ích thống kê trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách cài tiện ích thống…

Cách mở giao diện bình luận mới theo theme và phiên bản trên Blogspot

Cách mở giao diện bình luận mới theo theme và phiên bản trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách mở giao diện bình…

Cách tùy chỉnh form liên hệ trên Blogspot

Cách tùy chỉnh form liên hệ trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách tùy chỉnh form liên…

Cách tắt chế độ Text Selection trên Blogspot

Cách tắt chế độ Text Selection trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách tắt chế độ Text…

Cách thay đổi địa chỉ URL trên Blogspot đơn giản nhất

Cách thay đổi địa chỉ URL trên Blogspot đơn giản nhất

Trong bài này mình sẽ hướng dẫn các bạn cách thay đổi địa chỉ URL…

Cách sao lưu bài viết, trang và bình luận trên Blogspot đơn giản nhất

Cách sao lưu bài viết, trang và bình luận trên Blogspot đơn giản nhất

Trong bài viết này mình sẽ hướng dẫn các bạn cách sao lưu bài viết,…

Cách chèn thêm nút Pinterest vào bài viết trên Blogspot

Cách chèn thêm nút Pinterest vào bài viết trên Blogspot

Trong bài viết này mình sẽ hướng dẫn các bạn cách chèn thêm nút Pinterest…

Top