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:

<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/>



<div id="slideout_inner">
<div>


<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>

</div>
</div>
</div>

⭅
🐧
🐧
🐧
⌹
🗄
🗃
🛏
🛋
💰
⭆

Bài Viết Liên Quan

Giới Thiệu Sản Phẩm

⭅
💰
🐧
🐧
🐧
⌹
🗄
🗃
🛏
🛋
💰
⭆

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