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

Gone Wild · 21/12/24 lúc 22:04

Diễn Đàn SEO - vnseo.edu.vn -

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:

HTML:

<?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

HTML:

<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: http://www.webtemplategenerator.com/ hoặc http://csslayoutgenerator.com/ hoặc google search: html layout generator có nhiều trang lắm ^^

Viết CSS thì vào đây: http://css3generator.com/ hoặc http://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é: http://www.w3schools.com/css/css_howto.asp hoặc xem video này có thể sẽ giúp ích cho các bạn: http://www.youtube.com/watch?v=ihCcsWJvjeI

Các bạn có thể đặt trực tiếp các code css vào trong

HTML:

<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

HTML:

<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:

HTML:

<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.

Đây là blog mình vừa tạo: Blogspot của mình

Đây là code trong phần Chỉnh sửa HTML

HTML:

<?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>
<link href='https://googledrive.com/host/0B8NXN9kJ4j8nbmZPWm4yM3p1cTA' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B8NXN9kJ4j8nOEptYllzTERFSGM' type='text/javascript'/>


<b:skin><![CDATA[

]]></b:skin>

<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='Nguyễn Huy Tuấn | Search Engine Optimazation | Marketing Online' name='description'/>

<meta content='SEO, Marketing online, Social Marketing, Mobile Marketing' name='keywords'/>

<b:else/>

<title><data:blog.pageName/> - <data:blog.title/></title>

<meta expr:content='data:blog.pageName + &quot; - Mô tả về blog của bạn&quot;' name='description'/>

<meta expr:content='data:blog.pageName + &quot;, Các từ khóa trên blog của bạn&quot;' name='keywords'/>

</b:if> 

</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:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
          if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: 'https://www.blogger.com/navbar.g?targetBlogID\759191728047149984344\46blogName\75Gone+Wild+%7C+SEO+%7C+SEM\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://huytuan89.blogspot.com/search\46blogLocale\75vi\46v\0752\46homepageUrl\75http://huytuan89.blogspot.com/\46blogFollowUrl\75https://plus.google.com/115109256216466909515\46vt\75-6572138193839667256',
                where: document.getElementById(&quot;navbar-iframe-container&quot;),
                id: &quot;navbar-iframe&quot;
            });
          }
        });
      &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
  </b:widget>
</b:section>


	<div id='masterhead'>
    	<div id='mh-left'>
        Gone Wild
        </div>
        <div id='mh-right'>
            <ul class='social'>
            <a href='http://facebook.com/huytuan89' target='_blank'><li class='facebook-hover social-slide'/></a>
            <a href='http://twitter.com/hh_cc' target='_blank'><li class='twitter-hover social-slide'/></a>
            <a href='https://plus.google.com/+GoneWild-huytuan' target='_blank'><li class='google-hover social-slide'/></a>
            <a href='http://pinterest.com/huytuan89' target='_blank'><li class='pinterest-hover social-slide'/></a>
            <a href='#' target='_blank'><li class='instagram-hover social-slide'/></a>
            <a href='#' target='_blank'><li class='tumblr-hover social-slide'/></a>
            </ul>
        </div>
    </div>
	<div id='container'>
   	  <div id='header'>
    		<section class='dg-container' id='dg-container'>
				<div class='dg-wrapper'>
                  <a href='#'><img alt='kiến thức SEO' src='http://4.bp.blogspot.com/-y3UKyB71nW0/Us-0G0gZ4II/AAAAAAAAAHw/pMjzPq8kK34/s1600/seo-optimizacija.jpg'/><div>Search Engine Optimazation</div></a>
              <a href='#'><img alt='social marketing' src='http://3.bp.blogspot.com/-gNYKT1_WwQM/Us-0GdqzEZI/AAAAAAAAAHs/sK6PKsI4khE/s1600/Social-Media.jpg'/><div>Social Marketing</div></a>
              <a href='#'><img alt='mobile marketing' src='http://4.bp.blogspot.com/-HMjNuTE0Jkw/Us-0GylW4hI/AAAAAAAAAH8/i2zcrJNAIxQ/s1600/mobile-marketing.jpg'/><div>Mobile Marketing</div></a>
					
				</div>
				<!--nav>	
					<span class="dg-prev">&lt;</span>
					<span class="dg-next">&gt;</span>
				</nav-->
			</section>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
		<script src='https://googledrive.com/host/0B8NXN9kJ4j8na2NDQWNoRndZamc' type='text/javascript'/>
		<script type='text/javascript'>
				$(function() {
					$('#dg-container').gallery({
					autoplay	:	true
					});
				});
				
				</script>
    	</div>
    	<div id='content'>
        	<div id='left-content'>
            	<br/>
            	<br/>
           <br/>
           <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
               
               
            </div>
        	<div id='sidebar'>
                <h2 id='h2-sidebar'> Menu</h2>
            	<div id='xsidebar'>
                <ul>
                	<li> <a href='http://huytuan89.blogspot.com'> Trang chủ </a>		</li>
                    <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                <br/>
                </ul>
                 
            
                </div>
            </div>
       
               
        </div>
    
    </div>
    <div id='footer'><br/>
    	<br/>
     Gone Wild - 2013 - Let's share to be shared!</div>


</body>

</html>

Đây là css và js mình lưu trên google driver

HTML:

https://drive.google.com/file/d/0B8NXN9kJ4j8nOEptYllzTERFSGM/edit?usp=sharing
https://drive.google.com/file/d/0B8NXN9kJ4j8na2NDQWNoRndZamc/edit?usp=sharing
https://drive.google.com/file/d/0B8NXN9kJ4j8nbmZPWm4yM3p1cTA/edit?usp=sharing

Đây là toàn bộ source blog của mình. Bạn nào cần thì lấy xài nhé. Chỗ nào không làm được các bạn để lại comment sẽ có các bạn khác hỗ trợ các bạn

HTML:

cavath11 · 11/1/14

cái này rất cần để tạo ra blog theo ý thích của mình. cảm ơn chủ thớt nhé!!

mrkalen · 16/1/14

bài viết rất hữu ích nhưng có vấn đề là thay đổi 1 cách từ từ, đừng thay đổi liên tục, không thì rất khó để SEO nhé

namhaianh · 12/2/14

hay lắm,mình đang cần mà tìm mãi không thấy chỗ nào viết cụ thể như bạn.

lifeinheaven · 13/2/14

mình toàn dùng template free hoặc dùng template sẵn của google, chưa bao giờ thử làm giống bạn, hôm nào rảnh phải làm 1 blog chơi mới đc

chi chi · 6/4/14

cái này rất hay em không biết nhiều về code nên rất khó khăn trong việc chỉnh sửa html ,mỗi lần gặp vấn đề với site là phải mất đến vài ngày nghiên cứu,cám ơn bác nhiều! em đã có thêm kiến thức mới

quankthn · 10/4/14

bài viết bổ ích đó chủ thớt, mình sẽ thực hành luôn xem sao

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

Gone Wild Moderator Thành viên BQT Mod

Bài viết cùng chuyên mục:

cavath11 PageRank 0 Member

mrkalen PageRank 1 Member

namhaianh PageRank 1 Member

lifeinheaven PageRank 1 Member

chi chi PageRank 1 Member

quankthn PageRank 1 Member

Chia sẻ trang này

Dien Dan SEO Viet Nam

Liên kết SEO

Thủ thuật SEO

Diễn Đàn SEO Google

Tìm kiếm hữu ích

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

Gone Wild Moderator Thành viên BQT Mod

Bài viết cùng chuyên mục:

cavath11 PageRank 0 Member

mrkalen PageRank 1 Member

namhaianh PageRank 1 Member

lifeinheaven PageRank 1 Member

chi chi PageRank 1 Member

quankthn PageRank 1 Member

Chia sẻ trang này