Popular Posts là tiện ích mà hầu hết các blogger đều áp dụng đối với blog của mình. Theo mình thì lí do rất đơn giản là nó rất tiện lợi, giúp độc giả có thể biết được những bài viết được nhiều người quan tâm. Bài viết này mình sẽ chia sẻ một số style của tiện ích Popular Posts, các bạn có thể lựa chọn style phù hợp để áp dụng cho blog. Sau đây là các bước thực hiện thủ thuật:
Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích Popular Posts (Bài đăng phổ biến), tùy chỉnh các thông số cho tiện ích và lưu lại. (nếu blog của bạn đã có tiện ích Popular Posts thì bỏ qua bước này)
Bước 2: Vào Mẫu → Chỉnh sửa HTML → Chèn code CSS của style mà bạn thích vào trước thẻ ]]></b:skin>. Sau đây là một số style để các bạn lựa chọn:
- Kiểu 1:
Code:
#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 tiêu đề của tiện ích */ } #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 của số đếm */ background: #FB8835; /* màu nền của số đếm */ border: .2em solid #fff; /* màu đường viền */ -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; /* kích cỡ và font chữ */ 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 2:
Code:
#PopularPosts1 h2{ position:relative; padding:8px 10px 6px 10px; width:100%; margin-bottom: 5px; font-size:17px; color:#757575; text-align:left; } #PopularPosts1 ul{ list-style:none; counter-reset:li; padding:10px; left:-8px; width:100%; } #PopularPosts1 li{ 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; 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; } #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; } #PopularPosts1 ul li a:hover{ color:#444; margin-left:3px; }
- Kiểu 3:
Code:
#PopularPosts1 h2{ position:relative; right:-2px; padding:8px 63px 6px 17px; width:100%; margin:0; font-size:16px; background:#4F4F4F; color:#f2f2f2; 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; } #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; color: #666; text-decoration:none; transition: all .1s ease-in-out;font-weight: bold; } #PopularPosts1 ul li a:hover{ color:#3366FF; margin-left:3px; }
- Kiểu 4:
Code:
#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{ width:100%; position:relative; left:0; margin:0 0 6px 10px; padding:4px 5px; } #PopularPosts1 ul li:before{ content:counter(li); counter-increment:li; position:absolute; top:3px; left:-39px; font-size:21px; width:28px; height:28px; border-radius: 50%; color:#777; border: 2px solid #ddd; 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; text-decoration:none; font-size:14px; font-style: italic; } #PopularPosts1 ul li a:hover{ color:#3366ff; margin-left:3px; }
Chúc các bạn thành công !
Xem thêm: www.đoàntrịnh.vn
Nhận xét
Blog mình đang áp dụng cái này. Khá đẹp và không ảnh hưởng lắm đến tốc độ :->
Trả lờiXóaCảm ơn mấy cái style đẹp Popular Posts cho blog !
Trả lờiXóaNhân tiện, bạn nào biết cách trích xuất code trình diễn ở web sau cho blogspot thì chỉ mình với:
Any List Scroller: http://als.musings.it/
Cái mình cần là "Demo 4" của nó, mình đã làm theo hướng dẫn trên web nhưng nó không chạy!! Híc...
Cảm ơn các bạn trước nha!
Cuối trang đó có các file js sử dụng cho từng demo bạn chỉ cần tải về sau đó upload lên host riêng và thay vào là được thôi. Bạn có thể sử dụng host sau GOOGLE DRIVE
XóaCảm ơn bạn đã trả lời!
XóaĐã thử nhưng vẫn làm không được, mình thì cũng không am hiểu về tinh chỉnh code lắm nên pó tay!
Khi nào rãnh nếu bạn viết 1 bài về hướng dẫn làm trình diễn này trên blog của bạn cho anh em tham khảo thì hay quá! ^_^
* Đây là toàn bộ đoạn code mình đưa chung vào trong 1 HTML nhưng không chạy:
https://drive.google.com/file/d/0B4r-HBx6QMxAUDFzdTZMalEwSnc/edit?usp=sharing
Càm ơn bạn nhiều nha! ^_^
Trả lờiXóaanh nam ơi vào giasuvinh24h.com
Trả lờiXóaxem em tí - seo lên google nó toàn bị thế này -ảnh : llink hình ảnh
Em thêm đoạn code bên dưới vào sau thẻ <head>
Xóa<b:if cond='data:blog.metaDescription == ""'>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
Nếu trong blog đã có đoạn <meta expr:content='data:blog.metaDescription' name='description'/> thì xóa nó đi trước khi thêm đoạn bên trên vào nha e.
mất bao lâu để google nó check lại anh nhỉ -
Trả lờiXóaPopular Posts cho label riêng thì có cách code nào hay ko
Trả lờiXóaHiện tại blogger chưa cho phép gọi feed bài đăng phổ biến theo nhãn bạn ak.
Xóaem làm theo anh nhưng vẫn ko được anh ạ vào http://www.giasuvinh24h.com/ xem lại em tí
Trả lờiXóaAnh kiểm tra trang của em có 2 đoạn meta content cho phần description. Đoạn code anh đưa ở trên em chèn vào. EM có thể thay toàn bộ đoạn sau thẻ head bằng mã bên dưới:
Xóa<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta content='uoQr0Bkf3zSjJVGNJfeEH4R0hwnMlPeQuxGMEDVGgdg' name='google-site-verification'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
404 | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:if cond='data:blog.metaDescription == ""'>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
thường thì từ 12 đến 48 giờ là index lại.
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaem chi thac mac la cai cu cua em co các phần mô tả cụ thể - khi thay cái của anh vào như trên nếu đúng thì có ảnh hưởng gì seo không ạ ! mong anh giúp cho ạ
Trả lờiXóaKhông e ak. Hiện tại anh cũng đang dùng đoạn đó,.
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóacho em hỏi thêm tí nữa đó là : em thấy trên blog anh có đoạn :
Trả lờiXóa<meta content='Thủ thuật blogger/blogspot, làm SEO, máy tính. tivi online, Giải trí. Phần mềm free. World, PowerPoint, ảnh đẹp' name='description
vậy em cũng muốn thêm vào như của anh thì thêm ntn ạ
anh xem giúp với - em làm y hệt anh mà vẫn không được - nhưng mô tả bên dưới em đã xóa rồi mà google nó vẫn hiện khi tìm kiếm !!
Trả lờiXóa1. Đoạn <meta content='Thủ thuật blogger/blogspot, làm SEO, máy tính. tivi online, Giải trí. Phần mềm free. World, PowerPoint, ảnh đẹp' name='description
Xóalà đoạn được em viết trong phần Cài đặt của blog.
2, Đoạn meta="mo tả bài viết
là đoạn em viết trong phần cài đặt bài đăng,
Em có thể xem ảnh minh họa ở đây: <a href="http://namkna.blogspot.com/2011/08/toi-uu-title-trong-blogspot-cho-search.html" rel="nofollow">XEM NGAY</a>
- Nếu áp dụng đoạn code trên và cả 2 cách trên thì bài viết sẽ hết lỗi.
em vẫn áp dụng rồi - nhưng không được
Trả lờiXóaA kiểm tra trang của em có quá nhiều sự trùng lặp về code ở phần meta. Trong phần đó không cần thiết phải khai báo bằng tay nha e, Hiện nay không cần phải khai báo thủ công đâu.
Xóa1, Em xóa toàn bộ những đoạn nằm giữa 2 thẻ <head> và <b:skin><![CDATA[
trừ 2 đoạn bên dưới là không xóa:
<script src='https://googledrive.com/host/0B_I_CznaRRcIbUpLUTBaYmd6MHM' type='text/javascript'></script>
<script src='https://googledrive.com/host/0B_I_CznaRRcIb2xuQnUzRzk1LVU' type='text/javascript'></script>
2. Giờ thêm vào sau thẻ <head> đoạn code bên dưới:
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta content='uoQr0Bkf3zSjJVGNJfeEH4R0hwnMlPeQuxGMEDVGgdg' name='google-site-verification'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
404 | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:if cond='data:blog.metaDescription == ""'>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
- LƯU Ý; Đừng cố thay dổi nội dung đoạn code vừa thêm vào nếu không phần metaDescription sẽ lỗi như em gặp phải đó nha.
Chính 3 đoạn em khai báo thủ công sau đã gây ra lỗi mà em gặp phải đó:
Xóa<!--1a.Mô tả seo trang chủ-->
<meta content='Gia sư tại vinh, Gia sư toán lý hóa tại vinh, gia sư lớp 1 2 3 4 5 6 7 8 9 10 11 12 tại vinh. trung tâm gia sư tại vinh, gia sư uy tin hàng đầu tại thành phố vinh. gia sư dạy kèm tại vinh, gia sư luyện thi đại học tại vinh,gia sư số 1 tại vinh, gia sư tóan lý hóa tiếng anh,sinh học tại vinh. cuộc sống, quà tặng cuộc sống, học đường, đề thi, giáo trình, tài liệu' name='description'/>
<!--1b.end Mô tả seo trang chủ-->
<!--2a.Mô tả seo trang chủ-->
<meta content='gia sư luyện thi đại học tại vinh, gia sư vinh, gia sư giỏi tại vinh, gia sư tại nghệ an, trung tâm gia sư tại vinh, gia su lop 1 2 3 4 5 6 7 8 9 10 11 1 tai thanh pho vinh, gia su tinh nghe an, gia su tai vinh,trung tam gia su tai vinh' name='description'/>
<!--2b.end Mô tả seo trang chủ-->
<meta content='TÌM GIA SƯ TOÁN LÝ HÓA LỚP 1 2 3 4 5 6 7 8 9 10 11 12 TẠI THÀNH PHỐ VINH, GIA SƯ UY TÍN TẠI VINH, GIA SƯ TẠI THÀNH PHỐ VINH' name='description'/>
Về cơ bản đoạn bên dưới đã bao gồm cả 3 phần đó rồi e ak.
<b:if cond='data:blog.metaDescription == ""'>
<meta expr:content='data:blog.pageName + " - " + data:blog.title' name='description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
- Đừng cố gắng định hướng SEO theo hướng thụ động như trên nha.
em hiểu rồi anh - cảm ơn anh đã tạn tình giúp đỡ !!!!!!!!!!!!!!!!!1
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaMình làm theo kiểu 1 nhưng bị che mất nữa cái vòng tròn, làm sao để khỏi mất bạn
Trả lờiXóaĐể lại link trang bạn đã áp dụng thủ thuật để mình kiểm tra lỗi nha.
Xóa