Home
About
Editor Web OL
Code Learn
Html - 5
Css - 3
Code StyleStruktur Template Blogger
Oke, Kali ini kita lanjutkan cara membuat template blogger sederhana secara offline bagian+1, yang dapat di jadikan dasar hingga terbentuknya sebuah template yang terstruktur rapi.Kita harus mengenal gambaran umum struktur template blogger yang jika saya bahasakan sendiri pembagiannya antara lain sebagai berikut :
- Head Meta,
- Style CSS, dan
- Body Html.
- Head Meta
Head meta berisi identitas blog, yang di dalamnya mencakup title dan meta tag blog kamu.
Peranannya cukup penting dalam posisi pencarian Search Engine. Dalam beberapa kasus, posisi meta tag di buat se SEO mungkin, agar trafik blog meningkat dan semakin bersahabat dengan mesin pencari Θ.
Contoh bagian Head Meta :
<?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' 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:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<meta content='your description here' name='description'/>
<meta content='keyowrd1, keyowrd1, etc..' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCTD-eIROkC3yIq5OvdWdzQsLrGtW9-MbWUFL5oNJMrVg2WycRJkuU_HK4Ke5hiZRypV_sn0g6ZMat20OPcOXgj8vPYbnHTm45nUx0bXNCvEv8vscMg1kdl-zY5mRZLucEYnU_BP8GSg/s1600/Gear.png' rel='shortcut icon' type='image/x-icon'/> - Style CSS
Style CSS merupakan bagian yang cukup penting yang sangat berpengaruh pada tampilan blog. Bagian ini di susun dari bahasa CSS.
Dari sinilah sumber pengaturan tinggi, lebar, warna, garis, gaya tulisan, dan sebagainya berasal. Atau dengan kode seperti .posting {color:#55aa44;},#wrapper {backgroud-image:url(http://...);} dan sebagainya.
Style css dapat di tulis dengan 3 cara yaitu :
- Menggunakan sumber css dari web direktori lain :
Contoh :
<link rel="stylesheet" href="http://alamat.css" type="text/css" />
- Di tulis di antara kode tag <b:skin><![CDATA[/* dan ]]></b:skin>
Contoh :
<b:skin><![CDATA[/*
body {}
.post {}
#sidebar {}
@media {}
]]></b:skin>
</head> - Di tulis dalam apitan Kode Tag HTML
Contoh :
<div style='font-style:italic;'>contoh css dalam body</div>
- Menggunakan sumber css dari web direktori lain :
- Body Html
Body html pada umumnya di tulis dengan bahasa html. Bagian ini mempunyai peranan penting sebagai output kode template yang kita tulis ke browser. Jadi html boleh di katakan sebagai penampil grafik struktur blog yang kita buat.
Kode html template blogger terletak antara tag <body> dan </body>.
Contoh bagian body html template blogger :
<body>
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
<!-- sesi penting bloogger 1. heading -->
<b:section class='header' id='kepala-blog' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Best Template (Header)' type='Header'/>
</b:section>
<!-- sesi penting bloogger 2. Blog Posting-->
<b:section class='post' id='blog-posting' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<!-- sesi penting bloogger 3. sidebar-->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='ads1' type='HTML'/>
</b:section>
<!-- sesi penting bloogger 4. footer-->
<b:section class='footer' id='sidebar' preferred='yes'>
<b:widget id='Footer' locked='false' title='footer' type='footer'/>
</b:section>
</body>
Keterangan :
* kalimat yang berwarna hijau adalah sesi penting dalam body template blogger
Baca lanjut : Judul: cara membuat template blogger sederhana secara offline bagian+3.
Tidak ada komentar:
Posting Komentar
Berkomentarlah jika ada pertanyaan seputar artikel ini dengan santun bahasa Indonesia yang baik.