Cara Membuat Template Blogger Sendiri - Tulisan Keanu

    Social Items

/ / Cara Membuat Template Blogger Sendiri

Hy Kawan-kawan Blogger kali ini saya membuat postingan pertama kali dengan judul Cara Membuat Template Blogger Sendiri oh iya perkenalkan nama saya Keanu Rivaldy, saya baru memasukin dunia pembloggingan jadi mohon maklumi yah postingan saya kalau ada yang salah dan kata-kata yang tidak bijak.

ngomong-ngomong tentang Membuat Template Blogger itu sangat tidak mudah dan harus paham dengan pemrograman Web seperti HTML, CSS, JavaScript, Dan Lain-lain.
pembuatan Template Blogger apakah lama?
Ya tentu saja lama, karena kita harus merangkai kemampuan Pemrograman Web Kita, saya juga kadang Membuat Template kadang gagal tapi saya tidak menyerah gitu aja, oh walah curhat saya oke langsung kita ke tutorialnya aja yah, biar nggak menghabiskan waktu yang lama.

Cara Membuate Template Part 1
pertama-tama kita harus membuat kerangkanya terlebih dahulu, apa saja? Structure, Header, Content, Sidebar, Dan Footer. liat gambar Layout yang akan kita buat.

Image Masyadi.com
Langkah-langkahnya yang akan kita buat sekarang
  1. Pertama Kita masuk dulu ke situs blogger.com, setelah masuk menggunakan akun google, Kita ke Edit HTML. Kemudian Setelah itu Kita hapus semua kode yang ada di Edit HTML, kalau sudah kita hapus kita masukan kode dibawah ini ke Edit HTML Kita.
    
<?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='Keanu Rivaldy' 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 : Keanu Rivaldy/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'>

</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. Kita Save dan lanjutkan tutorialnya lagi membuat Wrapper.
Membuat Wrapper Pada Template

Setelah Kita memasukan kode diatas kita Membuat Wrapper 
  1. Pasang CSS berikut diatas kode </style>
    
#wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}
  2. Kemudian supaya  CSS tadi bekerja kita harus panggil dengan memasang HTMLNYA, cara nya kita cari kode <body> kemudian kita letakan kode dibawah ini tepat, dibawah kode <body> tersebut.
    
<div id='wrapper'>
  3. Kemudian Kita tutup kode wrapper  diatas yang kita pasang tadi dengan kode tag penutup div dibawah ini, diatas kode </body> 
    
</div>
  4. Nah sekarang coba kita simpan Template dan lihat hasilnya yang kita buat tadi, sampai disini kita sudah bisa membuat template sederhana, tetapi template kita hanya ada widget postingannya saja.
oke sekian dulu postingan saya tentang Cara Membuat Template Blogger Sendiri, jangan lupa di postingan saya selanjutnya tentang template blogger atau tentang blogger. postingan ini di support oleh KODEKEN. 

 Jangan Lupa Kunjungi Tulisan Keanu

 Terima Kasih yah sudah membaca sedikit postingan saya semoga bermanfaat yah postingan saya ini.

Hy Kawan-kawan Blogger kali ini saya membuat postingan kedua kalinya dengan judul Cara Membuat Template Blogger Sendiri Part 2 oh iya perkenalkan nama saya Keanu Rivaldy, saya baru memasukin dunia pembloggingan jadi mohon maklumi yah postingan saya kalau ada yang salah dan kata-kata yang tidak bijak.

Cara Membuate Template Part 2
nah kita sudah sampai di cara kedua membuat template, apa saja yang akan kita bahas?membuat Header dan Header Ads, Post dan Sidebar, .Dan Footer. langsung kita simak ke tutorialnya.

Cara Membuat Header dan Header Ads
setelah Kita membuat wrapper sebagai pembungkus, kini Kita akan membuat Header dan Header Ads (Header yang untuk iklan) caranya dibawah ini.
  1. Pasang CSS Header berikut diatas kode </style> 
    
#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;}
  2. Pasang HTML berikut dan letakkan dibawah <div id='wrapper'>
    
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Google Kuy Blogger Template (Header)' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
<div class='clear'/>
</header>
  3. Save Template.
Cara Membuat Post dan Sidebar Di Blog
Langkah selanjutnya yaitu kita buat sidebar dan postingan , kali ini postingan dan sidebar yang kita buat , letak sidebarnya berada sebelah kiri float:left dan artikel berada disebelah kanan Float:right caranya yaitu :
  1. Pasang CSS Postingan dan Sidebar berikut diatas kode </style>
    
#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}
  2. Pasang HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>
    
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
  3. Pasang HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>
    
<aside id='artikel-wrapper'>
  4. Tutup HTML artikel tadi dengan meletakan kode penutup berikut tepat di bawah </b:section> yang terakhir (widget posting blog) atau di atas </div> terakhir
    
</aside>
Membuat Footer 3 Kolom di Blog
Langkah yang terakhir adalah kita membuat footer 3 kolom ,  yang letaknya paling bawah , langsung aja berikut cara membuat footer 
  1. Pasang CSS Footer berikut diatas kode </style>
    
#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}
  2. Pasang HTML Footer berikut dan Letakkan tepat di atas </div> yang terkahir
    
<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>
Nah jika langkah diatas telah selesai silahkan simpan template dan lihat hasilnya ,, selamat ya anda kini sudah bisa membuat template blog sendiri  , BTW gimana nih , pusing atau nggak dengan tutorial diatas , kalau masih baru pertama kali membuat template mungkin anda pusing , tapi lama-kelamaan kalau udah terbiasa anda akan biasa saja.

oke sekian dulu postingan saya tentang Cara Membuat Template Blogger Sendiri Part 2, jangan lupa di postingan saya selanjutnya tentang template blogger atau tentang blogger. postingan ini di support oleh KODEKEN. Terima Kasih yah sudah membaca sedikit postingan saya semoga bermanfaat yah postingan saya ini.

Cara Membuat Template Blogger Sendiri


Hy Kawan-kawan Blogger kali ini saya membuat postingan pertama kali dengan judul Cara Membuat Template Blogger Sendiri oh iya perkenalkan nama saya Keanu Rivaldy, saya baru memasukin dunia pembloggingan jadi mohon maklumi yah postingan saya kalau ada yang salah dan kata-kata yang tidak bijak.

ngomong-ngomong tentang Membuat Template Blogger itu sangat tidak mudah dan harus paham dengan pemrograman Web seperti HTML, CSS, JavaScript, Dan Lain-lain.
pembuatan Template Blogger apakah lama?
Ya tentu saja lama, karena kita harus merangkai kemampuan Pemrograman Web Kita, saya juga kadang Membuat Template kadang gagal tapi saya tidak menyerah gitu aja, oh walah curhat saya oke langsung kita ke tutorialnya aja yah, biar nggak menghabiskan waktu yang lama.

Cara Membuate Template Part 1
pertama-tama kita harus membuat kerangkanya terlebih dahulu, apa saja? Structure, Header, Content, Sidebar, Dan Footer. liat gambar Layout yang akan kita buat.

Image Masyadi.com
Langkah-langkahnya yang akan kita buat sekarang
  1. Pertama Kita masuk dulu ke situs blogger.com, setelah masuk menggunakan akun google, Kita ke Edit HTML. Kemudian Setelah itu Kita hapus semua kode yang ada di Edit HTML, kalau sudah kita hapus kita masukan kode dibawah ini ke Edit HTML Kita.
    
<?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='Keanu Rivaldy' 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 : Keanu Rivaldy/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'>

</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. Kita Save dan lanjutkan tutorialnya lagi membuat Wrapper.
Membuat Wrapper Pada Template

Setelah Kita memasukan kode diatas kita Membuat Wrapper 
  1. Pasang CSS berikut diatas kode </style>
    
#wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}
  2. Kemudian supaya  CSS tadi bekerja kita harus panggil dengan memasang HTMLNYA, cara nya kita cari kode <body> kemudian kita letakan kode dibawah ini tepat, dibawah kode <body> tersebut.
    
<div id='wrapper'>
  3. Kemudian Kita tutup kode wrapper  diatas yang kita pasang tadi dengan kode tag penutup div dibawah ini, diatas kode </body> 
    
</div>
  4. Nah sekarang coba kita simpan Template dan lihat hasilnya yang kita buat tadi, sampai disini kita sudah bisa membuat template sederhana, tetapi template kita hanya ada widget postingannya saja.
oke sekian dulu postingan saya tentang Cara Membuat Template Blogger Sendiri, jangan lupa di postingan saya selanjutnya tentang template blogger atau tentang blogger. postingan ini di support oleh KODEKEN. 

 Jangan Lupa Kunjungi Tulisan Keanu

 Terima Kasih yah sudah membaca sedikit postingan saya semoga bermanfaat yah postingan saya ini.

Hy Kawan-kawan Blogger kali ini saya membuat postingan kedua kalinya dengan judul Cara Membuat Template Blogger Sendiri Part 2 oh iya perkenalkan nama saya Keanu Rivaldy, saya baru memasukin dunia pembloggingan jadi mohon maklumi yah postingan saya kalau ada yang salah dan kata-kata yang tidak bijak.

Cara Membuate Template Part 2
nah kita sudah sampai di cara kedua membuat template, apa saja yang akan kita bahas?membuat Header dan Header Ads, Post dan Sidebar, .Dan Footer. langsung kita simak ke tutorialnya.

Cara Membuat Header dan Header Ads
setelah Kita membuat wrapper sebagai pembungkus, kini Kita akan membuat Header dan Header Ads (Header yang untuk iklan) caranya dibawah ini.
  1. Pasang CSS Header berikut diatas kode </style> 
    
#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;}
  2. Pasang HTML berikut dan letakkan dibawah <div id='wrapper'>
    
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Google Kuy Blogger Template (Header)' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
<div class='clear'/>
</header>
  3. Save Template.
Cara Membuat Post dan Sidebar Di Blog
Langkah selanjutnya yaitu kita buat sidebar dan postingan , kali ini postingan dan sidebar yang kita buat , letak sidebarnya berada sebelah kiri float:left dan artikel berada disebelah kanan Float:right caranya yaitu :
  1. Pasang CSS Postingan dan Sidebar berikut diatas kode </style>
    
#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}
  2. Pasang HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>
    
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
  3. Pasang HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>
    
<aside id='artikel-wrapper'>
  4. Tutup HTML artikel tadi dengan meletakan kode penutup berikut tepat di bawah </b:section> yang terakhir (widget posting blog) atau di atas </div> terakhir
    
</aside>
Membuat Footer 3 Kolom di Blog
Langkah yang terakhir adalah kita membuat footer 3 kolom ,  yang letaknya paling bawah , langsung aja berikut cara membuat footer 
  1. Pasang CSS Footer berikut diatas kode </style>
    
#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}
  2. Pasang HTML Footer berikut dan Letakkan tepat di atas </div> yang terkahir
    
<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>
Nah jika langkah diatas telah selesai silahkan simpan template dan lihat hasilnya ,, selamat ya anda kini sudah bisa membuat template blog sendiri  , BTW gimana nih , pusing atau nggak dengan tutorial diatas , kalau masih baru pertama kali membuat template mungkin anda pusing , tapi lama-kelamaan kalau udah terbiasa anda akan biasa saja.

oke sekian dulu postingan saya tentang Cara Membuat Template Blogger Sendiri Part 2, jangan lupa di postingan saya selanjutnya tentang template blogger atau tentang blogger. postingan ini di support oleh KODEKEN. Terima Kasih yah sudah membaca sedikit postingan saya semoga bermanfaat yah postingan saya ini.
Password Untuk Template
Tips Blogger
Subscribe to: Post Comments (Atom)

Subscribe Our Newsletter

Notifications

Disqus Logo