Cara Membuat Template Blog sendiri untuk pemula tutorial lengkap

Cara Membuat Template Blog sendiri untuk pemula tutorial lengkap - hello sobat, pada posting kali ini saya akan membagikan tentang Belajar Cara Membuat Template blog, dikususkan untuk pemula jika anda sudah mahir tidak ada salahnya meluangkan waktu untuk membaca juga.

sebelumnya jika anda belum membaca artikel bagian 1 untuk membuat template blog, sihlakan baca artikel pendahuluannya disini : Cara Membuat template blog bagian #1
disini saya ajarkan secara otodidak agar lebih cepat mengerti tentunya Belajar Membuat Template Blog sendiri, untuk permulaan anda tidak harus tau kegunaan tiap-tiap Code CSS dan HTML cukup dengan mengetahui letak-letak mereka berada pada halaman coding template dan saya yakin dengan itu anda dapat mengerti kegunaan dari Code HTML dan CSS.

 Cara Membuat Template Blog sendiri untuk pemula tutorial lengkap

#1 Membuat Template Blog.

untuk tahapan awal saya jelaskan kerangka-kerangka yang terdapat pada blog, pada umumnya sebuah blog memiliki 1 header 1 posting-wrapper 2 sidebar wrapper dan 1 footer-wrapper, untuk tutorial kali ini agar lebih mudah ,saya akan mengajarkan anda membuat template dengan 1 sidebar saja.

anda dapat melihat gambar kerangka tata-letak template blog dibawah ini :
Belajar Cara Membuat Template Blog sendiri untuk pemula

keterangan :

1. Header : merupakan tempat dimana Judul blog anda berada ,serta dapat anda tempatkan logo blog disana, dan disebelahnya terdapat header ads yang merupakan bagian dari widget header . disini untuk anda memasang sebuah banner / iklan.

2. Main-wrapper : merupakan tempat dimana artikel / posting anda berada nantinya. setiap anda melakukan update artikel akan terisi dan keluar di main-wrapper. main wrapper juga dapat di atur pada halaman setelan blog. 
 
3. Sidebar-wrapper : merupakan area disamping kanan ataupun kiri dari main wrapper. dikhususkan untuk widget alternatif seperti widget populer posting, artikel arsip, widget followers anda, dan widget lainnya bisa anda tempatkan diarea ini. dan untuk peletakkannya anda dapat memasangnya pada menu TATA LETAK BLOG, saya rasa anda sudah tau.

4. widget main bottom posting : merupakan tempat widget sama halnya dengan sidebar wrapper hanya saja terletak di bagian bawah main wrapper.

5. footer-wrapper : merupakan tempat dimana anda juga bisa meletakkan widget dan memasang hal lainnya disini terutama dibawahnya pastinya terdapat Credit blog anda.
id element = main-wrapper, footer-wrapper, header dlln. nama - nama id element HTML ini tidak harus berpatokan dengan yang saya terapkan pada tutorial ini, namun anda dapat membuat / memberi nama sendiri sesuai dengan keinginan anda, yang penting id element HTMLnya sama dengan id element CSS, agar tidak salah menerapkannya, terutama dalam kode "class" dan "id".
class kode awalannya = "." titik.
id kode awalannya = "#" hastag.

#2 Penerapan Struktur Koding template.

mulailah dengan masuk ke menu template Blogger anda, klik TEMA dan pilih edit HTML Terdapat ribuan code HTML ,CSS, serta Java script disana, itu adalah code dari template blog yang sebelumnya anda gunakan. cukup seleksi / blok semua code tersebut, dan DELETE. maka tidak terdapat code yang memusingkan anda lagi , nah disini nantinya akan ditempatkan code baru untuk anda mulai membuat suatu kerangka-kerangka blog anda.

Untuk memulainya anda dapat menempatkan code dibawah ini, letakkan di tempat code tersebut.
Kode ini merupakan struktur HTML awal dari blog, terdiri dari type xml, HTML, Head, dan body, dibawah Head Terdapat Meta - meta tag yang berfungsi sebagai pengenal atau identitas blog anda, disana bisa anda letakin Meta descripsi, meta keyword blog anda, maupun Code - code vertifikasi dari webmaster.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
   <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
   <meta content='noindex,nofollow' name='robots'/>
    </b:if>
<b:include data='blog' name='all-head-content'/>
<meta content='####################' name='google-site-verification'/>
<meta content='####################' name='msvalidate.01'/>
<meta content='####################' name='alexaVerifyID'/>
<meta content='index, follow, noodp, noydir' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='Mas Idyn' name='author'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='index, follow, snipet' name='googlebot'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <meta content='website' property='og:type'/>
 <meta expr:content='data:blog.title' property='og:site_name'/>
 <meta content='id_id' property='og:locale'/>
 <meta expr:content='data:blog.pageTitle' property='og:title'/>
 <meta expr:content='data:blog.metaDescription' property='og:description'/>
 <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
 <title><data:blog.pageTitle/></title>
 <meta content='KEYWORD+BLOG_ANDA' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <meta content='article' property='og:type'/>
 <meta expr:content='data:blog.title' property='og:site_name'/>
 <meta content='id_id' property='og:locale'/>
 <meta expr:content='data:blog.pageName' property='og:title'/>
 <meta expr:content='data:blog.metaDescription' property='og:description'/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
 </b:if>
 <title><data:blog.pageName/> - <data:blog.title/></title>
 <meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
/*-----------------------------------------------------
Belajar Cara Membuat Template Blog sendiri untuk pemula.
Name       : Nama style Template Anda
Date       : Tanggal Pembuatan Template anda
Created by : nama anda
------------------------------------------------------*/
#navbar-iframe{height:0;visibility:hidden;display:none;}
html,body,div,span,applet,object,iframe,h1,h2,h2,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
a:link,a:visited{color:#1BC7A5;text-decoration:none;margin-left:0px;margin-right:0px;}
a img{border-width:0;}
img{max-width:100%;vertical-align:middle;border:0;height:auto;}
.quickedit{display:none;}
.clear{clear:both;}
body{background:#eaeaea;margin:0;padding:0;font-family: calibri;color:#2c3e50;}
]]></b:skin>
<style type='text/css'>

</style>
</head>
<body>


</body>
</HTML>

#3 "memasang outer-wrapper dan content wrapper"

setelah anda memasang code diatas sekarang mulailah lagi dengan memasangkan code baru, untuk tahapan ini kita mulai dengan memasang bagian kerangka pembungkus blog, disini saya beri nama Outer-wrapper atau pembungkus luar.
1. copy code CSS berikut ini, letakkan tepat diatas </style>
#outer-wrapper{
background:#FFF;
width:900px;
overflow:hidden;
margin:0 auto;
}

2. untuk memanggilnya anda Copy Code HTML berikut ini letakkan tepat di bawah code <body>
<div id='outer-wrapper'>

3. setelah itu, temukan code ini

 </body>

Copy code dibawah ini tepat diatas code </body>
</div>

cara mencari sebuah code cukup tekan CTRL + F dan anda pastekan saja kode yang sejenis disana setelah itu tekan ENTER, seperti gambar dibawah ini.
Belajar Cara Membuat Template Blog sendiri untuk pemula

 4. selesai anda sudah berhasil membuat bagian kerangka pembungkus awalnya. simpan template anda , lanjut ke tahap berikutnya :

#4 "memasang HEADER,pembungkus content dan header ads"

saya rasa anda sudah tau apa itu header seperti yang telah saya terangkan diatas dan content wrapper ini untuk pembungkus artikel wrapper dan sidebar wrapper. untuk pemasangan headernya anda dapat meletakkan code berikut ini.

1. letakkan Code CSS dibawah ini tepat diatas </style> .
#header-wrapper{width:100%;overflow:hidden;}
#header{width:262px;overflow:hidden;float:left;}
#header-ads{float: right; width: 468px; margin: auto 0; padding: 0;}
.header .widget{padding:0 30px;}

2. kemudian panggil dengan code HTMLnya, temukan code berikut ini :

<div id='outer-wrapper'>

letakkan code HTML dibawah ini tepat dibawahnya.
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Mas Idyn The Official blog template (Header)' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
<div class='clear'/>
</header>

selanjutnya memasang content wrapper.

letakin kode CSS dibawah ini, tepat diatas </style>.
#content-wrapper {
    margin: 0;
    padding: 15px;
}

selanjutnya temukan code </header>, dan letakin kode HTML dibawah ini, tepat dibawahnya.
<div id="content-wrapper">
  </div>
3. sampai disini anda sudah berhasil membuat Kerangka headernya dan content wrapper pembungkus dari sidebar-wrapper dan artikel-wrapper. simpan template anda , lanjut ke tahap berikutnya.

#5 "memasang artikel-wrapper, sidebar-wrapper, dan main post"

artikel/main wrapper dan sidebar-wrapper seperti yang sudah saya jelaskan diatas, anda Belajar Cara Membuat Template Blog sendiri dengan membuat 1 sidebar di samping kanan dari artikel posting atau main-wrapper/artikel-wrapper . jadi anda dapat meletakkan code berikut ini :
1. letakkan code CSS berikut ini tepat diatas </style>.
#artikel-wrapper{float: left;width: 535px;margin: 5px;padding: 5px;}
#sidebar-wrapper{float:right;width:300px;overflow:hidden}
#sidebar{padding:5px}
.sidebar h2,.sidebar h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}

2. panggil code HTML sidebarnya, temukan code ini.

<div id="content-wrapper">

 letakkan code berikut ini tepat di bawahnya.
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>

3. kemudian pasang HTML artikel wrapper berikut ini, letakkan tepat di bawah <div id="content-wrapper">
<div id='artikel-wrapper'>
</div>

4. terakhir letakin code main html dibawah ini, tepat dibawah <div id='artikel-wrapper'> .
<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>

5. selesai. apa anda sudah pusing, ^_^ semangat. jangan lelah menatap sebuah code. ini tahapan awal yang sangat bagus untuk anda dan saya juga pernah mengalaminya. jangan lupa simpan template anda dan lanjut ke tahap berikut ini :

#6 "memasang footer-wrapper dan credit blog"

1. copy code CSS dibawah ini letakkan tepat diatas </style>
/*--------BOTTOMBAR---------*/
#bottombar {
background:#454545;
border-top:6px solid #e5e5e5;
overflow:hidden;
margin:0 auto;
padding:15px;
color:#dddddd;
}
#bottombar .left {
float:left;
width:34%;
}
#bottombar .center {
float:left;
width:34%;
}
#bottombar .right {
float:right;
width:32%;
}
#bottombar .left .widget, #bottombar .center .widget {
margin:0 15px 15px 0;
}
#bottombar .right .widget {
margin:0 0 15px 0;
}
#bottombar h2 {
font:normal bold 13px Arial, sans-serif;
margin:0 0 10px 0;
padding:6px 0;
border-bottom:2px solid #555;
text-transform:uppercase;
position:relative;
color:#eeeeee;
}
#bottombar h2:after {
content:" ";
width:90px;
height:0px;
position:absolute;
left:0;
bottom:-2px;
border-bottom:2px solid #eeeeee;
}
#bottombar ul, #bottombar ol {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
#bottombar li {
margin:5px 0;
padding:0 0 0 0;
}
#bottombar ul li:before {
color:#eeeeee !important;
}
#bottombar a {
color:#dddddd;
}
#bottombar a:hover {
color:#ffffff;
}
/*----------footer-wrapper-----*/

#footer-wrapper {
background:#333333;
margin:0 auto;
padding:20px 5px;
overflow:hidden;
color:#eeeeee;
font-size:11px;
}
.footer-left {
float:left;
margin:10px;
}
.footer-right {
float:right;
margin:10px;
}
#footer-wrapper a {
color:#eeeeee;
}
#footer-wrapper a:hover {
color:#ffffff;
}

2. panggil codenya dengan menambahkan HTML berikut ini, dan letakkan tepat diatas penutup </div> paling akhir.
<div class='clear'/>
<aside id='bottombar'>
<b:section class='left section' id='left' preferred='yes'/>
 
<b:section class='center section' id='center' preferred='yes'/>
 
<b:section class='right section' id='right' preferred='yes'/>
</aside>

<!-- credit by blogger -->

<!-- footer wrapper start -->
<footer id='footer-wrapper'>
<div class='footer-left'>
  Copyright 2016 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> . Publish by  <a class='change' href='http://itjenius' id='change' title='nama anda'>nama anda</a>
</div>
<div class='footer-right'>

<a href='url blog anda' title='power by'>Powered by</a> <a href='url blog anda' title='Blogger'>Blogger.com</a>
</div>
</footer>
<!-- footer wrapper end -->

3. selesai, sampai disini anda sudah dapat membuat suatu kerangka blog dengan 1 header, 1 main-wrapper, 1 sidebar. cobalah anda save template tersebut dan klik LIHAT BLOG. untuk melihat hasil dari design template blog anda, dan akan tampil seperti gambar ss dibawah ini :
Cara Membuat Template Blog sendiri untuk pemula tutorial lengkap

membuat template blog sendiri memang susah-susah gampang terutama anda yang baru mengenal code CSS maupun HTML. saya sendiri mempelajari ini awal tahun 2013. saya merasa tertantang dan penasaran dengan teman saya yang telah membuat suatu blog yang rapi,

saya penasaran bagaimana cara membuat template blog dengan hanya menggunakan code yang rumit saya rasa tidak rumit sihh setelah anda tau. nahh setelah 1 bulan saya belajar dan sedikit bertanya kepada teman saya akhirnya saya mulai mengerti. dan mulai membuat sendiri beberapa template blog.

kendala utama saat membuat sebuah Tempalte yang pernah saya alami, seperti munculnya pesan-pesan error di template yang membuat saya tidak mengerti dan mencoba mencarinya di google, padahal hal yang sangat mudah kesalahan utamanya hanya terletak pada penutup-penutup HTML dan CSS saja.

maka dari itu untuk anda yang pemula saya sarankan dalam Belajar Cara Membuat Template Blog cobalah terlebih dahulu memahami tentang penutup-penutup tiap code dan letak-letak mereka berada, saya rasa tahapan awal seperti itu agar anda tidak kebingungan ketika mendapatkan kesalahan saat membuat suatu template maupun mengedit template.

yang perlu kita ketahui bahwa, membuat suatu Template Blog itu tidak cukup dengan hanya duduk 1 jam didepan komputer, apalagi buat anda yang pemula beberapa blog yang bagus dan responsif itu membutuhkan ketelatenan dan belajar secara serius. jika anda sudah mahir saya rasa waktu seharipun dapat anda membuat sebuah template yang profesional.

mungkin sekian dari artikel Belajar Tentang Membuat Template Blogger, tutorial selanjutnya anda dapat membaca artikel dibawah ini untuk melengkapi bagian-bagian dari kerangka blog anda yang telah anda buat.

note : setelah mengikuti tutorial diatas, cobalah membuat posting dan menambahkan beberapa widget, agar terlihat bentuk struktur main wrappernya dan sidebarnya.

TAHAPAN SELANJUTNYA :

- Memasang Jquary Plugin javascript
- Membuat Dropdown Menu (menu navigasi)
- Mengatur/merapikan tata letak layout blog.
- Memasang breadcrumb yang terindext google.
- Membuat Widget Artikel Terkait
- Membuat Tombol Next Post + judul di bawah artikel blog.

49 komentar

Mantap Gan !!!

http://savafarma.com/

sangat membantu sekali gan :)

http://downloadanimejepang1.blogspot.co.id/

Thx mas udah berbagi ilmu.

Btw, setelah bisa mas jualin nggak template-nya? hhehe

deadpixl.blogspot.com

Template yang mana ? :D .... Ya klo agan bikin premium template bisa dijual .

template yang mas buat.
bedanya apa ya kalo premium? kirain cuma penamaan aja dan penghilangan credit di footer dan dukungan seumur hidup. maaf mas, saya newbie nih urusan per-template-an. hehe

Untuk template yg saya buat memang untuk sekedar blog pribadi. Klo mau jual. Blm ane kepiran kesitu ... Untuk premium template struktur kodenya lebih kompleks Dan terstruktur. Bisa cek" contoh premium template di Google gan.

Oh, gitu, mas.
terimakasih pencerahannya ya :)

wah bagus ini mas bisa buat belajar orang orang seperti saya yang masih newbie

Terimakasih sebelum nya mas...
Saya sudah mengikuti panduan diatas mas...tapi kog saya buka websitenya ada tulisan ini */ diatas header mas...itu kenapa ya mas?..

Satu lagi mas pertanyaan nya...
Setelah saya mengikuti panduan diatas...selanjutnya apa yang harus saya lakukan mas?...
Coba lihat mas blog saya untuk belajar buat template nya mas.. (http://kereentemplate.blogspot.com)

Itu aja pertanyaan saya mas...
Mohon bantuan nya mas...
Terimakasih mas...

Salam hangat,

Dessy

cari saja di HTMLnya ,tekan Ctrl+f cari kode */ , letaknya dibawah bif dan hapus saja jika ketemu. atau bisa baca lagi tutorial diatas ,karena udah saya update kesalahan-kesalahannya dan lebih baik koding strukturnya, thanks.,
untuk tahap selanjutnya baru saya update tentang pemasangan menu templatenya, ditunggu tahpan selanjutnya lagi :D

Mas mohon bantuan nya mas, udah di ikutin tutor nya kok error yah mas

Kesalahan saat mengurai XML, baris 1386, kolom 8: XML document structures must start and end within the same entity <<< Pesan error nya mas,

Mas tampilan tata letak nya gimana mas, screen shot tlong mas

saat membuat template baru, memang body layout tata letak belum diatur elementnya. baca disini gan (untuk cara mengatur atau menambah id tata letak agar tata letaknya rapi) : http://www.masidyn.com/2016/01/cara-merapikan-tata-letak-layout-blog.html

ada yang kelewatan kali gan code xmlnya blm ada, coba di teliti lagi tutorial diatas gan.

siip gan , :) terus belajar :)

ok, matap..setelah membaca dan artikelnya bisa di pahami...
bagus infonya gan

Komentar ini telah dihapus oleh pengarang.

The widget with id Blog1 is not within a section (actual parent element is: div.) Every widget should be in a section. <---------- kenapa ya gan ??

thanks juga gan, udah mampir :)

peletakan penutup div pada widget blm ada gan. coba teliti lagi pada saat penerapan penutup /div

secepatnya gan, maaf karena ane lagi sibuk juga.

gan kok headernya gak ada ya... kenapak ya... footer ada tapi sidebar dan header gak ada

Coba Perhatikan lagi gan penutup Div.nya Dan CSSnya jangan sampai gak dipasang juga.

mas itu kan ada banyak kode yang ditaruh di atas kode style mau tanya nih... salah satu kode udah saya taroh diatas kode style nah ternyata masih ada kode lagi yang ditaruh diatas kode style apa harus ditaruh dibawah kode sebelumnya atau diatasnya. terimakasih

ok thanks sebelumnya, yang penting masih di dalam struktur style peletakkanya jadi tdk masalah. (perhatikan saja penutup css, pelajari di bagian #part1 membuat template).

contoh CSS penerapannya di style :

---jangan disini--
style>
#element1 {color:#fff} <= bisa disini =
#element3 {color:#fff} <= atau juga bisa disini =
#element2 {color:#fff} <= bisa disini =
#element4 {color:#fff} <= dan bisa disini =
/style>
---jangan disini--

oh ya kenapa saat ditulisan kirimkan artikel ini menjadi tulisan tidak ikon,yang berupa ikon hanya google+ nya saja

waah mass. makasih banget nih, di tunggu update nya.
makasih - makasih

dibagian share artikel ini : tulisannya seperti ini:
Bagikankefacebook|bagikanketwitter. sedangkan yang share ke googlebaru berupa ikon.

mas, saya mau nanya, itu struktur html kosongannya pada tag meta gunanya apa ya mas? saya liat di blog lain beda beda meta nya, duh saya bingung nih :(

Siip gan . thanks juga telah mampir .

Meta tag ITU seperti identitas template sobat, saya rasa semua sama saja, yang penting meta tag keyword Dan deskripsi di isi,akan saya bahas lebih lanjut tentang meta ini di artikel kelanjutan membuat templatenya gan :) .

Ok. Tombol share yaa. Saya baru update mba...

saya tuh mau masang iklan ads di dalam postingan,sudah mengikuti petunjuk yang cari di google tapi lom brrhasil,karena data post body cuma satu saja,,,gimana solusinya

Seharusnya lebih Dari 1 gan, code data post body pada struktur template umumnya, cara mudahnya, cari saja kode yang berdekatan dengan kode statis page bagian post body, seperti artikel terkait, Dan tombol share, pastinya dibagian atas Dari kode tersebut ada data post body Dan test saja masang kode iklannya yang telah diparse. . .sekiranya seperti itu.

makasih gan infonya,,,satu lagi,apa data post body bisa ditambah secara manual

bisa gan, namun perhatikan lagi, jika memang data post bodynya sudah ada, karena bisa jadi duplicat post entar.

Baru belajar!! Semoga bisa jadi

sama - sama gan, semoga bermanfaat. :D

- Berkomentarlah dengan sopan.
- No Link Aktif, SPAM, SARA P#RN.
- Jangan membalas yang tidak sesuai tema.
- Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
EmoticonEmoticon