For ever: Hướng dẫn tạo mẫu blogspot

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

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

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)

For ever

Trang

Thứ Năm, 29 tháng 10, 2015

Hướng dẫn tạo mẫu blogspot