Cara Membuat Template Blog Sendiri - Template Blogger merupakan tema tampilan dalam blog yang bertujuan umum untuk mempercantik dan mempermudah visitor mengakses blog dengan baik. Template blog sangat penting dalam blogger, berguna juga untuk memperindah tampilan dalam blog kamu.
Template sangat berpengaruh, karena terdapat kode-kode khusus yang dapat memanggil sebuah fungsi agar dapat post menjadi lebih baik dan berada di tampilan pertama google. Dan juga berperan penting jika kamu ingin berpenghasilan dari blog dengan syarat template yang sederhana yang telah menjadi aturan dalam Google Adsense.
Langkah-langkah dalam membuat template tidaklah sulit, dan diperlukan menguasai dasar dalam Programing League(Bahasa Pemrograman) HTML,CSS,Javascript. Itu hal terpenting dalam pembuatan template blog.
Disini akan mengupas tentang dasar pembuatan Template dasar yang harus ada dalam blog.
 |
| Theme Blogger |
Template sangat berpengaruh, karena terdapat kode-kode khusus yang dapat memanggil sebuah fungsi agar dapat post menjadi lebih baik dan berada di tampilan pertama google. Dan juga berperan penting jika kamu ingin berpenghasilan dari blog dengan syarat template yang sederhana yang telah menjadi aturan dalam Google Adsense.
Langkah-langkah dalam membuat template tidaklah sulit, dan diperlukan menguasai dasar dalam Programing League(Bahasa Pemrograman) HTML,CSS,Javascript. Itu hal terpenting dalam pembuatan template blog.
Disini akan mengupas tentang dasar pembuatan Template dasar yang harus ada dalam blog.
Cara Membuat Template Blogger
 |
| struktur theme |
Hal terpenting yaitu struktur dalam template meliputi tag <head> dan <body> dan di akhiri </head> untuk bagian kepala dan </body> untuk bagian badan.
Fungsi dari head menjadi sebuah kode yang akan di panggil oleh body, begitu dengan body memanggil fungsi dari head. Di bagian Head Meliputi CSS,Javascript, Meta konten.
Dibagian Body terdapat HTML,kode Pemanggilan,Javascript,dll. dan didalamnya meliputi Posting,Header,Sidebar,Footer.
Berikut kode yang di ambil sebagai contoh.
<?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='isi dengan verifikasi' name='google-site-verification'/><meta content='isi dengan verifikasi' name='msvalidate.01'/><meta content='isi dengan verifikasi' name='alexaVerifyID'/><meta content='index, follow, noodp, noydir' name='robots'/><meta content='id' name='geo.country'/><meta content='Pemilik' 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-kamu' 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[/*disini mengisi data tentang template blog yang kamu buat sendiri*/#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:#ffffff;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>
Script di atas belum terlengkapi dengan <b:include> coment,breadcrumb,sidebar,footer dan lain-lain.
dan juga belum terlengkapi kode pemanggil javascript.
Contoh memanggil tombol button
Maka akan menghasilkan tombol. Itu fungsi dari css.
dan juga belum terlengkapi kode pemanggil javascript.
Contoh memanggil tombol button
<div class='button'></div>
maka memanggil script CSS agar terdapat tampilan
<style type='text/css>
.button {background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;}
</style>
Maka akan menghasilkan tombol. Itu fungsi dari css.
Bagian-bagian dalam Template
Cara Membuat Header:
<style>#header-wrapper{width:100%;overflow:hidden;}#header{width:262px;overflow:hidden;float:left;}.header .widget{padding:10px;}</style>dan pasang di bawah <div id='wrapper'><header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'><b:widget id='Header1' locked='true' title='(Header)' type='Header'></b:widget></b:section><div class='clear'/></header>
Cara Membuat Sidebar dan Posting
<style>#post-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}</style>
Untuk sidebar
<aside id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section></aside>
dan Posting
<aside id='post-wrapper'></aside>
Cara Membuat Footer 2 kolom
<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}</style>
letakkan bagian bawah
<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'/></footer>
Kode script di atas masih dalam bagian dasar pembuatan template blogger dan hanya bisa berjalan dengan sangat sederhana. Kamu bisa menambah dan memodifikasi dengan berbagai widget yang telah ada sehingga menjadi lebih baik dan berfungsi dengan baik juga.
Baca Juga: Cara Membuat Breadcrumbs yang terindex Google di Blog
Membuat template sendiri sangat puas karena dari hasil jerih payah kita dan sangat leluasa kita mengubah dan menambahkan kode-kode tanpa terjadi pelanggaran. Anda juga dapat menambah kredit jika template anda tidak ingin dirubah oleh seseorang.
Baca Juga: Cara Membuat Breadcrumbs yang terindex Google di Blog
Membuat template sendiri sangat puas karena dari hasil jerih payah kita dan sangat leluasa kita mengubah dan menambahkan kode-kode tanpa terjadi pelanggaran. Anda juga dapat menambah kredit jika template anda tidak ingin dirubah oleh seseorang.
Sekian & Terimakasih.
8 comments
makasih min ilmunya jadi bs bkn sendri hehe
saya masih bingung gan... baru pertama nyoba :D
waduuuh liat script nya aj udh pusing. kagak mampu kayaknya ane bikin ni template.
Wah tutorialnya bagus gan, ijin bookmark dulu buat nantinanti
Wah tutorialnya bagus gan, ijin bookmark dulu buat nantinanti
Mantap Gan,
Klik Disini
mantaplah pokonya
-> Komentar (relevan) sesuai posting di atas.
-> Dilarang Menyertakan Link/Url