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

Digitalnomad.vn : Thiết Kế Web đa cấu trúc, trải nghiệm viết blog đa nội dung, Koc Content truyền thông cho chính mình, xây dựng hệ thống kiếm tiền tự động online, đa dạng nguồn tài chính từ việc kiến tạo các thu nhập thụ động trên internet. Gia Bảo, Blogger viết vì đam mê, chia sẻ kỹ thuật giúp bạn biến các thiết bị công nghệ kết nối internet, thành cỗ máy MMO khai thác mỏ vàng trực tuyến, các thức giúp chúng ta chạm tay vào 'tự do tài chính'.

Chủ Đề Nổi Bật :


Sponsor

1. thotgo.asia
2. goghepthanh.com
3. dichvuketoannasa.com
4. remcuakimanh.vn