Tips Blogger | Belajar Cara Membuat Template Blogger Sendiri - Template merupakan faktor penentu betah atau tidaknya pengunjung blog selain faktor konten yang berkualitas, banyak sekali bertebaran template-template gratis, yang tentunya tidak ada yang gratis didunia ini, tentu harus ada kompensasi yang diterima dari penyedia template tersebut, biasanya dalam bentuk backlink. Bagi anda yang penasaran ingin membuat template blogger sendiri, tanpa ada backlink yang keluar. berikut ini cara membuat template blogger sendiri.
Tips Blogger | Belajar Cara Membuat Template Blogger Sendiri - Template merupakan faktor penentu betah atau tidaknya pengunjung blog selain faktor konten yang berkualitas, banyak sekali bertebaran template-template gratis, yang tentunya tidak ada yang
gratis didunia ini, tentu harus ada kompensasi yang diterima dari penyedia template tersebut, biasanya dalam bentuk backlink.
gratis didunia ini, tentu harus ada kompensasi yang diterima dari penyedia template tersebut, biasanya dalam bentuk backlink.
Bagi anda yang penasaran ingin membuat template blogger sendiri, tanpa ada backlink yang keluar. berikut ini cara membuat template blogger sendiri.
Untuk memudahkan kita saat mengatur tata letak dengan kode, lebih baik kita merencanakan layout terlebih dahulu, untuk contoh kali ini kita menggunakan layout seperti di bawah ini.
Langkah #1
Untuk memudahkan kita saat mengatur tata letak dengan kode, lebih baik kita merencanakan layout terlebih dahulu, untuk contoh kali ini kita menggunakan layout seperti di bawah ini.
Langkah #2
Untuk memulai pembuatan template pada blogger, kita masuk ke dashboard blogger dan pilih template lalu edit template, hapus semua kode yang ada pada area kode, hapus semua ya. Jika sudah berikan kode dasar untuk template blogger. Kode dasar ini seperti halnya kode wajib pada HTML, untuk lebih jelasnya silakan baca HTML- Introduction.
Taruh kode di bawah ini pada area edit template yang tadi sudah dikosongkan
<?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='Kabelantena' 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[
/*
Komentar ini biasanya ada untuk memberikan nama template, pembuatnya siapa, dan kapan template dibuat, url pembuatnya dan lain sebagainya!
Blogger Template Style
Name : kabelantena Template
Date : Tanggal Pembuatan Template Ini
Updated by : kabelantena
homepage : http://kabelantena.blogspot.com
*/
#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>
Langkah #3
Jika kode dasar sudah ditaruh, maka kita akan buat wrapper atau bisa kita sederhanakan dengan istilah bungkus, karena division wrapper ini menjadi bungkus terluar untuk semua divisi pada body template yang akan kita buat. Untuk membuat wrapper, kita buat style CSS dengan memberikan kode di bawah ini pada element CSS template yang kita buat, taruh kode CSS diantara <style> dan </style>
BACA JUGA : Tutorial CSS Ala kabelantena yang mudah dipelajari
#wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
}
Kemudian kita tuliskan divisi wrapper pada element body.
<div id='wrapper'>
Taruh kode di atas tepat setelah tag <body>, dan taruh kode di bawah ini sebelum </body>
<!-- /div penutup wrrapper -->
</div>
Langkah #4
Setelah membuat wrapper, langkah berikutnya yaitu kita memberikan kode sesuai layout yang telah kita buat seperti gambar di atas. Terlebih dahulu kita berikan kode untuk header dan header-ads.
Berikan pada CSS kode di bawah ini:
#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;}
Lalu berikan kode di bawah ini tepat setelah <div id=wrapper>
<header id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'>
<b:widget id='Header1' locked='true' title='Kabelantena Blogger Template (Header)' type='Header'></b:widget>
</b:section>
<b:section class='header' id='header-ads' maxwidgets='1'/>
<div class='clear'/>
</header>
Langkah #5
Langkah selanjutnya kita mengatur untuk sisi kiri dan divisi untuk postingan, dimana sisi kiri dan postingan juga kita bungkus lagi dengan wrapper sendiri. Berikan kode CSS dengan kode di bawah ini:
#artikel-wrapper{float:right;width:724px;overflow:hidden}
#kabelantenasisikiri-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}
Taruh kode berikut untuk sisi kiri, taruh di atas kode <b:section class='main' id='main'>.
<!-- Mulai kode untuk sisi kiri --> <aside id='kabelantenasisikiri-wrapper'><b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section></aside> <!-- selesai kode sisi kiri -->
Kode aside yaitu untuk side kiri, berhubung untuk postingan belum diatur side nya, maka kita tambahkan aside untuk postingan, Taruh kode dibawah ini di ataas <b:section class='main id='main'>
<!-- Mulai kode untuk postingan-->
<aside id='artikel-wrapper'>
Kemudian berikan penutup untuk aside postingan, taruh kode di bawah ini di atas div penutup wrapper.
</aside>
<!-- Selesai kode untuk postingan-->
Langkah #5
Langkah berikutnya mengatur footer, Taruh kode CSS Berikut :
#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}
Kemudian taruh kode di bawah ini tepat di atas div penutup wrapper
<!-- Mulai kode untuk footer -->
<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>
<!-- Selesai kode untuk footer -->
Sampai disini, template sederhana telah dibuat, tinggal menambahkan menu, atau widget yang lainnya sesuai selera masing-masing.
Post A Comment: