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

Thảo luận trong 'SEO Blogspot' bắt đầu bởi Gone Wild, 10/1/14.

  1. Lượt xem: 6,643

    Gone Wild Moderator Thành viên BQT Mod

    Tham gia ngày:
    20/11/13
    Bài viết:
    340
    Đã được thích:
    101
    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 :D

    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

    [​IMG]

    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:
    
    
     
    Chỉnh sửa cuối: 10/1/14
    #1
    manhcuong2408 thích bài này.
  2. cavath11 PageRank 0 Member

    Tham gia ngày:
    5/1/14
    Bài viết:
    3
    Đã được thích:
    0
    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é!!
     
    #2
  3. Bluesky Banned Thành viên BQT Smod

    Tham gia ngày:
    30/9/13
    Bài viết:
    1,090
    Đã được thích:
    181
    sẽ lưu lại để từ từ ngâm cứu :D
     
    #3
  4. maimaivaduynhat http://www.chungcugreenstar.biz/ Thành viên BQT Member

    Tham gia ngày:
    13/7/13
    Bài viết:
    285
    Đã được thích:
    100
    Không phải css nào cũng đưa được ra bên ngoài đâu bạn nhé tuỳ vào template
     
    #4
    Gone Wild thích bài này.
  5. mrkalen PageRank 1 Member

    Tham gia ngày:
    7/1/14
    Bài viết:
    84
    Đã được thích:
    8
    bài viết rất hữu ích :cool: 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é :confused:
     
    #5
  6. namhaianh PageRank 1 Member

    Tham gia ngày:
    29/1/14
    Bài viết:
    107
    Đã được thích:
    7
    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.
     
    #6
  7. lifeinheaven PageRank 1 Member

    Tham gia ngày:
    12/2/14
    Bài viết:
    35
    Đã được thích:
    2
    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 :D
     
    #7

Chia sẻ trang này