CARA MEMBUAT TEMPLATE BLOG SENDIRI YANG KEREN
Dalam mendesign atau membuat template atau membuat template berpaltfone blogger tidaklah begiu sulit, anda hanya perlu sedikit menguasai CSS dan HTML saja sudah bisa membuat template blogger sendiri yang keren .
Perlu waktu yang tidak singkat , untuk membuat template blog sendiri, butuh waktu berjam - jam , berhari-hari bahkan sampai berminggu - minggu untuk menghasilkan template yang berkualitas , oleh sebab itu lah mengapa para pembuat template tidak senang kalau link credit hasil jerih payahnya di hapus oleh si pemakai , jadi ketika anda memakai template unduhan entah gratisan atau premium , maka jangan hapuslah link credit si pembuat template tersebut , hargailah karya orang lain jika anda ingin di hargai.
CARA MEMBUAT TEMPLATE BLOG
Kali ini kita akan membuat template blogspot sendiri dengan struktur ,header ,content,sidebar dan footer.
Berikut layout template yang akan di buat :
Berikut langkah - langkah membuat template blogspot sendiri.
1. Pertama anda masuk ke editor Template Blogger
Membuat wrapper pada Template
Setelah anda mengcopas semua kode dasar template tersebut ,kini saatnya kita membuat wrapper paling luarnya , misal kita akan buat ukuran 1024px (ukuran bisa diubah) cara nya yaitu :
1.Pasang CSS berikut diatas kode </style>
2. Kemudian supaya CSS tadi berfungsi kita panggil dengan memasang html nya , cara nya kita cari kode <body> kemudian letakan kode di bawah ini tepat, di bawah kode <body> tersebut :
3. Kemudian kita tutup kode wrapper di atas dengan memasang kode penutup div dibawah ini di atas kode </body>
4. nah sekarang coba anda simpan template dan lihat hasilnya, sampai disini anda bisa membuat template sederhana , tetapi hanya ada widget postingan saja
Cara Membuat Header Dan Header Ads
Setelah anda membuat wrapper sebagai pembungkus , kini kita akan membuat header dan header Ads (header untuk iklan) caranya yaitu :
1. pasang CSS Header berikut diatas kode </style>
2. Pasang HTML berikut ini dan letakan di bawah <div id="wrapper">
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>
2. Pasang HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>
3. Pasang HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>
4. Tutup HTML artikel tadi dengan meletakan kode penutup berikut tepat di bawah </b:section> yang terakhir (widget posting blog) atau diatas </div> terakhir
Membuat Footer 3 Kolom di Blog
Langkah yang terakhir adalah kita membuat footer 3 kolom , yang letaknya paling bawah, langsung saja berikut kode nya :
1. Pasang CSS Footer berikut di atas kode </style>
2. Pasang HTML Footer berikut dan letakan tepat di atas </div> yang terakhir.
Nah jika langkah di atas telah selesai silahkan simpan template dan lihat hasilnya, selamat ya anda kini sudah bisa membuat template blog sendiri , BTW gimana nih, pusing atau tidak dengan tutorial di atas , kalau masih baru pertama kali membuat template mungkin anda pusing , tapi lama -kelamaan kalau sudah terbiasa anda akan biasa saja, upzzz template di atas tadi masih dasar , nanti kita akan membuat menu navigasi, auto readmore ,, breadcrumbs, related post, share artikel, dan design Responsive.
Perlu waktu yang tidak singkat , untuk membuat template blog sendiri, butuh waktu berjam - jam , berhari-hari bahkan sampai berminggu - minggu untuk menghasilkan template yang berkualitas , oleh sebab itu lah mengapa para pembuat template tidak senang kalau link credit hasil jerih payahnya di hapus oleh si pemakai , jadi ketika anda memakai template unduhan entah gratisan atau premium , maka jangan hapuslah link credit si pembuat template tersebut , hargailah karya orang lain jika anda ingin di hargai.
CARA MEMBUAT TEMPLATE BLOG
Kali ini kita akan membuat template blogspot sendiri dengan struktur ,header ,content,sidebar dan footer.
Berikut layout template yang akan di buat :
Berikut langkah - langkah membuat template blogspot sendiri.
1. Pertama anda masuk ke editor Template Blogger
Hapus semua kode yang ada didalam editor template tersebut (control + a => delete), kemudian copy dan pastekan semua kode dibawah ini didalam kolom editor template tersebut :
<?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 == "index"'>
<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 != "index"'>
<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>
*/
<style type="text/css"><!-- /* <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'>
</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>Membuat wrapper pada Template
Setelah anda mengcopas semua kode dasar template tersebut ,kini saatnya kita membuat wrapper paling luarnya , misal kita akan buat ukuran 1024px (ukuran bisa diubah) cara nya yaitu :
1.Pasang CSS berikut diatas kode </style>
#wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}2. Kemudian supaya CSS tadi berfungsi kita panggil dengan memasang html nya , cara nya kita cari kode <body> kemudian letakan kode di bawah ini tepat, di bawah kode <body> tersebut :
<div id='wrapper'>3. Kemudian kita tutup kode wrapper di atas dengan memasang kode penutup div dibawah ini di atas kode </body>
</div>
4. nah sekarang coba anda simpan template dan lihat hasilnya, sampai disini anda bisa membuat template sederhana , tetapi hanya ada widget postingan saja
Cara Membuat Header Dan Header Ads
Setelah anda membuat wrapper sebagai pembungkus , kini kita akan membuat header dan header Ads (header untuk iklan) caranya yaitu :
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 ini dan letakan di bawah <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>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 diatas </div> terakhir
</aside>
Membuat Footer 3 Kolom di Blog
Langkah yang terakhir adalah kita membuat footer 3 kolom , yang letaknya paling bawah, langsung saja berikut kode nya :
1. Pasang CSS Footer berikut di atas 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 letakan tepat di atas </div> yang terakhir.
<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 di atas telah selesai silahkan simpan template dan lihat hasilnya, selamat ya anda kini sudah bisa membuat template blog sendiri , BTW gimana nih, pusing atau tidak dengan tutorial di atas , kalau masih baru pertama kali membuat template mungkin anda pusing , tapi lama -kelamaan kalau sudah terbiasa anda akan biasa saja, upzzz template di atas tadi masih dasar , nanti kita akan membuat menu navigasi, auto readmore ,, breadcrumbs, related post, share artikel, dan design Responsive.
0 Response to "CARA MEMBUAT TEMPLATE BLOG SENDIRI YANG KEREN"
Posting Komentar