Buka notepad++ copy code di bawah ini dan pastekan di notepad++
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML expr:dir='data:blog.languageDirection'> <head> <meta charset='utf-8'/><meta content='NC6O9fSIQSDlQxp6VLqcPfQGLPW7GJw_s54TpMYWvA0' name='google-site-verification'/> <meta content='RucqLpVyWvI3DgAYNFxL99JNdqs' name='alexaVerifyID'/> <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <meta content='Sekumpulan angka dan aksara yang bergelantungan di depan mata anda' name='description'/> <meta content='Tutorial Blogging, Blogspot, Template Blog, Template Hacker, Template Seo Friendly, Template Valid CSS3 HTML5, CSS3, Java script, JSON, HTML5, Validasi, Kode' name='keywords'/> <b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> - <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.url' rel='canonical'/> <link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/> <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/> <link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/> <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.postImageThumbnailUrl'> <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "archive"'> <meta content='noindex,follow' name='robots'/> <meta content='noindex,follow' name='googlebot'/> </b:if><b:skin><![CDATA[/ CSS ]]></b:skin> </head> <body> </body> </HTML>
Letakkan code ini di bawah <body>
<div class='outer-hz' id='outer-hz'> <header class='header-wrapper cl cf' itemscope='itemscope' itemtype='http://schema.org/WPHeader'> <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'> <b:widget id='Header1' locked='false' title='(Header)' type='Header'> </b:widget> </b:section> </header> </div>
Letakkan code ini di bawah </header>
<b:section class='main-wrapper' id='main-wrapper' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> </b:widget> </b:section>
letakkan code ini di bawah </b:section>
<aside itemscope='itemscope' itemtype='http://schema.org/WPSideBar'> <b:section class='sidebar' id='sidebar-right' showaddelement='yes'> </b:section> </aside>
letakkan kode ini di bawah </aside>
<footer itemscope='itemscope' itemtype='http://schema.org/WPFooter'> <b:section class='footer' id='footer' showaddelement='yes'> </b:section> </footer>
letakkan code ini di atas ]]></b:skin>
body { background: #eceef5; margin: 0; padding: 0; color: #797979; font-family: "Arial",Tahoma, sans-serif; font-weight: 400; font-size: 12px; } .outer-hz{ background:#fff; max-width:960px; width: 100%; margin: 0 auto; padding: 0; } /* dan seterusnya sesuai dengan elemen yang sobat buat sebelumnya.. */
Ini adalah kerangka awal, anda tinggal memberi CSS untuk sidebar, footer, header.
sesuaikan kode verifikasi, description, dll di dalam meta tag
47 comments
Wah makasih tutor nya mau belajar lah
26 March 2014 at 18:17Silahkan sob :D
26 March 2014 at 18:19asik ada tutor buat template nih kebetulan pengen belajar bikin templkate
26 March 2014 at 18:47Silahkan, mas :)
26 March 2014 at 19:04Ternyata ada kerangkanya, saya ingin sekali membuat template sendiri. Tapi bingung untuk memulainya, sangat bermanfaat gan :)
26 March 2014 at 21:03heheh... iya gan, terimakasih sudah berkunjung :)
27 March 2014 at 01:50Sama-sama gan, oh iya ditambahi ya ? Tadi malam kayaknya gak seperti itu :D
27 March 2014 at 08:37Iya, ganti meta tag sama outer-wrapper
27 March 2014 at 16:03makasih ilmunya gan....btw, butuh materi tutorial gan
27 March 2014 at 17:08Iya, sama-sama. Heheh... kalau materi tutorial, sebisanya aja :)
27 March 2014 at 17:12Notepadnya disimpan Save as >> trus filenya all files >> nah memberi namanya .apa
27 March 2014 at 18:53contoh tempe baru.html atau
maaf rumid
Nggak usah di save nggakpapa, kala udah di edit, copy lalu masuk ke Setting Template.
27 March 2014 at 19:16TQ
27 March 2014 at 19:25Iya gan :) sama-sama ;)
27 March 2014 at 19:35Makasih mas saya mau coba dulu ya
27 March 2014 at 19:54Semoga berhasil :)
27 March 2014 at 20:21wah bagus mas, coba dulu mas , siapa tau bisa buat template keren
28 March 2014 at 15:04Heheh... buatan sendiri selalu lebih bagus :D
28 March 2014 at 15:45bisa kaga ya ane bikin template susah pasti :D
29 March 2014 at 12:20Mudah, paling kalau frustasi banting laptop :ng
29 March 2014 at 12:21wah lumayan nambah ilmu, makasih gan :)
29 March 2014 at 12:37Iya, sama-sama. Senang bisa berbagi :)
29 March 2014 at 13:03mantap gan , ane mulai ngerti cara membuat template :)
29 March 2014 at 13:48Rajin berkunjung, pasti makin pintar. wkwkw
29 March 2014 at 13:51Wah Mantap Tuh Kk, Jadi Kepengen Nyoba Buat Bikin Template Nuatan Sendiri :-bd
29 March 2014 at 15:59Heheh... selamat menciba :D jangan frustasi :frustasi:
29 March 2014 at 16:03ini jadinya berapa kolom?
30 March 2014 at 02:492 Kolom sob.
30 March 2014 at 03:00ilmu baru nimbruk disini dulu
30 March 2014 at 06:14heheh.. ilmu lama kok sob :D
30 March 2014 at 06:21Jangan sob, kasian hehe :D
30 March 2014 at 10:00Jadi lebih terarah nih pandangan untuk membuat template sendiri :)
30 March 2014 at 10:01Bukan masalah kasihan, tapi belinya mahal :frustasi:
30 March 2014 at 10:21Iya juga sih =D
30 March 2014 at 10:27Bagaimanapun, buatan sendiri selalu membanggakan :-d
30 March 2014 at 11:23Pas banget, ane lagi mau belajar buat template nih, Thanks tutornya gan
2 April 2014 at 18:17Silahkan belajar, semoga berhasil :-bd
2 April 2014 at 18:20Pas banget, ane lagi pengen belajar buat template. Thanks gan
2 April 2014 at 18:20Oke, sob :D sering-sering berkunjung ^_^
3 April 2014 at 17:29Template saya?
3 April 2014 at 19:41Wah Wajin dicoba nih bagi seorang blogger newbie kaya saya :D
5 April 2014 at 06:19Aduh, udah nggak newbie lagi --,
5 April 2014 at 13:47ini berapa kolom?
7 April 2014 at 05:19mantap banget om, ane pengen belajar buat template sendiri tapi ane tidak bisa
8 April 2014 at 15:05Di coba dulu gan :D dulu saya juga nggak bisa apa-apa.
8 April 2014 at 15:13Coba Praktek Ga :D
12 April 2014 at 15:32mantap gan
27 April 2014 at 23:11Don't give us spam and active link.