Cara Membuat Kerangka Template Blogger Sendiri

Pada kesempatan kali ini saya ingin membuat tutorial bagaimana cara untuk membuat template blogspot sendiri walaupun akan saya bimbing untuk saat ini.

Membuat template tidak segampang dan secepat yang anda kira, dan tidak terlalu sulit bagi anda yang sudah memiliki keahlian dalam membuatnya. Namun, artikel ini merupakan sebuah pendahuluan untuk membuat sebuah template.


Dalam membuat template anda perlu membuat design seperti apa pada template anda. Pada tutorial saat ini, saya akan membuat design template seperti template, Mini Site Responsive Blogger Template. Di template tersebut ada beberapa bagian penting yang dibuat yaitu
  • Header
  • Artikel
  • Kolum Footer
Sebagaimana telah diketahui, bahwa sebuah template memiliki struktur HTML seperti biasa. Berikut HTML dasar untuk membuat sebuah halaman dasar pula.

Yang memiliki tanda <> merupakan tag. Pembentukan namanya yaitu “tag + nama di dalam tanda <>”, jika ada kode seperti ini <p> dinamakan “tag p”.

Hampir sama dengan HTML biasa, untuk membuat sebuah template blog minimal anda harus mengerti HTML dasar, CSS dan kode-kode yang sudah ada dalam blogger. Nah, template dasar dari sebuah blog yaitu seperti berikut. Template dasar ini saya rancang dengan css, meta tag yang paling dasar dan hanya memiliki widget artikel saja.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:class='data:blog.languageDirection + &quot; no-js rwd &quot; + data:blog.pageType' expr:dir='data:blog.languageDirection'>
<head>
<meta charset='utf-8'/>
<!--[if lt IE 9]> <script src="http://html5shiv.g<ooglecode.com/svn/trunk/html5.js"> </script> <![endif]-->
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<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'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link href='https://plus.google.com/+ReskyFresanddy/posts' rel='publisher'/>
<link href='https://plus.google.com/+ReskyFresanddy/about' rel='author'/>
<link href='https://plus.google.com/+ReskyFresanddy' rel='me'/>
<meta content='QXWqio6X6MCe_BWrm-74qd_orq2zacYP5812nnBpNrk' name='google-site-verification'/>
<!-- SEO Meta Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
</b:if>    
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' name='keywords'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<meta content='Indonesia' name='geo.placename'/>
<meta content='Resky Fresanddy' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<!-- SEO Meta Tag end -->
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<!-- SEO Title Tag -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title>Arsip Untuk <data:blog.pageName/></title>
<meta content='noindex,nofollow,noarchive' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Halaman Tidak Ditemukan - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
</b:if>
</b:if>
<!-- Social Network Open Graph -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<meta content='430352253733985' property='fb:app_id'/>
<meta content='100000013167350' 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'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='Mini Site Fast and Responsive Blogger Template' property='og:description'/>
</b:if>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@RFresanddy' name='twitter:site'/>
<meta content='@RFresanddy' name='twitter:creator'/>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
</b:if>
<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>
 <!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script type='text/javascript'>(function(h){h.className=h.className.replace(/(^| )no-js( |$)/,&quot;$1js$2&quot;)})(document.documentElement);</script>
<b:skin><![CDATA[
/*
Created By : Laros
Created On : 24 Sep 2016
URL        : http://www.laros.web.id
*/
/* CSS Reset */
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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,adnav,adheader{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
.navbar,.post-feeds,.feed-links,#navbar-iframe,.date-header,#layout ul{display:none;}
body{font-size:13px;color:#222;margin:0;padding:0;background:#dee2e4;font-family:'Open Sans',sans-serif;}
a:link,a:visited{color:#333;text-decoration:none}a:hover{color:#3498db;text-decoration:none}
a img{border-width:0}*{box-sizing:border-box}.clear{clear:both}strong,b{font-weight:bold;padding:0;}cite,em,i{font-style:italic;}
#Attribution1,.quickedit,#ContactForm1,#ContactForm1 br {height:0;width:0;visibility:hidden;display:none!important;}
]]></b:skin>
</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>


Dan untuk membuat template tersebut berukuran tertentu, kita misalkan 640px. Maka anda harus membuat sebuah element untuk membungkus template tersebut. Anggap saja namanya #wrapper-laros. Maka anda harus menambahkan CSS berikut tepat di atas ]]</b:skin>

#wrapper-laros{position:relative;max-width:640px;margin:0 auto;background:#fff;padding:10px;overflow:hidden;box-shadow:0 0 0 20px rgba(0,0,0,0.02);}

Dan menambahkan kode berikut di bawah <body>
<div id='wrapper-laros'>


Dan menambahkan kode penutupnya di atas </body>
Oke, demikian artikel Cara Membuat Template Blogger Sendiri. Semoga bermanfaat.

Cara Membuat Kerangka Template Blogger Sendiri Cara Membuat Kerangka Template Blogger Sendiri Reviewed by Laros on Sabtu, September 24, 2016 Rating: 5
Rekomendasi Untuk Anda × +
Add Comments

Tidak ada komentar:

Diberdayakan oleh Blogger.