Để copy một template của website không hề đơn giản, và các cách hướng dẫn rip template blogspot hiện nay đều chỉ có thể ở mức chung chung chứ khó mà đi vào chi tiết cụ thể được. Vì trên thực tế thì các mẫu template của mỗi website đều được thiết kế theo phong cách cũng như cấu trúc khác nhau nên không có một khuôn mẫu nào đúng và đủ để có thể rip template blogspot thành công.
Cũng bởi lý do đó, bài viết này chỉ trên tiêu chí tham khảo nhằm giúp bạn có tư duy đúng, cấu trúc chuẩn và khuôn mẫu chung để bạn có thể rip template blogspot hiệu quả hơn .
Hướng dẫn rip template blogspot
Tuy mỗi người sẽ có một tư duy để rip lại một template blogspot của website một cách khác nhau nhưng chung quy vẫn thực hiện thông qua các bước chung sau đây.
Bước 1: Chắc chắn rằng bạn phải am hiểu kiến thức về HTML, CSS.
Các template được sử dụng trên nền tảng blogspot hay Blogger đều được sử dụng HTML, CSS, Javascript. Và để có thể hiểu được template thì bạn chắc chằn rằng phải am hiểu ở mức độ vừa đủ các kiến thức này.
Bước 2: Chuẩn bị khuôn mẫu hay mẫu template trắng dùng đẻ rip template blogspot
Điều quan trọng tiếp theo là bạn phải nắm vững được khuôn mẫu chung đối với các template hiện đại đang được sử dụng trên nền tảng blogspot.
Dưới đây là mẫu template trắng giúp bạn rip template blogger hiệu quả hơn.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2'>
<head>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<html 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'>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<!-- Meta tags share -->
<b:if cond='data:view.isMultipleItems'>
<meta content='summary' name='twitter:card'/>
<meta content='' name='twitter:site'/>
<meta content='' name='twitter:creator'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta content='https://i.imgur.com/X4hSa0G.jpg' name='twitter:image'/>
<meta content='' property='fb:app_id'/>
<meta content='' property='fb:admins'/>
<meta content='' property='og:site_name'/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta content='https://i.imgur.com/X4hSa0G.jpg' property='og:image'/>
<meta expr:content='data:blog.title' property='og:image:alt'/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='og:url'/>
<meta expr:content='data:blog.title' itemprop='og:headline'/>
<meta expr:content='data:blog.metaDescription' itemprop='og:description'/>
<meta content='https://i.imgur.com/X4hSa0G.jpg' property='og:image'/>
</b:if>
<!-- DNS prefetch -->
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
<title>
<data:blog.title/>
</title>
<b:template-skin>
<![CDATA[
body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
]]>
</b:template-skin>
<b:skin>
<![CDATA[
/* Chèn Css vào đây */
]]>
</b:skin>
</head>
<body>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Nội dung ở trang chủ viết ở đây
</b:if>
<b:if cond='data:blog.searchLabel'>
Nội dung cho trang search/label/
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
Nội dung trang Lỗi 404
</b:if>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- Tiện ích Blog1 ở đây -->
<b:section class='main' id='mainpost' showaddelement='yes'>
</b:section>
</b:if>
</body>
</html>
Bước 3: Kiểm tra mã nguồn của template blogspot cần RIP
Để kiểm tra mã nguồn của một website blogspot bất kỳ thì bạn click chuột phải và tìm đến phần xem mã nguồn hoặc có thể bấm phím tắt CTR + U.
Sau đó, hãy tìm các phần quan trọng trong mỗi template theo các thông số được ghi chú sẵn ở bước 2.
Ở bước này, bạn hãy tìm trong phần thẻ <head> </head> trong mã nguồn để tìm và xác định được đâu là phần CSS và đâu là Javascript.
Bước 4: Xóa toàn bộ code trong phần <body> và thêm các đoạn code dưới đây
- Thêm đoạn code này trong phần <body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Thanh điều hướng' type='Navbar'/>
</b:section>Bước 5: Thay đổi tiêu đề bài viết
Bạn thêm đoạn code này vào phần <body> vừa xóa.
<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Tiêu đề)' type='Header'/>
</b:section>Bước 6: Tùy chỉnh hiển thị phần sitebar
<b:section class='sbar1' id='sbar1' showaddelement='yes'/>Bước 7: Chỉnh sửa phần bài đăng trên blog
Để tùy chỉnh hiển thị của các post thì bạn sử dụng đoạn code sau.
<b:section class='mainpost' id='mainpost' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>Như vậy là xong.
Cuối cùng
Dù bạn muốn rip template blogspot với bất kỳ ý định gì thì cũng nên tôn trọng quyền tác giả củ người đã tạo template đó. Hy vọng rằng bạn sẽ cảm thấy hài lòng với nội dung mà mình cung cấp.
Xem thêm
