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,

Demo

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

3 komentar:

Muhammad Arbi17 Februari 2016 pukul 03.46
nice info gan,, visit back http://arteri-info.blogspot.com
BalasHapus
Balasan
Jefry Dewangga31 Mei 2016 pukul 17.59
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

Tambahkan komentar

Berikan komentar anda sesuai Topik yang ada.

Cara Membuat Template Blog Dari Awal

Related Posts

myabdurrahim ID

3 komentar:

Personal Blogger