Hiện có:
đang truy cập

Danh mục

Showing posts with label Thủ thuật blogspot. Show all posts
Showing posts with label Thủ thuật blogspot. Show all posts

Danh sách bài viết liên quan cho Blogspot

1. Mẫu bài viết liên quan blogspot 1 (tham khảo nguồn bloggerplugins)

bai viet lien quan cho blogspot blogger, bai viet lien quan
Demo - bài viết liên quan Blogspot
Để sử dụng mẫu này các bạn cần tùy vào mẫu -> mở rộng mẫu HTML và chỉnh sửa theo hướng dẫn sau:
- Tìm đến </head> và chèn Code dưới đây bên trên nó:
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV2az2JQeOOWZQo37dAOvRumTJMCuAZQdB2YOyzb1pg-tpAqzpUwoD6UlO20JOOVl3R39BDzhdgRefH5mC3Yg7ifOFAGM8C9W-2vCf7twC-REM6oLXfGt-51Yczl8lexNzyNmHbpxxE9o/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://itviet360.googlecode.com/files/related_posts_min.js' type='text/javascript'/>

</b:if>




Nếu muốn thay đổi tên tiện ích thì các bạn thay ở dòng:
var relatedpoststitle="Related Posts"; Thay tên muốn hiển thị của bạn.
var relatedpoststitle="TÊN HIỂN THỊ";
- Tiếp theo các bạn tìm đến đoạn
<div class='post-footer-line post-footer-line-1'>
Nếu không thấy thì nó có thể là đoạn Code:
<p class='post-footer-line post-footer-line-1'>
Dán đoạn code dưới đây ngay bên dưới Code vừa tìm được. Có thể bạn tìm thấy nhiều hơn 1 đoạn code ở trên:

<!-- Related Posts Code Start-->

<!--Remove--><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.itviet360.com/2012/12/bai-viet-lien-quan-cho-blogger-seo.html'>Thủ thuật Blogger itviet360.com;</a>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>

<!--Remove--></b:if>
<!-- Related Posts Code End-->

Giá trị này là bài viết liên quan sẽ hiển thị
var maxresults=5;
 Hình ảnh mẫu bài viết liên quan

bai viet lien quan blogger, co hinh anh

Mẫu bài viết liên quan cho blogspot có ảnh này khá thú vị, có 1 điểm lưu ý là chúng ta chọn số lượng bài viết hiển thị sao cho phù hợp với độ rộng bài viết (khung post) của bạn.
Cách làm vẫn ở chế độ mở rộng HTML
- Tìm </head> và dán đoạn dưới đây trên nó

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNwBoBzRAQUJxcsXxpCxgU3IoPjjOE6sUmON6rwqefq922ogeh0P1i1LXkMOQ2Dhz1291C9pHvsTAv4Cyp7Kl-jslQx5k2tqN1CtKEOfXuJGH1Pu0Zu2qOb4bMz52NPMpMCQ1RXhLqB0c/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://itviet360.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>

- Tìm đến đoạn:

<div class='post-footer-line post-footer-line-1'>

nếu không thấy thì nó là đoạn:
<p class='post-footer-line post-footer-line-1'>
và dán đoạn code dưới đây ngay sau nó.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href=
http://tienluidl.blogspot.com/2013/01/danh-sach-bai-viet-lien-quan-cho.html'><img style="border: 0" alt=" Bài viết liên quan cho blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://itviet360.com/' ><img style="border: 0" alt="Blogger Templates" src="https://lh6.googleusercontent.com/-fSqIVyDB8gY/UMwkpHlFkLI/AAAAAAAABnQ/8IKV9P-0Q1A/s128/itviet360.png" /></a>
</b:if></b:if>

Bạn có thể chỉnh sửa 2 giá trị màu đỏ tương ứng.
Ở Code trên đó là số lượng hiển thị bài viết liên quan 5, tối đa là 6.
Để thay đổi tiêu đề thì bạn thay đổi ở dòng:
var relatedpoststitle="Related Posts";

Tạo Breadcrumb cho Blogspot

Các bước thực hiện:
Đăng nhập vào blog của bạn => Vào chỉnh sủa html
Như hình bên dưới

 

+ Đến phần chỉnh sữa giao diện (hình dưới) 
 
Bạn chọ mục mẫu mỡ rộng như hình trên
--------------------------------------------------------------------------------------------------------------
Bạn tìm đoạn mã sau (bấm tổ hợp Ctrl + F)
+ Tìm đoạn mã sau: <b:include data='top' name='status-message'/>
Thay bằng đoạn mã sau:
<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/>
+ Tìm đoạn mã sau:  <b:includable id='main' var='top'>
    Thay Bằng: 
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/><b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span class='post-labels'><span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast == "true"'> »
<span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span></b:if></b:loop><b:else/> » Unlabelled</b:if> » <span><data:post.title/></span></b:loop></span></p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'><p class='breadcrumbs'><span class='post-labels'><a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/></span></p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'><p class='breadcrumbs'><span class='post-labels'>
<b:if cond='data:blog.pageName == ""'><a expr:href='data:blog.homepageUrl'>Home</a> » All posts<b:else/><a expr:href='data:blog.homepageUrl'>Home</a> » Categories under <data:blog.pageName/></b:if>
</span></p></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'>
<!--Breadcrumbs Navigation For blogger --> 

+ Tìm  đoạn mã sau: ]]></b:skin> ()
Thêm vào trước đoạn mã CSS sau:
.breadcrumbs{background:#fff;color:#289728;padding:12px;border:2px solid #333;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;box-shadow:2px 2px 2px #CCC;}
----------------------------------------------------------------------------
Phần cài đặt hoàn tất => quay lại Blog để xem thành quả!
Tạo Breadcrumb cho Blogspot


 

Thống kê lượng truy cập trong blogspot

1. Đăng nhập vào Blog
2. Chọn mục Bố Cục




Chon mục Thêm tiện ích => Bảng danh sách các tiện ích sẽ được hiện ra như hình dưới:

Chọn Thống kê blog (có một số kiểu thông kê cho bạn chọn)
 
Quay lại Blog của bạn để xem thành quả


 

Total Pageviews