Saturday, 24 March 2018

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


  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
    htmlnya , caranya kita cari kode <body> kemudian letakan kode
    dibawah ini tepat , dibawah kode <body> tersebut
    <div id='wrapper'>



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



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


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



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



  1. 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}


  2. 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

at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Kenapa warga rohingya diusir dari negaranya

  Warga Rohingya telah mengalami pengusiran dan diskriminasi di Myanmar selama beberapa dekade. Konflik terhadap etnis Rohingya bersumber da...