• KIẾN THỨC SEO
  • BLOG SERIER
  • SEO BLOGSPOT
  • TEMPLATE BLOGSPOT
  • ICON FACEBOOK
MENU

Hoc Tieng Trung Khamphablog.com

Menu
  • Home
  • #Web Tools
    • Giải Mã
    • Mã Hóa
    • Chuyển đổi code
    • Lấy mã màu
  • Liên Hệ
  • #Dịch Vụ
    • Rip Blogspot
    • Rip Wordpress
  • Site map
  • #Giới Thiệu
    • Admin
    • Blog
  • Liên Kết
  • Hỏi Đáp
Blogger-Widget
Showing posts with label Blogger-Widget. Show all posts

Recent Post Widget For Blogspot chuyên nghiệp

Đỗ Mạnh Hồng July 20, 2015 0
Đỗ Mạnh Hồng
Recent post là widget trình diễn bài viết theo label tùy chỉnh của nhà thiết kế, nếu bạn có một label (nhãn) muốn nằm trong một widget riêng biệt thì bạn nên chọn Recent post.

Giới thiêu đến các bạn một mẫu Recent post siêu đẹp với hiệu ứng next và previous cực kỳ chuyên nghiệp mà bạn nên phải dùng.
Recent Post chuyên nghiệp

Widget top comments for blogspot (bài viết comments nhiều nhất)

Đỗ Mạnh Hồng July 20, 2015 0
Đỗ Mạnh Hồng
Widget top comments có nghĩa là một widget thống kế số comments cho từng bài viết, bài viết nào nhiều comments nhất sẽ nằm ở trên và xếp thứ tự giảm dần khá chuyên nghiệp.
top comments widget blogspot

Tabbed Widget Blogspot siêu đẹp (Multi Tab)

Đỗ Mạnh Hồng July 20, 2015 0
Đỗ Mạnh Hồng
Tabbed widget hay còn có cái tên gọi mà multi tab, là tiện ích widget tích hợp cùng lúc 3 đến 4 tab trong một tiện ích nhằm thu gọn sidebar trông rất chuyên nghiệp.

[Tips] - Tabber widget chuyên nghiệp cho blogspot (MultiTab)

Đỗ Mạnh Hồng June 19, 2015 4
Đỗ Mạnh Hồng
Tabber widget hay còn gọi là Multi Tab cho blogspot, Là một tiện ích nằm trên widget mà các mẫu blogspot nước ngoài thường hay tích hợp. Là tiện ích chia widget trên blog của bạn ra thành 3 hay 4 tab rất chuyên nghiệp.

[Tips] - Recent Posts dạng tin tức cho blogspot

Đỗ Mạnh Hồng June 14, 2015 0
Đỗ Mạnh Hồng
Recent Posts cách hiển thị bài viết dùng js để hiện thị bài viết trên widget dành cho những blog muốn làm phong phú blog của mình hay những site tin tức muốn hiển thị bài viết theo nhiều kiểu khác nhau. Thì tiện ích widget Recent Posts là khá hợp lý và chuyên nghiệp.

[Tips] - Widget bình luận (comments) mới cho blogspot

Đỗ Mạnh Hồng May 27, 2015 0
Đỗ Mạnh Hồng
Comments hay bình luận là những lời góp ý của bạn đọc về blog của mình, tạo widget comments cho blogspot giúp admin nhanh chóng nắm bắt và phản hồi ý kiến bạn đọc, rất hữu ích cho những blog tin tức hay những blog có lượt view cao, giúp admin đỡ nhọc nhằng hơn.
widget comments mới cho blogspot

Cách thêm widget comments (bình luận) mới cho blogspot

1. Đăng nhập Blogger

Các bạn đăng nhập vào phần quản lý Blog > Bố cục > Thêm tiện ích HTML Javascript
tiện ích mới cho blogspot

2. Thiết lập widget

Widget này thường được đặt ở sitebar nên các bạn tạo tiện ích ở sidebar, thêm tiện ích thì một hộp thoại sẽ hiện ra, phần title thì các bạn đặc tùy ý có thể là bình luận mới, hay ý kiến khách hàng gì đấy, và bên dưới thì dán đoạn code sau :
<div style="padding:5px;">
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 8,
showAvatar = true,
avatarSize = 50,
roundAvatar = true,
characters = 50,
showMorelink = false,
moreLinktext = "More &#187;",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var numComments = numComments || 5,
avatarSize = avatarSize || 60,
characters = characters || 40,
defaultAvatar = defaultAvatar || "http://www.gravatar.com/avatar/?d=mm",
moreLinktext = moreLinktext || " More &raquo;",
showAvatar = (typeof showAvatar === 'undefined') ? true: showAvatar,
showMorelink = (typeof showMorelink === 'undefined') ? false: showMorelink,
roundAvatar = (typeof roundAvatar === 'undefined') ? true: roundAvatar,
hideCredits = (typeof hideCredits === 'undefined') ? false: roundAvatar;
function w2b_recent_comments(w2b) {
var commentsHtml;
commentsHtml = '<ul class="w2b_recent_comments">';
for (var i = 0; i < numComments; i++) {
var commentlink, authorName, authorAvatar, avatarClass;
if (i == w2b.feed.entry.length) break;
commentsHtml += "<li>";
var entry = w2b.feed.entry[i];
for (var l = 0; l < entry.link.length; l++) {
if (entry.link[l].rel == 'alternate') {
commentlink = entry.link[l].href
}
}
for (var a = 0; a < entry.author.length; a++) {
authorName = entry.author[a].name.$t;
authorAvatar = entry.author[a].gd$image.src
}
if (authorAvatar.indexOf("/s1600/") != -1) {
authorAvatar = authorAvatar.replace("/s1600/", "/s" + avatarSize + "-c/")
} else if (authorAvatar.indexOf("/s220/") != -1) {
authorAvatar = authorAvatar.replace("/s220/", "/s" + avatarSize + "-c/")
} else if (authorAvatar.indexOf("/s512-c/") != -1 && authorAvatar.indexOf("http:") != 0) {
authorAvatar = "http:" + authorAvatar.replace("/s512-c/", "/s" + avatarSize + "-c/")
} else if (authorAvatar.indexOf("blogblog.com/img/b16-rounded.gif") != -1) {
authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Dgz3TzhYZr0DQYq4eOb5dWXEwADZRdFkgr3HFXBbRAY7v-_5LNKnBbNf5UpzIZ5xUs5qXHRIQ1LBiYBltX55tUfu2Hy0LimEHj68NUnCd7LjAxyCe8UqVmG4IzOQAghjQeRwCkYjc_QM/" + avatarSize + "/ancplayer.png"
} else if (authorAvatar.indexOf("blogblog.com/img/openid16-rounded.gif") != -1) {
authorAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga8Wyb6y8Q7rijVBpgYbRBPHD60kAV3mstkm5uANDTfavbwiSl9hDXpROtdqqhEwPYiZ0GJR_TbOzlxdJrIXVLb69HkYeMpFB96RikvS9f2RF3hu9CC4wRLIhUa4iO-IgWOvObMgsy79me/" + avatarSize + "/ancplayer.png"
} else if (authorAvatar.indexOf("blogblog.com/img/blank.gif") != -1) {
if (defaultAvatar.indexOf("gravatar.com") != -1) {
authorAvatar = defaultAvatar + "&s=" + avatarSize
} else {
authorAvatar = defaultAvatar
}
} else {
authorAvatar = authorAvatar
}
if (showAvatar == true) {
if (roundAvatar == true) {
avatarClass = "avatarRound"
} else {
avatarClass = ""
}
commentsHtml += "<div class=\"avatarImage " + avatarClass + "\"><img class=\"" + avatarClass + "\" src=\"" + authorAvatar + "\" alt=\"" + authorName + "\" width=\"" + avatarSize + "\" height=\"" + avatarSize + "\"/></div>"
}
commentsHtml += "<a href=\"" + commentlink + "\">" + authorName + "</a>";
var commHTML = entry.content.$t;
var commBody = commHTML.replace(/(<([^>]+)>)/ig, "");
if (commBody != "" && commBody.length > characters) {
commBody = commBody.substring(0, characters);
commBody += "&hellip;";
if (showMorelink == true) {
commBody += "<a href=\"" + commentlink + "\">" + moreLinktext + "</a>"
}
} else {
commBody = commBody
}
commentsHtml += "<span>" + commBody + "</span>";
commentsHtml += "</li>"
}
commentsHtml += '</ul>';
document.write(commentsHtml)
}
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=10"></script></div>
Đấy như thế là đã xong rồi, bay giờ chỉ việc lưu tiện ích widget lại và kiểm tra thành quả thôi. Chúc các bạn thành công. 

[Tips] - Làm đẹp widget nhãn (label) blogpsot

Đỗ Mạnh Hồng May 25, 2015 5
Đỗ Mạnh Hồng
Nhãn hay còn gọi là Label trong blogspot là một phần không thể thiếu trong blogpsot nhằm giúp blogspot tăng pagerank, nhưng rất ít ai để trên blog của mình vì nó quá xấu nên các blogger ngại đặt nó. Nay khám phá blogspot sẽ giúp bạn làm đẹp label list và label cloud cho blogspot.
label list, label cloud
Cách làm đẹp cho widget nhãn blogspot
Để làm đẹp cho widget này rất đơn giản bạn chỉ cần thêm một đoạn css vào trước thẻ ]]></b:skin>
/* Labels
----------------------------------------------- */
.list-label-widget-content li{float:left;width:42%;padding-left:20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj59zJzaEUnb45CZkVysdqqwTfbV5BNt30i1R6Xf6NClMVk4iyr3a-pKwCQZUYi7fkP7MMkpsLvcpksZoQeKAsw-5HQ6_Z1bCCAh8Mkt-EW1prme3DPFNYob9OOQdEeBZGiNhZnAujgBQW1/s1600/bullet.png) no-repeat scroll 2px 10px;
list-style-type: none;}
.list-label-widget-content li a{color:#999;font-size:15px;}
.cloud-label-widget-content .label-size {font-size: 100%;float: left;}
.cloud-label-widget-content .label-size a {color: #666;float: left;font-size: 13px;margin: 0 5px 5px 0;padding: 5px 15px;text-decoration: none;border: 1px solid #999;border-radius: 30px;}
.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {background-color: #111;color: #999;text-decoration: none;transition: all 0.2s ease-out 0s;}
.cloud-label-widget-content .label-size span {color: #999;float: left;font-size: 13px;margin: 0 5px 5px 0;padding: 5px;text-decoration: none;border: 1px solid #999;border-radius: 30px;}
.cloud-label-widget-content .label-size span:first-child, .cloud-label-widget-content .label-size span:first-child span:nth-child(2) {background: #111;color: #999;}
 Sau khi thêm xong lưu mẫu lại và kiểm tra thành quả nhé, đù đặt label list hay label cloud đều khá đẹp. Chúc các bạn thành công.
Subscribe to: Posts (Atom)

Blog Tự Học Seo Online

Blog ra đời dưới sự thành lập của Đỗ Mạnh Hồng với mục đích chia sẻ những kiến thức giúp bạn tự học seo blog online chạy trên nền tản blogspot và website, cùng với đó chúng tôi còn chia sẻ tới các bạn những templates blogspot chuẩn seo, những thủ thuật đơn giản giúp bạn thao tác dễ dàng hơn trong phần quản trị Blogger. Với tiêu chí muốn gởi đến các bạn "SEO TỪ KHÓA LÊN TOP - KHÓ MÀ DỄ". Hãy cũng chúng tôi trao đổi và mong muốn được hỗ trợ các bạn nhiều hơn nữa.


Popular

  • 7 tiêu chí có thể câu traffic website từ mạng xã hội

SUBSCRIBE TO OUR NEWSLETTER

Copyright © 2015 Khamphablog.com All Right Reserved Tự học seo blog online cho người mới bắt đầu