Senin, 23 Juli 2018

Tutorial Lengkap Membuat Template Blogspot Manual Dari NOL

Tutorial Lengkap Membuat Template Blogspot Manual Dari NOL

Cara Membuat Template Kreasi Sendiri Manual -  Desain Template dengan mudah dan cepat dengan hanya menggunakan Notepad dan Dashboard Blogger. Seperti yang kita ketahui dalam blog sangatlah erat kaitannya yaitu template. Template sendiri ialah desain halaman blog dengan struktur dan komponen didalamnya seperti header, main body, sidebar, sampai footer yang dipadukan dengan beberapa jenis file.

Belajar membuat template sederhana sebenarnya tidaklah susah, hanya saja secara garis beras kita malas untuk melakukan hal repot selagi masih ada alternatif lain yaitu mendownload template yang sudah tersedia di google.

Membuat template juga memerlukan waktu yang tidak sedikit tentunya, bukan dalam hitungan jam maupun menit seperti mendownload template gratis. Sedikit pemahaman tentang HTML dan CSS sangatlah diperlukan dalam desain template, ya meskipun masih ada hal lain yang harus dipelajari juga.

Layaknya desainer terkenal kini dengan mengikuti sedikit tutorial sederhana anda bisa membuat badan template blog anda sendiri. Berikut ikuti step by step nya sampai akhir untuk pembuatan template blog secara manual dari NOL ini.

Tutorial Lengkap Membuat Template Blogspot Manual Dari NOL

Membuat Template Blogspot Manual

Dalam tutorial ini mamang akan mencoba membuat template sederhana berstuktur Header, Main Content, Sidebar, dan juga Footer. Jika dalam penggambaran maka akan nampak seperti ini template yang saya pakai sekarang.

Sudah ada bayangan bagaimana kira - kira tutorial ini berlanjut, oke sekarang mari kita masuk kedalam Dashboard Blogger anda dan masuk ke menu Edit HTML.

1. Membuat kerangka template

Hapus semua kode yang ada pada Edit HTML dan masukkan kode utama template dibawah ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<!-- [ Meta Tag SEO ] -->
<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESKRIPSI-BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS' rel='me'/>
<meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='NAMA-ADMIN' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot; Untuk membaca postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='https://1.bp.blogspot.com/-xfPBDqINba8/W0xzghdvNiI/AAAAAAAABBo/2qrIauJgDB0CG1rU4L_hFZdYcwJ9NeOIwCLcBGAs/w200-h150-c/test%2Bgambar%2B1.png' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/PROFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/>
<meta content='KODE-APLIKASI-FACEBOOK' property='fb:app_id'/>
<meta content='KODE-ADMIN-FACEBOOK' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>
&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
/*
Bagi anda yang mengerti dan blogger profesional pastinya tidak akan menghapus link ini. Membuat template ini tidak cukup 1 jam bro!
Blogger Template Style
Name       : MangOri Template
Date       : 18/07/2018
Updated by : Yosep Eko Prambudi
Website    : https://www.mangotep.com

/* tata letak fixed */
body#layout .outer-wrapper {width:970px}
body#layout #wrapper {width:970px}
body#layout #header {width:29%;float:left;margin-top:30px}
body#layout #header-ads {width:69%;float:right;margin-top:30px}
body#layout #artikel-wrapper {width:69%;float:left}
body#layout #sidebar-wrapper{width:29%;float:right}
body#layout #footer {width:970px}
.footer {width:100%}
body#layout ul {display: none}

/* HTML5 */
#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>

2. Membuat Main Wrapper Template

Setelah melakukan langkah pertama kita akan membuat wrapper, silahkan anda tentukan lebar ukuran template yang kalian ingin, disini saya akan membuat lebar template 970px. Jika sama silahkan copas kode berikut :
  1. Copas kode dibawah ini tepat di atas kode </style> pada langkah pertama.
  2. #wrapper{
    background:#FFF;
    width:970px;
    overflow:hidden;
    margin:0 auto;
    }
    
  3. Kemudian agar CSS tersebut dapat berfungsi masukkan HTML dengan mencari kode <body> kemudian letakkan kode ini tepat di bawahnya.
  4. <div id='wrapper'>
    
  5. Selanjutnya kita tutup HTML dengan mencari kode </body> dan letakkan kode dibawah ini tepat diatas kode </body>
  6. </div>
    
  7. Save !! Sekarang kita sudah membentuk wrapper utama body template dengan lebar yang sudah diatur tadi. Akan tetapi ini hanya akan memuat tempat untuk artikel saja, mari kita lanjut ketahap yang ketiga

3. Membuat Header dan Header ADS

Setelah membuat wrapper sekarang kita membuat header dan header ads yang biasanya pasti terletak pada bagian atas template, untuk itu desain sederhana nya adalah sebagai berikut ini:
  1. Pasang Css Header berikut diatas kode </style>
  2. #header-wrapper{width:100%;overflow:hidden;}
    #header{width:30%;overflow:hidden;float:left;}
    #header-ads{width:70%;overflow:hidden;float:right;}
    .header .widget{padding:10px;}
    
  3. Kemudian seperti langkah kedua, pasanglah kode pemanggil CSS tadi yang berupa HTML dan letakkan dibawah <div id='wrapper'>
  4. <header id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1'>
    <b:widget id='Header1' locked='true' title='Cobain Blogger Template (Header)' type='Header'></b:widget>
    </b:section>
    <b:section class='header' id='header-ads' maxwidgets='1'/>
    <div class='clear'/>
    </header>
    
  5.  Save saja dan lanjut

4. Membuat Artikel dan Sidebar Wrapper

Dalam membuat artikel dan sidebar wrapper pada tutorial ini akan diletakkan (kiri untuk artikel wrapper) dan (kanan untuk sidebar wrapper) maka kode yang akan kalian butuhkan kiranya seperti ini:
  1. Pasang Css Postingan dan Sidebar berikut diatas kode </style>
  2. #artikel-wrapper{float:left;width:68%;overflow:hidden}
    #sidebar-wrapper{float:right;width:29%;overflow:hidden}
    #sidebar{padding:5px}
    .sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;margin:0;margin-bottom:5px}
    
  3. Pasang HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>
  4. <aside id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
    </aside>
    
  5. Pasang HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>
  6. <aside id='artikel-wrapper'>
    
  7. Tutup HTML artikel tadi dengan meletakan kode penutup berikut tepat di bawah </b:section> yang terakhir (widget posting blog) atau di atas </div> terakhir.
  8. </aside>
    
  9. Silahkan save dan lihat hasilnya maka pada tampilan template sudah akan terbagi antara artikel wrapper anda dan juga sidebar wrapper. Sesuai width nya dengan mengatur presentase kode CSS yang sudah dimasukkan tadi.

5. Membuat Footer Wrapper

Terakhir adalah membuat footer wrapper, sebagian besar footer wrapper terbagi menjadi 3 kolom footer pada umumnya, maka untuk itu mari kita samakan saja untuk pembuat template sederhana ini.
  1. Pasang Css Footer berikut diatas kode </style>
  2. #footer-wrapper{width:100%;clear:both}
    .footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;margin:0;margin-bottom:5px}
    .footer{width:32%;padding:5px}
    #footer-1{float:left}
    #footer-2{float:left}
    #footer-3{float:right}
    
  3. Pasang HTML Footer berikut dan Letakkan tepat di atas  </div> yang terkahir
  4. <div class='clear'/>
    <footer id='footer-wrapper'>
    <b:section class='footer' id='footer-1' showaddelement='yes'/>
    <b:section class='footer' id='footer-2' showaddelement='yes'/>
    <b:section class='footer' id='footer-3' showaddelement='yes'/>
    </footer> 
    

Selesai sudah deh komponen komponen utama pada pembuatan template blogspot anda secara sederhana akan tampilannya seperti itu. Akan tetapi seperti yang sudah disebutkan diawal artikel komponen lainnya juga sangat penting dalam pembuatan template seperti : Navigation menu, Breadcrumbs, Readmore, Related Post, dan masih banyak lagi.

Untuk itu anda bisa kreasikan template yang sudah anda buat sekarang menjadi lebih keren lagi dengan beberapa tutorial yang ada di google atau bisa juga anda mencarinya pada Blog Mang Otep ini. Seperti contohnya artikel yang dapat mempercantik template anda :

Demikianlah artikel tentang Tutorial Lengkap Membuat Template Blogspot Manual Dari NOL ini, semoga bermanfaat untuk anda. Jangan lupa untuk tinggalkan jejak komentar yah untuk membangun blogwalking yang baik.

Jika menyukai artikel dari Blog Mang Otep, anda bisa like and share ke sosial media kesayangan anda atau juga bisa subscribe blog ini untuk mendapatkan artikel menarik dan terbaru lainnya langsung dari email anda. Terimakasih banyak.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments