Các Widget Popular Post (hay tiện ích
bài đăng phổ) mặc định của Blogger thì vô cùng đơn điệu, giờ bạn muốn xây dựng Widget
Popular Post độc đáo và bắt mắt với người dùng theo một phong khác mới. Hôm nay
windows2it sẽ giúp các bạn làm đều đó với 3 phong cách mà các blogger thường
hay dùng nhất.
Đầu tiên bạn cần tạo một Widget Popular
Posts/Bài viết phổ biến cho blog của mình (Nếu Blog bạn có rồi thì thôi)
Cách đơn giản, đầu tiên các bạn vào Blog
=> Bố cục => Thêm tiện ích => Bài đăng phổ biến
Đọc thêm:
Tiếp tục chèn CSS sau vào HTML của Blog/Website
bạn
Đầu tiên các bạn vào Blog => Mẫu => Chỉnh
sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm kiếm ]]></b:skin>.
Sau đó dán đoạn mã Code sau lên trên ]]></b:skin>
và Lưu mẫu lại.
Code
theo phong cách 1:
<!-- Popular posts multi colored UI theme --> #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} #PopularPosts1 ul li:first-child{background:#ff4c54;width:97%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;} #PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none} #PopularPosts1 ul li a:hover{color:#222;text-decoration:none} #PopularPosts1 img{ -moz-border-radius: 130px; -webkit-border-radius: 130px; border-radius: 130px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; padding:4px; border:1px solid #fff !important; } #PopularPosts1 img:hover { border-radius: 0 0 0 0; -moz-transform: scale(1.2) rotate(-711deg) ; -webkit-transform: scale(1.2) rotate(-711deg) ; -o-transform: scale(1.2) rotate(-711deg) ; -ms-transform: scale(1.2) rotate(-711deg) ; transform: scale(1.2) rotate(-711deg) ; } <!-- popular posts multicolored UI theme -->
Code
theo phong cách 2:
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR4j3WYRjruaVBlQ1-vm73q4NKCjpVJfdB2plIObJC4z9e3sj3C2bgD6lY6ufrhGKYGfGaER4ysB8JH87qNwrtl9liw6IXjWVAtEhlU-qAKnEnEXg6ugsOmoH5R3KxTtYxWOeV2Y5HcSE/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
Code
theo phong cách 3:
#PopularPosts1 h2{ padding:7px 0 3px 0; width:100%; margin-bottom:10px; font-size:1.3em; text-indent:-12px; font-size:18px; text-align:center; color: #757575; /* Color of the widget's title */ } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:8px 0px 1px; left:-7px; width:290px; } #PopularPosts1 li{ position:relative; margin:0 0 10px 0; padding: 3px 2px 0 17px; left:-5px; width:285px; } #PopularPosts1 ul li{ background: #eee; position: relative; display: block; padding: .4em .2em .4em 2em; *padding: .2em; margin: .5em 0; background: #ddd; text-decoration: none; border-radius: .3em; transition: all .3s ease-out; } #PopularPosts1 ul li:before{ content: counter(li); counter-increment: li; position: absolute; top: 50%; margin: -1.3em; height: 2em; width: 2em; line-height: 2em; font-size: 15px; color: #fff; /* text color of numbers */ background: #FB8835; /* background color of numbers */ border: .2em solid #fff; /* border color */ -webkit-box-shadow: 0 8px 5px -7px #888; -moz-box-shadow: 0 8px 5px -7px #888; box-shadow: 0 8px 5px -7px #888; text-align: center; font-weight: bold; border-radius: 2em; position: absolute; left: 0; transition: all .3s ease-out; } #PopularPosts1 ul li:hover{ background: #eee; } #PopularPosts1 ul li:hover:before{ transform: rotate(360deg); } #PopularPosts1 ul li a{ font: 14px Georgia, serif; /* font size of post titles */ text-shadow: 0 -1px 2px #fff; color: #444; display:block; min-height:25px; text-decoration:none; text-transform: uppercase; } #PopularPosts1 ul li a:hover{ color: #444; }
Kết
luận: Các
Code trên hoàn toàn sử dụng CSS, không sử dụng Javascript nên các bạn cứ yên
tâm về tốc độ tải, cũng như độ thân thiện với SEO nhé.
Có
vấn đề gì cứ để lại comment nhé @!
Chứ mình thấy IP Popular Posts bạn đúng rùi >>>Chỉ Paste Code vào đúng vị trí là nó hoạt động thui :)
Cách 1: Auto đó là do cột sitebar của bạn thôi... do cột sitebar kích thước bạn nhỏ nên trông thấy vậy bạn chỉ cần cho kích thước cột sitebar rộng ra thì tự động nó rộng ra thôi....
Cách 2: cố định kích thước bạn tìm dòng
.sidebar .widget{
clear:both;
font-size:16px;
line-height:26px;
margin-bottom:25px;
}
Sữa thành:
.sidebar .widget{
clear:both;
font-size:16px;
line-height:26px;
margin-bottom:25px;
width:300px; (Sữa 300 px thành kích thước bạn muốn)
}
>>> lưu mẫu vậy là xong...@!! :)
>>> Còn chỗ nào ko rõ thì cứ để lại comment nhé @!
notebookmmo.blogspot.com
Cách 1: Kích thước cố định:
Xóa phần này:
.sidebar .widget img {
max-width: 80%;
}
và điều chình phần này:
.PopularPosts img {
margin-right: 5px;
width: 90px; Sữa 90px thành kích thước bạn muốn
height: 90px; Sữa 90px thành kích thước bạn muốn
border-radius: 3px;
}
>>> height = width => hình tròn
Cách 2: Chỉnh phụ thuộc
.sidebar .widget img {
max-width: 80%; đều chỉnh phần trăm cho phù hợp
}
.PopularPosts img {
margin-right: 5px;
width: 90px; Sữa 90px thành kích thước bạn muốn
height: 90px; Sữa 90px thành kích thước bạn muốn
border-radius: 3px;
}
https://foxnightcore.blogspot.com/
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px; >>> -5 thành 3
width:285px; >>> 285 thành 361
}
và sữa cái này
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left: 0; >>> 0 thành 16px
transition: all .3s ease-out;
}
>>> lưu mẫu load lại template nhìn sẽ ổn hơn >>> Các vấn đề trên là do các đoạn CSS thui bạn muốn đẹp hơn chỉnh sữa 1 tí lại là xong :)
Demo: http://www.thegioitin24h.com/
Đăng nhận xét