Kode HTML dan CSS Template Paling Dasar

Ini adalah kode html dan css paling dasar atau paling minimal untuk sebuah template blogspot. Maksudnya begini, cukup copy-paste semua kode ini pada template editor blog kemudian upload maka jadilah blog anda. Simple. Sangat simple, namun tentu tampilannya pun masih belum jelas. Posisi semua elemen akan berjejer dari atas ke bawah. Sidebar letaknya belum di kanan atau di kiri. Warnanya masih hitam dan putih. Pokoknya sederhana sekali. Boleh dikata tidak ada bentuknya. Hanya teks saja. Jadi anda tidak perlu menulis kode yang panjang-panjang untuk membentuk halaman postingan. Cukup dengan baris kode,

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

baris kode lainnya akan di-generate otomatis saat anda selesai meng-upload-nya. Jadi, kode yang simple ini nanti akan menjadi panjang setelah diuunggah.

Kode HTML paling dasar blog

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name    : Modtemplate
Designer: Lalu Abd.Rahman
URL     : www.laluabdrahman.blogspot.com
----------------------------------------------- */

/* Di sini tempat meltakkan kode CSS */

]]></b:skin>
</head>

<body> 
<!-- ini kode judul blog -->
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>

<!-- ini kode untuk post blog -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

<!-- ini kode Sidebar -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>

<!-- ini kode Footer -->
<b:section class='footer' id='footer'/>
</body>
</html>
.. Simple kan?

Jelasnya seperti ini cara upload template blog.
Masuk ke dashboard blogger.com anda. Sebaiknya buat satu blog untuk utak-atik, jadi bukan blog utama.



  1. Klik Template
  2. Klik Edit HTML
  3. Hapus semua isi HTML lalu Copy-Paste kode HTML paling dasar blog di atas
  4. Klik Simpan template
  5. Selesai
Selamat belajar.

Comments

Post a Comment

Popular posts from this blog

Perbedaan JavaScript dan jQuery Beserta Contoh

Cara Menggunakan :before dan :after

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template