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ất

Hô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 :

https://www.digitalnomad.vn/2021/07/chen-code-quang-cao-slider-carousel-multi-tabbed-Image-GalleryN3i3.html#span_style__font_size__large____span_style__color__red____b_D___Code_Random_Ads___owlCarousel____b___span___span

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

Nổi bật :

[*] 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
✨ Bài viết được thực hiện bởi Blogger Gia Bảo, Freelancer Marketing Online, có nhiệm vụ kết nối khách cần mua với nhà phân phối, công ty sản xuất. BLOG GIA BẢO không phải đơn vị trực tiếp bán hàng trên website mà chỉ là nơi giúp bên mua gặp gỡ bên bán.

✨ Nổi bật : Mô hình Freelancer Marketing Online Cùng Nhà Phân Phối / Công Ty Sản Xuất Triển Khai Kênh Bán Hàng Trực Tuyến Thông Qua Việc Mở Gian Hàng TMĐT : Xem thêm,....

Kem chống nắng Biore UV Aqua Rich Watery Essence/Gel SPF 50+/ PA++++ 50ml/90ml

Xem Giá Bán
Xem thêm : Chăm Sóc Cơ Thể
Mua ngay

Bộ bàn ăn gỗ cao su gấp gọn

Xem Giá Bán
Tìm hiểu thêm về : Gỗ ghép
Đặt Mua ngay