Cara Membuat Template Blog Sendiri Mulai dari Nol - Hallo sahabat Didhiksty Blog, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Template Blog Sendiri Mulai dari Nol, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogsot Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Template Blog Sendiri Mulai dari Nol
link : Cara Membuat Template Blog Sendiri Mulai dari Nol

Cara Membuat Template Blog Sendiri Mulai dari Nol

Begini Cara Membuat Template Blogspot Sendiri dengan mudah dan cepat menggunakan Notepad - Dalam mendesign atau membuat template berpaltfone blogger tidaklah begitu sulit , anda hanya perlu sedikit menguasi CSS dan HTML dan Java Script , Bahkan dengan menguasai CSS dan HTML saja anda sudah bisa membuat template blogger sendiri yang keren , Template yang saya pakai ini pun juga template hasil buatan saya sendiri , meskipun hasilnya tidak begitu baik , tapi saya puas , karena itu hasil karya saya sendiri

Perlu waktu yang tidak singkat , untuk membuat template blog sendiri , butuh waktu berjam -jam , berhari-hari bahkan sampai berminggu - minggu untuk menghasilkan template yang berkwalitas , oleh sebab itulah mengapa para pembuat template tidak senang kalau link crdit hasil jerih payahnya di hapus oleh si pemakai , jadi ketika anda memakai template unduhan entah itu 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 Sendiri

Kali ini kita akan membuat template blogspot sendiri dengan structure , header , content , sidebar dan footer
Berikut layout template yang akan kita buat

Berikut langkah - langkah membuat template blogspot sendiri

1. Pertama anda masuk dulu ke editor Template Blogger

Hapus semua kode yang ada di dalam editor template tersebut ( ctrl + 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 == &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 : 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 ) caranya yaitu

Pasang Css berikut diatas kode </style>

#wrapper{

background:#FFF;

width:1024px;

overflow:hidden;

margin:0 auto;

}

Kemudian supaya css tadi berfungsi kita panggil dengan memasang
htmlnya , caranya kita cari kode <body> kemudian letakan kode
dibawah ini tepat , dibawah kode <body> tersebut
```
<div id='wrapper'>
```

Kemudian kita tutup kode wrapper diatas dengan memasang kode penutup div dibawah ini diatas kode</body>
```
</div>
```

Nah sekarang coba anda simpan template dan lihat hasilnya , sampai
disini anda sudah bisa membuat template sederhana , tetapi hanya ada
widget postingan saja ( Baca cara selanjutnya )

Cara membuat Header dan Header Ads

Setelah anda membuat wrapper sebagai pembungkus , kini kita akan buat
header dan header ads ( header untuk iklan ) caranya yaitu :

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;}

Pasang HTML berikut dan letakan dibawah

<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 :

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}

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>

Pasang HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>
```
<aside id='artikel-wrapper'>
```

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

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}

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 ,
Oh ya template di atas tadi masih dasar , nanti kita akan membuat menu
navigasi , auto readmore , breadcrumbs , related post , share artikel
dan design Responsive

Demikianlah Artikel Cara Membuat Template Blog Sendiri Mulai dari Nol

Sekianlah artikel Cara Membuat Template Blog Sendiri Mulai dari Nol 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 Mulai dari Nol dengan alamat link https://didhiksty.blogspot.com/2018/03/cara-membuat-template-blog-sendiri.html

Didhiksty Blog

Music

Saturday 24 March 2018

Cara Membuat Template Blog Sendiri Mulai dari Nol

No comments:

Post a Comment

Main Slider

KATEGORI

Trending

About

Popular Posts

Didhiksty Blog

Music

Saturday 24 March 2018

Cara Membuat Template Blog Sendiri Mulai dari Nol

Baca juga

Cara Membuat Template Blog Sendiri Mulai dari Nol

Cara Membuat Template Blog Sendiri

Membuat wrapper pada Template

Cara membuat Header dan Header Ads

Cara Membuat Post dan sidebar di Blog

Membuat Footer 3 Kolom di Blog

Demikianlah Artikel Cara Membuat Template Blog Sendiri Mulai dari Nol

No comments:

Post a Comment

Main Slider

KATEGORI

Trending

About

Popular Posts