Giao diện đẹp cho bài viết phổ biến

Bạn đang tìm kiếm cho mình giao diện bài đăng phổ biến đẹp hay còn gọi là popular posts cho blog.hôm nay mình xin giới thiệu 4 giao diện đẹp cho các bạn chọn đây :)

Bước 1 : Tạo widget Popular Posts cho Blogger

(ai tạo rồi thì thôi nhé )

1.Đăng nhập vào Blog

2. Vào mẫu (Template)

3. Chọn Thêm Tiện ích (Add Widget)

4. Bấm chọn vào bài đăng phổ Biến (Popular Posts)

5. Bấm vào chỉnh sửa (Edit) và thiết lập như trong hình sau đó lưu lại



Riêng mục Display up until thì các bạn chọn tùy ý


4 kiểu Popular Posts cực đẹp cho Blogger

Kiểu Popular Posts 1

Kiểu Popular Posts 1

1. Đăng nhập vào blog

2. Chọn mẫu (template)

3. Chọn chỉnh sửa HTML.
4. Chèn dưới đây trước thẻ ]]></b:skin> :

#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; /* Màu của 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; /* màu số */ background: #FB8835; /* màu nền của số */ 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; /* size title */ 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; }

Kiểu Popular Posts 2



Để làm mẫu Popular Posts này cho Blogger các bạn làm như sau

1. Đăng nhập vào blog

2. Chọn mẫu (template)

3. Chọn chỉnh sửa HTML.
4. Chèn dưới đây trước thẻ ]]></b:skin> :

#PopularPosts1 h2{ position:relative; padding:8px 10px 6px 10px; width:100%; margin-bottom: 5px; font-size:17px; color:#757575; /* Color of the widget's title */ text-align:left; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; left:-8px; width:100%; } #PopularPosts1 li{ /* Styles of each element */ width:100%; position:relative; left:0; margin:0 0 1px 12px; padding:4px 5px; } #PopularPosts1 ul li:before{ content: counter(li); counter-increment: li; position: absolute; left: -30px; top: 50%; margin-top: -13px; background: #8E8E8E; /* background color of the numbers */ height: 1.9em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; color: #fff; font-size: 14px; } #PopularPosts1 ul li:after{ position: absolute; content: ''; left: -2px; margin-top: -.7em; top: 50%; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left:10px solid #8E8E8E; /* background color of the right arrow*/ } #PopularPosts1 ul li a{ color: #444; text-decoration: none; font-size:15px; } #PopularPosts1 ul li { position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 0.4em; background: #ddd; transition: all .3s ease-out; text-decoration:none; transition: all .1s ease-in-out; } #PopularPosts1 ul li:hover{ background: #eee; /* Background color on mouseover */ } #PopularPosts1 ul li a:hover{ color:#444; /* Link color on mouseover */ margin-left:3px; }

Kiểu Popular Posts cho Blogger dạng nổi

1. Đăng nhập vào blog

2. Chọn mẫu (template)

3. Chọn chỉnh sửa HTML.
4. Chèn dưới đây trước thẻ ]]></b:skin> :

#PopularPosts1 h2{ position:relative; right:-2px; padding:8px 63px 6px 17px; width:100%; margin:0; font-size:16px; background:#4F4F4F; /* Background color */ color:#f2f2f2; /* Color of the widget's title */ text-align:left; text-indent:18px; } #PopularPosts1 h2:before{ position:absolute; content:""; top:36px; right:0px; width: 0px; height: 0px; border-bottom:12px outset transparent; border-left:12px solid #000000; } #PopularPosts1 h2:after{ position:absolute; content:""; top:-6px; left:-5px; width: 0px; height: 0px; border-bottom:24px outset transparent; border-top:24px outset transparent; border-left:24px solid #ffffff; /* Arrow background color on the left */ } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; left:-8px; width:100%; } #PopularPosts1 li{ width:100%; position:relative; left:0; margin:7px 0 16px 12px; padding:10px 4px 0 5px; } #PopularPosts1 ul li:before{ content:counter(li); counter-increment:li; position:absolute; top:-2px; left:-20px; font-size:35px; width:20px; color:#888888; } #PopularPosts1 ul li a{ display:block; font-size:16px; /* Font size of the links */ color: #666; /* Color of the links */ text-decoration:none; transition: all .1s ease-in-out;font-weight: bold; } #PopularPosts1 ul li a:hover{ color:#3366FF; margin-left:3px; }

Kiểu Popular Posts có số bo tròn




Kiểu Popular Posts có số bo tròn

1. Đăng nhập vào blog

2. Chọn mẫu (template)

3. Chọn chỉnh sửa HTML.
4. Chèn dưới đây trước thẻ ]]></b:skin> :

#PopularPosts1 h2{ padding:8px 10px 3px 0; width:100%; margin:0; font-size:16px; position:relative; left:-20px; display:block; border-bottom:2px solid #ccc; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; width:100%; } #PopularPosts1 li{ /* Styles of each element */ width:100%; position:relative; left:0; margin:0 0 6px 10px; padding:4px 5px; } #PopularPosts1 ul li:before{ /* Style of the numbers */ content:counter(li); counter-increment:li; position:absolute; top:3px; left:-39px; font-size:21px; width:28px; height:28px; border-radius: 50%; color:#777; /* Text color */ border: 2px solid #ddd; /* Rounded border color */ padding:0; text-indent:9px; } #PopularPosts1 ul li a{ display:block; position:relative; left:-45px; width:100%; margin:0; min-height:28px; padding: 5px 3px 3px 39px; color:#333; /* color of the links */ text-decoration:none; font-size:14px; /* Font size of the links */ font-style: italic; } #PopularPosts1 ul li a:hover{ color:#3366ff; margin-left:3px; }

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