Rip template blogspot theo yêu cầu, thiết kế blogspot chuyên nghiệp

» Bài viết theo chuyên mục: BLOG-THU-THUAT

Xóa CSS mặc định của blogspot

Trần Phương PD tháng 8 30, 2017

[tintuc]

Bài đăng này hướng dẫn xóa bỏ CSS mặc định của Blogger (widget_css_bundle.css) và JS (widgets.js) khỏi blog của bạn, nhằm tăng tốc và cải thiện tốc độ load của trang.

Bước 1: Vào chủ đề tìm thẻ <html> nó nằm ngay đầu trang

thêm b:css = "false"

<html b:css = 'false' expr: dir = 'dữ liệu: blog.languageDirection' xmlns = 'http: //www.w3.org/1999/xhtml' xmlns: b = 'http: //www.google. Com / 2005 / gml / b 'xmlns: data =' http: //www.google.com/2005/gml/data 'xmlns: expr =' http: //www.google.com/2005/gml/expr ' >

Bước 2: Xóa js mặc định của blogspot

Tìm thẻ đóng </body>

Thay bằng </body>

Với hai bước trên bạn đã xóa bỏ css và js mặc định của blogger

Kết luận: Một số blog có thể bị lỗi bố cục sau khi xóa css mặc định.. vì nó không còn css nữa nên nó không còn sắp xếp.
[/tintuc]

Trần Phương PD

Các thẻ if blogspot

Trần Phương PD tháng 4 16, 2017

[tintuc]

Cách sử dụng:

Các thẻ này dùng để thiết kế, tối ưu blogspot

<b:if cond='data:blog.pageType != "data:blog.isMobile"'>
// Đoạn code
</b:if>

1. Thẻ điều kiện cho trang chủ, trang search label, trang archive:

<b:if cond='data:blog.pageType == "index"'>

2. Thẻ điều kiện cho bài viết.

<b:if cond='data:blog.pageType == "item"'>

3. Thẻ điều kiện cho trang tĩnh(http://pdusoft/p/contact.html ):

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

4. Thẻ điều kiện cho trang lưu trữ:

<b:if cond='data:blog.pageType == "archive"'>

5. Thẻ điều kiện cho trang chủ:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

6. Thẻ điều kiện cho URL nhất định:

<b:if cond='data:blog.url == "URL nhất định"'>

7. Thẻ điều kiện cho Page và Post:

<b:if cond='data:blog.url == data:post.url'>

8. Thẻ điều kiện cho tất cả Label(/search/label/Windows ):

<b:if cond='data:blog.searchLabel'>

9. Thẻ điều kiện cho Label nhất định

<b:if cond='data:blog.searchLabel == &quot;Tên nhãn&quot;'>

10. Hiển thị nội dung cho bài viết đầu tiên tại trang chủ

<b:if cond='data:post.isFirstPost'>

11. Thẻ điều kiện cho mobile:

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

12. Thẻ điều kiện cho trang báo lỗi 404

<b:if cond='data:blog.pageType == "error_page"'>

13. Thẻ điều kiện cho trang tìm kiếm

<b:if cond='data:blog.searchQuery'>

Các loại điều kiện

Ví dụ:

Điều kiện đúng:

<b:if cond='data:blog.pageType == "index"'>

Điều phủ định:

<b:if cond='data:blog.pageType != "index"'>

Một số thẻ khác

1. Thẻ điều kiện khi bài viết có nhãn nào đó

<b:if cond='data:post.labels any (l => l.name == "TÊN NHÃN")'>

2. Thẻ điều kiện IN

<b:if cond='data:blog.pageType in {"static_page","item"}'>

Nội dung chỉ hiển thị Trang Tĩnh và trang Bài Viết

</b:if>

3. Thẻ điều kiện NOT IN

<b:if cond='data:blog.pageType not in {"static_page","item"}'> 

Nội dung không hiển thị Trang Tĩnh và trang Bài Viết 

</b:if>

4. Thẻ điều kiện AND

<b:if cond='data:blog.pageType == "static_page" and data:blog.pageType == "item"'> 

Nội dung hiển thị Trang Tĩnh và Trang Bài Viết 

</b:if>

4. Thẻ điều kiện OR

<b:if cond='data:blog.pageType == "static_page" or data:blog.pageType == "item"'> 

Nội dung hiển thị hoặc Trang Tĩnh hoặc Trang Bài Viết 

</b:if>

Ví dụ như trong đoạn code sau:

<b:if cond='your condition'>
 <style>...css code...</style>
 <script>...javascript code...</script>
</b:if>

Phần 1. Các thẻ điều kiện

1. Trang chủ (Homepage)

<b:if cond='data:view.isHomepage'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if>

Theo version trước:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- Nội dung chỉ hiển thị trên trang chủ -->
</b:if>

2. Trang bài viết (item)

<b:if cond='data:view.isPost'> 
 <!-- Nội dung chỉ hiển thị trên trang bài viết -->
</b:if>

Theo version trước:

<b:if cond='data:blog.pageType == "item"'> 
 <!-- Nội dung chỉ hiển thị trên trang bài viết -->
</b:if>

Cho một trang bài viết cụ thể:

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2016/03/postn.html"'>
  <!-- Nội dung chỉ hiển thị trên trang bài viết có địa chỉ url Blog-cua-ban/2016/03/postn.html-->
</b:if>

3. Trang tĩnh (Static page)

<b:if cond='data:view.isPage'>
 <!-- Nội dung chỉ hiển thị trên trang tĩnh static page -->
</b:if>

Theo version trước:

<b:if cond='data:blog.pageType == "static_page"'>
 <!-- Nội dung chỉ hiển thị trên trang tĩnh static page -->
</b:if>

Cho một trang tĩnh cụ thể:

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/static.html"'>
  <!-- Nội dung chỉ hiển thị trên trang bài viết có địa chỉ url Blog-cua-ban/p/static.html 'foo' -->
</b:if>

4. Trang index bao gồm trang chủ, trang hiển thị nhãn Label, và trang archive.

<b:if cond='data:view.isMultipleItems'>
  <!-- Nội dung chỉ hiển thị trên các trang index: trang chủ, trang hiển thị nhãn, trang lưu trữ -->
</b:if>

Theo version trước:

<b:if cond='data:blog.pageType == "index"'>
  <!-- Nội dung chỉ hiển thị trên các trang index: trang chủ, trang hiển thị nhãn, trang lưu trữ -->
</b:if>

5. Trang label search

<b:if cond='data:view.isLabelSearch'>
  <!-- Nội dung hiển thị trên tất cả các trang nhãn label -->
</b:if>
.................
<b:if cond='data:view.isLabelSearch == "blogger"'>  
<!-- Nội dung chỉ hiển thị trên nhãn "blogger"-->
</b:if>

Theo version trước:

<b:if cond='data:blog.searchLabel'>
  <!-- Nội dung hiển thị trên tất cả các trang nhãn label -->
</b:if>
.................
<b:if cond='data:blog.searchLabel == "blogger"'>  
<!-- Nội dung chỉ hiển thị trên nhãn "blogger"-->
</b:if>

6. Hiển thị nội dung cho kết quả tìm kiếm (ví dụ: /search?q=blogger)

<!-- Bao gồm trang tìm kiếm nhãn -->
<b:if cond='data:view.isSearch'> … </b:if>

<!-- Chỉ các trang tìm kiếm -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'> … </b:if>

Theo version trước:

<b:if cond='data:blog.searchQuery'> 
   <!-- Nội dung hiển thị trên tất cả các trang tìm kiếm --></b:if>

...................................

<b:if cond='data:blog.searchQuery == "blogger"'>
  <!-- Nội dung chỉ hiển thị trên trang tìm kiếm với từ "blogger"-->
</b:if>

7. Trang lỗi 404

<b:if cond='data:view.isError'>
  <!-- Nội dung chỉ hiển thị trên trang lỗi -->
</b:if>

Theo version trước:

<b:if cond='data:blog.pageType == "error_page"'>
  <!-- Nội dung chỉ hiển thị trên trang lỗi -->
</b:if>

8. Trang lưu trữ (archive)

<b:if cond='data:view.isArchive'> 
 <!-- Nội dung chỉ hiển thị trên tất cả các trang lưu trữ archive-->
</b:if>

Theo version trước:

<b:if cond='data:blog.pageType == "archive"'> 
 <!-- Nội dung chỉ hiển thị trên tất cả các trang lưu trữ archive-->
</b:if>

9. Trang hiển thị trên mobile

<b:if cond="data:blog.isMobile">
<!-- Nội dung chỉ hiển thị trên trang mobile-->
</b:if>

10. Nội dung hiển thị cho những trang có nhiều bài viết trên cùng một trang, áp dụng này cho bài viết đầu tiên FirstPost

<b:if cond='data:post.isFirstPost'>
 <!-- Nội dung cần trình bày -->
</b:if>

11. Nội dung hiển thị cho trang tĩnh Static Page và bài viết Item

<b:if cond='data:view.isSingleItem'>
<!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết -->
</b:if>

Theo version trước:

<b:if cond='data:blog.url == data:post.url'>
<!-- Nội dung chỉ hiển thị với trang tĩnh và bài viết -->
</b:if>

12. Hiển thị nội dung nếu bài viết có ảnh thumbnail

<b:if cond='data:post.thumbnailUrl'>
  <!-- Nội dung chỉ hiển thị với bài viết có ảnh thumbnail -->
</b:if>

13. Hiển thị một nội dung khi có Backlink

<b:if cond='data:post.showBacklinks'>
 <!-- Nội dung chỉ hiển thị khi có backlink -->
</b:if>

14. Hiển thị nội dung cho Tác giả bài viết

<b:if cond='data:displayname == "author-name"'> 
<!-- Nội dung cần trình bày -->
</b:if>

15. Hiển thị nội dung trên trang có số comments bằng một giá trị nào đó

<b:if cond='data:post.numComments == number'>
 <!-- Nội dung cần trình bày -->
</b:if>

16. Hiển thị nội dung trong tất cả các trang khi chức năng comment được kích hoạt

 <b:if cond='data:post.allowComments'> 
<!-- Nội dung cần trình bày -->
</b:if>

17. Hiển thị nội dung ở trang Preview (xem trước)

<b:if cond='data:view.isPreview'> … </b:if>

18. Điều kiện đối với nhãn (Label) cuối cùng

<b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'> <!-- Nếu ko phải nhãn cuối thì thêm ký tự đặc biệt vào phía sau -->
       ,
    </b:if>   
</b:loop>

Phần 2. Cách sử dụng và kết hợp các thẻ điều kiện

1. Áp dụng điều kiện xuất hiện hoặc không xuất hiện

== Có nghĩa là chỉ xuất hiện trên trang này …..
!= Có nghĩa là xuất hiện trên tất cả các trang trừ trang này ra……

2. Dùng thêm thẻ <b:/else/>

Nếu muốn đưa vào một nội dung thay thế khi điều kiện đưa vào là sai, bạn cần thêm một thẻ <b:else> và cho nội dung vào giữa.

<b:if cond='data:view.isPost'>
 Nội dung chỉ hiển thị trang bài viết Item 
<b:else/>
 Nội dung hiển thị các trang còn lại 
</b:if>

3. Kết hợp của nhiều điều kiện (xuất hiện khi thỏa mãn các điều kiện)

<b:if cond='!data:blog.pageType == "item"'>
   <b:if cond='data:view.isHomepage'>
    <style type='text/css'>.post-body {color: yellow;}</style> 
   <b:else/>
    <b:if cond='data:view.isLabelSearch'>
    <style type='text/css'>.post-body {color: blue;}</style> 
     <b:else/> <style type='text/css'>.post-body {color: red;}</style>
    </b:if>
   </b:if>
</b:if>

Với đoạn code này thì có ý nghĩa xuất ở trang chủ thì .post-body có chữ màu yellow, nếu là trang nhãn sẽ có màu là blue, còn nếu là các trang khác sẽ có màu red.

4. Sử dụng điều kiện IN

<b:if cond='data:blog.pageType in {"static_page","item"}'>
 Nội dung chỉ hiển thị Trang Tĩnh và trang Bài Viết
</b:if>

5. Sử dụng điều kiện NOT IN

<b:if cond='data:blog.pageType not in {"static_page","item"}'>
Nội dung không hiển thị Trang Tĩnh và trang Bài Viết
</b:if>

6. Sử dụng điều kiện AND

<b:if cond='data:view.isPage and data:view.isPost'>
Nội dung hiển thị Trang Tĩnh và Trang Bài Viết
</b:if>

7. Sử dụng điều kiện OR

<b:if cond='data:view.isPage or data:view.isPost'>
Nội dung hiển thị hoặc Trang Tĩnh hoặc Trang Bài Viết
</b:if>

8. Sử dụng điều kiện Else if

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
<b:elseif cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
<b:else/>
  <data:post.snippet/>
</b:if>

Đoạn code trên tương đương với

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
<b:else/>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <data:post.body/>
   <b:else/>
     <data:post.snippet/>
   </b:if>
</b:if>

Phần 3. Lưu ý

Khi bạn chỉnh sửa code cho template của bạn, đôi khi dấu ngoặc kép (“) sẽ bị thay thế bằng ký tự quot;. Ví dụ như

<b:if cond='data:blog.pageType == "static_page"'>

sẽ được thay là

<b:if cond='data:blog.pageType == quot;static_pagequot;'>

Sử dụng điều kiện trong thẻ b:include hoàn toàn tương tự với thẻ b:if, bạn chỉ cần thêm vào thuộc tính cond='ĐIỀU KIỆN' của thẻ b:if vào thẻ b:include là xong.

[/tintuc]

Trần Phương PD

Mẫu Blogspot trắng tinh để thiết kế blogspot

Trần Phương PD tháng 4 05, 2017

[tintuc]

Sau đây là mẫu blogspot trắng tinh, dùng để thiết kế các mẫu html, blogspot, landingpage...
Mình hay dùng nó để bắt đầu quá trình thiết kế 1 blogspot

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title>
Tiêu đề trang web
</title>
<!-- Bắt đầu viết Css cho web -->
<b:skin>
<![CDATA[ /* Chèn Css vào đây */ ]]>
</b:skin>
</head>
<!-- Bắt đầu phần hiển thị trên web -->
<body>
Thêm nội dung trang web của bạn vào đây
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'>
</b:section>
</body>
<!-- Kết thúc phần hiển thị trên web -->
</html>

[/tintuc]

Trần Phương PD

Hướng dẫn thay form đặt hàng

Trần Phương PD tháng 3 16, 2017

[tintuc]
Hướng dẫn thay form đặt hàng và các biểu mẫu liên hệ như các trang landingpage.

Xem video để hiểu (video cập nhật ngày 10/08/2017)

Xin chào các bạn, mình sẽ hướng dẫn cách thay form đặt hàng trên website blogspot của mình, áp dụng cho tất cả các mẫu, biểu mẫu đặt hàng, form liên hệ.

Trước tiên bạn nhìn vào form đặt hàng có bao nhiêu ô (trường), ví dụ hình dưới đây là 5 ô cần tạo (có bao nhiêu ô thì tạo bấy nhiêu trường). Vì mỗi mẫu có thể là 1 form (giỏ hàng) khác nhau

Mẫu 1: Tạo 5 ô

Mẫu 2: Tạo 7 ô

Mẫu 3: Tạo 6 ô

Rất nhiều kiểu form khác nhau.

Tiếp theo truy cập trang: https://docs.google.com/forms/u/0/

Các bạn tạo các ô theo thứ tự như trên (ô sản phẩm bạn đặt tên là Sản phẩm mua)

Mình sẽ tạo các ô như sau:
1. Họ tên
2. Địa chỉ
3. Số ĐT
4. Email (có hoặc không, theo mẫu trên thì không có email)
5. Sản phẩm mua
6. Ghi chú

Lưu ý: Tất cả để là Trả lời ngắn, hoặc đoạn (không cần bắt buộc). không check, không gì hết.. để là đoạn ngắn hoặc dài.

Xem mẫu mình tạo: Tại đây

Sau khi tạo xong, các bạn nhấn qua TAB câu trả lời

Tiếp theo nhấn vào dấu + mình tô màu vàng, nó mở ra 1 link excel

Các bạn nhấn vào Công cụ -> Trình sửa tập lệnh

Ra 1 link mới, các bạn copy đoạn code sau dán đè lên đó

function guiBieuMau(e)
{
// Thay thế bằng địa chỉ email của bạn
var email = "diachimail@gmail.com";
// Tiêu đề của email được gửi về
var subject = "Đơn đặt hàng tại......";
// Không rành thì đùng đụng vào code ở dưới nhé
var s = SpreadsheetApp.getActiveSheet();
var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0];
var message = "";
// Lấy ra những thông tin nào có dữ liệu điền vào
for ( var keys in columns ) {
var key = columns[keys];
if ( e.namedValues[key] && (e.namedValues[key] != "") ) {

message += key + ' :: '+ e.namedValues[key] + "\n\n";
}
}
// Dùng MailApp service của Google Apps Script để gửi về email của bạn.
MailApp.sendEmail(email, subject, message);

}

hoặc code sau

function Initialize() {
 
  var triggers = ScriptApp.getProjectTriggers();
 
  for(var i in triggers) {
    ScriptApp.deleteTrigger(triggers[i]);
  }
  
  ScriptApp.newTrigger("SendGoogleForm")
  .forSpreadsheet(SpreadsheetApp.getActiveSpreadsheet())
  .onFormSubmit()
  .create();
  
}
 
function SendGoogleForm(e) 
{  
  try 
  {      
    // You may replace this with another email address
    var email = Session.getActiveUser().getEmail();
    
    // Optional but change the following variable
    // to have a custom subject for Google Form email notifications
    var subject = "Đơn đặt hàng";  
    
    var s = SpreadsheetApp.getActiveSheet();
    var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0];    
    var message = "";    
    
    // Only include form fields that are not blank
    for ( var keys in columns ) {
      var key = columns[keys];
      if ( e.namedValues[key] && (e.namedValues[key] != "") ) {
        message += key + ' :: '+ e.namedValues[key] + "\n\n"; 
      }
    }
        
    // This is the MailApp service of Google Apps Script
    // that sends the email. You can also use GmailApp for HTML Mail.
    
    MailApp.sendEmail(email, subject, message); 
    
  } catch (e) {
    Logger.log(e.toString());
  }
    
}

Các bạn copy ở đây:

Các bạn thay email của bạn vào đó. Sau đó nhấn lưu

Tiếp theo nhấn vô biểu tượng đồng hồ

Các bạn chọn như hình

Nhấn vô chữ Thông báo chọn Ngay lập tức, sau đó nhấn lưu, nó yêu cầu xét các quyền, bạn chọn ok... nhấn lưu và quay lại form ban đầu

Nhấn vô biểu tượng con mắt mình tô màu vàng, nó sẽ ra link form, các bạn test thử xem nó có gửi về email chưa. Mình test thử và vô email kiểm tra

Email đã nhận thông báo.

Như vậy các bạn đã tạo xong form đặt hàng... Tiếp theo mình hướng dẫn thay form đặt hàng trên web.

Trên blog các bạn vô tìm tên là giỏ hàng hoặc thanh toán nằm ở Trang hoặc bài viết tùy theo mẫu của mình. (các mẫu landingpage nằm trực tiếp trong giao diện, form ô tô nằm trong giao diện)

Tab HTML

Nếu css nó lộn xộn bạn ctrl + A copy toàn bộ nó rồi vô trang http://jsbeautifier.org/ dán để sắp xếp lại css cho đẹp, dễ nhìn. xong bạn copy ngược lại dán đè vào chỗ cũ.

Link mình tô vàng là link form của bạn mới tạo

Copy link tô màu vàng thế vô link trong giỏ hàng (chừa phần /viewform lại), tiếp theo trên form này bạn nhấn Ctrl + U

Kéo hết xuống dưới bạn sẽ thấy các con số tương ứng với các ô bạn đã tạo

Con số này để làm gì, các bạn sẽ lấy nó thay vào các entry.số giỏ hàng (thanh toán, biểu mẫu)

Các bạn thay các con số tương ứng với bên giỏ hàng.. (sản phẩm mua tương ứng với tổng đơn hàng)

Theo thứ tự: Họ tên, địa chỉ, số ĐT, Sản phẩm, Ghi chú

Xong lưu lại và lên web test đặt hàng

[/tintuc]

HOTT 779KĐã bao gồm Hosting + Domain .Com + 1 Mẫu Website

Banner 1

1. Thẻ điều kiện cho trang chủ, trang search label, trang archive:

2. Thẻ điều kiện cho bài viết.

3. Thẻ điều kiện cho trang tĩnh(http://pdusoft/p/contact.html ):

4. Thẻ điều kiện cho trang lưu trữ:

5. Thẻ điều kiện cho trang chủ:

6. Thẻ điều kiện cho URL nhất định:

7. Thẻ điều kiện cho Page và Post:

8. Thẻ điều kiện cho tất cả Label(/search/label/Windows ):

9. Thẻ điều kiện cho Label nhất định

10. Hiển thị nội dung cho bài viết đầu tiên tại trang chủ

11. Thẻ điều kiện cho mobile:

12. Thẻ điều kiện cho trang báo lỗi 404

13. Thẻ điều kiện cho trang tìm kiếm

<b:if cond='data:blog.searchQuery'>

Các loại điều kiện

Ví dụ:

Phần 1. Các thẻ điều kiện

1. Trang chủ (Homepage)

2. Trang bài viết (item)

3. Trang tĩnh (Static page)

4. Trang index bao gồm trang chủ, trang hiển thị nhãn Label, và trang archive.

5. Trang label search

6. Hiển thị nội dung cho kết quả tìm kiếm (ví dụ: /search?q=blogger)

7. Trang lỗi 404

8. Trang lưu trữ (archive)

9. Trang hiển thị trên mobile

10. Nội dung hiển thị cho những trang có nhiều bài viết trên cùng một trang, áp dụng này cho bài viết đầu tiên FirstPost

11. Nội dung hiển thị cho trang tĩnh Static Page và bài viết Item

12. Hiển thị nội dung nếu bài viết có ảnh thumbnail

13. Hiển thị một nội dung khi có Backlink

14. Hiển thị nội dung cho Tác giả bài viết

15. Hiển thị nội dung trên trang có số comments bằng một giá trị nào đó

16. Hiển thị nội dung trong tất cả các trang khi chức năng comment được kích hoạt

17. Hiển thị nội dung ở trang Preview (xem trước)

18. Điều kiện đối với nhãn (Label) cuối cùng

Phần 2. Cách sử dụng và kết hợp các thẻ điều kiện

1. Áp dụng điều kiện xuất hiện hoặc không xuất hiện

2. Dùng thêm thẻ <b:/else/>

3. Kết hợp của nhiều điều kiện (xuất hiện khi thỏa mãn các điều kiện)

4. Sử dụng điều kiện IN

5. Sử dụng điều kiện NOT IN

6. Sử dụng điều kiện AND

7. Sử dụng điều kiện OR

8. Sử dụng điều kiện Else if

Phần 3. Lưu ý

Banner 2

member

HOTT 779K
Đã bao gồm Hosting + Domain .Com + 1 Mẫu Website