Subscribe:

Ads 468x60px

.

menu

Tuesday, November 19, 2013

Cara membuat Tempelate blog dengan Mudah dan cepat

ini nih gan cara buat tempelate  blog, yakin deh lo pada langsung bisa :D, nggk percaya? cekidot

1. Login ke akun blogger lo gan
2. kemudian Pilih Template -> Edit Template (Backup terlebih dahulu template lo)
3. Cari kode seperti berikut ini :

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

Hapus kode diatas dan ganti dengan kode dibawah ini :

<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

4. Lalu cari dan ganti kode </html> menjadi </HTML>
5. Menghapus comment declaration yang ada pada CSS, cari kode dash ( ----- ) dan hapus semuanya. contoh:

/* ----------------------
Name: 4JIE BLOG TEMPLATE EDITION
Author : Fajri Alhadi
-------------------------*/

Menjadi

/* Blogger Template Style
Name: 4JIE BLOG TEMPLATE EDITION
Author : Fajri Alhadi*/


6. Cari dan hapus meta tag ini <b:include data=’blog’ name=’all-head-content’/>
7. Menghapus Navigasi Bar bawaan blogger, cari kode <body> dan tambahkan kode berikut tempat diatasnya

<!-- <body><div></div> -->


Nanti akan muncul notifikasi untuk menghapus widget, silahkan pilih hapus

8. Menghapus Icon Quickedit atau gambar obeng, cari kode <b:include name='quickedit'/> kalo sudah ketemu hapus semua, jangan lupa jika kelak menambahkan widget baru hapus lagi kode tersebut.

9. Menghapus Post Icon, cari kode berikut

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>


Ganti dengan kode berikut ini

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
</b:if>
</span>
</div>


10. Menambahkan jenis type="text/javascript" pada semua kode JavaScript dan type type="text/css" untuk semua css yang ada, baik di templates, posting maupun di widget. Contoh:

<script src="https://javascript16.googlecode.com/files/sumbercopas.js"></script>
<script src="https://javascript16.googlecode.com/files/coba.css"></script>


Ubah Menjadi seperti kode dibawah ini

<script type="text/javascript" src="https://javascript16.googlecode.com/files/sumbercopas.js"></script>
<script type="text/css" src="https://javascript16.googlecode.com/files/coba.css"></script>


11. Menyembunyikan page navigation di halaman utama, cari kode <b:include name='nextprev'/> ganti dengan kode berikut

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>


12. Hapus semua meta tag yang membuat template error/ tidak valid dan ganti dengan meta tag valid dibawah ini.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<meta content='Kumpulan Informasi Internet' name='description'/>
<meta content=’Keyword blog anda’ name=’keywords’/></b:if>
<link href=’http://bloganda.blogspot.com/atom.xml’ rel=’alternate’ title=’Atom’ type=’application/atom+xml’/>
<link href=’http://bloganda.blogspot.com/feeds/posts/default’ rel=’alternate’ title=’RSS Feeds’ type=’application/atom+xml’/>
<link href=’http://www.blogger.com/openid-server.g’ rel=’openid.server’/>
<link href=’http://bloganda.blogspot.com/favicon.ico’ rel=’icon’ type=’image/x-icon’/>
<meta content=’kode verifikasi dari google webmaster’ name=’google-site-verification’/>
<meta content=’kode verifikasi alexa’ name=’alexaVerifyID’/>
<meta content=’kode verifikasi dari bing’ name=’msvalidate.01&#8242;/>
<meta content=’Nama Anda’ name=’Author’/>


13. Mengatasi error css bundle templates, hapus code <b:skin><![CDATA[ ganti dengan kode berikut

<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' /> &lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]] <style>


14. Menyembunyikan widget dihalaman utama

<b:if cond='data:blog.homepageUrl != data:blog.url'>
Widget Yang ingin disembunyikan
</b:if>


15. Taruh Script dibawah dibawah tepat dibawah <head>

<!--[if IE]><script type='text/javascript' src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->


16. Pada saat posting gambar hapus atribut Anchor='1' dan Border='0' ganti tambahkan atribut alt dan title. contoh berikut adalah format gambar standart blogspot

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmdZGfZLtuszkgVE47G86bw9gPSEoWK1_toUrn3fXxF1tqEd_ZwOiI5F9hEd_63ymNuTfrCtF4LLtTmihDqSGcRiqyLbME1DmE_yRBDDMPOAerbn6yaxwpV6Vc9hLkBRtYjbep6awTRXpG/s1600/4jiee.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmdZGfZLtuszkgVE47G86bw9gPSEoWK1_toUrn3fXxF1tqEd_ZwOiI5F9hEd_63ymNuTfrCtF4LLtTmihDqSGcRiqyLbME1DmE_yRBDDMPOAerbn6yaxwpV6Vc9hLkBRtYjbep6awTRXpG/s1600/4jiee.png" /></a></div>


Ubah menjadi

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmdZGfZLtuszkgVE47G86bw9gPSEoWK1_toUrn3fXxF1tqEd_ZwOiI5F9hEd_63ymNuTfrCtF4LLtTmihDqSGcRiqyLbME1DmE_yRBDDMPOAerbn6yaxwpV6Vc9hLkBRtYjbep6awTRXpG/s1600/4jiee.png" style="margin-left: 1em; margin-right: 1em;"><img alt="4JIE BLOG" title="Blogger Tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmdZGfZLtuszkgVE47G86bw9gPSEoWK1_toUrn3fXxF1tqEd_ZwOiI5F9hEd_63ymNuTfrCtF4LLtTmihDqSGcRiqyLbME1DmE_yRBDDMPOAerbn6yaxwpV6Vc9hLkBRtYjbep6awTRXpG/s1600/4jiee.png" /></a></div>


17. Terakhir, Jangan pernah menggunakan tag <center> untuk membuat tulisan ataupun gambar rata tengah, pakailah kode berikut jika tidak ingin mengakibatkan error html baik di postingan maupun di widget html.

<div style="text-align: center;">Isi Widget</div>


Simpan dan selamat mencoba, buat yang sudah mencoba boleh berbagi pengalaman ke saya melalui komentar dibawah ini :)


Sumber : http://4-jie.blogspot.com/2013/05/cara-membuat-template-blog-valid-xhtml.html#ixzz2aJ8E3vLJ
© COPYRIGHT 2013

1 komentar: