- Tham gia
- 28/02/2015
- Bài viết
- 16,833
- Được Like
- 12,691
Có nhiều bạn hỏi cách làm chuyên mục nổi bật giống muare ở ngoài trang chủ, mình đã rip phần này cho các bạn. Thật ra thì nó rất đơn giản. chỉ là html thuần mà thôi.
Đầu tiên các bạn cần có 1 addon portal ở đây mình cài là EWRportal của 8wayrun
Tiếp theo Các bạn chỉnh sửa thay toàn bộ code của EWRblock_RecentNews.css hoặc thêm vào bên dưới cuối cùng của EWRblock_RecentNews.css template:
Lưu lại và tận hưởng. Chúc các bạn thành công.
Đầu tiên các bạn cần có 1 addon portal ở đây mình cài là EWRportal của 8wayrun
Mã:
<div class="portal-categories">
<div class="right_share" style="float: right; display: inline-flex;">
<div class="plusone shareControl">
<div style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px;" id="___plusone_0"><iframe width="100%" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" id="I0_1429512012158" name="I0_1429512012158" src="https://apis.google.com/se/0/_/+1/fastbutton?usegapi=1&count=true&size=medium&hl=vi-VN&origin=http%3A%2F%2Fvnxf.vn&url=http%3A%2F%2Fvnxf.vn%2F&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.vi.LTOhYwB69w8.O%2Fm%3D__features__%2Fam%3DMQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCOE0KTmi7xhrxzK6NhBlEc2nVthtw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1429512012158&parent=http%3A%2F%2Fvnxf.vn&pfname=&rpctoken=20816286" data-gapiattached="true" title="+1"></iframe></div>
</div>
<div data-share="false" data-show-faces="false" data-action="like" data-layout="button_count" data-href="https://www.facebook.com/vnxf.vn" class="fb-like"></div>
</div>
<h3 style="margin-bottom: 10px" class="portal-categories-title">Chuyên Mục Nổi Bật</h3>
<h2 class="cat_1"><a title="Điện thoại - Máy tính bảng" href="/forums/dien-thoai.118/"><img alt="Điện thoại - Máy tính bảng" src="/styles/img/portal-cat-icons/dien-thoai.png">
<span>Điện thoại - Máy tính bảng</span>
<div class="loadercontainer">
<div class="loader">
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
</div>
</div>
</a>
</h2>
<h2 class="cat_2"><a title="Phương tiện đi lại" href="/forums/o-to-xe-may-xe-dap.124/"><img alt="Ô tô - Xe máy" src="/styles/img/portal-cat-icons/xe-may.png">
<span>Ô tô - Xe máy</span>
<div class="loadercontainer">
<div class="loader">
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
</div>
</div>
</a>
</h2>
<h2 class="cat_3"><a title="Máy tính - Laptop" href="/forums/may-tinh-linh-kien.117/"><img alt="Máy tính - Laptop" src="/styles/img/portal-cat-icons/may-tinh.png">
<span>Máy tính - Laptop</span>
<div class="loadercontainer">
<div class="loader">
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
</div>
</div>
</a>
</h2>
<h2 class="cat_4"><a title="Điện máy" href="/forums/dien-may-cong-nghe.122/"><img alt="Điện máy" src="/styles/img/portal-cat-icons/dien-may.png">
<span>Điện máy</span>
<div class="loadercontainer">
<div class="loader">
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
</div>
</div>
</a>
</h2>
<h2 class="cat_5"><a title="Thời trang nữ" href="/forums/thoi-trang-nu.206/"><img alt="Thời trang nữ" src="/styles/img/portal-cat-icons/thoi-trang-nu.png">
<span>Thời trang nữ</span>
<div class="loadercontainer">
<div class="loader">
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
</div>
</div>
</a>
</h2>
<h2 class="cat_6"><a title="Thời trang nam" href="/forums/thoi-trang-nam.309/"><img alt="Thời trang nam" src="/styles/img/portal-cat-icons/thoi-trang-nam.png">
<span>Thời trang nam</span>
<div class="loadercontainer">
<div class="loader">
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
</div>
</div>
</a>
</h2>
<h2 class="cat_7"><a title="Nội thất - Nhà đất" href="/forums/bat-dong-san.184/"><img alt="Nội thất - Nhà đất" src="/styles/img/portal-cat-icons/nha-dat.png">
<span>Nội thất - Nhà đất</span>
<div class="loadercontainer">
<div class="loader">
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
</div>
</div>
</a>
</h2>
<h2 class="cat_8"><a title="Sim số - Thẻ cào" href="/forums/sim-so-dep.174/"><img alt="Sim số - Thẻ cào" src="/styles/img/portal-cat-icons/sim-so.png">
<span>Sim số - Thẻ cào</span>
<div class="loadercontainer">
<div class="loader">
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
</div>
</div>
</a>
</h2>
<h2 class="cat_9"><a title="Lao động - Việc làm" href="/forums/viec-lam-tuyen-dung.212/"><img alt="Lao động - Việc làm" src="/styles/img/portal-cat-icons/viec-lam.png">
<span>Lao động - Việc làm</span>
<div class="loadercontainer">
<div class="loader">
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
</div>
</div>
</a>
</h2>
<h2 class="cat_10"><a title="Mẹ và bé" href="/forums/me-va-be.207/"><img alt="Mẹ và bé" src="/styles/img/portal-cat-icons/me-va-be.png">
<span>Mẹ và bé</span>
<div class="loadercontainer">
<div class="loader">
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
<div class="circle"> </div>
</div>
</div>
</a>
</h2>
<div class="portal-categories-viewall">
<span> <a href="/forums">Xem tất cả chuyên mục »</a></span>
</div>
<script>
$('.portal-categories h2 a').click(function(){
$(this).find('.loadercontainer').show();
});
</script>
</div>
Tiếp theo Các bạn chỉnh sửa thay toàn bộ code của EWRblock_RecentNews.css hoặc thêm vào bên dưới cuối cùng của EWRblock_RecentNews.css template:
Mã:
.portal-categories {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
float: left;
margin-bottom: 20px;
width: 100%;
}
h3.portal-categories-title, .portalListTitle h3 {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
text-transform: uppercase;
}
.portal-categories h2.cat_6, .portal-categories h2.cat_1 {
width: 49%;
}
.portal-categories h2 {
background: none repeat scroll 0px 0px #FFF;
-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;
float: left;
margin-bottom: 10px;
margin-left: 1%;
text-align: center;
}
.portal-categories h2 a {
border: 1px solid #CCC;
-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
color: #111;
display: block;
font-weight: bold;
min-height: 100px;
padding: 10px 0px;
position: relative;
}
.portal-categories h2 a span {
display: block;
}
.portal-categories h2.cat_2,
.portal-categories h2.cat_3,
.portal-categories h2.cat_4,
.portal-categories h2.cat_5,
.portal-categories h2.cat_7,
.portal-categories h2.cat_8,
.portal-categories h2.cat_9,
.portal-categories h2.cat_10 {width: 24%}
.portal-categories-viewall {
background: none repeat scroll 0px 0px transparent;
border: 1px solid #DEDEDE;
-webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
float: left;
text-align: center;
width: 100%;
}
.portal-categories-viewall {
text-align: center;
}
.portal-categories-viewall a {
color: #666;
display: block;
font-size: 13px;
font-weight: bold;
padding: 5px;
}
.portal-categories h2 a:hover {
text-decoration:none;
border:1px solid #666;
opacity:0.8
}
.portal-categories h2 a:active, .portal-categories h2 a:focus{background-color:#f5f5f5}
.loadercontainer {
bottom:30%;
display:none;
height:20px;
left: -50%;
margin:0;
position:absolute;
width:100%
}
.loader {
display:block;
height:10px;
margin-top:38px;
position:relative;
width:100%
}
.circle{display:inline-block;
position:relative;
-webkit-animation:dotloader 2.5s infinite;
-moz-animation:dotloader 2.5s infinite;
-ms-animation:dotloader 2.5s infinite;
-o-animation:dotloader 2.5s infinite;
animation:dotloader 2.5s infinite
}
.circle+.circle{
margin-left: -25px;
-webkit-animation:dotloader 2.5s 0.2s infinite;
-moz-animation:dotloader 2.5s 0.2s infinite;
-ms-animation:dotloader 2.5s 0.2s infinite;
-o-animation:dotloader 2.5s 0.2s infinite;
animation:dotloader 2.5s 0.2s infinite
}
.circle+.circle+.circle{
margin-left: -25px;
-webkit-animation:dotloader 2.5s 0.4s infinite;
-moz-animation:dotloader 2.5s 0.4s infinite;
-ms-animation:dotloader 2.5s 0.4s infinite;
-o-animation:dotloader 2.5s 0.4s infinite;
animation:dotloader 2.5s 0.4s infinite
}
.circle+.circle+.circle+.circle{
margin-left: -25px;
-webkit-animation:dotloader 2.5s 0.6s infinite;
-moz-animation:dotloader 2.5s 0.6s infinite;
-ms-animation:dotloader 2.5s 0.6s infinite;
-o-animation:dotloader 2.5s 0.6s infinite;
animation:dotloader 2.5s 0.6s infinite
}
@keyframes "dotloader"{
0%,20%{
width:4px;
height:4px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;
left:0%;
background-color:rgba(0,0,0,0)
}
30%,70%{
width:8px;
height:8px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px;
left:50%;
background-color:rgba(0,0,0,0.5)
}
80%,100%
{
width:4px;
height:4px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;left:100%;
background-color:rgba(0, 0, 0, 0)
}}
@-moz-keyframes
dotloader{
0%,20%{
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;left:0%;
background-color:rgba(0,0,0,0)
}
30%,70%{
width:8px;
height:8px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px;
left:50%;
background-color:rgba(0,0,0,0.5)
}
80%,100%{
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;
left:100%;
background-color:rgba(0, 0, 0, 0)
}
}
@-webkit-keyframes "dotloader"
{
0%,20%{
width:4px;
height:4px;
-webkit-border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;
left:0%;
background-color:rgba(0,0,0,0)
}
30%,70%{
width:8px;
height:8px;
-webkit-border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px;left:50%;
background-color:rgba(0,0,0,0.5)
}
80%,100%{
width:4px;
height:4px;
-webkit-border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;
left:100%;
background-color:rgba(0, 0, 0, 0)
}}
@-ms-keyframes "dotloader"{
0%,20%{
width:4px;
height:4px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;left:0%;
background-color:rgba(0,0,0,0)
}
30%,70%{
width:8px;
height:8px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px;
left:50%;
background-color:rgba(0,0,0,0.5)
}
80%,100%{
width:4px;
height:4px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;
left:100%;
background-color:rgba(0, 0, 0, 0)
}}
@-o-keyframes "dotloader"{0%,20%{
width:4px;
height:4px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;left:0%;
background-color:rgba(0,0,0,0
)}
30%,70%{
width:8px;
height:8px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px; -moz-border-radius:4px; -khtml-border-radius:4px; border-radius:4px;
left:50%;
background-color:rgba(0,0,0,0.5)
}
80%,100%{
width:4px;
height:4px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-khtml-border-radius:2px;
-webkit-border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; border-radius:2px;
left:100%;
background-color:rgba(0, 0, 0, 0)
}}
@media (max-width:800px)
{
.portal-categories{margin-top:12px}
}
@media (max-width:610px)
{
.portal-categories h2 a
span{font-size:12px
}
}
@media (max-width:480px)
{
{width: 48%;}
.portal-categories h2 {margin-right:1%}
.portal-categories h2 a{height:100px}
.portal-categories h2.cat_1,
.portal-categories h2.cat_2,
.portal-categories h2.cat_3,
.portal-categories h2.cat_4,
.portal-categories h2.cat_5,
.portal-categories h2.cat_6,
.portal-categories h2.cat_7,
.portal-categories h2.cat_8,
.portal-categories h2.cat_9,
.portal-categories h2.cat_10 {width: 48%}
.portal-categories h2 a img {width: 80px;}
}
}
Lưu lại và tận hưởng. Chúc các bạn thành công.
Nguồn: congngheaz.com
Bài viết liên quan
Được quan tâm