Cara Membuat Tema Blogspot Bagian 1 Tahap Perencanaan

Posted by Published on 0 comments

Setelah membuat struktur dokumen HTML untuk tema Blogspot yang hendak dibuat, langkah selanjutnya adalah merencanakan susunan rancangan dasar yang ingin ditampilkan.

Rencananya desain tema Blogspot ini nantinya akan terdiri dari 4 baris, yaitu:

  1. Header yang akan diisi dengan judul blog dan deskripsi blog
  2. Content utama yang nantinya akan dibagi menjadi 2 kolom, yaitu kiri untuk postingan dan kanan untuk sidebar
  3. Footer yang akan dibagi menjadi 3 kolom untuk 3 widget
  4. Copyright yang akan berisi copyright blog

Setelah merencanakan susunan rancangan dasar tersebut, kemudian dibuatlah pembagian menurut struktur HTML masing-masing. Struktur HTML tersebut akan menjadi seperti ini:

<!--baris 1-->
<header>
<!--judul blog-->
</header>
<!--baris 2-->
<div class='row'>
<div class='col-md-7'>
<main>
<!--postingan-->
</main>
</div>
<div class='col-md-5'>
<aside>
<!--sidebar-->
</aside>
</div>
</div>
<!--baris 3-->
<div class='row'>
<div class='col-md-4'>
<!--widget 1-->
</div>
<div class='col-md-4'>
<!--widget 2-->
</div>
<div class='col-md-4'>
<!--widget 3-->
</div>
</div>
<!--baris 4-->
<footer>
<!--copyright-->
</footer>

Hapus tag <!--tag html--> dan ganti dengan tag HTML di atas sehingga secara keseluruhan syntax tersebut akan menjadi seperti ini:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='1.0.0' expr:class='data:blog.languageDirection' expr:dir='data:blog.languageDirection' 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>
  <meta content='text/html; charset=utf-8' http-equiv='Content-type'/>
  <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
  <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
<b:skin version='1.0.0'><![CDATA[

]]></b:skin>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
<b:include data='blog' name='google-analytics'/>
</head>
<body>

<!--baris 1-->
<header>
<!--judul blog-->
</header>
<!--baris 2-->
<div class='row'>
<div class='col-md-7'>
<main>
<!--postingan-->
</main>
</div>
<div class='col-md-5'>
<aside>
<!--sidebar-->
</aside>
</div>
</div>
<!--baris 3-->
<div class='row'>
<div class='col-md-4'>
<!--widget 1-->
</div>
<div class='col-md-4'>
<!--widget 2-->
</div>
<div class='col-md-4'>
<!--widget 3-->
</div>
</div>
<!--baris 4-->
<footer>
<!--copyright-->
</footer>

</body>
</html>

Posted by

Published on

Edit This

Categorized in , , , ,

0 Readers Interaction:

Post a Comment