Giao diện web blogspot bán hàng đẹp chuẩn seo

100++ mẫu Template blogspot bán hàng chuẩn seo


Những mẫu giao diện template blogspot theme blogspot bán hàng, giao diện blogspot bất động sản, mẫu blogspot tin tức đẹp chuẩn seo responsive

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


Những mẫu giao diện template blogspot theme blogspot bán hàng đẹp responsive

[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]



[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ậnTheme 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óaTemplate blogspot responsiveblogspot templatetemplate blogspot bán hàngtemplate 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]
[tintuc]
Hướng dẫn tăng view blogspot tăng lượt truy cập blogger

Phần mềm có tác dụng là tăng view cho blogger, nhưng phản tác dụng là blog của bạn sẽ mất top
Tải phần mềm tại địa chỉ: http://www.ipts.com/download.php
Pass: 123456

Sau khi tải về, giải nén nhập pass 123456
Mở file ipts.exe sau đó các bạn add url trang web của bạn vô.

Lưu ý khi sử dụng: Phần mềm có thể có virut, Làm CPU cao

[/tintuc]
[tintuc]


Bảng Mã Màu CSS

EEEEEEDDDDDDCCCCCCBBBBBBAAAAAA999999
888888777777666666555555444444333333
222222111111000000FF0000EE0000DD0000
CC0000BB0000AA0000990000880000770000
660000550000440000330000220000110000
FFFFFFFFFFCCFFFF99FFFF66FFFF33FFFF00
CCFFFFCCFFCCCCFF99CCFF66CCFF33CCFF00
99FFFF99FFCC99FF9999FF6699FF3399FF00
66FFFF66FFCC66FF9966FF6666FF3366FF00
33FFFF33FFCC33FF9933FF6633FF3333FF00
00FFFF00FFCC00FF9900FF6600FF3300FF00
FFCCFFFFCCCCFFCC99FFCC66FFCC33FFCC00
CCCCFFCCCCCCCCCC99CCCC66CCCC33CCCC00
99CCFF99CCCC99CC9999CC6699CC3399CC00
66CCFF66CCCC66CC9966CC6666CC3366CC00
33CCFF33CCCC33CC9933CC6633CC3333CC00
00CCFF00CCCC33CC6633CC3300CC9900CC66
00CC3300CC00FF99FFFF99CCFF9999FF9966
FF9933FF9900CC99FFCC99CCCC9999CC9966
CC9933CC99009999FF9999CC999999999966
9999339999006699FF6699CC669999669966
6699336699003399FF3399CC339999339966
3399333399000099FF0099CC009999009966
009933009900FF66FFFF66CCFF6699FF6666
FF6633FF6600CC66FFCC66CCCC6699CC6666
CC6633CC66009966FF9966CC996699996666
9966339966006666FF6666CC666699666666
6666336666003366FF3366CC336699336666
3366333366000066FF0066CC006699006666
006633006600FF33FFFF33CCFF3399FF3366
FF3333FF3300CC33FFCC33CCCC3399CC3366
CC3333CC33009933FF9933CC993399993366
9933339933006633FF6633CC663399663366
6633336633003333FF3333CC333399333366
3333333333000033FFFF33330033CC003399
003366003333003300FF00FFFF00CCFF0099
FF0066FF0033FF0000CC00FFCC00CCCC0099
CC0066CC0033CC00009900FF9900CC990099
9900669900339900006600FF6600CC660099
6600666600336600003300FF3300CC330099
3300663300333300000000FF0000CC000099
00006600003300FF0000EE0000DD0000CC00
00BB0000AA00009900008800007700006600
0055000044000033000022000011000000FF
0000EE0000DD0000CC0000BB0000AA000099
000088000077000055000044000022000011









 [/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]



[tintuc]
Mục đích là làm cho trang web của bạn hiện các ADS nước ngoài, có giá CPC từ 1$ - 10$/ click. Chúng ta sẽ trao đổi click với nhau. Nhưng tốt nhất là web phải có traffic và kèm theo trao đổi click 5 - 10 nhát cho an toàn.

Có nhất nhiều nhóm facebook tây trao đổi lick adsense:
Cách chơi an toàn: mỗi người chỉ nên click 1 phát, người 1 clcick và người thứ 2 - 3 chúng ta chỉ nên để cho họ view, xong người thứ 4 chúng ta cho họ click.


Bước 1: Tải file: Link: http://www.mediafire.com/file/y1plm0vm2tuht3c/CookiesInstalation.rar
Bước 2: Giải nén ra và cài đặt mozilla firefox có kèm bên trong
Bước 3: Sau khi cài đặt mozilla firefox xong
- Menu - Options - Tắt hết tự động cập nhật đi


Kéo xuống dưới - Chọn như hình



Tiếp theo làm theo như hình


Tiếp




Chọn Install Add-on From file: chọn file bạn tải về tên là cookies_exportimport-1.0-fx.xpi

Nó hiện thông báo - Nhấn Add. Xong đóng trình duyệt và mở lại.

Bước 4: Mở lại trình duyệt bạn nhấn phím ALT -> menu hiện ra

Tool - Import Cookie và chọn fite txt (có rất nhiều cookies mối file có những quảng cáo khác nhau, giá CPC khác nhau)



Chọn file cookie xong nó hiện thông báo như này là OK rồi nhé


Xong bạn tắt trình duyệt và mở lại vô trang web của bạn hoặc của ai đó có adsense, các quảng cáo nó sẽ hiện, nhưng không phải quảng cáo ở VN nữa mà là nước ngoài. Có rất nhiều file txt kèm theo đó chính là các cookies có ads khác nhau.

Một số quảng cáo:




Nhưng không phải quảng cáo nào cũng có giá CPC cao

Tên một số ads có CPC cao như: VEEAM, AUTOMATE, MCAFEE, SITE24X7, AMEMBER PRO, GMAT EXAM, OHIO, TENABLE.

Làm sao để kiểm tra được quảng cáo đó có giá CPC bao nhiêu 1 clcik thì bạn vô trang

http://www.keywordspy.com/research/
chọn ô keyword và nhập tên nhà quảng cáo vô để kiểm tra để biết quảng cáo nào cao, thấp để nhấp vô nó.

Một số hình ảnh






Lưu ý: nếu Mozilla Firefox tự động cập nhật bản mới, bạn phải cài lại bản cũ mình đã để trong link.
Để phát huy tác dụng của cookies bạn phải view trang tầm 5 phút và khoảng 35 - 45 trang khác nhau, sau đó chọn 1 ads cao tiền nhất và click nó, ở lại khoảng 2 - 3 phút và nhấp 2 - 3 link bên trong quảng cáo đó, và đợi 2 - 3 phút rồi mới thoát.

- Nếu trao đổi click, tốt nhất 1 ngày không quá 15 click, nếu 2 người trao đổi click với nhau, ít nhất 2 ngày sau mới được trao đổi lại



Cách chơi an toàn:
Các bạn hãy nhìn vô hình sau


Căn làm sao cứ 100 lần xem trang = 1 nhấp chuột, khi đó CTR chỉ 1% thì an toàn
CTR càng nhỏ => an toàn
CTR cao => die gà


[/tintuc]
[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]
[tintuc]


Kết quả dự đoán trận bán kết rất nhiều bạn đã nhận giải từ mình: Xem kết quả tại đây

Để cổ vũ cho đội U23 VN chiến thắng trong trận chung kết. Nay mình xin tổ chức mini game nhận thưởng như sau:

Quy luật chơi như sau: Các bạn comment đoán tỉ số trong 90 phút chính thức theo cú pháp như bên dưới

VN - Uzbekistan : Cầu thủ VN ghi bàn 1 - Cầu thủ VN ghi bàn 2 -  Cầu thủ VN ghi bàn N+
Ví dụ: 3-1 : Quang Hải - Công Phượng - Văn Thanh

Nếu các bạn dự đoán trùng nhau, giải thưởng sẽ tính cho bạn comment nhanh nhất.

Giải nhất: 1 tài khoản Google Adsense Content trị giá 2.000.000đ (Đoán chính xác nhất)
Giải nhì: 3 Template blogspot bán hàng từ trang www.hoatranweb.com (Đoán đúng tỉ số và ít nhất 2 cầu thủ VN ghi bàn nếu tỉ số VN ghi được >= 2)
Giải ba:  2 Template blogspot (Đoán đúng tỉ số và 1 cầu thủ ghi bàn)
Giải khác: Giảm giá tất cả các template blogspot bán hàng chuẩn seo cho các bạn tham dự đoán giá chỉ 100K/mẫu

NHỮNG KẾT QUẢ DỰ ĐOÁN SAI CÚ PHÁP SẼ KHÔNG ĐƯỢC TÍNH
CÁC BẠN CHỈ COMMENT 1 LẦN VÀ KHÔNG SỬA, TRƯỜNG HỢP KHÁC SẼ KHÔNG ĐƯỢC  TÍNH

Mình dự đoán tỉ số: 2-1 : Quang Hải - Công Phượng

[/tintuc]
[tintuc]

MINI GAME - DỰ ĐOÁN KẾT QUẢ NHẬN TEMPLATE BLOGSPOT MIỄN PHÍ

Trận Việt Nam - Qatar diễn ra lúc 15h thứ Ba, 23/1.

Mời các bạn comment dự đoán kết quả, những bạn dự đoán đúng sẽ được nhận 1 template blogspot miễn phí từ trang web của mình, không phân biệt mẫu.

Cách thức chơi: Các bạn cứ comment tỉ số bên dưới, những bạn nào đoán đúng sẽ được nhận 1 template miễn phí, tự chọn nhé.



Sau khi trận đấu kết thúc, những bạn dự đoán đúng tỉ số thì liên hệ với mình để nhận mẫu.

Mình dự đoán kết quả VN sẽ thắng 2-1 :)). Mời các thánh phán phía dưới nào.

Ví dụ: VN 3 - Qatar 1
Sau khi có kết quả những bạn comment không đúng tỉ số vẫn được nhận 1 tem blog cá nhân
demo: https://themeblogdepp-ht.blogspot.com/.
Tiện thể nhờ các bác cho e 1 click adsense nhé (kiếm 10$ lấy pin). thank nhiều.

========

Tuyệt vời, một trận đấu giàu cảm xúc..

Tặng tất cả các bạn một mẫu blogspot tin tức đẹp. Bác nào chưa click adsense thì giúp e 1 click nhé. 

Link tải: Template blogspot tin tức đẹp

Các kết quả dự đoán sẽ được nhận template blogspot miễn phí tự chọn:

VN 2-2 Qatar (hiệp chính) +2 VN
VN 4-3 Qatar (luân lưu) +1 VN
VN 3-2 Qatar (coi như chung cuộc)

Tính vậy cho nhiều giải :3

Những bạn nào có kết quả dự đoán đúng liên hệ mình nhận template blogspot tự chọn nhé
[/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]https://3.bp.blogspot.com/-0PaAcTPP81I/WmSXrRGlMPI/AAAAAAAAEn4/Bn6K-TazRHkJjEBgCVot8SGq3imno9UbwCLcBGAs/s1600/B%25C4%2590S%2BHT%2BNhi%25E1%25BB%2581u%2Bd%25E1%25BB%25B1%2B%25C3%25A1n.png[/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ậnTheme blogspot giới thiệu công ty đẹp

Từ khóaTemplate blogspot responsiveblogspot templatetemplate blogspot bán hàngtemplate blogspot đẹp, share template blogspotrip blogspot chuyên nghiệp, thiết kế blogspot, template blogger đẹp chuẩn seo, blogspot bất động sảnTheme blogger landing page travel du lịchTheme blogspot landingpage mỹ phẩm

[/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]