Hướng Dẫn Tạo Bài Viết Theo Nhãn Ẩn Hiện Ở Góc Phải Màn Hình

Chào các bạn hôm nay mình mạo muội xin chia sẻ với các bạn cách tạo bài viết các nhãn liên quan ẩn hiện ở góc phải màn hình,
khi click chuột thì bài viết theo nhãn tự động kéo ra, code css rất nhẹ không làm ảnh hưởng đến tốc độ loading  của blog hay web của bạn.

Ảnh Demo đây

Demo Click here
Cũng rất đơn giản thôi các bạn
các bạn download  code này về rồi coppy code này .

Tạo tài khoản blogger ---> Vào Tổng Quan ---> Chọn bố cục blog ----> chọn HTML / javascript ---- > pass code vào ----> lưu lại là ok nhé.

click download về dùng nhé

<style type="text/css">
#gb{
position:fixed;
bottom:3px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:105px;
width:71px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ6A0EKZcwPUjePD_8NNqEF2C4T0_VHhFBsp5QKs7SjHl4LeaoZaxPU4BFTbZ_77s70H3zL8b7eAzjTG5eCWXluEM8Tp8U4VtZ3rklEBJPg2Y7nVeScCrINwuksY5nh_t44VuhQVAUv4s/s1600/chatbox.png') no-repeat;
}
.gbcontent{
float:left;
background:none;
padding:3px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 75-w) : moveGB(71-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent"onmouseover="startexplosion('Ủng Hộ Hải Nhé')">

<style type="text/css">
.Btrix-item {
width: 90px;
height: 90px;
border-radius: 50%;
position: relative;
cursor: default;}
.Btrix-info-wrap,
.Btrix-info{
position: absolute;border: 1px solid #8D8D8D;margin-top: -1px;width: 90px;
height: 90px;
border-radius: 50%;}
.Btrix-info-wrap {
background: #07CFE0 url(../images/bg.jpg);
box-shadow:
0 0 0 20px rgba(155,155,155,0.2),
inset 0 0 3px rgba(115,114, 23, 0.8);
}
.Btrix-info > div {
display: block;position: absolute;width: 90px;height: 90px;
border-radius: 50%;
background-position: center center;
-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}
.Btrix-info .Btrix-info-front {
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.Btrix-info .Btrix-info-back {
opacity: 0;background: #07CFE0;pointer-events: none;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out 0.2s;
-moz-transition: all 0.4s ease-in-out 0.2s;
-o-transition: all 0.4s ease-in-out 0.2s;
-ms-transition: all 0.4s ease-in-out 0.2s;
transition: all 0.4s ease-in-out 0.2s;
}
.Btrix-img-1 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_aKgATeAECiVAcqYszAGCimeOn0P468xH-20ckbd-WRSbhJpD57q2XuVdwHJIeAEqFzcrLZhBuzIyLJNZQdgCg_r6Hr2A1EnoUX8HBMwPh78uXBco5cqKRSpzto5-By_gUImNF5sq3wE/s320/2015+-+1+%252811%2529.jpg);}
.Btrix-img-2 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh403xUdBeESerR19qsx1uTY-Uc5r-lSbpThgHUGlTq7uP7mQy9zoaijPl9ndiItgUmVX6DSMVzFghZaETgXN4RVhFy9fX_6mf0jp9b3tLG-xKN0j-ic727IXRrsc4c47cofu4NUbp9rKM/s320/hinh+nen+doc+sach+dep+va+an+tuong+%25282%2529.jpg);}
.Btrix-img-3 {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR5crFpObFBkXGthyphenhyphenNBLDrURnFxwqhzR8L00nKSNqvIaLY0gfBYVGlk_Flcr0zRGQhlMqgsc8xsFAv8_G1yP8dvaDYkjCniKQJoBtK1FxuyXaQ7-Yh2XgWIakD3xBdXZIe4oBhI4Q85PA/s320/8.jpg);}
.Btrix-info h3 {
color: #fff;
text-transform: uppercase;letter-spacing: 2px;font-size: 16px;margin: -20px 15px;
padding: 20px 0 0 0;
height: 50px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.Btrix-info p {
color: #fff;
padding: 10px 5px 0;
font-style: italic;
margin: -60px 30px;
font-size: 12px;
border-top: 1px solid rgba(155,155,155,0.2);
}
.Btrix-info p a {
display: block;color: #e7615e;font-style: normal;
font-weight: 500;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.Btrix-info p a:hover {
color: #fff;
}
.Btrix-item:hover .Btrix-info-front {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
}
.Btrix-item:hover .Btrix-info-back {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
pointer-events: auto;}
.Btrix-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;}
.Btrix-grid:after,
.Btrix-item:before {
content: '';
display: table;}
.Btrix-grid:after {
clear: both;}
.Btrix-grid li {
width: 90px;
height: 90px;
display: inline-block;
margin: 4px;
}

</style>

<section class="main">
<ul class="Btrix-grid">
<li>
<div class="Btrix-item Btrix-img-1">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-1">
</div>
<div class="Btrix-info-back">
<h3>
Gái Xinh</h3>
<a href="https://hotgirlngaynay.blogspot.com/search/label/hot%20girl%20ng%C3%A0y%20nay"><br />clik here</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="Btrix-item Btrix-img-2">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-2">
</div>
<div class="Btrix-info-back">
<h3>
Tâm Sự</h3>
<a href="https://hotgirlngaynay.blogspot.com/2015/07/an-ong-luan-ve-cai-su-so-vo-cua-minh.html"><br />clik here</a></div>
</div>
</div>
</div>
</li>
<li>
<div class="Btrix-item Btrix-img-3">
<div class="Btrix-info-wrap">
<div class="Btrix-info">
<div class="Btrix-info-front Btrix-img-3">
</div>
<div class="Btrix-info-back">
<h3>
MP3</h3>
<a href="https://hotgirlngaynay.blogspot.com/2013/07/mong-em-uoc-vui-nam-cuong.html"><br />clik here</a></div>
</div>
<br /></div>
</div>
</li>
</ul>
</section>

</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (75-gb.offsetWidth).toString() + "px";
</script>

Các bạn thay link màu đỏ thành link của bạn nhé.Màu vàng nghệ các bạn nên thay chủ đề của nhãn ,còn màu xanh các bạn nên thay link ảnh của bạn nhé....

Manhhaiblog chúc các bạn thành công nhé..các bạn thông cảm mình sử dụng chống coppy bài nên dùng phương pháp tải về . mình chia sẻ cho các bạn dùng heeee.