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

- Thêm Slide bài viết mới chạy ngang cho Blogspot
- Thủ thuật Facebook chèn link web vào stt FB hiện chung với like cmt và share
- Hiển thị nhãn (label) phong cách màu tím cực nổi cho blogspot [V3]
- Biểu tượng trái tim tình yêu đẹp trên Facebook (FB)
- Thêm Google translate - dịch đa ngôn ngữ cho Blogspot
- Code Javascript tạo thêm đồng hồ cho Website, blog
- Blogger Templates Vector Responsive
- Tạo iFrame YouTube Màu bạc
- Cài đặt theo dõi Google analytics cho blogspot
- Cách tạo khung Form đăng nhập cho blogspot
- Thêm chia sẻ Like và share bài viết cho blogspot [trên trang itviet360]
- Thêm nút theo dõi (Follow) cho blogspot
Comments[ 0 ]
Đăng nhận xét