Các dạng Layout - cấu trúc đăng bài viết blogspot bằng Code Html, Css & Javascript

Hôm nay Gia Bảo Blog tổng hợp danh sách bài viết hướng dẫn code đăng bài blogspot sử dụng bằng html, css, javascript sưu tầm trên mạng giúp các bạn làm đẹp nội dung , tạo hiệu ứng, bổ sung tính năng trên trang blogspot của mình.

Tổng hợp Layot code dùng đăng bài viết bằng Html, Css & Javascript trên trang Blogspot :

https://css-tricks.com/a-dynamically-sized-sticky-sidebar-with-html-and-css
[ Ví Dụ mẫu Sticky Sidebar 😎 ] https://abouolia.github.io/sticky-sidebar/#examples
https://www.solodev.com/blog/web-design/adding-a-sticky-nav-menu-to-your-website.stml
https://wpforthewin.com/sticky-sidebar-wordpress/amp
https://demo.web3canvas.com/jquery/jquery-sticky-for-long-sidebar
https://w3codepen.com/html-css-fixed-sticky-sidebar-menu

Tham khảo Chèn Bài viết liên quan ( quảng cáo đầu bài viết , trái phải & giữa bài đăng blogspot ) :

https://www.taoanhdep.com/2016/06/bai-viet-lien-quan-ep-cho-blogspot.html
https://www.thichnet.com/2018/05/chen-tien-ich-bai-viet-lien-quan-vao-giua-bai-viet-blogspot.html
https://haitaynamkg.blogspot.com/2016/04/box-bai-viet-lien-quan-duoi-tieu-e-bai.html
https://tinhkplus.blogspot.com/2017/08/them-hop-bai-viet-lien-quan-ep-cho.html
https://tranphucminh.blogspot.com/2011/04/chen-1-box-nho-hien-thi-cac-bai-lien.html
https://forum.vietdesigner.net/threads/them-box-thong-tin-bai-viet-dep-cho-blogspot.39597/

Cấu trúc đăng bài dạng Sidebar trên link : https://www.jqueryscript.net/tags.php?/sticky%20sidebar

[ Cấu trúc bài viết sidebar bên phải ] : https://www.jqueryscript.net/other/fix-sidebar-bottom-sticksy.html
https://www.jqueryscript.net/other/pin-element-top-sticky.html
[ Cấu trúc bài viết sidebar bên trái ] : https://www.jqueryscript.net/layout/Creating-A-Fixed-Position-Sidebar-With-jQuery-Sticky-Sidebar-Plugin.html
[ Cấu trúc bài viết sidebar link neo chuyển tới nội dung trên bài viết ] : https://www.jqueryscript.net/other/jQuery-Plugin-For-Sticky-Sidebar-Widgets-scrollsWith.html
[ Sidebar phải ẩn hiện nội dung bên phải ] : https://www.jqueryscript.net/other/Minimal-Drawer-Sidebar-Plugin-with-jQuery-Sidebar-js.html
[ Cấu trúc bài viết sidebar link neo bên trái chuyển hướng đến nội dung trên trang ] : https://www.jqueryscript.net/layout/jQuery-Plugin-for-Tree-Widget-jqTree.html

Cấu trúc đăng bài dạng Layout trên trang https://www.jqueryscript.net/layout :

[ Tổng hợp code Layout sử dụng jQuery ] : https://www.jqueryscript.net/layout/jQuery-Plugin-For-Sortable-Filterable-Grid-of-Items-Shuffle.html
https://www.jqueryscript.net/layout/jQuery-Plugin-For-Creating-One-Page-Multi-Scrolling-Website-multiScroll-js.html
https://www.jqueryscript.net/layout/jQuery-Plugin-For-One-Page-Navigation-Plugin-Page-Scroll-To-ID.html
https://vue-grid-generator.netlify.app

Cấu trúc tạo code đăng bài Blogspot trên các trang "CSS Layout Generator" :

https://www.cssportal.com/layout-generator/
https://www.cssscript.com/sticky-footnote-generator/
https://m.habr.com/ru/post/436182/
https://maurice-web.de/halb-feststehende-bereiche-mit-position-sticky/

Cấu trúc đăng bài Sticky trái phải trên Blogspot :

https://vietblogdao.com/chia-se-code-sticky-sidebar-widget-scroll-jquery-chay-on-dinh-de-cai-dat-va-tuy-chinh/

Cấu trúc đăng bài General Css Sticky :

https://scotch.io/tutorials/build-multiple-stacking-sticky-sidebars-with-pure-css-and-bootstrap-4/%7B%7Burl%7Đ%7
https://ourcodeworld.com/articles/read/619/top-7-best-table-sorter-javascript-and-jquery-plugins
https://codepen.io/ncerminara/pen/VdLpzd
https://www.lambdatest.com/blog/css-position-sticky-tutorial/
[ Các dạng sticky ] : https://css-tricks.com/how-to-get-sticky-and-full-bleed-elements-to-play-well-together/
[ Code Bottom Sticky ] : https://www.bennadel.com/blog/3932-using-a-top-of-1px-to-observe-position-sticky-intersection-changes-in-angular-11-0-3.htm
https://mihune-web.com/sticky/
https://coliss.com/articles/build-websites/operation/css/css-position-sticky-how-it-really-works.html
https://coliss.com/articles/build-websites/operation/javascript/fixed-sticky-for-position-sticky-polyfill.html

Cấu trúc đăng bài General Css Float :

https://css-tricks.com/almanac/properties/f/float

Code chỉnh sửa Vị trí hiển thị tiện ích trên trang bài đăng blogspot :

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element
https://flaviocopes.com/css-centering
How to center a div inside a div with html and css
http://www.corelangs.com/css/box/divindiv.html
https://www.w3docs.com/tools/code-editor/1306
[ Canh giữa các đối tượng tạo khung link liên kết nằm giữa khung ] : https://codepen.io/alexandredees/pen/ojaFr
https://apiumhub.com/tech-blog-barcelona/css-grid
https://www.geeksforgeeks.org/how-to-center-a-div-within-another-div
https://jsfiddle.net/hashem/VsakD/8/
https://blog.logrocket.com/13-ways-to-vertical-center
[ Canh giữa <div> trong một <div> khác ] : https://www.w3docs.com/snippets/css/how-to-horizontally-center-a-div-in-another-div.html
https://vanseodesign.com/css/vertical-centering

Tham khảo Code Wrap text :

https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/
https://stackoverflow.com/questions/33663263/how-can-i-wrap-text-around-an-object-on-three-sides-like-thí
https://stackoverflow.com/questions/23866200/wrap-text-around-both-sides-of-div
https://www.w3.org/TR/css-shapes/
wrap text div around another div.
https://stackoverflow.com/questions/5798243/text-wraps-around-floating-div-but-borders-and-hr-s-do-not/6763463
https://flaviocopes.com/css-floating-clearing/
https://what.thedailywtf.com/topic/11144/floating-a-div-so-divs-flow-around-it
http://www.avajava.com/tutorials/lessons/how-do-i-wrap-text-around-an-image.html?page=2

Trang Mẫu bố cục - tiện ích đẹp :

https://www.123itvn.com/2016/12/share-code-va-su-dung-sticky-sidebar-cho-website.html

Từ khóa gợi ý : Generator Sticky Css | General Css Float

Một số code tùy chỉnh dành cho trang đăng bài viết blogspot từ các link hướng dẫn trên :

Code Quảng cáo - 2 cột - cột trái Div quảng cáo, cột phải Div bài viết gần đây theo nhãn :

<style>
@media (max-width: 600px) {
    .post-ads {
        width: 100%;
    }
    .post-right {
        margin-left: 0 !important;
        width: 100%;
        float: left;
    }
}.post-right {
    margin: 0 0 0 310px;
    padding: 0 0 10px
}
.post-ads {
    float: left;
    margin: 0 10px 10px 0;
    position: relative
}
p.post-excerpt {
    margin: 0;
    padding: 10px;
    background-color: #ECF0F1;
    font-size: 17px;
    line-height: 1.5em;
    color: #09f
}
#related-postsBox {
    margin: 10px 0
}
#related-postsBox ul li {
    list-style-type: none;
    color: #2980C1;
    font-size: 16px;
    line-height: 22px;
    max-height: 22px;
    overflow: hidden
}
#related-postsBox ul li a {
    color: #09f
}
#related-postsBox ul li a:hover {
    color: #F90053
}
#related-postsBox h4 {
    color: #f90053;
    border-bottom: 1px dashed #f90053;
    padding: 5px 0;
    font-size: 18px;
    margin-bottom: 5px
}
#related-postsBox ul {
    margin-left: 0;
padding: 0
}
#related-postsBox .fa {
    margin-right: 5px
}
#related-postsBox ul li a:before {
    content: "\f046";
    font-family: 'FontAwesome';
    color: #f90053;
    padding-right: 5px
}
#related-posts1Box ul li:before {
    display: none;
}

</style>


<div class='qc-header-post'>


<div class='post-ads'>

<ul>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Báo Giá Gỗ ghép / ván ghép / Plywood
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Ván gỗ phủ veneer</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Ván gỗ phủ keo bóng</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Ván gỗ phủ melamine trắng</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Gỗ Sồi
</a>
</li>
<li style="text-align: justify;font-size: 16px;">
<a href="">
Gỗ muồng
</a>
</li>
<li style="text-align: justify;font-size: 16px;">
<a href="">
Gỗ cao su, gỗ tràm xẻ sấy
</a>
</li>
<li style="text-align: justify;font-size: 16px;">
<a href="">
Sấy Thuê Gỗ
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Thớt gỗ
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Mặt Bàn Ghế Học Sinh, Mặt Bàn Ghế Cafe, Mặt Bàn ghế phòng ăn
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Bán Ký Gửi Phụ Kiện, Vật Tư Ngành Gỗ
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Bán Ký Gửi Sàn Gỗ Kỹ Thuật
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Xưởng May Rèm Cửa
</a>
</li>

</ul>
</div>



<div class='post-right'>
<p class='post-excerpt' style="text-align: justify">

<b>
Liên hệ mua gỗ ghép cao su, gia công ghép gỗ sồi, gỗ óc chó, gỗ muồng, gỗ xoài, báo giá gỗ công nghiệp mdf, plywood    : 0960 970 650
</b>
</p>


<div id='related-postsBox'>
<h4>
<i class='fa fa-bullhorn'/>
Mục Lục
</h4>



<div class="recentpostarea">

<style type="text/css"> .recentpostarea {list-style-type: none;counter-reset: countposts;} .recentpostarea a {text-decoration: none; color: #000000;} .recentpostarea a:hover {color: #000;} .recentpostarea li:before {background: #000000;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;} li.r-p-title { padding: 5px 0px;} .r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;} .r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;} .recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;} .r-p-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 12px;} </style>
<script type = "text/JavaScript"> function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... read more";readmorelink = readmorelink.link(posturl); var postdate = entry.published.$t;var showyear = postdate.substring(0,4);var showmonth = postdate.substring(5,7);var showday = postdate.substring(8,10);var monthnames = new Array(); monthnames[1] = "Jan";monthnames[2] = "Feb";monthnames[3] = "Mar";monthnames[4] = "Apr";monthnames[5] = "May";monthnames[6] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec"; if ("content" in entry) {var postcontent = entry.content.$t;}else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var re = /<\S[^>]*>/g; postcontent = postcontent.replace(re, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }} </script>
<script> var posts_number = 3; var posts_date = true; var post_summary = true; var summary_chars = 60; </script>
<script type="text/javascript">
    quotes2recentpostsStyle2 = new Array()
    quotes2recentpostsStyle2[0] = "GoogleAds"
    quotes2recentpostsStyle2[1] = "SeoTop"
    quotes2recentpostsStyle2[2] = "Kho ván gỗ ghép"
    randomquote2recentpostsStyle2 = Math.random() * (quotes2recentpostsStyle2.length)
    randomquote2recentpostsStyle2 = Math.floor(randomquote2recentpostsStyle2)
    var randLabel = quotes2recentpostsStyle2[randomquote2recentpostsStyle2];
document.write('<script src="'+"https://www.digitalnomad.vn/feeds/posts/default/-/"+randLabel+"?orderby=published&alt=json-in-script"+'&callback=showrecentposts"><\/script>')
</script>
<noscript>Your browser does not support JavaScript!</noscript>
</div>

</div>

</div>

</div>

Box Float Right - Hộp Quảng Cáo bên tay phải :

Lưu ý nếu muốn QC bên tay trái bạn đổi

float:right;
Thành :

float:left;

<style>
#rp-pre {
float:right;
width:300px;
padding-left:10px;
}
#rp-content {
border:1px solid #bbb;
background:#eee;
}
#rp-title {
text-align: center;
background:#bbb;
font-weight:bold;
color:#F95107;
margin:3px;
padding-bottom:2px;
}
#rp-posts {
position:relative;
left:-20px;
}
#rp-posts a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZYyh7xPDzMVQi6YekmPEPf8Fe2DzGJmZgR3x_Fn6YFMQhZZeye_wPGD5c4whpW06sroL9ca9Ufe4N8peNdfk-kidZTk1kxlm2qh4FFLwu_6PR1tb4nAcjlcHW7VqnvXUsTX6MLGyCqQ/s1600/icon-related-post-namkna-blogspot-com.gif) no-repeat left;
padding-left:13px;
}

#rp-posts ul li {
list-style :none;
}
</style>


<div id='rp-pre'>


<div id='rp-content'>

<div id='rp-title'>Tiêu Đề Box</div>
<div id='rp-posts'/></div>

<ul>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Báo Giá Gỗ ghép / ván ghép / Plywood
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Ván gỗ phủ veneer</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Ván gỗ phủ keo bóng</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Ván gỗ phủ melamine trắng</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Gỗ Sồi
</a>
</li>
<li style="text-align: justify;font-size: 16px;">
<a href="">
Gỗ muồng
</a>
</li>
<li style="text-align: justify;font-size: 16px;">
<a href="">
Gỗ cao su, gỗ tràm xẻ sấy
</a>
</li>
<li style="text-align: justify;font-size: 16px;">
<a href="">
Sấy Thuê Gỗ
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Thớt gỗ
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Mặt Bàn Ghế Học Sinh, Mặt Bàn Ghế Cafe, Mặt Bàn ghế phòng ăn
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Bán Ký Gửi Phụ Kiện, Vật Tư Ngành Gỗ
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Bán Ký Gửi Sàn Gỗ Kỹ Thuật
</a>
</li>

<li style="text-align: justify;font-size: 16px;">
<a href="">
Xưởng May Rèm Cửa
</a>
</li>

</ul>

</div>

</div>

Code Div Wrap 3 cột - Div Cột Giữa - Div Cột Trái - Div Cột Phải :

<style>
#wrap {
    width:250px;
    height: 250px;
    background: yellow;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
}
#l {
    float: left;
}
#r {
    float: right;
}
#l, #r {
    width: 49%;
}
#l:before, #r:before {
    content:"";
    width: 125px;
    height: 250px;
}
#l:before {
    float: right;
}
#r:before {
    float: left;
}
</style>

<div>

<div id="wrap">
Nội dung cột giữa
</div>

<div id="l">
<p>
Nội dung cột trái
</p>
</div>

    <div id="r">
      <p>
Nội dung cột phải
      </p>
</div>

</div>

Code Sidebar ẩn hiện nội dung :

Code SideBar bên trái bài viết :

Code Sidebar bên phải bài viết :

Code Sidebar Mục lục cố định bên phải nội dung bài viết :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style type="text/css">
    html { min-height:100%}
    body {background: linear-gradient(45deg, #83776a, #0f547f); color:#fff; font-family:'Roboto'; line-height:1.7;}
    h1 { color:#222;}
        .sidebar {
            padding: 10px;
            background-color: #ECE9F2;
            color: #222;
            border-radius:3px;
        }
        .container { max-width:768px;}
    </style>

<div class="jumbotron">
            <div class="container">
                <h1>jQuery scrollsWith plugin</h1>
                <div class="jquery-script-ads">
Code Google Ads
              </div>
            </div>
        </div>
      <div class="container">
          <div class="row">
              <div class="col-xs-6 col-sm-8 col-md-9">
                  <div id="text1">
                      <h2>Ví Dụ vị trí Text 1</h2>
Tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum.
                    Bài tập về nhà hoặc đến Văn phòng dolor sit amet, một nhiếp ảnh kỹ thuật số, hoặc cho bất kỳ magna At vero và các kết hợp chỉ cho phép nội dung có thể hiện trạng thái bình tĩnh không tồi tệ dolore magna nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    Đó là lý do tại sao, trong những năm tất cả tôi sẽ đến, ai sẽ không nghiên cứu kỹ hơn về lợi thế của công thức này. Bài tập về nhà hoặc đến Văn phòng dolor sit amet, một nhiếp ảnh kỹ thuật số, hoặc cho bất kỳ magna At vero và các kết hợp chỉ cho phép nội dung có thể hiện trạng thái bình tĩnh không tồi tệ dolore magna nulla.

                   </div>

                  <div id="text2">
                    <h2>Ví dụ vị Trí Text 2</h2>
Nam liber tempor họ độc lập ở mazim.Không thường chúng tôi mới có thể đầu tư để làm rang. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Đó là lý do tại sao, trong những năm tất cả tôi sẽ đến, ai sẽ không nghiên cứu kỹ hơn về lợi thế của công thức này.
                    Duis autem vel eum ipsum dolor in hendrerit in vulputate velit esse moltieequat, vel illum dolore eu feugiat nulla secureisis.
                    Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, Nhưng cảm giác của hai nỗi buồn đau, sed diam diam labore magna chúng cho cái ác, và anh ta, và mỗi tháng, và hàng chục cuộc chạy dài trơn tru lao động của nó, và Duis autem vel amet, dolor không có để xem trước. tuy đắt cũng như ngồi biển Thánh. Củ cà rốt ipsum lorem. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, nhưng trong quá trình lao động và đau đớn để trở nên thú vị nhất trong đường kính đã chạy ổn định nhịp độ Eirmod mỗi tháng.

                  </div>
                  <div id="text3">
                      <h2>Ví Dụ vị trí Text 3</h2>
Consetetur sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri.
                    Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum. Lorem ipsum dolor sit amet, tempor labre sadipscing qua nhiều năm, và một ý tưởng tuyệt vời, nhưng bạn nên làm việc mỗi tháng Eirmod tempor diam erat thú vị, quyến rũ của dự án. Nhưng, thực tế là, hai phút, và chỉ, và cảm nhận, và những thứ để xem trước chúng. Tại vero eos, không có hendreri là cà rốt lorem ipsum.

                    </div>
                  <div data-sidebar-bottom="sidebar2"></div>
              </div>
              <div class="col-xs-6 col-sm-4 col-md-3">
                  <div data-sidebar-dummy="sidebar2"></div>
                  <div id="sidebar2" class="sidebar">
                      <ul class="nav nav-pills nav-stacked">
                        <li role="presentation"><a href="#text1">Ví dụ vị trí Text 1</a></li>
                        <li role="presentation"><a href="#text2">Ví dụ vị trí Text 2</a></li>
                        <li role="presentation"><a href="#text3">Ví dụ vị trí Text 3</a></li>
                      </ul>
                  </div>
              </div>
          </div>
      </div>

    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    <script src="https://www.jqueryscript.net/demo/jQuery-Plugin-For-Sticky-Sidebar-Widgets-scrollsWith/scrollsWith.js"></script>

    <script type="text/javascript">

        $("#sidebar2").scrollsWith({
            margin_top: 30
        });
    </script>

    <script type="text/javascript">
        /*SMOOTH SCROLL*/
        $(function() {
            $('a[href*="#"]:not([href="#"])').click(function() {
              if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                if (target.length) {
                  $('html, body').animate({
                    scrollTop: target.offset().top
                  }, 1000);
                  return false;
                }
              }
            });
      });

      /*Anchor active*/
      $(window).on("scroll", function(){
            var scrollTop = $( window ).scrollTop();
            $('#sidebar1 a').each(function () {
                var currLink = $(this);
                var refElement = $(currLink.attr("href"));
                if (refElement && refElement.offset().top <= scrollTop && refElement.offset().top + refElement.height() > scrollTop) {
                    $('#sidebar1 li').removeClass("active");
                    currLink.parent("li").addClass("active");
                }
                else{
                    currLink.parent("li").removeClass("active");
                }
            });

            $('#sidebar2 a').each(function () {
                var currLink = $(this);
                var refElement = $(currLink.attr("href"));
                if (refElement && refElement.offset().top <= scrollTop && refElement.offset().top + refElement.height() > scrollTop) {
                    $('#sidebar2 li').removeClass("active");
                    currLink.parent("li").addClass("active");
                }
                else{
                    currLink.parent("li").removeClass("active");
                }
            });
      })

    </script>

Code Sticky Sidebar mục lục - menu bên trái nội dung bài viết :

===End phần code tùy chỉnh ==