Kết hợp Script thủ thuật blogspot với biến data có sẵn trên blogger
Thế giới thủ thuật Blogspot vô cùng phong phú và đa dạng, nhằm tùy biến sử dụng sẵn các Script thủ thuật hay được chia sẻ online.
Bạn tìm được code tiện ích, thủ thuật code bài viết gần đây, bài viết ngẫu nhiên, bài viết theo nhãn blogspot hay ho, xịn sò,... Bạn đang băn khoăn muốn chỉnh sửa recent post , random post , tiện ích bài viết theo nhãn thành bài viết theo nhãn bài viết hiện tại ? Ok dễ thôi.
Thủ Thuật Blogspot • Nơi chia sẻ : kiến thức, kinh nghiệm giúp tối ưu blogger hay nhất, mới nhấtHôm nay Gia Bảo chia sẻ thủ thuật giúp bạn dễ dàng tuỳ biến, tái sử dụng các script bài viết recent post, random post , kết hợp code multiple tab, slider, carousel,... thành sidebar bài viết " liên quan " đẹp mắt độc đáo trên blogspot của bạn.
Nào chúng ta cùng tham khảo thủ thuật blogspot ngon lành cành đào này nhé.
Đầu tiên là script khai báo, sử dụng các biến data sẵn có trên blogger :
Cấu trúc <script> code </script>
<script type='text/javascript'>
var Labeldautien = '<data:post.labels.first.name/>';
var Labelcuoicung = '<data:post.labels.last.name/>';
</script>
Chia sẻ kỹ thuật code liên quan đến biến nhãn <data:label:name/> :
Một số kỹ thuật lấy nhãn trên Blogger :
Sử dụng vòng lặp tạo danh sách nhãn trong blogspot :
<b:if cond='data:top.showPostLabels and data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' index='i' var='label'>
<b:if cond='data:i == 0'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</b:if>
</b:loop>
</b:if>
Kế đến là danh sách các thủ thuật blogspot liên quan đến việc tạo danh sách bài viết blogspot nhãn từ các thủ thuật blogspot truyền thống thường được sử dụng như được breaking news, tab , carousel, slider recent post, random post,...
Thủ thuật tuỳ chỉnh thành bài viết liên quan đến nhãn bài viết hiện tại giúp bạn có nhiều kiểu dạng bài viết dạng related post , làm phong phú cấu trúc giao diện blogspot như tạo thêm thanh bài viết liên quan vào đầu & giữa bài viết, sidebar related post bên phải, bên trái trang blogspot.
Danh sách thủ thuật tiện ích điển hình :
- [ Dạng bài viết theo nhãn Breaking news ] https://www.digitalnomad.vn/2021/08/tao-thanh-breaking-news-co-dinh-dau-trang-hien-thi-bai-viet-random-theo-nhieu-nhanIro165.html
- [ Dạng bài viết theo nhãn dạng List & Grid ] https://www.digitalnomad.vn/2021/07/code-dang-bai-viet-blogspot-style-1-List-recent-post-label-randomR7i3.html
- [ Bài Viết dạng https://www.mybloggertricks.com/2016/07/vertical-slider-for-blogger.html
Chia sẻ Code kết hợp biến sẵn có trên blogger với các thủ thuật bài viết tuỳ biến theo nhãn ( Label ) theo dạng list, grid, slider, breaking new,...
Biến thanh breaking news thành thanh bài viết liên quan.
Trong nhiều trường hợp chủ blog thường viết bài có nội dung chi tiết quá dài, việc hiển thị bài viết liên quan lên đầu, giữa bài viết sẽ giúp độc giả quan tâm lưu ý hơn việc nằm ở phía cuối bài viết. Kiểu hiển thị nội dung dạng Breaking News sẽ giúp bạn hiển thị noohi dung đẹp mắt, gọn gàng mà không chiếm quá nhiều diện tích trên trang bài viết blogspot. Bạn có thể kết hợp với code sticky cố định thanh bài viết liên quan dạng breaking news đầu, cuối bài viết giúp người dùng dễ dàng truy cập nội dung bài viết.
Tuỳ biến Code Breaking news mẫu số 1 :
Bước 1 : Khai báo biến sử dụng trong script dùng tạo nhãn ngẫu nhiên theo nhãn đầu tiên & nhãn cuối cùng của bài viết hiện tại
- var Labeldautien = '<data:post.labels.first.name/>';
- var Labelcuoicung = '<data:post.labels.last.name/>';
Code Mẫu tùy biến Breaking News :
<!--Tùy Biến Code Breaking New Mẫu AT-news --><div class='AT-news'>
<div id='newshead'><a href="https://www.digitalnomad.vn/2021/08/vay-tien-online-rat-de-tra-moi-khoNcjo4i5.html"><span>Vay Tiền Online</span></a> </div>
<div id='news'>
<div id='news-posts'>Loading...</div>
</div></div>
<style type='text/css'>
@keyframes at-blink{from{opacity:0}to{opacity:1}} @media only screen and (max-width:640px){ #news {width: 90%;}.AT-news{width: 100%;}} #newshead span:before{position: absolute; content: ''; top: 9px;left: 8px; display: inline-block;height: 5px; width: 5px;background: #fff;animation:at-blink .4s infinite;} .AT-news{width: 90%; margin: 15px auto;} #newshead{margin: 10px 0 0; position: relative; align-items: center; display: flex;} #newshead span{position: relative;box-shadow: 0 0px 20px 0px rgba(30,30,30,.08);color: #fff;background-color:#ff0000; font-weight: 700; font-size: 12px; padding: 4px 10px 4px 19px;} #news:before { position: absolute; content: ''; display: inline-block; left: 0;top: 0; height: 60px; width: 5px; margin: 0; background: #ff0000;box-shadow: 0 0px 10px 0px rgba(30,30,30,.08); } #news {box-shadow: 0 0px 10px 0px rgba(30,30,30,.08);background: #fefefe; position: relative;display: block;overflow: hidden; padding: 12px 15px; } #news-posts {overflow: hidden;height: 25px; line-height: 25px;margin-left: 22px;text-align: left;} #news-posts ul,#news-posts li{list-style:none;margin:0;padding:0;} #news-posts li a { background: none !important; color:#222 !important;font-weight:600;text-decoration: none;font-size:12px }
</style>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script type='text/javascript'>
var LabeldautienAdsgiuatrang = '<data:post.labels.first.name/>';
var LabelcuoicungAdsgiuatrang = '<data:post.labels.last.name/>';
</script>
<script type='text/javascript'>
//<![CDATA[
quotes2recentpostsStyle1 = new Array()
quotes2recentpostsStyle1[0] = "MarketAtHome-S02"
quotes2recentpostsStyle1[1] = "MarketAtHome-S01"
quotes2recentpostsStyle1[2] = "Nhu Yếu Phẩm"
quotes2recentpostsStyle1[3] = LabeldautienAdsgiuatrang
quotes2recentpostsStyle1[4] = LabelcuoicungAdsgiuatrang
randomquote2recentpostsStyle1 = Math.random() * (quotes2recentpostsStyle1.length)
randomquote2recentpostsStyle1 = Math.floor(randomquote2recentpostsStyle1)
var randLabel = quotes2recentpostsStyle1[randomquote2recentpostsStyle1];
$(document).ready(function () { var url_blog = 'https://www.digitalnomad.vn/', numpostx = 10; $.ajax({ url: ''+url_blog+'/feeds/posts/default/-/'+randLabel+'?alt=json-in-script&max-results=' + numpostx + '', type: 'get', dataType: "jsonp", success: function(data) { var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) { skeleton = "<ul>"; for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++) { if (entry[i].link[j].rel == "alternate") { posturl = entry[i].link[j].href; break; } } posttitle = entry[i].title.$t; skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>'; } skeleton += '</ul>'; $('#news-posts').html(skeleton); function tick(){ $('#news-posts li:first').slideUp( function () { $(this).appendTo($('#news-posts ul')).slideDown(); }); } setInterval(function(){ tick () }, 3000); } else { $('#news-posts').html('<span>No result!</span>'); } }, error: function() { $('#news-posts').html('<strong>Error Loading Feed!</strong>'); } }); });
//]]>
</script>
<!--End Tùy Biến Code Breaking New Mẫu AT-news -->
Xem thêm các mẫu Breaking News :
- https://www.allbloggertricks.com/2017/04/responsive-widget-show-latest-posts-ticker-with-labels-for-blogger.html
Biến slider, carousel bài viết gần đây, bài viết ngẫu nhiên :
Tuỳ biến sidebar recent post trượt theo chiều ngang, xem Code bài viết gần đây của mybloggertricks theo link https://www.mybloggertricks.com/2016/06/blogger-recent-posts-slider-widget.html
Bước thực hiện như sau lấy tên nhãn đầu tiên, tên nhãn cuối cùng ( cũng có thể chạy đoạn script lấy tên nhãn ở giữa bằng cách tạo mảng lấy phần tử ở giữa ).
Khia Tạo script nhãn ngẫu nhiên theo nhãn đầu tiên & nhãn cuối cùng của bài viết hiện tại
Xem cách tạo slider bài viết carousel theo nhãn tại link sau :
Code trên được chỉnh sửa lại như sau :
Thay :
<script type='text/javascript'>
//<![CDATA[
quotes2LaBelAdsTop = new Array()
quotes2LaBelAdsTop[0] = "Top Ads"
quotes2LaBelAdsTop[1] = "Chăm Sóc Sức Khỏe"
quotes2LaBelAdsTop[2] = "Đồ Gia Dụng Đa Năng Tiện Ích"
randomquote2LaBelAdsTop = Math.random() * (quotes2LaBelAdsTop.length)
randomquote2LaBelAdsTop = Math.floor(randomquote2LaBelAdsTop)
var reLabel = quotes2LaBelAdsTop[randomquote2LaBelAdsTop]; //ganti Anime dengan nama Label
bằng :
<script type='text/javascript'>
var LabeldautienAdsgiuatrang = '<data:post.labels.first.name/>';
var LabelcuoicungAdsgiuatrang = '<data:post.labels.last.name/>';
</script>
<script type='text/javascript'>
//<![CDATA[
quotes2LaBelAdsTop = new Array()
quotes2LaBelAdsTop[0] = LabeldautienAdsgiuatrang
quotes2LaBelAdsTop[1] = LabelcuoicungAdsgiuatrang
randomquote2LaBelAdsTop = Math.random() * (quotes2LaBelAdsTop.length)
randomquote2LaBelAdsTop = Math.floor(randomquote2LaBelAdsTop)
var reLabel = quotes2LaBelAdsTop[randomquote2LaBelAdsTop]; //ganti Anime dengan nama Label
Tương tự các bạn ứng dụng tùy biến các dạng code bài viết theo nhãn được liệt kê dưới đây :
- https://www.exeideas.com/2013/07/automatic-blog-label-thumbnail-slider.html
- https://webseo.com.vn/tao-slider-bai-viet-moi-nhat-theo-nhan-trong-blogspot
- https://www.allbloggertricks.com/2021/01/blogger-carousel-recent-posts-slider.html
- [*] https://bazzhood.blogspot.com/2020/09/add-recent-posts-widget-in-blogger.html
- https://www.mybloggertricks.com/2016/07/vertical-slider-for-blogger.html
- https://www.caramanual.com/2018/04/widget-recent-post-slider.html
- https://www.dewaplokis.com/2017/11/recent-post-label-halaman-statis.html
- https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html
- https://blog.doisong24.com/2014/03/recent-posts-slider-tu-chinh-kich-thuoc.html
- https://www.tutesinside.net/2016/10/add-recent-posts-list-slider-in-blogger.html
Thủ thuật tổng hợp liên quan đến biến data khác trên blogger bao gồm :
- data:blog.url
- data:post.author
- data:blog.title
- ...
( Đang cập nhật )
Tham khảo :
Làm việc với nhãn & biến trong blogspot :
- https://www.thietkeblogspot.com/2019/06/dieu-kien-va-cac-tuy-chon-hien-thi-label-bai-viet-trong-vong-lap.html
- https://www.giaodien.blog/2021/06/huong-dan-lay-danh-sach-nhan-blogspot.html?m=1
- https://www.google.com/amp/s/thichcode.net/cac-bien-can-biet-trong-blogspot/amp/?espv=1
- https://kslzone.blogspot.com/2014/01/the-la-data-la-gi-va-cach-su-dung-no.html?m=1
- https://www.thietkeblogspot.com/2019/05/tong-quan-ve-viet-hoa-label-trong-blogspot.html?m=1
- https://stackoverflow.com/questions/42155134/can-you-set-your-blog-to-show-only-the-very-first-label-of-a-post-in-blogger
- Ví dụ data:label:name : https://helpa2yz.blogspot.com/2014/08/step1.html
- Ví dụ data:label:name : https://www.landgonow.com/2011/01/bai-viet-lien-quan-theo-nhieu-label-cho.html?m=1
- https://www.thietkeblogspot.com/2020/02/ung-dung-the-label-bai-viet-trong-theme-blogspot-ban-hang.html?m=1
- https://techtspot.blogspot.com/2018/10/add-horizontal-random-post-widget-to.html?m=1#gsc.tab=0
Slider - Carosel bài viết theo nhãn :
- https://webseo.com.vn/tao-slider-bai-viet-moi-nhat-theo-nhan-trong-blogspot/
- carousel recent post blogspot
- https://www.mybloggertricks.com/2016/08/blogger-carousel-responsive-dynamic.html?m=1
- https://www.allbloggertricks.com/2021/01/blogger-carousel-recent-posts-slider.html?m=1
- https://www.windows2it.com/2016/02/them-tien-ich-bai-viet-gan-day-recent-posts-dang-truot-ngang-cho-blogspot-version-1.html?m=1
- Post Grid, Post Carousel, & List Category Posts – by Smart Post Show,
- Post Tab, post multiple tab
- https://dte.web.id/teknis/widget-blogger-untuk-menampilkan-daftar
- http://smartpikblog2.blogspot.com/2016/02/add-responsive-recent-post-slider.html?m=0
Relared post :
- http://allbloggertrick4u.blogspot.com/2015/08/linktext-only-related-posts-widget-for.html
- https://www.mybloggertricks.com/2013/07/50-popular-blogger-widgets-and-plugins.html
- https://www.sorabloggingtips.com/2019/12/simple-but-stylish-notification-bar-for-blogger.html?m=1
- How To Install Push Notifications In Blogger To Engage Visitors ...
- https://www.technicalarp.com/2020/11/automatically-add-related-articles-blogger.html
- https://techubber.blogspot.com/2016/06/show-blogger-next-and-previous-post-above-title-below-post-body-above-comments.html?m=1
- https://www.mybloggerguides.com/add-next-previous-post-titles-navigation-widget-in-blogger/
- https://www.thichnet.com/2018/05/chen-tien-ich-bai-viet-lien-quan-vao-giua-bai-viet-blogspot.html?m=1
- https://www.mybloggerguides.com/stylish-related-posts-widget-for-blogger-with-thumbnail/
- https://www.best2know.info/you-might-also-like-this-widget-for-blogger-or-related-post-widget/
- https://www.bloggerspice.com/2015/04/scrolling-related-post-with-thumbnail-widget-for-blogger-template.html?m=1
- https://axlmulat.com/blogger/how-to-add-related-posts-with-thumbnails-in-blogger-post/
- http://www.bloggerwidgetgenerators.com/2014/07/show-recent-posts-with-thumbnails-for-particular-label-blogger.html?m=1
- https://www.romshillzzblog.com/2017/07/how-to-add-related-post-widget-with.html?m=1
- https://www.bloggerhints.com/2017/01/awesome-stylish-related-post-widget-blog.html?m=1
- http://smartpik4.blogspot.com/2016/02/auto-scrolling-recent-posts-bar-widget.html?m=1
- https://www.kimsixbloggersupport.com/2017/11/how-to-break-post-into-multiple-pages.html?m=1
- https://www.mybloggerguides.com/add-next-previous-post-titles-navigation-widget-in-blogger/
- https://www.mybloggertricks.com/2013/12/show-next-previous-post-titles-in.html?m=1
- Stickybar With Auto Scrolling Recent Posts Widget for Blogger
- https://www.mybloggertricks.com/2017/02/create-table-of-contents-javascript.html
- Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu
- bottom Notification blogspot
- https://f4vnn.com/tao-popup-thong-bao-bai-viet-moi-cho-blogger.html
- https://www.nguyentruongson.info/2017/08/huong-dan-tao-push-notification-thong-bao-day-cho-blogspot.html?m=1
