Judul : Cara Membuat Template Blog Sendiri untuk Pemula
link : Cara Membuat Template Blog Sendiri untuk Pemula
Cara Membuat Template Blog Sendiri untuk Pemula
Begini Cara Membuat Template Blogger Sendiri dengan Mudah dan Cepat - Dalam Mendesign atau membuat sebuah template blogger sendiri tidaklah begitu sulit. Kenapa begitu sobat? Karena, sobat hanya perlu menguasai CSS, HTML dan Java Script. Itu adalah faktor penting dalam pembuatan Template Blogger.Bahkan hanya dengan menguasai CSS dan HTML, sobat sudah bisa membuat template blog sendiri yang keren. Tanpa HTML dan CSS mana mungkin template bisa jadi, karena dalam pembuatan template HTML dan CSS sudah seperti pasangan yang tidak mau dipisahkan.
Mas Yoga sendiri juga sudah pernah membuat Template Blogger niche Anime. Yah, walaupun begitu saya juga membutuhkan template yang Mas Yoga redesign HTML dan CSS-nya.
Walaupun template yang saya buat belum dipublikasikan ke Template Blogger di seluruh Indonesia. Mas Yoga merasa bangga, karena saya sendiri sudah bisa membuat template blogger, walaupun tidak keren, yang penting template buatan sendiri.
Yuk di coba : Template Buatan Mas Yoga
Akan tetapi dalam pembuatan template 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.
Banyak para blogger yang salah dalam menggunakan template. Oleh sebab itulah mengapa para pembuat template tidak senang kalau link credit hasil jerih payahnya di hapus oleh si pemakai template , jadi ketika sobat memakai template unduhan entah itu gratisan atau premium , maka jangan hapuslah link credit si pembuat template tersebut , hargailah karya orang lain jika sobat ingin di hargai
Membuat Template Blog Sendiri
Ayo sobat kita belajar membuat template blog sendiri dengan Mas Yoga.
Kali ini template blogger yang akan kita buat yaitu dengan struktur, Header, Header Ads, Sidebar, Content dan Footer.
Berikut adalah gambar template layout yang akan kita buat.
Bagaimana cara membuat template blogger sendiri?
Yuk kita menuju cara pembuatan Template Blogger. lakukan dengan teliti dan jangan lupa untuk dipahami fungsi-fungsi kodenya.
1. Login ke akun blogger sobat, kemudian menuju ke Editor Template.
Jika sudah berada di Editor Template Blogger, hapus semua kode yang ada di kotak editor template (CTRL + A -> Delete).
Dan copy pastekan kode dibawah ini ke dalam editor template sobat.
---- >>>>> KODE HTML DASAR TEMPLATE <<<<< ----
<?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 KODE GOOGLE WEBMASTER' name='google-site-verification'/>
<meta content='ISI DENGAN KODE VERIFY BING' name='msvalidate.01'/>
<meta content='ISI KODE RANK ALEXA' name='alexaVerifyID'/>
<meta content='index, follow, noodp, noydir' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='Mas Yoga' 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/> Mas Yoga <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!!!
Blogger Template Style
Name : Personal Blogger Template
Date : 9 November 2016
Updated by : Mas Yoga/Nama Pembuat Template
*/
#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 Blogger
Setelah sobat mengcopas semua kode dasar yang ada di atas kedalam template sobat, pada tahap selanjutnya kita akan membuat wrapper halaman luar template, kita akan membuat ukuran 1024px (sobat bisa merubah dengan sesuka hati).1. Pertama copy pastekan kode CSS di bawah ini ke dalam template sobat. Tepatnya di atas kode
.
#wrapper{
background:#FFF;
width:1024px;
overflow:hidden;
margin:0 auto;
} <div id='wrapper'> </div> Membuat Header dan Header Ads pada Template
Setelah kita membuat Wrapper untuk pembungkus template blogger, selanjutnya kita akan membuat header dan header Ads (Iklan).1. Copy pastekan kode CSS dibawah ini ke dalam template sobat, tepatnya 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;} <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> Membuat Post dan Sidebar Template Blog
Setelah kita membuat Header dan Header Ads pada template blog, langkah selanjutnya adalah membuat sidebar dan konten/postingan di blog. Kali ini sidebar dan postingan yang akan kita buat, letak sidebar berada di sebelah kiri float:left dan artikel berada di sebelah kanan float:right. Caranya sebagai berikut :1. Pertama copy pastekan kode CSS Sidebar dan Postingan dibawah ini tepat di atas 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} <aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside> <aside id='artikel-wrapper'> </aside> Membuat Footer 3 Kolom pada Template Blog
Setelah selesai membuat sidebar dan postingan di template blog, tahap akahir pembuatan yaitu membuat footer blog, letaknya yang paling bawah pada template. Langsung aja cara buat footer :1. Copy pastekan kode CSS Footer di bawah ini tepat 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} <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> Pusing atau nggak dengan tutorial diatas? kalau masih baru pertama kali membuat template mungkin sobat pusing , tapi lama-kelamaan kalau udah terbiasa sobat akan biasa saja.
Karena tutorial membuat template blogger di atas masih dasar, jadi wajar kalau tampilan templatenya masih belum keren. Jangan bersedih hati sobat blogger, tutorial selanjutnya Mas Yoga akan membagikan cara membuat menu navigasi , auto readmore , breadcrumbs , related post , share artikel dan design Responsive.
Jadi Mas Yoga harap sobat selalu menunggu updetan tutorial di Blog Mas Yoga selanjutnya.
Yuk menuju tutorial untuk memodifikasi template sobat.
➣ Membuat Auto readmore keren diblog.
➣ Membuat Breadcrumb SEO Friendly diblog.
Mohon Maaf ya sobat jika ada kesalahan dalam penulisan kata.
Terima Kasih dan Sampai Jumpa.
Demikianlah Artikel Cara Membuat Template Blog Sendiri untuk Pemula
Sekianlah artikel Cara Membuat Template Blog Sendiri untuk Pemula kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Cara Membuat Template Blog Sendiri untuk Pemula dengan alamat link https://iplanetpost.blogspot.com/2016/11/cara-membuat-template-blog-sendiri.html
0 Response to "Cara Membuat Template Blog Sendiri untuk Pemula"
Posting Komentar