Share code Slide Out trái, phải chỉ sử dụng Css dùng tạo bài viết liên quan, Table Of Content cực ngầu

Hôm nay Gia Bảo chia sẻ với các bạn Code Slide Out gọn nhẹ bằng CSS khá thú vị dùng tạo slidebar cố định bên trái, bên phải dùng chèn quảng cáo, điều hướng tới bài viết liên quan, hoặc tới vị trí nội dung xác định trên trang bài viết blogspot,   bằng phương pháp chèn thủ công vào bài viết blogspot, bạn cũng có thể chèn code hiển thị toàn trang kết hợp với thủ thuật random post, related post, link tiếp thị liên kết... 

Code gốc thủ thuật :  https://www.webnots.com/css-floating-slideout-widget-for-weebly 

Lưu ý dòng chữ tô màu đỏ  right: , nếu bạn muốn hiển thị bên trái chỉ cần thay nó bằng left:

<!--Slide out trái, phải tạo bài viết liên quan thủ công -->    
<style type="text/css">
/* Slideout outer button */
#slideout {
position: fixed;
z-index: 999999;
top: 150px;
right: 0;
padding: 25px 0;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
/* Slideout inner widget area */
#slideout_inner {
position: fixed;
z-index: 999999;  
top: 150px;
right: -405px;
background: white;
width: 350px;
padding: 25px;
max-height: 600px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
border-radius: 0 10px 10px 0;
}
/* Hover alignment */
#slideout:hover {
right: 400px;
}
#slideout:hover #slideout_inner {
right: 0;
}
</style>  


<div id="slideout">
⭅<br/>  
🐧<br/>
🐧<br/>
🐧<br/>
 ⌹<br/>
🗄<br/>
🗃<br/>
🛏<br/>
🛋<br/>  
💰<br/>  
⭆<br/>
 
<!--<img src="https://3.bp.blogspot.com/-SSw5tSPruqc/YD3lmYpiqcI/AAAAAAAACvA/3d0Cjwnap-oaEMrTD01WdM6FSatnnrIKQCK4BGAYYCw/s1600/Logo-Blog-Gia-Bao300.png" width=10% alt="Subscribe" />-->
 
<div id="slideout_inner">
<div>
<!--code-->  

<div  style="font-size: 17.5px;margin: 2.5px;background: white;padding: 4.5px;border-radius: 4px;border: 1px solid #ccc;border-radius: 3px;text-align: justify;">  
<p>
<b>Bài Viết Cùng Chủ Đề</b>
</p> 

<ul style="list-style: '🎯 ';">
 
<li>
<a href="https://www.digitalnomad.vn/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt%20Wordpress">
Thủ Thuật Wordpress 
</a>
</li>

<li>
<a href="https://www.digitalnomad.vn/search/label/Thi%E1%BA%BFt%20k%E1%BA%BF%20website%20WordPress">
Thiết Kế Web Wordpress 
</a>
</li>

</ul>



<p>
<b>Bài Viết Liên Quan</b>
</p> 
 
<ul style="list-style: '🎯 ';">
 
<li>
<a href="https://www.digitalnomad.vn/2021/03/mmo-kiem-tien-online-tu-website-khong-kho-nhung-phai-biet-cachVoi297.html">
 Kiếm tiền từ website cá nhân  
</a>
</li>
   
<li>
<a href="https://www.digitalnomad.vn/2021/06/plugin-hay-tien-ich-khong-thieu-cho-web-su-dung-nen-tang-wordpressPgF173.html">
 Plugin Wordpress
</a>
</li>
 
<li>
<a href="https://www.digitalnomad.vn/2021/06/danh-sach-theme-wordpress-mien-phi-dep-lung-linhGi875.html">
 Theme Wordpress Miễn Phí
</a>
</li>

 
<li>
<a href="https://www.digitalnomad.vn/2021/10/lam-viec-voi-trang-quan-tri-trang-web-Dashboard-wordpressJowIawo9.html">
Làm việc với trang quản trị Wordpress
</a>
</li>
   
 
<li>
<a href="https://www.digitalnomad.vn/2021/06/danh-sach-theme-wordpress-mien-phi-dep-lung-linhGi875.html">
 Theme Wordpress miễn phí
</a>
</li>

<li>
<a href="https://www.digitalnomad.vn/2021/09/kiem-tien-online-voi-rehub-theme-wordpresssmon1o.html#content-egg">
 Content Egg
</a>
</li>

<li>
<a href="https://www.digitalnomad.vn/2021/09/kiem-tien-online-voi-rehub-theme-wordpresssmon1o.html#affiliate-egg-pro">
 Affiliate Egg Pro
</a>
</li>
   
</ul>  

<p>
<b>Ads / Marketing / Mua Hàng Ủng Hộ Blog </b>
</p> 

<ul style="list-style: '🎯 ';">
 
<li>
<a href="https://www.digitalnomad.vn/2021/11/top-9-xe-dap-the-thao-gia-2-trieu-5-trieuCOOUS-967.html">
Xe Đạp Thể Thao Giá Rẻ 
</a>
</li>

<li>
<a href="https://www.digitalnomad.vn/2021/11/top-10-doi-giay-chay-bo-mua-nhieu-ban-chayERS-21Ki.html">
Giày Chạy Bộ Giá Rẻ 
</a>
</li>

<li>
<a href="https://www.digitalnomad.vn/2021/11/cap-dien-thoai-pin-sac-du-phong-loai-phu-kien-dien-thoai-thiet-bi-so-tien-dung-ban-chay-nhatLSXO-3835.html">
Pin Sạc Dự Phòng 
</a>
</li>

<li>
<a href="https://www.digitalnomad.vn/2021/12/top-thot-go-thiet-ke-dep-doc-dao-tien-dung-dang-mua-nhatDJSZS-627.html">
Thớt Gỗ Độc Đáo 
</a>
</li>

</ul>   

 </div>  
<!--End code-->
</div>
</div>
</div>
<!--Slide out trái, phải tạo bài viết liên quan thủ công -->  


🐧
🐧
🐧

🗄
🗃
🛏
🛋
💰


💰
🐧
🐧
🐧

🗄
🗃
🛏
🛋
💰

Dụng cụ làm bếp tiện ích

✨ Bài viết được thực hiện bởi Blogger Gia Bảo, Freelancer Marketing Online, có nhiệm vụ kết nối khách cần mua với nhà phân phối, công ty sản xuất. BLOG GIA BẢO không phải đơn vị trực tiếp bán hàng trên website mà chỉ là nơi giúp bên mua gặp gỡ bên bán.

✨ Nổi bật : Mô hình Freelancer Marketing Online Cùng Nhà Phân Phối / Công Ty Sản Xuất Triển Khai Kênh Bán Hàng Trực Tuyến Thông Qua Việc Mở Gian Hàng TMĐT : Xem thêm,....

Kem chống nắng Biore UV Aqua Rich Watery Essence/Gel SPF 50+/ PA++++ 50ml/90ml

Xem Giá Bán
Xem thêm : Chăm Sóc Cơ Thể
Mua ngay

Bộ bàn ăn gỗ cao su gấp gọn

Xem Giá Bán
Tìm hiểu thêm về : Gỗ ghép
Đặt Mua ngay