Home » Thủ thuật blog
Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
Thủ thuật thêm những chia sẻ mạng xã hội và gợi ý người dùng theo dõi trang của mình qua mạng xã hội được rất nhiều blogger sử dụng. Tuy nhiên làm thế nào để cho nó trình bày gọn nhất trên giao diện trang web, blog của mình thì lại là lựa chọn của chủ trang blog đó.
- Với tiện ích này các bạn có thể thêm tất cả những kệnh mạng xã hội hoặc diễn đàn mà các bạn có như: Facebook, G+, Youtube, RSS, Twitter,...
- Hướng dẫn thủ thuật:
1. Vào bảng điều khiển Blogger-> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript.
2. Dán code dưới đây vào tiện ích vừa thêm:
- Trong đó:
Các link bô mùa vàng được thay thế bằng link của các bạn
Tags:
Thu thuat, Thu thuat blogspot, Thủ thuật blog
- Với tiện ích này các bạn có thể thêm tất cả những kệnh mạng xã hội hoặc diễn đàn mà các bạn có như: Facebook, G+, Youtube, RSS, Twitter,...
- Hướng dẫn thủ thuật:
1. Vào bảng điều khiển Blogger-> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript.
2. Dán code dưới đây vào tiện ích vừa thêm:
<style>
.StarsBloggingSocialButtonsBorder {
margin:0 auto;
padding:5px;
width:auto;
border-radius:5px;
border: 1px #BBBBBB solid;
}
#bloggertrix-SexySocialButtons{
list-style:none;
text-decoration:none;
font-size:0.9em;
font-family:trebuchet ms,sans-serif;
}
#bloggertrix-SexySocialButtons a{
text-decoration:none;
font-family:trebuchet ms,sans-serif;
}
#bloggertrix-SexySocialButtons li{
position:relative;
height:38px;
cursor:pointer;
padding: 0 !important;
}
#bloggertrix-SexySocialButtons .facebook, .googleplus, .YouTube, .rss, .twitter{
position:relative;
z-index:5;
display:block;
float:none;
margin:5px 0 0;
width:210px;
height:38px;
border-radius:5px; background:url(http://1.bp.blogspot.com/-JKq0eFFwx34/UGx39fhHO_I/AAAAAAAABE4/56i9phAS2do/s1600/NBT+Sprites+Social+Icons.png) no-repeat;
background-color:rgba(217,30,118,.42);
-webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
box-shadow:rgba(0,0,0,.28) 0 2px 3px;
color:#141414;
text-align:left;
text-indent:50px;
text-shadow:#333 0 1px 0;
white-space:nowrap;
line-height:32px;
-webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,background-color .25s ease-in-out;
transition:width .25s ease-in-out,background-color .25s ease-in-out;
-o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;
}
#bloggertrix-SexySocialButtons li:after{
position:absolute;
top:0;
left:50px;
z-index:2;
display:block;
height:38px; color:#ffffff;
content:attr(data-alt);
line-height:32px;
}
#bloggertrix-SexySocialButtons .icon{
overflow:hidden;
color:#fafafa;
}
#bloggertrix-SexySocialButtons .facebook{
width:32px;
height:32px;
background-color:rgba(59,89,152,0.42);
background-position:0 0;
}
#bloggertrix-SexySocialButtons .twitter{
width:32px;
height:32px;
background-color:rgba(64,153,255,0.42);
background-position:0 -33px;
}
#bloggertrix-SexySocialButtons .googleplus{
width:32px;
height:32px;
background-color:rgba(228,69,36,0.42);
background-position:-3px -66px;
}
#bloggertrix-SexySocialButtons .YouTube{
width:32px;
height:32px;
background-color:rgba(174,45,39,0.42);
background-position:-2px -95px;
}
#bloggertrix-SexySocialButtons .rss{
width:32px;
height:32px;
background-color:rgba(255,102,0,0.42);
background-position:-3px -126px;
}
#bloggertrix-SexySocialButtons li:hover .icon,
.touch #bloggertrix-SexySocialButtons li .icon{
width:210px;
}
.touch #bloggertrix-SexySocialButtons li .facebook, #bloggertrix-SexySocialButtons li:hover .facebook{
background-color:rgba(59,89,152,1);
}
.touch #bloggertrix-SexySocialButtons li .twitter, #bloggertrix-SexySocialButtons li:hover .twitter{
background-color:rgba(64,153,255,1);
}
.touch #bloggertrix-SexySocialButtons li .googleplus, #bloggertrix-SexySocialButtons li:hover .googleplus{
background-color:rgba(228,69,36,1);
}
.touch #bloggertrix-SexySocialButtons li .YouTube, #bloggertrix-SexySocialButtons li:hover .YouTube{
background-color:rgba(174,45,39,1);
}
.touch #bloggertrix-SexySocialButtons li .rss, #bloggertrix-SexySocialButtons li:hover .rss{
background-color:rgba(255,102,0,1);
}
</style>
<div class="bloggertrixSocialButtonsBorder">
<ul id="bloggertrix-SexySocialButtons">
<li data-alt="Theo dõi chúng tôi trên Facebook"><a class="icon facebook" href="https://www.facebook.com/itviet360">itviet360 trên Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="https://twitter.com/itviet360">Follow us on Twitter</a></li>
<li data-alt="Theo dõi tôi trên Google+"><a class="icon googleplus" href="https://plus.google.com/117290973503680239179">Tìm tôi trên Google+</a></li>
<li data-alt="Subscribe us on YouTube"><a class="icon YouTube" href="http://www.youtube.com/itviet360">Subscribe us on YouTube</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/itviet360">RSS itviet360</a></li></ul></div>
- Trong đó:
Các link bô mùa vàng được thay thế bằng link của các bạn

- Ký tự đặc biệt đẹp chèn vào trong Yahoo, Facebook...
- Page number Navigation - Code phân trang đẹp cho blogspot
- Sửa lỗi bàn phím PC, Laptop bị khóa trên win 7, XP, 8
- Khung chia sẻ bài viết blogspot hiển thị chi tiết tác giả bài viết
- Tùy chình tiện ích nhãn (label Widget) màu đen cho blogspot
- CSS3 hiệu ứng đổi hình ảnh đẹp cho Web, blogspot
- Sửa lỗi (error ) phân trang (pagenavi) trong Blogspot
- Template Blogspot Responsive cực đỉnh cho blog hình ảnh, sản phẩm
- Một số vấn đề thường gặp khi sử dụng blogspot
- Xóa chữ "đọc thêm..." mặc định ngoài trang chủ và trang Label blogspot
- Cách cài đặt Domain (tên miền) cho blogspot không bị chặn
- Xóa dòng chữ "hiển thị tất cả bài đăng có nhãn..." trong blogspot
Comments[ 0 ]
Đăng nhận xét