Hướng dẫn chỉnh sửa Template Blogspot giống bản gốc

Bạn tải một mã Template trên mạng về và cài đặt cho blogspot của mình nhưng thường sẽ không được giống như demo template gốc đâu. Cho nên vấn đề của bạn là cài đặt xong thì phải chỉnh sửa làm sao cho đẹp theo ý mình hay chỉnh sửa làm sao cho giống template gốc

Hướng dẫn chỉnh sửa Template Blogspot giống bản gốc


Để tiến hành chỉnh sửa template bạn truy cập lại vào blog của bạn như mọi khi, tiếp đếm vào mục Bố cục, trên mục Mẫu lúc cài theme ấy nhé.Ở đây nó sẽ phát thảo cái giao diện hiện tại của bạn rất rõ ràng và cụ thể.Bên trên, bên trái, bên phải, ở dưới… bạn nhìn như thế nào thì xem blog của bạn hiện tại nó y chang như vậy à.Chỉ cần bạn thay đổi ở đây thì giao diện blog bạn cũng sẽ thay đổi theo thôi, nó rất trực quan nên nếu bạn làm một lần là sẽ hiểu ngay ra cả thôi.

Sau khi bấm vào Bố cục rồi thì bạn một tab mở sang trang theme gốc mà bạn cài ở đây mình đang ví dụ template Plazity rồi tiến hành so sánh và cài đặt nhé, hãy quan sát hình ảnh dưới đây nhé:

So sánh bố cục so với theme gốc

Bạn có thấy mình đánh dấu các số ở trong ảnh không,ảnh bên trái chính là cái bố cục của các bạn đó còn ảnh bên phải chính là template gốc của nó, bây giờ chúng ta đi chỉnh các phần cho nó giống như bản gốc nhé.

Số 1

Đây là tiêu đề của Blog bạn, bạn có thể để chữ hoặc là ảnh, để thay đổi nó bạn click vào chữ Chỉnh sửa, lúc này nó sẽ hiện lên một khung để cho bạn thay đổi.Nếu bạn muốn Titlelà chữ thì điền chữ và ô Tiêu đề Blog hoặc muốn ảnh thì bạn bấm Chọn tệp vào upload nó lên sau đó bấm Lưu.

Mỗi lần làm xong bạn bấm vào Xem Blog để xem thay đổi không nhé.

Số 2

Đây sẽ là danh sách các bài viết của bạn đăng lên blog của bạn,khi bạn đăng một bài viết nào lên thì mặc định nó sẽ thêm vào mục này vì thế ở đây không có gì đang nói cả.Và cách viết bài như thế nào và sao cho chuẩn seo thì mình sẽ nói ở phần 4 chứ hiện đang ở phần 3 mà.Tuy nhiên bạn có thể bấm vào Chỉnh sửa để cài đặt sao cho phù hợp như số bài viết hiển thị ở đây mặc định là 7 bài thì bạn có thể lên nhiều bài hơn.


>>> Xem thêm:  Hướng dẫn tạo Widget facebook cố định bên phải blogspot

Số 3

Đây là nơi sẽ hiển thị những bài viết mà có lượt comment nhiều nhất nó sẽ hiển thị ở đây,bạn bấm vào Chỉnh sửa để cài đặt cho nó chỉ hiển thị 5 bài đăng thôi, mặc định là 10 thì hơi nhiều.Lưu ý là bạn có thể xóa bỏ nó đi nếu bạn không muốn nó hiển thị ra.Ngoài ra bạn có thể bấm vào mục Thêm tiện ích để thêm các tiện ích mà Blogspot nó hỗ trợ.

Ví dụ như bạn có thể thêm một banner quảng cáo ở đây thì bạn bấm Thêm tiện ích ->Hình ảnh rồi bạn upload cái ảnh đó lên là được.Bạn có thể thoải mái thêm nhiều tiện ích nào mà bạn thích ở những nơi cho thêm tiện ích như thế này.

Số 4

Đây là nơi sẽ hiển thì tất cả các bạn viết bạn vừa mới viết trên blog, nó cũng y chang như cái tiện ích ở số 3 thôi chứ chẳng có gì khác cả đâu.Vì thế cũng chẳng có gì đáng nói ở đây cả và bạn cũng nên thêm các tiện ích khác vào.

Số 5

Cái này nó y chang cái số 3 vì thế bạn bấm vào Chỉnh sửa vào xóa nó đi chứ để như thế nó lăp lại các bài viết ở trên trang chủ trong không đẹp tí nào cả.Thay vào đó mình sẽ thêm các tiện ích như Fanpage, ảnh,quảng cáo… vào đây sẽ hợp lí hơn.

Thế là gần xong các mục trang chủ rồi nhé,Cơ bản template này nó khá đơn giản trong việc cài đặt bố cục vì thế bạn sẽ không gặp khó khắn gì cả, cái khó cho bạn đó là phần Menu sẽ chỉnh sửa như thế nào cho phù hợp.Phần này sẽ đụng tới code nhưng bạn iên tâm là mình sẽ chỉ các bạn nên bạn không phải lo gì cả.Như bạn đã thấy thanh Menu của nó hiện đang làm tiếng Anh tùm lum và không phải là các mục liên quan đến chủ đề của Blog của bạn.
Menu măc định của Template Plazify

Để chỉnh Menu cho template thì bạn vào mục Mẫu vào chọn Chỉnh sửa HTML, ở đây bạn sẽ thấy rúi nhùi đống chữ đúng không nào, vì là mình hướng dẫn cho những bạn nào không biết code vì thế mình sẽ chỉnh sẵn để các bạn có thể copy bỏ vào thôi.Còn bạn nào biết rồi thì có thể tự mò để chỉnh vào trong video phía dưới mình sẽ có hướng dẫn các bạn tự mò để chỉnh sao cho theo ý của mình.


>>> Xem thêm:  Cách tạo nút trở về đầu trang Button Go to Top và Bottom trong blogger


Chỉnh code cho template Blog

Sau khi bấm Chỉnh sửa HTML rồi bạn tiến hành xóa hết mấy đoạn code ở trong khung đi và copy đoạn code sau vào { Copy Code } để thay thế , sau đó bấm Lưu mẫu và tiến hành xem lại blog bạn nó thay đổi Menu chưa nhé.

Ở đây nó sẽ đi kèm theo cái Slide nữa nhé vào sau đây mình sẽ hướng dẫn các bạn chỉnh Menu và Slide theo ý thích của các bạn bằng cách chỉnh các đoạn code sau trong mục Chỉnh Sửa HTML:

Menu
<div class='nav-collapse collapse always-show'> <div class='plazart-megamenu'> <ul class='nav level0'> <li class='current active' data-id='101' data-level='1'> <a class='color_1 ' href='#'>Trang Chủ</a> </li> <li class='' data-class='color_2' data-id='116' data-level='1'> <a class='color_3 color_3' href='#'>Java</a> </li> <li class='' data-class='color_3' data-id='119' data-level='1'> <a class='color_3 color_3' href='#'>Android</a> </li> <li class='dropdown mega mega-align-left' data-alignsub='left' data-class='color_5' data-id='147' data-level='1'> <a class='color_5 dropdown-toggle color_5' data-toggle='dropdown' href=''>Thủ thuật <b class='caret'/></a> <div class='nav-child dropdown-menu mega-dropdown-menu' data-class='color_5'> <div class='row-fluid'> <div class='span12 mega-col-nav' data-width='12'><div class='mega-inner'> <ul class='mega-nav level1'> <li data-id='121' data-level='2'> <a class=' ' href=''>Youtube </a> </li> <li data-id='122' data-level='2'> <a class=' ' href=''>Facebook</a> </li> <li data-id='148' data-level='2'> <a class=' ' href=''>Máy tính </a> </li> </ul> </div></div> </div> </div> </li> <li class='' data-class='color_6' data-id='120' data-level='1'> <a class='color_6 color_6' href=''>MMO</a> </li> <li class='' data-class='color_7' data-id='125' data-level='1'> <a class='color_7 color_7' href=''>Liên hệ</a> </li> </ul> </div> </div> </div> </div> 


Bạn tìm trong đoạn code trên và chỉnh lại thành tên Menu của các bạn nhé ở chỗ chữ mình bôi đỏ ấy nhé, chỉ thay đổi mỗi chữ thôi rồi bấm Lưu mẫu lại là được.

Slide

Đẻ chỉnh slide thì bạn tìm trong đoạn code đoạn mã sau:

<!--ảnh Slide thứ nhất --> <li class='clone' style='width: 844px; float: left; display: block;'> <div class='info_slide'> <span class='tz_image'> <img alt='Serie dạy kiếm tiền trên Youtube' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh042nlGd8n9Dq1IeSyiXGFbbNKNWQwiogq9Zp1BJ-nKJDe2XDjUEq4EAVkiybxBvq1cY823WCWA4RsWaIrjnnDlxLuOzQW6NILrL-Xh_LTKCqexEck4clE2jFAK3h3T2NndT-zi9R5pK9T/h120/serie-day-hoc-kiem-tien-tren-youtube.jpg'/> </span> <div class='sl-description'> <h3 class='tz_title_slide'> <a href='http://mxhviet.com/hoc-kiem-tien-youtube/gioi-thieu-serie-hoc-kiem-tien-tren-youtube'>Serie dạy kiếm tiền trên Youtube Miễn Phí</a> </h3> <p class='hidden-phone'> Hướng dẫn kiếm tiền trên Youtube cho những người mới bắt đầu , chưa có kinh nghiệm.Bao gôm 8 bài viết và 8 video hướng dẫn chi tiết tường bước... <span class='tz_readmore'> <a class='font-bold' href='http://mxhviet.com/hoc-kiem-tien-youtube/gioi-thieu-serie-hoc-kiem-tien-tren-youtube'>Xem chi tiết</a> </span> </p> </div> </div> </li><!--Kết thúc ảnh Slide thứ nhất --> <li class='' style='width: 844px; float: left; display: block;'> <div class='info_slide'> <span class='tz_image'> <img alt='Serie hướng dẫn bảo mật nick facebook 2015' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy0uCUFLkmppqp0AHyFx8cgoi8i8uWYpuJv-TUhUcWNvLCll5uN_S5JRZWeXKT8XYq22c4qoCjmOsBO82KCcvAQkr6svoE8aBidER1JZiSxo5QZ1oPRSN7vzqTpm_MVNwgT_VT70H21Jhl/h120/bao+mat+facebook.png'/> </span> <div class='sl-description'> <h3 class='tz_title_slide'> <a href='http://mxhviet.com/thu-thuat-facebook/serie-huong-dan-bao-mat-nick-facebook-an-toan-2015'>Serie hướng dẫn bảo mật nick facebook 2015</a> </h3> <p class='hidden-phone'> Serie hướng dẫn bảo mật tài khoản facebook một cách an toàn để tránh bị hacker đánh cắp thông tin và làm những hành động xấu.... <span class='tz_readmore'> <a class='font-bold' href='http://mxhviet.com/thu-thuat-facebook/serie-huong-dan-bao-mat-nick-facebook-an-toan-2015'>Xem chi tiết</a> </span> </p> </div> </div></li>  


Trong code bạn sẽ tìm thấy đoạn mã trên, ở chỗ màu đỏ là chỗ bạn cần chỉnh sửa lại.Ở đây sẽ có các mục sau:

<img alt=’Serie dạy kiếm tiền trên Youtube‘ src=‘https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh042nlGd8n9Dq1IeSyiXGFbbNKNWQwiogq9Zp1BJ-nKJDe2XDjUEq4EAVkiybxBvq1cY823WCWA4RsWaIrjnnDlxLuOzQW6NILrL-Xh_LTKCqexEck4clE2jFAK3h3T2NndT-zi9R5pK9T/h120/serie-day-hoc-kiem-tien-tren-youtube.jpg‘/>

Đây chính là cái ảnh thứ nhất cả slide đó, bạn thay vào đường link ảnh của bạn là được,bạn có thể upload ảnh lên trên blog rồi lấy đường link bỏ vào đây.

Đây là đoạn văn ngắn giới thiệu nằm dưới ảnh của Slide:

<p class=’hidden-phone’>
Hướng dẫn kiếm tiền trên Youtube cho những người mới bắt đầu , chưa có kinh nghiệm.Bao gôm 8 bài viết và 8 video hướng dẫn chi tiết tường bước…
<span class=’tz_readmore’>

Đây là đường link đẫn đến bài viết khi bấm vào tiêu đề:

<h3 class=’tz_title_slide’>
<a href=’http://mxhviet.com/hoc-kiem-tien-youtube/gioi-thieu-serie-hoc-kiem-tien-tren-youtube‘>Serie dạy kiếm tiền trên Youtube Miễn Phí</a>
</h3>

Đây là đường link dẫn đến bài viết khi bấm vào Xem chi tiết:

<a class=’font-bold’ href=’http://mxhviet.com/hoc-kiem-tien-youtube/gioi-thieu-serie-hoc-kiem-tien-tren-youtube‘>Xem chi tiết</a>

Khi bấm vào chữ Xem chi tiết ở Slide thì nó sẽ chuyển đến đường link này, bạn thay bằng đường link bài viết của bạn nhé.

Phần code còn lại chính là cái ảnh slide thứ 2 nhé,bạn cũng chinh y chang như trên và nếu muốn thêm 1 ảnh nữa trong slide thì bạn copy code từ đoạn <!–ảnh Slide thứ nhất –> đến đoạn <!–Kết thúc ảnh Slide thứ nhất –> bỏ xuống phía dưới nữa rồi chỉnh lại hình ảnh,liên kết cho nó là được.

Thế là xong phần Menu và Slide rồi, bây giờ bạn vào blog bạn đi sẽ thấy, nó đã hoàn chỉnh 80% rồi đó.Công việc bây giờ của bạn là viết bài đăng lên thôi, để viết bài thì bạn xem phần 4 nhé.Mình sẽ hướng dẫn các bạn cách viết bài và làm cho nó chuẩn Seo để bạn có thể tối ưu blog bạn có thứ hạng trên Google nó giống như việc Seo video youtube mà mình đã hướng dẫn rồi đó.


Share on Google Plus
    Facebook Comment
    Blogger Comment

1 nhận xét :

  1. Chào bạn, bạn có nhận chỉnh sửa template không, nếu có xin hồi âm địa chỉ:
    phantu62@gmail.com
    Cảm ơn bạn.

    Trả lờiXóa