Bạn có các câu hỏi ? Liên hệ với chúng tôi Messenger !

Cách thêm Accordion bài viết có liên quan ở giữa trong bài đăng trên blog của bạn

Các Bài viết Liên quan ở giữa các bài đăng trên Blog của bạn sẽ hữu ích cho khách truy cập của bạn vì nó sẽ hiển thị danh sách các bài viết phù hợp...
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Bài viết liên quan ở giữa bài viết của bạn sẽ hữu ích cho khách truy cập của bạn vì nó sẽ hiển thị danh sách các bài viết phù hợp hơn, họ có thể xem và đọc theo ý muốn của họ.

Xin chào! Chào mừng bạn đến với Website Mai Nhật Lâm ☭

Nếu bạn muốn tối ưu hóa lưu lượng truy cập và thúc đẩy khách truy cập đọc nhiều bài viết hơn trên blog của mình, thì việc thêm Liên kết Bài viết Liên quan vào giữa Bài đăng trên Blog chắc chắn sẽ giúp bạn đạt được điều này.

Các bài viết liên quan Accordion cho các bài đăng trên blog Blogger
© Mai Nhật Lâm ☭ | Bài viết liên quan Accordion

Hôm nay, chúng tôi sẽ tạo một Tổ hợp bài đăng có liên quan đầy phong cách có thể được thêm vào bất kỳ đâu vào giữa các Bài đăng trên blog Blogger của bạn. Nó sẽ hữu ích cho khách truy cập của bạn vì nó sẽ hiển thị danh sách các bài báo phù hợp với những gì họ hiện đang đọc. Vì nó sẽ hiển thị các bài viết liên quan, vì vậy sẽ có nhiều cơ hội hơn mà khách truy cập sẽ nhấp vào bài viết liên quan đó.


Thêm Accordion Bài viết Liên quan vào Bài đăng trên Blog của bạn sẽ không yêu cầu nhiều kiến ​​thức về HTML, CSS hoặc JS bởi vì tôi đã thiết kế nó cho bạn. Những gì bạn cần làm là triển khai các mã ở đúng vị trí trong XML Chủ đề Blogger của bạn và thêm Mã HTML Accordion Bài viết liên quan vào giữa các bài đăng của bạn.

Quan trọng!Trước khi chúng tôi bắt đầu thêm mã trong XML, tôi khuyên bạn nên tạo một Bản sao lưu của chủ đề hiện tại của bạn. Tình cờ nếu có bất kỳ sự cố nào xảy ra, bạn có thể khôi phục lại sau.

Bước 1: Trước hết Đăng nhập vàoTrang tổng quan Blogger.

Bước 2: Trên Bảng điều khiển Blogger, nhấp vào Chủ đề .

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'tùy chỉnh' .

Bước 4: Nhấp vào Chỉnh sửa HTML , bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin>và dán các Mã CSS sau ngay trên vào nó.

Nếu mẫu của bạn có tính năng chế độ tối và nếu bạn muốn có màu khác khi ở chế độ tối, bạn có thể tùy chỉnh các mã theo nhu cầu của mình. Mỗi mẫu có thể có một lớp chế độ tối khác nhau, vì vậy hãy điều chỉnh nó, bạn có thể thay thế lớp đã đánh dấu bằng lớp chế độ tối mẫu của mình.

/* Accordion by Mai Nhật Lâm ☭ */
.acdn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.acdn .ac{width:100%;padding:20px 0 20px 15px;margin:10px 0;background:#f0f0ff;border-radius:10px;border-left:4px solid #8a8aff;box-shadow:0 5px 10px rgba(51,51,51,.1)}
.acdn .ac:nth-child(4n + 1){background:#f0f0ff;border-left-color:#8a8aff}
.acdn .ac:nth-child(4n + 2){background:#fff0f3;border-left-color:#ff8aa1}
.acdn .ac:nth-child(4n + 3){background:#f0faff;border-left-color:#8ad8ff}
.acdn .ac:nth-child(4n + 4){background:#fff7f0;border-left-color:#ffc08a}
.acdn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.acdn .cont ul, .acdn .cont ol{padding-left:13px}
.acdn .cont li{padding:0}
.acdn .cont a{text-decoration:none;color:#08102b}
.acdn .cont a:hover{text-decoration:underline}
.acdn p:first-child{margin-top:0}
.acdn p:last-child{margin-bottom:0}
.acTtl{display:flex;align-items:center;font-weight:700;color:#08102b}
.acTtl span{display:flex;flex-grow:1}
.acTtl span:before{content:'';padding-left:15px}
.acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative}
.acIcn:before, .acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b}
.acIcn:after{position:absolute;transform:rotate(90deg)}
.acMn{display:none}
.acMn:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}
.acMn:checked ~ .cont{max-height:100vh;padding-top:15px;padding-bottom:8px}

.darkMode .acdn .ac{background:#252526;border-left-color:#4c4c4e}
.darkMode .acdn .cont, .darkMode .acdn .cont a, .darkMode .acTtl, .darkMode .acMn:checked ~ .acTtl{color:#fefefe}
.darkMode .acTtl .acIcn:before, .darkMode .acTtl .acIcn:after, .darkMode .acMn:checked ~ .acTtl .acIcn:before, .darkMode .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}

Bước 6: Sau khi làm như vậy, hãy tìm kiếm mã </b:defaultmarkup>và dán các Mã sau ngay bên trên vào nó.

<!--[ Automatic Related Posts Script by Mai Nhật Lâm ☭ ]-->
<b:includable id='auto-relatedPost'>
<script>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
var autoRelatedConfig = {
homePage: &quot;<data:blog.homepageUrl.canonical/>&quot;,
numPosts: 10,
titleLength:&quot;auto&quot;,
newTabLink: false,
callBack:function(){}
}
</script>
<script>/*<![CDATA[*/ var autoRelatedIndex,showAutoRelated;null!=document.getElementById("autoRelatedPost")&&function(a,n){var e,u={homePage:"https://blog.fineshop.eu.org",numPosts:7,titleLength:"auto",containerId:"autoRelatedPost",newTabLink:!1,callBack:function(){}};for(e in autoRelatedConfig)u[e]=("undefined"==autoRelatedConfig[e]?u:autoRelatedConfig)[e];function l(e){var t=a.createElement("script");t.async="async",t.rel="preload",t.src=e,n.appendChild(t)}function c(e){var t,a,n=e.length;if(0===n)return!1;for(;--n;)t=Math.floor(Math.random()*(n+1)),a=e[n],e[n]=e[t],e[t]=a;return e}var o="object"==typeof labelArray&&0<labelArray.length?"/-/"+c(labelArray)[0]:"";autoRelatedIndex=function(e){var t=e.feed.openSearch$totalResults.$t-u.numPosts,e=(e=1,t=0<t?t:1,Math.floor(Math.random()*(t-e+1))+e);l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&start-index="+e+"&max-results="+u.numPosts+"&callback=showAutoRelated")},showAutoRelated=function(e){var t,a,n=document.getElementById(u.containerId),l=c(e.feed.entry),o="<ul>",r=u.newTabLink?' target="_blank"':"";if(n){for(var s=0;s<u.numPosts&&s!=l.length;s++){a=l[s].title.$t,a="auto"!==u.titleLength&&u.titleLength<a.length?a.substring(0,u.titleLength)+"&hellip;":a;for(var d=0,i=l[s].link.length;d<i;d++)t="alternate"==l[s].link[d].rel?l[s].link[d].href:"#";o+='<li><a href="'+t+'" '+r+"><span>"+a+"</span></a></li>"}n.innerHTML=o+="</ul>",u.callBack()}},l(u.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&max-results=0&callback=autoRelatedIndex")}((window,document),document.getElementsByTagName("head")[0]); /*]]>*/</script>
</b:includable>

Thay đổi các phần đã đánh dấu10: Tối đa không. của các bài viết có liên quan (ví dụ: 15)
auto: Tối đa không. của ký tự tiêu đề (ví dụ: 30), để nó tự động cho tiêu đề đầy đủ
false: Thay thế bằng truenếu bạn muốn mở các bài đăng liên quan trong Tab mới

Bước 7: Thêm các Mã sau ngay bên dưới vào <data:post.body/>.

<!--[ Automatic Related Posts by Mai Nhật Lâm ☭ ]-->
<b:include cond='data:view.isPost' data='post' name='auto-relatedPost'/>

Bước 8: Lưu các thay đổi bằng cách nhấp vào biểu tượng này

Đã xong! Bây giờ, hãy thêm các Mã HTML sau vào Bài đăng trên Blog của bạn bất cứ nơi nào bạn muốn hiển thị Accordion Bài viết Liên quan.

<!--[ Related Posts Accordion by Mai Nhật Lâm ☭ ]-->
<div class='acdn'>
<!--[ Related Posts ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offrelPost' name='relatedposts-1' type='checkbox'/>
<label class='acTtl' for='offrelPost'>
<i class='acIcn'></i>

<!--[ Related Posts Title ]-->
<span>More Articles on this topic</span>
</label>

<!--[ Related Posts Content ]-->
<div class='cont'>
<div id='autoRelatedPost'></div>
</div>
</div>
</div>
</div>

Các Bài đăng có Liên quan được hiển thị theo Nhãn của Bài đăng.

Cách sử dụng Thay thế

Bạn cũng có thể sử dụng điều này làm Accordion trong các bài đăng của mình, để sử dụng các mã HTML sau :

<!--[ Accordion by Mai Nhật Lâm ☭ ]-->
<div class='acdn'>
<!--[ Accordion 1 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor1' name='accordion-1' type='checkbox'/>
<label class='acTtl' for='offaccor1'>
<i class='acIcn'></i>

<!--[ Accordion Title ]-->
<span>Accordion_Title_1</span>
</label>

<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>

<!--[ Accordion 2 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor2' name='accordion-2' type='checkbox'/>
<label class='acTtl' for='offaccor2'>
<i class='acIcn'></i>

<!--[ Accordion Title ]-->
<span>Accordion_Title_2</span>
</label>

<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>

<!--[ Accordion 3 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor3' name='accordion-3' type='checkbox'/>
<label class='acTtl' for='offaccor3'>
<i class='acIcn'></i>

<!--[ Accordion Title ]-->
<span>Accordion_Title_3</span>
</label>

<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>

<!--[ Accordion 4 ]-->
<div class='ac'>
<div class='acCont'>
<input class='acMn' id='offaccor4' name='accordion-4' type='checkbox'/>
<label class='acTtl' for='offaccor4'>
<i class='acIcn'></i>

<!--[ Accordion Title ]-->
<span>Accordion_Title_4</span>
</label>

<!--[ Accordion Content ]-->
<div class='cont'>
<p>...</p>
</div>
</div>
</div>
</div>

Thử nghiệm

Bạn muốn xem nó hoạt động?
Bạn có thể kiểm tra Phong cách Accordion của Bài viết liên quan trước khi thêm nó vào Bài đăng trên Blog của mình.
Chúng ta hãy nhìn vào nó!

Điều khoản sử dụng

Nếu bạn muốn sử dụng Accordion Bài viết Liên quan này trên trang web của mình, vui lòng không xóa các thuộc tính khỏi mã, nó sẽ không hiển thị trên trang web của bạn.

Nếu bạn muốn viết lại một bài viết trên Accordion hoặc Accordion Bài viết liên quan này bằng cách sử dụng các mã này, bạn phải thêm Tham chiếu với liên kết hiển thịcó thể nhấphttps://www.fineshopdesign.com chuyển hướng đến trang web của chúng tôi :. Nếu bạn viết lại mà không có Tham chiếu, Các Hành động Pháp lý sẽ được thực hiện.

Sự kết luận

Đây là tất cả về việc thêm Tổ hợp bài đăng có liên quan trong Bài đăng trên blog của Blogger. Tôi hy vọng bạn thích bài viết này. Xin vui lòng chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào thì hãy hỏi chúng tôi trong hộp bình luận. Cảm ơn bạn!

© Bản quyền:
www.mainhatlam.com

Đăng nhận xét

Đồng ý cookie
Chúng tôi cung cấp cookie trên trang web này để phân tích lưu lượng truy cập, ghi nhớ các tùy chọn của bạn và tối ưu hóa trải nghiệm của bạn.
Thêm chi tiết
Ối!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
Đã phát hiện ra trình chặn quảng cáo!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng trình chặn quảng cáo trong trình duyệt của mình.
Doanh thu chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.