| Home | About | Contact |

Cara Membuat Template Blog/Website

Belajar Membuat Template Blog

Berbicara tentang TEMPLATE pasti yang tebayang adalah sebuah tampilan dari sesuatu. Bisa tampilan, Buku, Majalah, Koran, Handphone, tak terkecuali tampilan sebuah Website atau Blog.

Tetapi terkadang kita ingin tau bagaimana Cara Membuat Tempalate dari yang disebutkan tadi. Mungkin, untuk membuat desain template dari sebuah buku atau majalah tidak begitu sulit karna bisa dilakukan secara manual dan tidak perlu memakai Code-Code tertentu.

Cara Membuat Template Website/blog
Image by Google

Tapi bagaimana Cara Membuat Templat sebuah Handphone atau Template Website/Blog ???


Template Handphone

Membuat Template handpone/smartphone memang sulit harus memiliki keahlian khusus, karna dalam Membuat Template sebuah Handphone memerlukan Code-Code khusus. Akan tetapi jika ingin Membuat Template sebuah handhphone/smarphone kini bisa menggunakan sebuah Aplikasi dan tidak perlu ribet lagi soal Code-Code khusus, karna hanya perlu melakuan perintah dalam Aplikasi tersebut.

Template Website atau Blog

Sama seperti halnya template pada handphone, template website menggunakan Code-Code khusus yang rumit. Jika ingin Membuat Template Website harus memiliki kemampuan khusus dibidang Coding, jadi tidak sembarangan orang bisa membuatnya, dan untuk Membuat Template Website atau Blog sejauh ini belum ada Aplikasi untuk Membuat Template Website/Blog, walaupun ada mungkin hanya membuat template sederhana saja.

Jadi bagaimana Cara Membuat Template Blog/Website sendiri ??, mari kita belajar sama-sama disini untuk membuat Template sebuah Website/Blog !!!!

Mengenal lebih dulu bagian-bagian dari sebuah Website atau Blog


1. Header

Header Website/Blog terletak pada bagian atas sebuah Website/Blog, yang biasanya berisi, Informasi Blog, Judul Blog, Deskripsi Blog, atau Gambar Blog. Penjelasan lebih detail Nex >>

2. Menu Navigasi

Menu Navigasi umumnya berada dibawah Header, tapi ada juga yang letaknya tidak selalu dibawah Header tergantung dari jenis Template yang dipakai. Penjelasan lebih detail Nex >>

3. Kotak Posting

Kotak posting biasanya berada ditengah body Website/blog, dan berisi postingan yang kita buat. Nex >>

4. SIDEBAR

SIDEBAR biasanya berisi kelengkapan Website/Blog seperti, Blog Archive, Popular Post, Label Blog, Scrip HTML, dan kelengkapan pendukung lainnya.

5. FOOTER

Footer adalah element paling terakhir dalam seuah Website/Blog, yang biasanya berisi Credit title sebuah Website/Blog. Nex >>

Itulah pengertian singkat dari bagian-bagian sebuah Website/blog. Jika sudah sedikit memahami dari bagian-bagiannya kita lanjut ketahap berikutnya Cara Membuat Template Blog/Website.

Berikut Langkah-Langkap Membuat Template Blog/Website


1. Masuk ke Akun Blogger, pilih menu template > edit HTML Template


Cara Membuat Template Website/Blog

Hapus semua kode pada editor HTML templat, untuk mempermudah penghapusan bisa gunakan CTRL+A+delete, selanjutnya Copy kode berikut dan tempel/paste pada kolom editor HTML yang sudah dihapus tadi.

<?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='Belajar Bikin Template' 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='isi Keyword blog' 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[ /* Blogger Template Name Template       : Nama 
Template Anda Date : Tanggal Pembuatan Template
Design by : Belajar Bikin Template
Url : belajarbikintemplat3.blogspot.com
*/ #navbar-iframe{height:0;visibility:hidden;display:none;} html,body,div,span,applet,object,iframe,h1,h2,h3,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>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
</b:widget>
</b:section>
</body>
</HTML>

Selanjutnya silahkan sesuaikan Code template diatas, sesuaikan dengan Website/Blog yang Anda kelola.

2. Membuat WRAPPER Website/Blog

Setelah Code diatas terpasang dan sudah disesuaikan, kita lanjut pada pembuatan Wrapper Website/Blog.

Pasang Code CSS dibawah ini, dan letakan diatas Code </style>.

  #wrapper{
  background:#FFF;
  width:1024px;
  overflow: hidden;
  margin:0 auto;
  }

Kemudian pasang HTML Wrapper agar Code diatas yang sudah terpasang berfungsi, caranya dengan memasang Code dibawah ini dan letakan dibawah Code <body>

  <div id='wrapper'>

Kemudian pasang Code penutupnya dibawah ini, kemudian letakan dibawah Code </body>.

  </div>

setelah semua sudah terpasang dengan benar, lanjut ketahap berikutnya.

3. Membuat Header Website/Blog

Setelah dibagian Wrapper selesai, selanjutnya membuat Header Blog, pertama kita pasang terlebih dahulu CSS-nya. Pasang Code dibawah ini dan tempatkan diatas Code </style>.

#header-wrapper{width:100%;overflow
:hidden;}
#header{width:262px;overflow:hidden;float:left;}
#header-ads{width:728px;overflow:hidden;float:right;}
.header
.widget{pading:10px;}

Kemudian pasang Code HTML dibawah ini dan letakan dibawah Code <div id='wrapper'>

<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' locked='true' title='Belajar Bikin Template(header)' type='header'>
</b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
</header>

Setelah semua terpasang dengan benar klik simpan template.

Untuk membuat element template yang lain seperti :
  • Membuat Kotak Posting
  • Membuat Footer Website/Blog
Akan dijelaskan dipostingan berikutnya.

Postingan terkait:

Belum ada tanggapan untuk "Cara Membuat Template Blog/Website"

Post a Comment