Hướng dẫn Chỉnh sửa Blogger Template SoraSoft thành giao diện DigitalNomad.vn

Gia Bảo

Giao diện Blog viết bài content marketing tên miền DigitalNomad.vn được thiết kế từ nền tảng Blogspot, template hiện đang sử dụng là template "TextTrim Blogger template được thiết kế đơn giản gọn nhẹ trang chủ chỉ bao gồm text không sử dụng hình ảnh" các template cũ được cài trước đó bao gồm : Piki Job Alert, Mirror, SoraSoft, Textrim tương ứng với các trang blogspot Demo sau :

  1. https://dulichkythuatso.blogspot.com 
  2. https://chuyendoisoplus.blogspot.com 
  3. https://digitalnomadplus.blogspot.com
  4. https://dumuckythuatso.blogspot.com 

List contents of Code Html, CSS, Javascript Blogger Template SoraSoft

Sau khi tải template SoraSoft tại link https://gooyaabitemplates.com/sorasoft-blogger-template/ và cài đặt thành giao diện Blogspot cá nhân, bạn cần chỉnh sửa - tùy biến làm đẹp giao diện theo phong cách riêng của bạn dựa trên cấu trúc có sẵn. Một số thay đổi cơ bản bao gồm Logo, bổ sung chèn thêm code thêm các tiện ích, sau đây là một số hướng dẫn cơ bản giúp bạn chỉnh sửa Blogspot sử dụng cấu trúc template SoraSoft  :  

2. Tạo trang SiteMap - sơ đồ trang xem hướng dẫn cách thực hiện theo link sau : https://dumuckythuatso.blogspot.com/p/sitemap-digitalnomadvn.html
3. Chỉnh sửa cơ bản :
3.1 Thay hình Noimage mục bài đăng gần đây trên trang chủ :
Tìm link hình :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZN59DN5N6uf-YL4RQC1g9eCxwowfhbWc7gZvNQ2w8Uto9zIIgem9JlcCLZDso2coWtVsTCHUNNAEdNJm09zdi4G4tY6XLgbZJSxWDTKgBlHZHBqu6HzaMoc5DQg9QmDAJJE1PjWYBvaw/w680/nth.png 
Thay thế bằng link hình của bạn :
Cụ thể trong trang https://dumuckythuatso.blogspot.com - được thay bằng link hình sau : Link-hình-noimage-trang-chủ
3.2 Thay logo :
Link logo SoraSoft gốc : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA_f44vCdk4vSL32J7Qj7TRVSCzhj42mUy_5N6nZ3tIvS6aCPTNWQgooIGsHEVWrfFNgiykQNEZ3lpMMT4J0RwDYVzAl74cs360hEme0H4O05aaZUtyy26BqvaNj5DvcLFf_xQZXgUcSE/s1600/Sora-Soft-logo.png
Vào phần bố cục >> [header Logo] chọn chỉnh sửa >> Xóa hình ảnh >> Tải hình ảnh logo của bạn
Cụ thể trên web dumuckythuatso.blogspot.com sử dụng logo sau : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk3TQM_VPUI0cuV4RfSSBgL6O_BiTSrYW8f4EWm0UyPXSopT10jOo9vzrZBc6yZNoAs7qDF5fujc19I1iLZW27UjAsnNGH1Z8xpaIPsDySDuzZTq8iZMKOuwSdGREPMIVgmPprz5MnJy8/s1600/Make-Money-from-websiteZ4Q6.png
3.3. Chèn đoạn code quảng cáo đầu trang dưới thanh menu :  Vào phần Bố cục >> Home Ads Top >> Chọn chỉnh sửa - chèn code quảng cáo của bạn
3.4 Chèn đoạn code quảng cáo bên dưới phần đăng tin Hot trang chủ :  Vào Bố cục >> Ad Below Hot Post  >> Chọn chỉnh sửa - chèn code quảng cáo của bạn
3.5 Chỉnh sửa Ratings &  Platform : Vào chủ đề tìm đoạn code <span class='platform-text'>Windows</span> sửa thành <span class='platform-text'>Blogspot</span> 
3.7 Chỉnh sửa 'post-author' :
3.8 Chỉnh sửa khung nhận xét :
3.9 : Code chèn quảng cáo vào bài viết
3.10 : Code chèn quảng cáo ở vị trí bất kỳ dưới bài viết trên trang chủ. 
3.11 Tạo trang tĩnh danh mục - kết nối với menu điều hướng cuối trang
3.12 Tạo trang tĩnh cửa hàng - kết nối với menu điều hướng cuối trang
3.13 Tạo trang tĩnh review thay thế cho icon tìm kiếm cuối trang
3.14 Chèn Breaking News

Code thủ thuật :
1. Thủ thuật đi nhanh đến vị trí đánh dấu trên trang digitalnomad.vn :

Bước 1 : đánh dấu vị trí  :

<div id='Vitridaubaiviet'> </div>
<div id='Vitridautrangnhan'> </div>
<div id='Vitridautrangtinh'> </div>
<div id='Read-and-share'> </div>

Tạo link đi đến vị trí đầu bài viết : Link + #Vitridaubaiviet
Tạo link đi đến vị trí đầu trang nhãn : Link + #Vitridautrangnhan
Tạo link đi đến vị trí đầu trang tĩnh : Link + #Vitridautrangtinh
Tạo link đi đến vị trí share bài viết : Link + #Read-and-share

Chỉnh sửa đi nhanh đến vị trí đầu bài viết trong "bài viết liên quan kèm quảng cáo" được chèn thêm vào đầu bài viết :

Tìm đoạn code : document.write('<li><a href="' + urls[c] + '" title="' + time[c].substring(8, 10) + "/" + time[c].substring(5, 7) + "/" + time[c].substring(0, 4) + '">' + titles[c] + "</a></li>");
Sửa lại thành : document.write('<li><a href="' + urls[c] + '#Vitridaubaiviet' + '" title="' + time[c].substring(8, 10) + "/" + time[c].substring(5, 7) + "/" + time[c].substring(0, 4) + '">' + titles[c] + "</a></li>");
 
2. Code Xóa ?m=1 :
Chèn code trên phần </head> :

<script>/*<![CDATA[*/ var uri = window.location.toString(); if (uri.indexOf("%3D","%3D") > 0) { var clean_uri = uri.substring(0, uri.indexOf("%3D")); window.history.replaceState({}, document.title, clean_uri);} var uri = window.location.toString(); if (uri.indexOf("%3D%3D","%3D%3D") > 0) { var clean_uri = uri.substring(0, uri.indexOf("%3D%3D")); window.history.replaceState({}, document.title, clean_uri);} var uri = window.location.toString(); if (uri.indexOf("&m=1","&m=1") > 0) { var clean_uri = uri.substring(0, uri.indexOf("&m=1")); window.history.replaceState({}, document.title, clean_uri); } var uri = window.location.toString(); if (uri.indexOf("?m=1","?m=1") > 0) { var clean_uri = uri.substring(0, uri.indexOf("?m=1"));window.history.replaceState({}, document.title, clean_uri);}; var protocol=window.location.protocol.replace(/:/g,''); if(protocol=='http'){ var url=window.location.href.replace('http','https'); window.location.replace(url);} /*]]>*/</script>

3. Cách chèn quảng cáo AdSense vào Blogspot hiển thị tại các phần khác nhau

  • https://www.ketnoi89.com/2020/04/cach-chen-quang-cao-adsense-vao.html 

4. Liên kết Mẹo vặt thủ thuật hay dành cho :

  1. Tạo trang chờ get link thay thế cho link rút gọn : [https://www.bietko.com/2019/07/tao-trang-cho-get-link-thay-cho-link-rut-gon.html]
  2. Cách tạo trang chuyển hướng nhanh chóng cho blogger : [https://www.bietko.com/2019/06/cach-tao-trang-chuyen-huong-nhanh-chong.html]
  3. Code liên hệ cho blogspot hiển thị chính giữa bên trái màn hình : [https://www.thietkeblogspot.com/2020/03/code-lien-he-cho-blogspot-hien-thi-chinh-giua-ben-trai-man-hinh.html]
  4. Slideout Menu For Blogger Mobile Site With Social Buttons  ( menu 101helper): [http://tutorialcops.blogspot.com/2015/12/slideout-menu-for-blogger-mobile-site.html]
  5. https://www.ketnoi89.com/2014/02/tong-hop-code-popup-javascripts-quang.html
  6. https://sherpablog.marketingsherpa.com/marketing/101-what-is-a-sticky-footer
  7. http://christoffriedmann.blogspot.com/2015/03/how-to-add-floating-sticky-footer-bar.html
  8. http://www.matrudev.com/post/add-floating-ads-mobile-phone
  9. Tạo quảng cáo sticky ở chân trang website giống AdSense Page-Level Ads  : [https://iris-tips.blogspot.com/2017/08/tao-quang-cao-sticky-o-chan-trang-giong-AdSense-Page-Level-Ads.html | http://4tipsvn-hungcoder.blogspot.com/2017/12/tao-quang-cao-sticky-o-chan-trang.html]
  10. Sticky Floating Bottom Ads In Blogger Site : [https://thepssaini.com/sticky-floating-bottom-ads-in-blogger-site]
  11. Sticky Ad To The Top Of Blogger Mobile View : [https://www.ogbongeblog.com/add-sticky-ad-to-top-of-blogger-mobile-view.html]
  12. Code Info đẹp cho blogger/blogspot  : [https://www.tips24h.net/2014/01/code-info-dep-cho-blogger-blogspot.html]
  13. Tạo Intro tuyệt đẹp cho Blogspot chỉ từ CSS và HTML : [http://themehomeblogger.blogspot.com/2017/11/tao-intro-tuyet-ep-cho-blogspot-chi-tu.html]
    TẠO INTRO POST CHO BÀI VIẾT VÀ TRANG TĨNH  : [https://starhuyshare.blogspot.com/2017/11/tao-intro-post-cho-bai-viet-va-trang.html]
  14. Quảng cáo giữa màn hình  khi click vào link cụ thể

THAM KHẢO :

Danh sách tiện ích & thủ thuật Blogspot :

Thủ thuật Bài viết quan : 

  1. Bài viết liên quan tích hợp quảng cáo cho blogspot

Tiện ích Bài viết ngẫu nhiên - random post :

  1. Tiện ích bài viết ngẫu nhiên tốc độ cao [ đang sử dụng ]
  2. Tiện ích bài viết ngẫu nhiên theo nhãn cho blogspot

Thủ thuật AMP cho blogspot :

  1. Thêm tiện ích bài viết liên quan theo nhãn cho blogspot AMP  

Thủ thuật tạo hiệu ứng trên blogspot :

  1. Hiệu ứng ruồi bò trên blog 

Tạo list danh sách bài viết nổi bật, link liên kết….

  1. Link List (Danh sách liên kết) : Danh sách những địa chỉ hay, những trang web thường xuyên truy cập bạn có thể cho vào đây.

Thêm tin tức, video  nguồn cấp vào blogspot :

  1. Video Bar (Thanh video) : Tương tự như Newsreel nhưng ở đây lấy video từ http://video.google.com. Người đọc click vào video sẽ hiển thị phía trên main-wrapper.
  2. NewsReel : Newsreel lấy những tin ngắn được cập nhật từ http://news.google.com theo từ khóa.
  3. Feed

Thủ thuật tổng hợp :

  1. Cách chèn banner quảng cáo ngay sau dấu ngắt nhẩy tự động trên blogspot
  2. Cách chèn quảng cáo AdSense vào Blogspot hiển thị tại các phần khác nhau
  3. Hướng dẫn tạo mục lục tự động cho bài viết
  4. Cách ghim một bài viết bất kỳ cố định đầu tiên tại trang chủ
  5. Tạo footer 4 cột cuối trang
  6. Hiển thị danh sách bài viết theo nhãn cho blogspot ( ứng dụng tạo nhãn bài viết nổi bật - dùng hiển thị list danh sách lên trên đầu bài viết )
  7. Hướng Dẫn Chi Tiết Cách Tạo Blog Với Blogger và Sử Dụng Domain và Subdomain riêng
  8. Code Hỗ trợ trực tuyến cho blogspot
  9. Code ý kiến khách hàng cho blogspot
  10. Cách chèn tiện ích chia sẻ Addthis vào blog, website
  11. Hướng dẫn chèn quảng cáo Adsense vào vị trí bất kỳ trong bài viết
  12. Tổng hợp các thẻ điều kiện Blogspot 
  13. Nút hỗ trợ bên trái blog
  14. Nút thông báo bên trái blog
  15. Push notifications
  16. Code thanh menu liên hệ (contact bar) trên mobile bằng HTML vs CSS
  17. CTA là gì? 12 loại nút Call To Action cần nắm rõ!

Blog Tải Template :

  1. https://gooyaabitemplates.com   
  2. https://copybloggerthemes.com    

Blog tool Template :

  1.  https://feedburner.google.com
  2. https://www.addthis.com

Blog chuyên đề Blogspot :

  1. https://iris-tips.blogspot.com 
  2. https://blog.doisong24.com
  3. http://tutorialcops.blogspot.com
  4. https://www.mybloggertricks.com
  5. https://www.allbloggertricks.com
  6. https://www.ketnoi89.com
  7. https://www.tips24h.net
  8. https://trinhdinhlinh.com
  9. https://helplogger.blogspot.com
  10. https://f4vnn.com
  11. https://sneeit.com

Link bài viết chuyên đề Blogspot :

  • Mẫu Javascript sử dụng if kết hợp toán tử Or và sử dụng document.write - Link bài viết : https://www.ivietpr.com/2019/02/mau-javascript-su-dung-if-ket-hop-toan-tu-or-va-su-dung-document-write.html
  • Danh sách tóm tắt nội dung Cú pháp CSS  - Link bài viết : https://www.ivietpr.com/2019/02/danh-sach-tom-tat-noi-dung-cu-phap-css.html 
  • Code blogger làm đẹp giao diện trang bài viết  - Link bài viết :  https://www.ivietpr.com/2019/03/code-blogger-lam-dep-giao-dien-trang-bai-viet.html
Gia Bảo