[tintuc]

Hướng dẫn tự động chuyển hướng URL của blog sang một link mới, 1 trang web mới sau 1 thời gian cố định.

Khi khách truy cập vô blog thì sau 1 thời gian nào đó sẽ tự động chuyển hướng sang link khác.

Cách 1: Copy đoạn script sau dán trước </body> 


<script type = 'text/javascript'>    //<![CDATA[    (function () {        setInterval(function () {            var redSites = [                "https://link1.blogspot.com",                "https://link1.blogspot.com",                "https://link1.blogspot.com",                "https://link1.blogspot.com",                "https://link1.blogspot.com"            ];            var randomLinks = redSites[Math.floor(Math.random() * redSites.length)];            window.location = randomLinks        }, 9000)    }())    //]]>    </script>

Các bạn thay link của mình vào các link trên.
Trong đó con số 9000 tức là 9 giây nó sẽ tự động chuyển hướng link tới 1 link bất kỳ trong số link ở trên.


Cách 2: Kết hợp với thẻ điều kiện if

Copy đoạn js dán trước </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
  function delayer(){ window.location = "https://www.themeblog.site/search/label/chia-se" }
</script>
</b:if>



Sau đó tìm đến thẻ <body> sửa thành

<body onLoad='setTimeout(&apos;delayer()&apos;, 30000)'>

Giải thích đoạn code trên:
- Điều kiện thẻ if là: nếu là trang chủ, thì trong vòng 30000 -> 30 giây nó sẽ tự động chuyển hướng tới link là https://www.themeblog.site/search/label/chia-se

 Các bạn chỉnh sửa thông số cho phù hợp, với cách trên bạn có thể áp dụng thêm cho nhiều thẻ if.

<b:if cond='data:blog.url == "link bất kỳ"'>
<script type='text/javascript'>
  function delayer(){ window.location = "link của bạn" }
</script>
</b:if>

Còn rất nhiều cách khác, bạn có thể tham khảo thêm trên google. :)
[/tintuc]




[tintuc]

ONLINE SHOPPING STORE ECOMMERCE BLOGGER TEMPLATES

Bài trước mình có chia sẻ theme Bizmart v2 bản tiếng Việt, hôm nay mình tiếp tục chia sẻ Bizmart v2 phiên bản tiếng Anh.

Bản này cũng giống bản tiếng Việt về bố cục, chỉ có update thêm là thanh toán bằng Paypal

các bạn sửa mail paypal trong theme thành mail của bạn.

Bản tiếng việt nếu các hình ảnh không đồng đều thì nó sẽ bị lỗi css các bạn có thể thêm css sau, hoặc tải lại phiên bản đã update Bizmart v2

<style>
.product_title h3 {
margin-top: 0px;
line-height: 25px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
height: 53px;
display: -webkit-box;
-webkit-box-orient: vertical;
}
</style>

copy đoạn css trên dán trước </head>


Demo: https://bizmark-shop.blogspot.com
Download: https://drive.google.com/open?id=1e4d2WktwLaIH0Xk1Dft_X8YZQLKNeX7-
Video hướng dẫn: https://www.youtube.com/watch?v=Kz8bWne88mI
[/tintuc]


[tintuc]
Share theme Anime chia sẻ ảnh cho blogspot

Theme mình cover từ trang xem.vn, chưa có giao diện mobile, chức năng theme là chia sẻ hình ảnh
Nếu bạn có 1 fanpage chủ đề Anime thì có thể chiến Adsense ngon lành.

Theme có thể có 1 ít lỗi nhỏ về css, bạn có thể tự fix thêm.


Các bạn có thể tải về nghịch link bên dưới

Demo: https://anime-hoatran.blogspot.com/
Download: https://drive.google.com/open?id=1uR1-ENS_TScyBqYcAvCtXGYpwlS456Xo


[/tintuc]


[tintuc]
Share theme blogspot bất động sản, template blogger bất động sản miễn phí
Theme mình cover lâu rồi cũng không nhớ nguồn gốc :D, nay lục lại thấy Share cho bạn nào cần.
Template thiết kế responsive, bố cục đầy đủ


Theme blog BĐS bạn nào cần thì có thể tải về theo link dưới

Demohttps://bds-ht01.blogspot.com
Download: https://drive.google.com/open?id=1TrxCSRi6YMPkQtvD5meVaCmn2hU1PE6S

[/tintuc]



[tintuc]

Thủ thuật blogger dùng CSS cắt chuỗi tiêu đề cho blogspot, sử dụng cách này chúng ta có thể cắt chuỗi văn bản của tiêu đề bài viết thành 1 hàng, 2 hàng hoặc 3 hàng.

Áp dụng cho trường hợp tiêu đề bài viết hoặc đoạn văn của blog trang web quá dài, thì bạn có thể sử dụng cách sau:


Cách 1: Cắt tiêu đề hoặc đoạn văn chỉ nằm trên 1 dòng

.catchuoi1hang {
    overflow: hidden;   // Ẩn tiêu đề hoặc đoạn văn bản bị thừa
    white-space: nowrap;  // Không cho tiêu đề hoặc đoạn văn xuống dòng
    text-overflow: ellipsis;  // Thay tiêu đề hoặc đoạn văn bản bị thừa bằng dấu 3 chấm ...
}

Tùy vào từng bố cục html, bạn có thể thêm width cho nó.. nếu cần thiết

.catchuoi1hang  {
    overflow: hidden;   // Ẩn tiêu đề hoặc đoạn văn bản bị thừa
    white-space: nowrap;  // Không cho tiêu đề hoặc đoạn văn xuống dòng
    text-overflow: ellipsis;  // Thay tiêu đề hoặc đoạn văn bản bị thừa bằng dấu 3 chấm ...
    width: 600px;
}

Cách 2 : Cắt tiêu đề hoặc đoạn văn bản thành nhiều hàng

.catchuoinhieuhang {
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 25px;
    -webkit-line-clamp: 3; // Số hàng của tiêu đề hoặc đoạn văn muốn hiển thị
    height: 75px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 600px;
}

Tùy vô bố cục của từng html của blog, các bạn chỉnh các thông số màu đỏ cho phù hợp...

[/tintuc]



[tintuc]

Chia sẻ mẫu blog tin tức do mình cover giao diện từ trang Freetuts


Theme mình code và share cách đây cũng lâu rồi chắc cũng cả năm, nay lấy ra share lại cho bạn nào chưa có.

Giao diện thích hợp cho các bạn làm blog cá nhân... tem có thể còn nhiều lỗi nhỏ css các bạn nếu thấy thì có thể fix thêm...

Dữ liệu trang chủ được lấy theo từng label riêng biệt, các bạn thay label trên blog của các bạn vô từng mục.

Các bạn tải về theo link bên dưới.

Demo: https://themeblogdepp-ht.blogspot.com
Download: https://drive.google.com/open?id=1vvklLSYu_fdKA21IVj2m0h8m_9Qk-k67

[/tintuc]
[giaban]300,000[/giaban]

[tomtat]Mẫu giao diện blogspot bán hàng shop thời trang hoặc các mặt hàng khác như mỹ phẩm, thời trang, theme blog đẹp chuẩn seo, chuẩn mobile ipad[/tomtat]

[link]https://mobilestore-ht.blogspot.com[/link]

[chitiet]
Template giao diện mẫu blogspot shop thời trang mẫu giao diện blogspot bán quần áo, thời trang đẹp chuẩn seo, giao diện chuẩn .
Theme blogspot bán hoa đẹp, bố cục thiết kế đầy đủ

Đã được tối ưu tốc độ tải trang và tối ưu SEO hiệu quả
Thiết kế giao diện thân thiện với tất cả các thiết bị từ PC, cho đến các thiết bị dị động.
Khả năng tương thích với tất cả các loại trình duyệt phổ biến nhất hiện nay


Liên hệ: Hòa Trần
Facebook: https://www.facebook.com/hoatran.gl
ĐT: 097 1539 681
Email: tranhoa1991gl@gmail.com

Kết luận: Theme blogspot bán hàng đẹp tháng 19/5/2018, một Template mẫu giao diện blogger bán hàng đẹp.

Từ khóa: Template blogspot responsive, blogspot template, template blogspot bán hàng, template blogspot đẹp, share template blogspot, rip blogspot chuyên nghiệp, thiết kế blogspot, template blogger đẹp chuẩn seo, blogspot bất động sản. Theme blogger landing page travel du lịch, Theme blogspot landingpage mỹ phẩm

[/chitiet]










[tintuc]
Chia sẻ mẫu blogspot bán hàng đẹp, mẫu mình cover từ theme bizweb, theme blog làm trang bán hàng khá là đẹp



Demo: https://bizmart-new-ht.blogspot.com
Download: https://drive.google.com/open?id=1U6FZtFMF1kBfWZ5ExPGC9I5Cv07vIIA7


Hướng dẫn cài: https://www.youtube.com/watch?v=Kz8bWne88mI

Mẫu giao diện blogspot đẹp làm web bán hàng


[/tintuc]
[giaban]500,000[/giaban]

[tomtat]Mẫu giao diện blogspot bán hàng shop thời trang hoặc các mặt hàng khác như mỹ phẩm, thời trang, theme blog đẹp chuẩn seo, chuẩn mobile ipad[/tomtat]

[link]https://shopsexy-ht.blogspot.com/[/link]

[chitiet]
Template giao diện mẫu blogspot shop thời trang mẫu giao diện blogspot bán quần áo, thời trang đẹp chuẩn seo, giao diện chuẩn .
Theme blogspot bán hoa đẹp, bố cục thiết kế đầy đủ

Đã được tối ưu tốc độ tải trang và tối ưu SEO hiệu quả
Thiết kế giao diện thân thiện với tất cả các thiết bị từ PC, cho đến các thiết bị dị động.
Khả năng tương thích với tất cả các loại trình duyệt phổ biến nhất hiện nay


Liên hệ: Hòa Trần
Facebook: https://www.facebook.com/hoatran.gl
ĐT: 097 1539 681
Email: tranhoa1991gl@gmail.com

Kết luận: Theme blogspot bán hàng đẹp tháng 19/5/2018, một Template mẫu giao diện blogger bán hàng đẹp.

Từ khóa: Template blogspot responsive, blogspot template, template blogspot bán hàng, template blogspot đẹp, share template blogspot, rip blogspot chuyên nghiệp, thiết kế blogspot, template blogger đẹp chuẩn seo, blogspot bất động sản. Theme blogger landing page travel du lịch, Theme blogspot landingpage mỹ phẩm

[/chitiet]


Template giao diện mẫu blogspot shop thời trang





[tintuc]
Adsense là cách kiếm tiền online có thể nói là quá ngon, rất nhiều bạn đã kiếm được từ 1.000$ - 30.000$ trong 1 tháng.

Hướng dẫn cài đặt mã adsense lên trang web chuẩn nhất, tránh trường hợp sử dụng 1 thời gian sẽ không hiện các đơn vị quảng cáo trên web.

Bước 1: Đăng nhập vô tài khoản adsense, truy cập vô các mục sau:
- Quảng cáo của tôi - Quảng cáo tự động - Thiết lập quảng cáo tự động
Nó hiện ra một đoạn code, copy nó dán sau <head> trong website hoặc blog
Nếu có sẵn rồi thì bỏ qua bước này

<script async = 'async' src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-xxxxxxxxxxxxxxx",
          enable_page_level_ads: true
     });
</script>

Sau đó lưu lại

Bước 2: Cài đặt - Trang web của tôi
Nhấn vô dấu cộng (+) thêm trang web, tên miền của bạn vô và bật xác minh nó lên


Bước 3Thiết lập tệp ads.txt
Cấu trúc tệp ads.txt có dạng như sau: Thay ID của các bạn vô xxxxxxxxxxxxxx

1: Dành cho gà không chính chủ (gà mua, khác domain)

google.com, pub-xxxxxxxxxxxxxxxx, RESELLER, f08c47fec0942fa0

2: Dành cho gà chính chủ (tên miền gốc)

google.com, pub-xxxxxxxxxxxxxxxx, DIRECT, f08c47fec0942fa0

Các bạn mở notepad lên copy dòng trên tùy theo trường hợp 1 hay 2, dán vô notepad lưu lại với tên ads.txt

Tiếp theo chúng ta sẽ cài lên web: dường dẫn có dạng  linkweb.com/ads.txt

a: Dành cho website (hosting): các bạn upload thẳng lên hosting
b: Dành cho blogspot: Các bạn vô blog - cài đặt - Tùy chọn tìm kiếm - mục kiếm tiền ads.txt dán vô và lưu lại


Như vậy là xong chờ khoảng 5 đến 10 phút là mã ads hiển thị.
Tránh trường hợp sử dụng 1 thời gian nó sẽ không hiển thị ads nữa.

Lưu ý: 1 web vẫn có thể sử dụng nhiều adsense 1 lúc, chỉ cần thêm mã như bước 3: ví dụ có 5 adsense thì cài 5 code trong tệp ads.txt xem hình



Chúc bạn thành công.

Cung cấp tài khoản adsense ngoại, pin, chưa pin, paid
[/tintuc]
[giaban]500,000[/giaban]

[tomtat]Mẫu giao diện blogspot bán hàng shop hoa hoặc các mặt hàng khác như mỹ phẩm, thời trang, theme blog đẹp chuẩn seo, chuẩn mobile[/tomtat]

[link]https://shopbanhoa-ht.blogspot.com/[/link]

[chitiet]
Theme blogspot bán hoa đẹp, bố cục thiết kế đầy đủ

Đã được tối ưu tốc độ tải trang và tối ưu SEO hiệu quả
Thiết kế giao diện thân thiện với tất cả các thiết bị từ PC, cho đến các thiết bị dị động.
Khả năng tương thích với tất cả các loại trình duyệt phổ biến nhất hiện nay


Liên hệ: Hòa Trần
Facebook: https://www.facebook.com/hoatran.gl
ĐT: 097 1539 681
Email: tranhoa1991gl@gmail.com

Kết luận: Theme blogspot bán hàng đẹp tháng 19/5/2018, một Template mẫu giao diện blogger bán hàng đẹp.

Từ khóa: Template blogspot responsive, blogspot template, template blogspot bán hàng, template blogspot đẹp, share template blogspot, rip blogspot chuyên nghiệp, thiết kế blogspot, template blogger đẹp chuẩn seo, blogspot bất động sản. Theme blogger landing page travel du lịch, Theme blogspot landingpage mỹ phẩm

[/chitiet]







[tintuc]

Cài đặt chat facebook cho blogspot mới nhất, tạo live chat facebook cho blogspot

Bước 1: copy mã sau dán dưới <body> nếu có sẵn thì xóa đi dán cái này vô

<div id='fb-root'></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId            : '176690452847426',
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v2.12'
    });
  };
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/vi_VN/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Bước 2: Thay ID App của bạn vô dãy số trên. 176690452847426
Truy cập link: https://developers.facebook.com/apps
Nếu chưa có thì bạn phải tạo, cái này không hướng dẫn thêm

Bước 3: Copy dán trước </body>

<div class="fb-customerchat"
 page_id="135641763240991"
 logged_in_greeting="HOATRANWEB CÓ THỂ HỖ TRỢ GÌ CHO BẠN ?"
 logged_out_greeting="Chào bạn. Bạn đang cần xem chủ đề gì ?">
</div>

Trong đó dãy số là ID Fanpage của bạn. Cách lấy ID truy cập link https://findmyfbid.com
Dán link Fanpage của bạn vô và nhấn tìm, xong thì thay thế vô dãy số trên.


Bước 4: Truy cập vô fanpage của bạn và làm theo như hình sau

Cài đặt - Nền tảng Messenger - Miền được đưa vào danh sách hợp lệ




Xong nhấn lưu lại. Quay lại website và test.
Chúc bạn thành công.

[/tintuc]
[giaban]300,000[/giaban]
[tomtat]Mẫu giao diện blogspot bán balo túi xách đẹp, các mặt hàng thời trang[/tomtat]

[chitiet]
Mẫu giao diện blogspot bán hàng đẹp, các mặt hàng thời trang, balo túi xách, giao diện đẹp chuẩn seo responsive, mẫu blogspot đẹp, web bán hàng full chức năng giỏ hàng online.

Theme blogspot shop online đẹp nhất, một mẫu blogspot bán hàng chất lượng.

hoatranweb cung cấp thiết kế mẫu blogspot bán hàng, tin tức bất động sản theo yêu cầu.

[/chitiet]

[link]https://baloxinhgiare2018-ht.blogspot.com/[/link]



[tintuc]



Copy đoạn code dán trước </body> và có thể chỉnh sửa một số giá trị cho phù hợp.

<style>
    .hotline {
    position: fixed;
    left: 15px;
    bottom: 10px;
    top: initial !important;
    list-style: none;
    background-color: #fff;
    padding: 10px 6px 4px;
    z-index: 99999;
    border-radius: 20px;
    border: 1px solid #77b3d4;
    }

    .hotline a {
        font-size: 18px;
        color: #d80027;
        font-weight: 600
    }

    .phone img {
        margin-top: -9px;
        vertical-align: middle
    }

    .number {
        color: #060
    }
</style>


<div class="hotline">
<a class="phone" href="tel:0971539681">
<img alt="Hotline" src="https://2.bp.blogspot.com/-b-vuGeTB8B8/Wo2b3xIhwaI/AAAAAAAAE18/MMGBIhSqTjc6opXxPyiVANIpuKh5tdRKACLcBGAs/s1600/phone-32.png" /><span class="number">0971539681</span></a>
</div>

[/tintuc]
[giaban]500,000[/giaban]

[tomtat]
Mẫu giao diện blogspot bất động sản chuẩn seo phù hợp với những ai đang có nhu cầu làm web blogspot nhà đất, blogspot chung cư, blogspot bán dự án bất động sản.
[/tomtat]

[link]http://bdsnda-01ht.blogspot.com[/link]

[chitiet]

Mẫu giao diện blogspot bất động sản chuẩn seo phù hợp với những ai đang có nhu cầu làm web blogspot nhà đất, blogspot chung cư, blogspot bán dự án bất động sản. Giao diện template blogspot bất động sản đẹp để làm web nhà đất, web blogspot bất động sản chuẩn seo. Template blogspot bất động sản được mình thiết kế giao diện template bất động sản chuẩn mobile.

Giao diện template blogspot bất động sản đẹp

Giao diện đã được thiết bố bố cục, thao tác nhanh gọn, tiện lợi

Liên hệ: Hòa Trần
Facebook: https://www.facebook.com/hoatran.gl
ĐT: 097 1539 681
Email: tranhoa1991gl@gmail.com

Kết luận: Theme blogspot giới thiệu công ty đẹp


[/chitiet]












[tintuc]
Hướng dẫn tạo quảng cáo adsense cố định hai bên web blogspot.



Bước 1: Vô adsense tạo và lấy mã banner dọc 160 x 600 hoặc nhỏ hơn vì to quá sẽ không đủ chỗ
Bước 2: Copy dán trước </body>

<style>
    .float-ads {
        position: fixed;
        top: 75px;
        z-index: 9000
    }
@media screen and (max-width: 680px) {
    .float-ads {display:none;}
}
</style>
<div class='float-ads' style='left: 0px;margin-left: -7px;'>

ADS TRÁI

</div>
<div class='float-ads' style='right: 0px;margin-left: -7px;'>

ADS PHẢI

</div>

Các bạn chỉnh các thông số cho phù hợp

Sau đó lưu lại
[/tintuc]


[tintuc]
Bài 1:  Hướng dẫn thiết kế template blogspot
Bài 2: Hướng dẫn sắp xếp làm đẹp bố cục blogpsot

Bài này mình hướng dẫn cách lấy bài viết ra ngoài trang chủ blogspot

Trước tiên các bạn quay lại blog các bạn vô viết vài bài để test nhé. Xong các bạn vô chủ đề tìm tới phần CỘT GIỮA (COL-6)


Các bạn xóa nội dung tạm bên trong đi và thêm dòng code sau vào nó

<b:section class='main' id='mainpost' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

Sau đó nhấn lưu lại và view link blog lên xem kết quả, bài viết đã được load ra ngoài trang chủ. Tuy nhiên nó lại dài quá. Nên mình cần thu gọn bài viết lại.

Tiếp theo mình hướng dẫn cách thi gọn bài viết trên trang chủ:

Bây giờ các bạn vô trong giao diện nhấn Ctrl + F tìm <data:post.body/> Xong nhấn tìm cái đích cần tìm là cái <data:post.body/> thứ 2 từ trên xuống. Sau đó bạn thay code sau vô chữ  <data:post.body/>


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
<b:else/>
<img alt='no image' class='post-thumbnail' height='72px' src='https://lh3.googleusercontent.com/-AUxGwRmuU-E/U8ElIkyjdPI/AAAAAAAAITM/A2uBu8llLJ0/s0/noimage.jpg' width='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Nhấn lưu lại, tiếp theo ta thêm 1 chút CSS cho nó nhé, copy css sau dán trước </head>

<style>
  .post-thumbnail{
width: 23%;
    float: left;}
.post-title {
    color: #494949;
    font-family: Raleway, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1em;
    text-decoration: none;
    text-align: left;
    margin-top: 25px;
}
  .jump-link a{float: right;}
</style>

sau đó nhấn lưu lại, view link blog và xem kết quả. CSS mình chỉ là tạm thời nên các bạn cần chỉnh sao cho đẹp, chuẩn.

Bây giờ bạn có thể vô bố cục add các tiện ích như: nhãn, phổ biến, hình, ....

Tổng kết: như vậy là mình đã hướng dẫn load dữ liệu bài viết ra trang chủ
[/tintuc]
[tintuc]

Tiếp theo bài 1: Hướng dẫn thiết kế template blogspot cơ bản
Bài này mình sẽ hướng dẫn làm đẹp bố cục blogpsot, sắp xếp sao cho hợp lý dễ thao tác và quản lý nó.

Dưới </b:skin> bạn thêm
    <b:template-skin>
      <![CDATA[
]]>
    </b:template-skin>

Sau đó bạn thêm b:version='2' class='v2' vào chỗ html đầu tiên như hình dưới. Sau đó nhấn lưu lại


Giải thích: Template muốn có thẻ

    <b:template-skin>
      <![CDATA[
]]>
    </b:template-skin>

Bắt buộc phải có dòng này  b:version='2' class='v2' phiên bản 2 ý


Tiếp theo bạn copy dòng này dán vô trong thẻ <b:template>

body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout .col-3 {width:25%; float:left}
body#layout .col-6 {width:50%; float:left;}

Giải thích nhé: 2 dòng đầu là xóa các dấu chấm xuất hiện ở bố cục
2 dòng sau là ta căn chỉnh độ rộng cho các cột (trai - phải)

Mẫu mình làm gồm có 3 cột (TRÁI - GIỮA - PHẢI)

TRÁI + PHẢI = 50% (chung class là .col-3)
GIỮA = 50% (class là .col-6)

Cách gọi CSS của bố cục là body#layout phía trước sau đó đến class css hoặc id css xem như trên



col-3 là 2 cột 2 bên (trái - phải)
col-6: là phần main nằm giữa hai cột kia (làm sau nhé)

Tổng kết: Với bài này mình đã hướng dẫn cách làm đẹp bố cục blogspot, hy vọng nó giúp ích cho các bạn mới bước chân vô blog.

Các bạn tải mẫu bài 2 tại đây : Link tải

Bài sau mình hướng dẫn cách lấy bài viết ra ngoài trang chủ

[/tintuc]
[tintuc]
Sau đây mình xin hướng dẫn thiết kế 1 template blogspot đơn giản, bao gồm cả thiết kế bố cục, cách lấy bài viết.

Mục đích bài viết là để cho các bạn hiểu cách hoạt động cấu trúc của 1 blogger. Chứ không phải thiết kế 1 giao diện chuẩn 100% rồi mang bán, cái đó còn phụ thuộc vào kiến thức của mỗi người. Bài này mình chỉ cách hướng dẫn cơ bản, cho những bạn muốn tìm hiểu, tự làm blogspot cho riêng mình.

Các bạn nhìn bên dưới, phần thân web được chia làm 3 cột: Trái - Main - Phải

Xem link mẫu: https://bai1-ht.blogspot.com/


Bước 1: Tạo mới 1 blog (đặt tên và link đường dẫn)
Sau khi tạo xong các bạn vô link Mẫu blogspot trắng tinh copy dán đè lên giao diện cũ vừa tạo sau đó nhấn lưu lại


Đó là cấu trúc của 1 template blogspot trắng tinh, mình thường bắt đầu đề thiết kế 1 mẫu mới
- Giải thích: 1 template bắt buộc phải có 1 thẻ <b:skin> và 1 thẻ <b:section> thì mới lưu được nhé, nếu thiếu template sẽ báo lỗi và không thể nào lưu được.

Bước 2: Thêm thẻ meta responsive mobile
Copy link dưới đặt dưới <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Sau đó nhấn lưu lại


Bước 3: Thêm CSS mà mình đã chuẩn bị

* {
    box-sizing: border-box;
}
img {
    width: 100%;
    height: auto;
}
.row:after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 15px;
    width: 100%;
}
@media only screen and (min-width: 600px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
.aside {
    background-color: #33b5e5;
    padding: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
    background-color: #0099cc;
    color: #ffffff;
    text-align: center;
    font-size: 12px;
    padding: 15px;
}

  
Copy CSS ở trên dán vô trong thẻ <b:skin> CSS ở trên </b:skin>
Cách khác là bạn copy CSS ở trên cho vào trong thẻ <style> CSS ở trên </style> và đặt nó trước </head>
Thẻ <b:skin> khi chạy trên trình duyệt nó tự động đổi thành thẻ <style>

Bước 4: Tạo dòng chữ logo

Dưới <body> thêm html sau

<div class="header">
  <h1>Logo - Template blogspot</h1>
</div>

Sau đó nhấn lưu lại và view blog lên xem nó như thế nào. Đó là xong phần header giờ tới phần thân web bao gồm 2 cột TRÁI - MAIN - PHẢI

Dưới phần header vừa thêm các bạn copy html sau dán dưới nó

<div class="row">
    <div class="col-3 col-s-3 menu">
        CỘT TRÁI
    </div>

    <div class="col-6 col-s-9">
        MAIN
    </div>

    <div class="col-3 col-s-12">
        CỘT PHẢI
    </div>
</div>


Đó là mình chia làm 3 cột như ban đầu thiết kế. Tiếp theo mình làm phần cột trái, mình sẽ làm luôn phần widget bố cục cho nó luôn nhé.

A. PHẦN CỘT TRÁI

Bạn xóa chữ CỘT TRÁI đi và copy dòng sau dán vô chỗ cũ
    <b:section id='cot-trai'  showaddelement='yes'></b:section>

Sau đó nhấn lưu lại và xóa thẻ <b:section> phái dưới đi vì không cần nữa
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='yes'/>
Sau đó vô bố cục xem. nó đã xuất hiện tiện ích widget tên cot-trai



Các bạn nhấn Thêm tiện ích - Chọn HTML/Javascript

Dán đoạn html sau vô rồi lưu lại

  <ul>
    <li>Nhãn 1</li>
    <li>Nhãn 2</li>
    <li>Nhãn 3</li>
    <li>Nhãn 4</li>
  </ul>

Rồi bạn view link blog lên và xem kết quả.

B. PHẦN CỘT PHẢI

Cũng tương tự như phần cột trái, các bạn copy code sau dán đè vô chữ CỘT PHẢI
    <b:section id='cot-phai' showaddelement='yes'></b:section>



Sau đó lưu lại và vô bố cục nó đã xuất hiện tiện ích widget tên cot-phai

Các bạn nhấn Thêm tiện ích - Chọn HTML/Javascript và copy đoạn html dưới dán vô và lưu lại

<div class="aside">
    <h2>Theme blogspot bán hàng</h2>
    <p>Chania is a city on the island of Crete.</p>
    <h2>Theme blogpsot BĐS</h2>
    <p>Crete is a Greek island in the Mediterranean Sea.</p>
    <h2>Theme blogpsot tin tức?</h2>
    <p>You can reach Chania airport from all over Europe.</p>
  </div>

Sau đó view link blog và xem kết quả

C. PHẦN FOOTER

Bạn thêm html như sau: trước </body>

<div class="footer">

</div>

Như hình dưới nhé, các bạn click vô con số bên trái  để nó thu gọn lại cho dễ nhìn


3 phần trên nó song song với nhau, trong "footer" bạn copy dán thẻ <b:section> để tạo widget
<b:section id='footer' showaddelement='yes'></b:section>


Sau đó lưu lại và vô bố cục xem nó xuất hiện chưa. Mình vô thì có nhé


Các bạn nhấn Thêm tiện ích - Chọn HTML/Javascript
Dán đoạn html sau và lưu lại
  <p>Template blogspot bán hàng chuẩn seo - www.hoatranweb.com</p>
View link blog và xem kết quả.


D. PHẦN MAIN

Phần này là để lấy dữ liệu từ bài post của blog ra, Bài 2 mình sẽ hướng dẫn sau.

Tạm thời bạn tìm chữ MAIN và thêm dòng html sau và lưu lại

        <h1>
          Thiết kế template blogspot
        </h1>
        <p>
          Template blogspot bán hàng chuẩn seo, rip blogspot chuyên nghiệp thiết kế web blogger theo yêu cầu
        </p>
        <img src="https://www.w3schools.com/css/img_chania.jpg" width="460" height="345"/>

Xem hình:


Sau đó lưu lại view link blog và xem kết quả
Đây là kết quả blog mình vừa tạo nhé: https://bai1-ht.blogspot.com/
Với bài hướng dẫn này mình đã tạo được 1 blogspot đơn giản responsive mobile.

Tải bản mẫu tại đây: 

Với bài sau mình hướng dẫn cách sắp xếp bố cục + cách lấy bài viết ra ngoài trang chủ.


[/tintuc]