[Code] Hiện 12 bài viết cùng chuyên mục cực đẹp.

Demo ảnh

Hướng dẫn

ACP >> Display >> Colors >> CSS
Cho code này vào cuối:

Code:

/* Cùng chuyên mục */
ul#cungchuyenmuc{padding:10px 15px 10px 30px;width:90%;height:100%;margin-left:30px;margin-top:20px;margin-bottom:10px;display:inline-block}
#cungchuyenmuc li{counter-increment:Zzindex;float:left;position:relative;width:50%;border-bottom:1px dashed #CCC;height:24px;line-height:22px}
#cungchuyenmuc a{color:#333;font:12px Tahoma}
#cungchuyenmuc a:hover{color:#ba3814}
#cungchuyenmuc span{display:inline-block;overflow:hidden;height:18px;width:90%;margin-bottom:-2px}
#cungchuyenmuc li:before{content:counter(Zzindex);display:block;height:16px;background:#EBEBEB;position:absolute;left:-22px;font-size:11px;top:4px;border-radius:2px;text-align:center;width:16px;color:#FFF;line-height:16px;z-index:3}
#cungchuyenmuc li:after{content:" ";background:#EBEBEB;display:block;width:5px;height:5px;position:absolute;top:9px;left:-9px;transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg)}
#cungchuyenmuc li:nth-child(3):before,#cungchuyenmuc li:nth-child(3):after{background:red}
#cungchuyenmuc li:nth-child(4):before,#cungchuyenmuc li:nth-child(4):after{background:#FD5405}
#cungchuyenmuc li:nth-child(5):before,#cungchuyenmuc li:nth-child(5):after{background:#FDB55A}
#cungchuyenmuc li:nth-child(5) ~ li:before,#cungchuyenmuc li:nth-child(5) ~ li:after{color:#EC4403;text-shadow:0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF,0 0 2px #FFF}
.pun .entry-content{overflow:hidden;padding-bottom:.8em;width:100%}

ACP >> Display >> QLTT >> Viewtopic_body
Cho code này trên cùng:

Code:

<script>$(function () {$.ajax({url: "/feed/?f={FORUM_ID}",success: function (a) {$(".post-entry:first").after('<ul id="cungchuyenmuc">
<center><a href="/f{FORUM_ID}-forum" style="font-weight: bold">Bài viết cùng chuyên mục</a></center><div style="height:23px;background:url(http://i34.servimg.com/u/f34/16/03/04/56/sna-ti10.png) no-repeat center top;margin:5px 0px;margin-top: -20px"></div>');22 < $(a).find("title").length ? so = 22 : so = $(a).find("title").length;for (i = 2; i < so; i++)$('<li><span><a href="' + $(a).find("link:eq(" + i + ")").text() + '">' + $(a).find("title:eq(" + i + ")").text() + "</a></span></li>").appendTo("#cungchuyenmuc")}})});</script>

Lưu lại và ra ngoài xem thành quả nhé :)

Tags: #code