Tạo nút Button thu gọn và xem nội dung bài viết

Hình trên có đoạn nội dung khá dài và chứa cả hình, để làm gọn lại mình chỉ cần dùng đoạn code nhỏ dưới đây thôi. Nhớ rằng đoạn nào cần ẩn, bạn đặt cho đúng như cú pháp trên Source Code nhé.

<center><div> <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')  {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Thu Gọn Lại';  } else {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';  this.innerText = ''; this.value = 'Mở Rộng';  }" style="font-size:16px;background:#23AD1F;color:white; padding: 5px; border-radius:7px;" type="button" value="Mở Rộng" /></div><div><div style="display: none;border:1px solid black;width:580px;max-height:400px;overflow:auto;background:#E8EAE8;text-align:left;padding:10px;">

Nội Dung Cần Ẩn Hiện Để Ở khúc này !!!

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

Dưới đây là ý nghĩa một số vị trí có tô màu để các bạn dễ theo dõi và dễ chĩnh sửa theo ý thích:
     Là dòng chữ hiển thị trên nút (mở rộng/thu gọn)
     Là màu của dòng chữ hiển thị trên nút
     Là màu nền của nút
     Là màu nền của phần nội dung


Muốn nâng cao hơn các bạn dùng mã màu thập lục, di chuyển con trỏ đến khi lấy được màu vừa ý, thì copy mã ở ô HEX và dùng là xong.
Để lấy mã màu Hex, bạn vào Blogger Dashboard, vào mục Chủ đề, chọn Tùy chỉnh. (Những chổ có mũi tên trỏ trong hình) và chọn tiếp phần Nâng cao để lấy mã màu chính xác.

• DEMO ở trang khác
• Demo tại trang hướng dẫn:

Nội dung như sau, bạn cứ thử Click vào nút Button màu xanh:

Gần đây, đã có rất nhiều người dùng phản ảnh về việc xuất hiện của một phân vùng ẩn Recovery với dung lượng khoảng 450MB trong Disk Management khi cài đặt Windows 10 hay cập nhật lên Windows 10 Anniversary. Vậy có nên lấy lại dung lượng này để cải thiện không gian lưu trữ cho ổ cứng?

Được biết, phân vùng Recovery ẩn này dành cho chức năng Windows Recovery Environment (WinRE) giúp người dùng nhanh chóng khôi phục lại hệ thống về tình trạng lúc mới cài đặt. Tuy nhiên, thường chức năng này rất ít người sử dụng và khá vô dụng, vì thế Techrum sẽ hướng dẫn bạn lấy lại khoảng 450MB dung lượng "vô bổ" ấy để làm tăng thêm không gian lưu trữ.

Đối với những người dùng có dung lượng lưu trữ lên đến hàng TB thì việc này không cần thiết để làm, vì con số 450MB là không nhiều, nhưng đối với những người dùng có dung lượng ít, hoặc những người dùng xài những loại máy hiện đại chỉ có mỗi ổ SSD 128GB hoặc 256GB thì việc lưu trữ là không đủ.

Bài này viết này mình sử dụng Windows 10 Anniversary, mời bạn đọc tham khảo cách tăng 450MB sao khi update Windows 10 hoặc Windows 10 Anniversary theo các bước sau:

1. Khởi chạy Command Promt (CMD) với chế độ Admin: nhấn chuột phải vào nút Start > Command Prompt (Admin).
2. Nhập lệnh Diskpart vào CMD và nhấn phím Enter.
   
3. Chờ vài giây để lệnh Diskpart thực thi. Sau đó, nhập tiếp lệnh List volume để hiển thị danh sách các phân vùng hiện tại trên ổ cứng. Khi đó bạn sẽ thấy được danh sách các phân vùng, bao gồm cả phân vùng Recovery 450MB (hoặc tương đương) với Info là Hidden.
4. Vậy là bạn sẽ biết được phân vùng nào là phân vùng cần xóa (Ở hình, mình có phân vùng 3 và 5). Tiếp theo, download và cài đặt chương trình AOMEI Partition Assistant Standard Edition.
5. Mở chương trình lên, nhấn chuột phải vào phân vùng nào có dung lượng tương đương 450MB. Rồi chọn lệnh Delete Partition (xóa phân vùng).
6. Sau khi xóa, sẽ hiện ra một phân vùng Unallocated. Chuột phải vào phân vùng đó, và chọn Merge Partitions (gộp phân vùng).
7. Chọn phân vùng C: và Unallocated, sau đó nhấp OK.
8. Tiếp theo bấm nút Apply ở phía góc trên bên trái rồi chọn Proceed.
9. Lúc này chương trình sẽ yêu cầu người dùng Restart lại máy tính. Bạn cứ việc chọn Yes và để chương trình thực thi trong vòng 10~15'.
10. Vậy là xong! Theo kết quả (ở đây do mình tìm được 2 phân vùng ẩn nên gộp hết vào) sau khi làm, mình có tổng cộng 119GB. Thật tuyệt vời đúng không?

Chúc các bạn thành công!

Chúc các bạn thành công với những kiến thức chia sẽ đầy thú vị.

Người viết: Khanhnguyen' s Blog  

-->đọc tiếp...

Chèn bài viết liên quan ngay dưới tiêu đề bài cho blogger/ Blogspot

Việc chèn bài viết có liên quan vào trong Web/Blog thì cái nào mà không có. Đó là điều hữu ích cho cả Admin và độc giả. Tuy nhiên, cách cho xuất hiện thường là ở cuối bài viết, hoặc chân trang. Mình tìm được mà Code nầy và có cải tiến lại vài chổ nhầm chia sẽ lại cùng các bạn sử dụng. 

• DEMO

Các bước thực hiện đơn giản như sau:

Bước 1: Chèn mã code Css sau lên trước thẻ  ]]></b:skin>

.post-ads{padding-top:0}
.post-ads{float:left;margin:0 10px 10px 0;position:relative}
@media(max-width:600px){.post-ads{width:100%}.post-right{margin-left:0!important;width:100%;float:left}}
.post-body img{transition:all.3s;max-width:650px}
.post-right{margin:0 0 0 310px;padding:0 0 10px} p.post-excerpt{overflow:hidden;margin:10px 0 10px 0;padding:10px;background-color:#f5f5f5;border:0 solid #eee;box-shadow:0 0 0 0 #B5B5B5;font-size:17px;line-height:1.5em}
#related-posts1{margin:10px 0}
#related-posts1 ul li{list-style-type:none;color:#0053f9;font-size:16px;line-height:22px;max-height:22px;overflow:hidden}
#related-posts1 ul li a{color:#0053f9}
#related-posts1 ul li a:hover{color:#ff0000}
#related-posts1 ul li a:before{content:"\f046";font-family:'FontAwesome';padding-right:5px}
#related-posts1 h4{color:#E74C3C;border-bottom:1px dashed#E74C3C;font-size:18px;margin-bottom:5px}
#related-posts1 ul{margin-left:0}
#related-posts1.fa{margin-right:5px}
#random-posts img{border-radius:1000px;border:5px solid;color:#dddddd;float:left;margin-right:5px;width:75px;height:75px;background-color:#F5F5F5;padding:3px;transition:all 0.2s linear 0s}

Bước 2: Thêm JavaScript lên trên thẻ </head> 

<script type='text/javascript'> //<![CDATA[ var titles = new Array();var titlesNum = 0;var urls = new Array();var time = new Array();function related_results_labels(c){for (var b = 0;b < c.feed.entry.length;b++){var d = c.feed.entry[b];titles[titlesNum] = d.title.$t;for (var a = 0;a < d.link.length;a++){if (d.link[a].rel == "alternate"){urls[titlesNum] = d.link[a].href;time[titlesNum] = d.published.$t;titlesNum++;break;}} ;}} function removeRelatedDuplicates(){var b = new Array(0);var c = new Array(0);e = new Array(0);for (var a = 0;a < urls.length;a++){if (!contains(b,urls[a])){b.length += 1;b[b.length - 1] = urls[a];c.length += 1;c[c.length - 1] = titles[a];e.length += 1;e[e.length - 1] = time[a];}} titles = c;urls = b;time = e;} function contains(b,d){for (var c = 0;c < b.length;c++){if (b[c] == d){return true;}} return false;} function printRelatedLabels(a){var y = a.indexOf('?m=0');if (y != -1){a = a.replace(/\?m=0/g,'');} for (var b = 0;b < urls.length;b++){if (urls[b] == a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1);}} var c = Math.floor((titles.length - 1) * Math.random());var b = 0;document.write("<ul>");if (titles.length == 0){document.write("<li>Không có bài viết liên quan → </li>");} else{while (b < titles.length && b < 20 && b < maxresults){if (y != -1){urls[c] = urls[c] + '?m=0';} document.write('<li><a href="' + urls[c] + '" title="' + time[c].substring(8,10) + "/" + time[c].substring(5,7) + "/" + time[c].substring(0,4) + '">' + titles[c] + "</a></li>");if (c < titles.length - 1){c++;} else{c = 0;} b++;}} document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length);} ;//]]> </script>

Bước 3: Tìm đến hàng lệnh <div class='post-header-line-1'/> bằng cách nhấn tổ hợp phím Ctrl+F và dán code sau xuống phía dưới nó:  

<b:if cond="data:blog.pageType == &quot;item&quot;"> </b:if> <br /> <div class="qc-header-post"> <div class="post-ads"> Dán quảng cáo của bạn ở đây </div> <div class="post-right"> <div class="post-excerpt"> <data:post .snippet=""> </data:post></div> <b:if cond="data:blog.pageType == &quot;item&quot;"> &lt;blockquote class="tr_bq" style="background-color: white; border-left-style: solid; border-left-width: 6px; border-radius: 3px; box-shadow: rgb(171, 171, 171) 0pt 0pt 14px; font-family: cuprum; font-size: 15.4px; line-height: 21.56px; padding: 8px 9px;"&gt; </b:if><br /> <div id="related-posts1"> <h4> <i class="fa fa-bullhorn"> Bài viết liên quan:</i></h4> <b:loop values="data:post.labels" var="label"> <script expr:src="&quot;/feeds/posts/default/-/&quot;+ data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;" type="text/javascript"> </b:loop> <script type='text/javascript'> var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</script><a class="home-icon" href="http://www.startruongit.net/" style="position: absolute; visibility: hidden;"></a> </b:loop></div> &lt;/blockquote&gt; </div> </div>

Cuối cùng các bạn Lưu mẫu lại và xem kết quả Blogspot. 
Lưu ý với các bạn: Khanhnguyen dùng thẻ Blokquote để thể hiện một bảng đóng khung cho việc xuất dữ liệu của các hàng lệnh. Thẻ Blokquote nầy được mả hóa và in hàng chữ đỏ trên khung Code mà bạn thấy. Nếu muốn thay đổi khung về màu sắc, size chữ, hay kiểu chữ hiển thị...đều được cả.
Chúc các bạn thành công !

Khanhnguyen' s Blog tổng hợp

-->đọc tiếp...