*** Tối ưu Offpage SEO nền tảng thành công SEO 2020 !
HOT **** Hướng dẫn tốt nhất về SEO Onpage 2020 !
Chú ý: Không chèn Link vô nghĩa trong bài viết !
Các thành viên bị lỗi đăng ký không gửi email vui lòng liên hệ Facebook: Lee Nam để được trợ giúp

Hướng dẫn tự tạo template cho blogspot

Thảo luận trong 'SEO Blog' bắt đầu bởi ThoXay2014, 28 Tháng tám 2014.

  1. ThoXay2014

    ThoXay2014 Well-Known Member

    Tham gia ngày:
    25 Tháng tám 2014
    Bài viết:
    79
    Đã được thích:
    157
    Chắc nhiều bạn cũng ngán ngẩm với cái giao diện của blogger và muốn có một blog theo ý riêng, cũng có nhiều bạn muốn biến blogger thành một website để phục vụ cho một mục đích nào đó nhưng blogger lại không đáp ứng đủ nhu cầu của các bạn. Nên việc tự thiết kế một giao diện theo ý của mình sẽ là một công việc chúng ta phải làm để có thể phục vụ tốt cho mục đich của mình.

    Mình xin hướng dẫn sơ qua về cách design lại giao diện cho blogspot. Mình không phải coder, lúc trước mình học rất tệ mấy môn lập trình nên bây giờ mới phải tìm hiểu lại dần dần và .. đang tìm sư phụ ^^

    Đầu tiên chúng ta xem cấu trúc của blog có dạng như sau:
    Mã:
    <?xml version="1.0" encoding="UTF-8" ?>
    
    <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'>
    
    <head>
    
    <b:skin><![CDATA[
    
    
    
    ]]></b:skin>
    
    </head>
    
    <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>
    
    </body>
    
    </html>
    
    Các bạn copy nó quăng nó vào phần Mẫu>>Chỉnh sửa HTML và lưu nó lại. sau đó các bạn vào blog của mình sẽ thấy nó trống trơn. Đừng lo giờ làm tiếp..

    Đa số các bạn ở đây đều là Seoer nên việc đặt các thẻ meta là không thể thiếu, các bạn copy đoạn code sau ném nó vào phần head và viết nội dung cho các thẻ meta
    Mã:
    <b:include data='blog' name='all-head-content'/>
    
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    
    <title><data:blog.title/></title>
    
    </b:if>
    
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    
    <title><data:blog.pageTitle/></title>
    
    <meta content='Mô tả' name='description'/>
    
    <meta content='Các từ khóa' name='keywords'/>
    
    <b:else/>
    
    <title><data:blog.pageName/> - <data:blog.title/></title>
    
    <meta expr:content='data:blog.pageName + &quot; - Mô tả &quot;' name='description'/>
    
    <meta expr:content='data:blog.pageName + &quot;, Các từ khóa &quot;' name='keywords'/>
    
    </b:if>
    
    Thế là xong mấy cái lặt vặt rồi, giờ qua vấn đề chính chúng ta cần là đổi giao diện cho nó. Công việc này đòi hỏi các bạn phải biết qua một chút về HTML, PHP và CSS, không cần phải pro lắm đâu, đủ thiết kế cái layout cơ bản thì càng tốt, còn không biết code hoặc không muốn code thì mình giới thiệu luôn :D

    Thiết kế layout thì vào đây: webtemplategenerator.com/ hoặc csslayoutgenerator.com/ hoặc google search: html layout generator có nhiều trang lắm ^^

    Viết CSS thì vào đây: css3generator.com/ hoặc www.css3maker.com/ hoặc google search: css generator.

    Sử dụng css và html thì các bạn có thể vào đây nhé: w3schools.com/css/css_howto.asp hoặc xem video này có thể sẽ giúp ích cho các bạn: youtube.com/watch?v=ihCcsWJvjeI

    Các bạn có thể đặt trực tiếp các code css vào trong
    Mã:
    <head>
    
    <b:skin><![CDATA[
    
    Đặt code css vào đây
    
    ]]></b:skin>
    </head>
    
    Hoặc có thể upload lên google driver, sau đó chia sẻ công khai và lấy đường dẫn như sau bỏ vào phần head

    [​IMG]

    Mã:
    <link href="https://googledrive.com/host/Mã-Đường-Dẫn" rel="stylesheet" type="text/css" />
    
    Ví dụ mã của mình là 0B8NXN9kJ4j8nbmZPWm4yM3p1cTA sẽ được:
    Mã:
    <link href="https://googledrive.com/host/0B8NXN9kJ4j8nbmZPWm4yM3p1cTA" rel="stylesheet" type="text/css" />
    
    Sau khi đã có một giao diện theo ý mình các bạn sẽ cho tất cả vào thẻ <body></body> sau đó lưu mẫu và chiêm ngưỡng thành quả của mình.

    (Nguồn:vnseo.edu.vn)​
    #1
    NghiHQ thích bài này.
  2. hanoilandmark89

    hanoilandmark89 Thành viên chính thức

    Tham gia ngày:
    6 Tháng tám 2015
    Bài viết:
    63
    Đã được thích:
    1
    Mình cũng rất đam mê thiết kế mấy cái này, có thời gian mình sẽ mày mò nhưng mà có ai đó chỉ bảo tận tình thì chắc sẽ có động lực để học hơn, chứ để tự mày mò thì lâu lắm.
    #2
  3. kinhkong

    kinhkong Thành viên chính thức

    Tham gia ngày:
    31 Tháng tám 2015
    Bài viết:
    26
    Đã được thích:
    0
    Cá nhân mình nghĩ blog nó chỉ là site vệ tinh 2.0 miễn phí đâu cần mất nhiều thời gian như vậy để thiết kế.
    còn chưa kể đến mình thiết kế có được chuẩn seo nữa không ?
    Cứ giao diện mặc định mà làm cho nhanh bác ơi :D
    #3
  4. giaphat888

    giaphat888 Thành viên chính thức

    Tham gia ngày:
    3 Tháng mười 2015
    Bài viết:
    22
    Đã được thích:
    0
    Muốn tạo một cái mà gà mờ code quá [​IMG]
    #4
  5. hoasinhnhat88

    hoasinhnhat88 Thành viên mới

    Tham gia ngày:
    25 Tháng chín 2015
    Bài viết:
    3
    Đã được thích:
    0
    hay quá cảm ơn bạn đã chia sẻ bài viết
    #5
  6. ngocmaitrang

    ngocmaitrang Thành viên chính thức

    Tham gia ngày:
    10 Tháng mười 2015
    Bài viết:
    67
    Đã được thích:
    5
    Mình đang loay hoay với mấy cái template nè. Mình không phải là dân chuyên ngành nên vất vả lắm, cám ơn thớt chia sẻ. rất bổ ích nhé !
    #6
  7. nobodybuty

    nobodybuty Thành viên chính thức

    Tham gia ngày:
    19 Tháng mười 2015
    Bài viết:
    66
    Đã được thích:
    2
    Em toàn chọn những mẫu template càng đơn giản càng tốt, vừa load nhanh, vừa đỡ rối mắt.
    #7
  8. kieudai91

    kieudai91 Thành viên mới

    Tham gia ngày:
    6 Tháng mười một 2015
    Bài viết:
    6
    Đã được thích:
    0
    cảm ơn bạn chủ top đã chia sẻ, mình toàn đi xin template sẵn rồi về làm, hiện giờ thì muốn tự tay làm ra :D khi làm ra được một sản phẩm thì rất thú vị
    #8
  9. Phuongstony

    Phuongstony Thành viên chính thức

    Tham gia ngày:
    21 Tháng hai 2016
    Bài viết:
    249
    Đã được thích:
    37
    Hay quá cảm ơn bạn dã chia sẻ! Rất đam mê cái này! Thanks
    Nhưng rối quá để mình Save lại!
    #9
  10. prosq

    prosq Thành viên chính thức

    Tham gia ngày:
    29 Tháng hai 2016
    Bài viết:
    472
    Đã được thích:
    27
    Giờ mình mới biết cái này, trước giờ mình toàn nhờ người ta làm hộ nên không tìm hiểu, biết cái này rồi tự mình làm cũng được
    #10
  11. Khương Bùi

    Khương Bùi Thành viên chính thức

    Tham gia ngày:
    3 Tháng mười hai 2015
    Bài viết:
    11
    Đã được thích:
    0
    Muốn làm 1 cái cho mình nhưng khả năng không cho phép, thánh nào rành code em nhờ phát ạ
    #11
  12. haopro6120

    haopro6120 Thành viên chính thức

    Tham gia ngày:
    4 Tháng mười một 2015
    Bài viết:
    39
    Đã được thích:
    2
    nếu mà ko rành về CSS thì thua, không những CSS mà còn thêm HTML nữa .
    #12
  13. Công ty máy chiếu VNPC

    Công ty máy chiếu VNPC Thành viên chính thức

    Tham gia ngày:
    26 Tháng một 2016
    Bài viết:
    279
    Đã được thích:
    23
    Tạo template cho blogger đâu có đơn giản, nó cần có cả js để chạy slider, widget, kích thước ảnh thumb bài viết, giao diện responsive, dữ liệu có cấu trúc để chuẩn seo...
    #13
  14. tuanhiep12

    tuanhiep12 Thành viên chính thức

    Tham gia ngày:
    9 Tháng một 2016
    Bài viết:
    179
    Đã được thích:
    16
    phải công nhận mấy bác déigen pro thật làm một cái blog đẹp thật là khó nhưng để sữ dụng nó cũng là một vấn đề mình cũng đang tập tành với blog mà thấy khó quá
    #14
  15. traihalinh

    traihalinh Thành viên chính thức

    Tham gia ngày:
    6 Tháng hai 2015
    Bài viết:
    318
    Đã được thích:
    20
    Cái này nếu được thì bạn có thể làm video hướng dẫn chi tiết. Mình thấy như thế nó sẽ dễ hiểu hơn và những người đang học như mình sẽ áp dụng nhanh hơn.
    #15
  16. phuocseo

    phuocseo Thành viên mới

    Tham gia ngày:
    15 Tháng tư 2016
    Bài viết:
    3
    Đã được thích:
    0
  17. tuyet nhung

    tuyet nhung Thành viên chính thức

    Tham gia ngày:
    22 Tháng tư 2016
    Bài viết:
    35
    Đã được thích:
    0
  18. phamsangvt

    phamsangvt Thành viên chính thức

    Tham gia ngày:
    20 Tháng hai 2017
    Bài viết:
    10
    Đã được thích:
    1
    Suy nghĩ sai lầm, bạn nên nhớ blogspot là đứa con của google, bởi vậy blogspot thiết kế chuẩn seo thì khả năng lên top rất cao.
    #18
  19. hiepnh12401

    hiepnh12401 Thành viên chính thức

    Tham gia ngày:
    17 Tháng mười một 2015
    Bài viết:
    233
    Đã được thích:
    25
    làm chắc mất nữa tháng mới xong quá :((, mà k đẹp nữa, khách chạy hết
    #19
  20. abien

    abien Thành viên chính thức

    Tham gia ngày:
    20 Tháng một 2017
    Bài viết:
    156
    Đã được thích:
    19
    Làm thế nào để giảm bớt được các đoạn code trong template nhỉ. Nhiều khi xoá một link nó dẫn tới bị lỗi cả site ấy!
    #20

Chia sẻ trang này