Bagi yang sudah mengetahui dasar dasar template blogspot melalui artikel ini struktur dasar template blogger maka sekarang akan saya kasih penjelasan mengenai pembuatan kerangka dasar template blogger, namun untuk kerangka dasar yang saya bagi disini ini adalah kerangka paling dasar dari template blogger itu sendiri anda harus bisa atau harus mahir dalam menambah hal yang harus di perlukan ke dalam blog seperti breadcumbs, pagination, navigasi, widget dan lain sebagainya.

Kerangka Dasar Template Blogger

Untuk kerangka dasar template blogger yang saya bagikan sekarang adalah ini bukan murni dari buatan saya melainkan saya ambil dari beberapa blog yang sering saya kunjungi, untuk struktur yang saya ambil ini memang untuk seo sangat sangat bagus karena di lengkapi dengan meta tag di dalamnya.

Nah disini saya akan membagikan kerangka tersebut agar anda bisa membuat template blog secara sendiri tanpa memikirkan kerangka, anda hanya perlu mendesign saja karena template yang saya bagikan ini adalah sangat dasar sekali, ibarat rumah yang hanya di cat dasar saja untuk membuat rumah itu bagus anda harus memberi cat rumah tersebut dengan warna sesuai selera anda.

Kerangka Dasar Template Blogger

Sebelum saya membagikan alangkah baiknya anda harus memahami dulu apa itu html dan css agar ketika mengaplikasikan ke blog anda biar tidak kebingungan. Baik, berikut kerangka dasar template blog ger yang maksud dari postingan di atas.

<?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 Yadi' 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[
/*
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       : Nama Template Anda
Date       : Tanggal Pembuatan Template Ini
Updated by : Mas Yadi/Namamu
*/
#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'>
#wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}#header-wrapper{width:100%;overflow:hidden;}
#header{width:262px;overflow:hidden;float:left;}
#header-ads{width:728px;overflow:hidden;float:right;}
.header .widget{padding:10px;}#artikel-wrapper{float:right;width:724px;overflow:hidden}
#sidebar-wrapper{float:left;width:300px;overflow:hidden}
#sidebar{padding:5px}
.sidebar h2,.sidebar h3{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}#footer-wrapper{width:100%;clear:both}
.footer h3,.footer 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}
.footer{width:32%;padding:5px}
#footer-1{float:left}
#footer-2{float:left}
#footer-3{float:right}
</style>
</head>
<body>
<div id='wrapper'><header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Mas Yadi Blogger Template (Header)' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
<div class='clear'/>
</header><aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside><aside id='artikel-wrapper'>
<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section></aside><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> 
</div>
</body>
</HTML>

nah, silahkan copy lalu paste kode kode di atas ke dalam notepad lalu simpan dulu di drive komputer anda. Ketika ingin mengaplikasikan ke blog anda tinggal pergi ke bagian tab template lalu klik edit html lalu hapus semua kode template sebelumnya dengan cara menekan tombol ctrl+a secara bersamaan lalu tekan backspace. Jika anda sudah menaruh kode tersebut di template jangan lupa simpah terlebih dahulu agar berhasil, nah ini adalah bagian paling seru anda harus mendesign ulang template tersebut sesuai selera anda.

Penutup

Oke, sekian penjelasan saya tentang kerangka dasar template blogger, bagi yang menemukan error atau merasakan kesulitan, silahkan melaporkannya di komentar blog saya akan memperbaiki secepatnya, semoga bermanfaat.

Kerangka Dasar Template Blogger

Kerangka Dasar Template Blogger

Kerangka Dasar Template Blogger

Penutup

Related : Kerangka Dasar Template Blogger

0 komentar:

Post a Comment

Popular Posts

Labels