Cara Membuat Template Blog Dari Awal


Yoo!
Kali ini saya akan buat artikel tentang Cara Membuat Template Blog Dari Awal
alian pasti pernah untuk mencoba membikin template sendiri, karna sudah bosan menggunakan template buatan orang lain, terutama seorang Blogger.

termasuk saya yang pernah mencoba membuat template sendiri, tapi hasilnya kurang bagus atau Jelek >.< jadi mungkin saya hanya membagikan Cara membuat Template Dari Awal seperti template bawaan dari blogger

sebelum ke Acaranya :D,
Nanti akan seperti ini tampilan Tata Letak Blognya


nanti akan tersedia Colum Header Sebelah Kiri, Header Ads Sebelah kanan
ada Postingan Blog, dan Sidebar di sebelah kanan *(Sidebar nanti bisa kalian pindah letak kiri/kanannya sesuai selera kalian masing-masing
dan terakhir ada Footer paling bawah, so, langsung saja

Pertamanya kalian harus login dulu ke Blogger , kalau gak login bagaimana bisa buat templatenya :v
Lalu Pilih Menu Template > Edit HTML
Blok Semua Scriptnya ( CTRL + A ) lalu hapus/delete


Setelah semua scriptnya dihapus
lalu Ganti dengan Scrip di bawah ini, dan masukkan Script tersebut ke dalam HTML Template

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/yourgplus' rel='author'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
<b:else/>
</b:if>
<meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' 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'/>
<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 cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESCRIPTION HERE' name='description'/>
<meta content='KEYWORDS HERE' name='keywords'/>
</b:if>
<meta content='YOURFBAPPSID' property='fb:app_id'/>
<meta content='YOURFBUSERID' property='fb:admins'/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<meta content='5;/' http-equiv='refresh'/>
</b:if>


&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[

/*
Memakai Template Blog ini, berarti anda menyetujui untuk tidak mengganti / menghapus credit ini. terimakasih
Theme Name       : Rexo Loop
Theme Published  : 16 Februari 2016
Theme Designer   : Abdurrahim ID
Designer URL     : http://www.abdurrahim.net
Theme License    : This free Blogger template is licensed under the Creative Commons Attribution 3.0 License, which permits both personal and commercial use.
However, to satisfy the &#39;attribution&#39; clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:
http://creativecommons.org/licenses/by/3.0/
*/
#Attribution1,#Navbar1{height:0;visibility:hidden;display:none}
body{background:#fff ;color:#000;margin: 0 auto;font-family:Arial, sans-serif;font-size: .8em;word-wrap: break-word;}
a:link,a:visited{color:#3B5998;text-decoration:none}
a:hover{color:#3B5998;text-decoration:underline;}
a img,img{border-width:0}

/* CSS Header Wrapper */
#header-wrapper {margin:75px auto 20px auto;padding:0;max-width:970px;overflow:hidden;}
#header {float:left;width:100%;max-width:230px;color:#222;margin:0;}
#header h1, #header h2, #header p {display:inline-block;font-family:'Roboto Condensed';font-size:240%;font-weight:700;color:#222;text-transform:uppercase;}
#header a {color:#222;transition:all 0.3s ease-out;}
#header a:hover {color:#ff675c;}
#header .description {font-family:'Roboto',sans-serif;font-size:100%;font-weight:400;text-transform:none;line-height:normal;margin:0;}
.header img {display:block;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%;max-width:728px;}
.header-right img {display:block;}
.Header h1,.Header h2 {margin-bottom:10px;}

#content{margin:0 auto;width:1000px;background:#FFF;}
#posting{float:left;width:67%;margin:0;padding:5px;}
#sidebar{float:right;width:30%;margin:0;padding:5px;}
#footer{width:1000px;margin:0 auto;padding:5px;}
]]></b:skin>
</head>
<body>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelemenet='no'>
<b:widget id='Header1' locked='true' title='titl blog (Header)' type='Header'/>
</b:section>
<b:section class='header-right' id='header-right' preferred='yes' showaddelemenet='yes'/>
<div style='clear:both;'/>
</div>
<div id='content'>
<div id='posting'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar'>
<b:section class='isi-sidebar' id='isi-sidebar' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div id='footer'>
<b:section class='isi-footer' id='isi-footer' preferred='yes'/>
</div>
</div>
</body>
</html>

Yang sidebar bewarna hijau bisa kalian ganti left/right sesuai selera kalian masing-masing

jika sudah semua script dimasukkan, sekang kalian Simpan / save
dan liat Tata Letak Blognya jika sudah sesuai, langsung kalian lihat blognya atau bisa klik " Lihat Blog " dibagian atas
nanti tampilan blog kalian akan hancur atau tidak jelas,
nah bagaimana cara perbaikinya ?
Caranya kalian cukup hanya membuat Artikel / Postingan di blog
jika sudah, kalian akan lihat blognya,

ini Template Blog yang sudah saya lakukan,


*Jika kalian masih bingung dengan masalah tersebut silahkan komen dibawah,
mungkin saya dapat membantu :v

Personal Blog.

3 komentar:

  1. nice info gan,, visit back http://arteri-info.blogspot.com

    BalasHapus
  2. Wahhh,, keren ya kalo bisa bikin template blog dari awal gitu. Hmm boro-boro mau bikin dari awal, kodenya ajah saya masih banyak yg belum ngerti, apalagi javascript gitu... Oh ya mas, katanya kalo template yg dipakek itu harus seo friendly ya. Gimana sih mas template yg seo friendly itu, kira2 template yg saya pakai sudah seo friendly belum mas? Mohon bimbingannya ya mas, maaf masih newbie saya.

    BalasHapus
    Balasan
    1. Gak harus Seo jga, tergntung yg punya blog, pengennya gmna.
      Template seo bnyk bertebaran digoogle mas, cari aj :D
      , klo template yg mas pakai, bisa mas cek di web check seo, ada bnyak di google, sprti : chkme.com

      Hapus

Berikan komentar anda sesuai Topik yang ada.