làm thế nào để cài đặt các bài viết liên quan với hình thu nhỏ widget:

Đầu tiên, đảm bảo các tiêu chí 3 được đáp ứng để cho phép widget này để làm việc:

a) nên nhãn tất cả các bài viết của mình như các widget nạp bài viết liên quan mang nhãn cùng với sự xâm nhập hiện hành;
b) nên đã đăng hình ảnh trong bài viết của bạn để hiển thị tốt nhất, nếu không thì hình ảnh mặc định sẽ được hiển thị thay vì;
c) nên đã kích hoạt nguồn cấp dữ liệu của blog của bạn tại Settings -> Site Feed. 2.Đăng nhập vào tài khoản Blogger của bạn. Tại Bảng điều khiển, bấm Thiết kế | Chỉnh sửa HTML. Trước khi chỉnh sửa mẫu của blog của bạn, nó khuyến khích để làm một bản sao lưu của nó lần đầu tiên, bằng cách nhấn vào Tải về bản đầy đủ. Sau đó, hãy chắc chắn rằng bạn kiểm tra Expand Widget Templates hộp, nằm bên phải.

3.Tiếp theo, sử dụng chức năng tìm kiếm của trình duyệt (nhấn Ctrl + F phím) để tìm đoạn mã sau: </ head> và thay thế nó bằng đoạn mã sau:

xem demo

<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/AVvXsEiA8fTZwiiBnwEqMS6a-a4R41fMAcROZTdKslw5COdfOJjzdUkygY0B2XI2h4IkVliVQHVRl9v9yetKwUQevUJp2tmM4OAEtvP0U3EUtaNPOkD7ukP31U4XUQRC_9UBSjtz1o2P3y07A4A/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

</head>

4.Tiếp theo, tìm dòng mã này: <div class='post-footer'> và địa điểm ngay bên dưới nó, đoạn mã sau đây:

<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&callback=related_results_labels_thumbs&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'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>

5. Thông thường, bạn sẽ bấm Preview để xem các thay đổi nhưng lưu ý rằng bằng cách nào đó những thay đổi sẽ không hiển thị trong bản xem trước cho tiện ích này (là nó, vì nó được thiết kế không xuất hiện trên trang chủ mặc định, tôi tự hỏi?). Vì vậy, tốt nhất để kiểm tra một lần nữa rằng bổ sung của bạn được đặt đúng để được gấp đôi chắc chắn. Sau đó chỉ, nhấn Save Template và Xem Blog .Đó là tất cả với nó! Những hình ảnh dưới đây cho thấy các widget Bài viết liên quan sẽ xuất hiện, từ mã script Aneesh ở trên. Nó sẽ chỉ xuất hiện trên các trang của bài viết. Nếu bạn muốn nó xuất hiện trên trang chủ là tốt, bạn phải tùy chỉnh các widget sau bước 6 dưới đây (làm điều này sau khi bạn đã hoàn thành tất cả các bước trên)

Tùy tùngĐể cấu hình widget của bạn , bạn cần phải quay trở lại các mã trên tại Thiết kế - > Edit HTML ( nhớ kiểm tra Expand Widget Templates hộp ) và thực hiện những sửa đổi cần thiết , chẳng hạn như :

    Để thay đổi tiêu đề của widget, tìm var relatedpoststitle = " Bài viết liên quan " ;
    và thay thế các từ, bài viết liên quan với bất cứ điều gì bạn muốn.

    Để thay đổi màu sắc của dòng splitter, tìm var splittercolor = # d4eaf2 " ;
    và chỉnh sửa mã màu . Tốt nhất để sử dụng màu sắc của nền bài viết của bạn nếu bạn muốn dòng vô hình.

    Để điều chỉnh số lượng bài viết liên quan đến hiển thị, tìm var maxResults = 5;
    và chỉnh sửa các giá trị.

    Để điều chỉnh khoảng cách giữa hình thu nhỏ, tìm # liên quan - viết một {
    và thêm : margin: 0px 3px dưới nó. Các 3px giá trị cho lề trái và phải , bạn có thể tăng hoặc giảm như mong muốn .

    Để thay đổi và stylist của các phông chữ , lợi nhuận và những người khác , bạn sẽ cần phải sửa đổi CSS có liên quan. Tìm hiểu thêm về CSS tại W3Schools , một trong những trung tâm tài nguyên yêu thích của tôi !

    Để hiển thị các bài viết liên quan trên mỗi trang , có nghĩa là , các trang bài cộng với trang chủ là tốt, tìm và loại bỏ những 2 dòng từ cả hai mã kịch bản ở bước 3 và 4 ở trên :
    <- Loại bỏ -> < == b:if cond='data:blog.pageType"item"'>
    và
    <- Loại bỏ -> </ b : if>

    Để chỉnh sửa hình thu nhỏ mặc định được hình ảnh hiển thị khi bài viết của bạn không có hình ảnh , thay thế các URL xuất hiện sau dòng mã này :
    var defaultnoimage = " vào URL của hình ảnh tạo của riêng bạn.Hy vọng hướng dẫn này đã được hữu ích và đặt một nụ cười trên khuôn mặt của bạn !Tiếp tục học tập ~ ~ ~ ~ tiếp tục mỉm cười tiếp tục chia sẻ !Cập nhật 2013/11/02 : Theo tác giả , Aneesh của B.Widgets ,nếu kịch bản không còn làm việc , bạn phải thay đổi :http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js( đoạn mã trên được tìm thấy ở Bước 3 của hướng dẫn của tôi ở trên )đểhttp://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js

chúc các bạn thành công

Phong Cách Đẹp Euro Viet.Net

làm thế nào để cài đặt các bài viết liên quan với hình thu nhỏ widget:

Đăng nhận xét

Kategori

Tổng số lượt xem trang