Disini saya ingin membagikan artikel yang berbeda dengan yang lainnya dimana saya akan membagikan tutorial plus template yang sudah saya buat dari awal sampai sudah fix untuk digunakan oleh Anda, dan tidak perlu khawatir soal masalah seo friendly maupun responsive.

Ohh iya, tidak sedikit teman-teman saya yang menanyakan tentang peralatan apa saja yang harus dipersiapkan untuk membuat template ini sendiri. Saya sendiri kebetulan tidak menggunakan software tambahan seperti notepad++, firebug, coffecup, ataupun software untuk coding lainnya, cukup coding di platfrom blogger saja sudah ckup bagi saya untuk mempelajari bagian-bagian setiap template.

Cara Membuat Template Blog Sendiri Dari Awal di Blogger


Sebelum memulai, ada baiknya Anda harus mempelajari dulu apa itu HTML, CSS, dan Javascript. Karna sangat berpengaruh untuk pembuatan template yang Anda build dari awal. Anda bisa belajar secara online lewat web-web yang memberikan tutorial dan tips mempelajari hal coding seperti W3S, Duniailkom, Codeacademy, DTE, dan web lainnya yang sudah banyak tersebar di internet, Anda bisa mencarinya sendiri.

Pembuatan Struktur Template


Disini saya akan membuat struktur templatenya dahulu seperti HTML, Head, dan Body. Dan disusul dengan penambahan CSS, widget, dan lainnya. Berikut tutorial yang bisa saya berikan dari pengalaman saya memasuki dunia coding secara otodidak.


<HTML>
&lt;head&gt;

   // Untuk memasukan meta, css, js

&lt;/head&gt;&lt;!--<head/>--&gt;
<body>

   // Untuk memanggil fungsi yang sudah Anda buat di head

&lt;!--</body&gt:--&gt; &lt;/body&gt;
</HTML>

Langkah selanjutnya adalah menambahkan bagian style dan bskin. Jika tidak ada, maka akan terjadi error jika tidak percaya coba saja heheh.


&lt;!--<b:skin><![CDATA[

   // Silakan masukkan css disni

]]></b:skin>

Lalu kita tambahkan attribut section yang berguna untuk memanggil widget dan postingan blog Anda nanti.


   // Digunakan pada bagian dalam tag body sesudah tag header

<b:section class='main' id='main'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>

Diatas merupakan kode dimana untuk memanggil attribut postingan/artikel, jadi artikel Anda bisa disetting pada bagian tersebut. Dan dibawah ini merupakan kode untuk memanggil attribut widget sidebar.


<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>

Jika Anda ingin membuat widget seperti footer dan widget tambahan lainnya silakan Anda edit saja bagian class dan id. Contohnya adalah jika Anda ingin membuat footer silakan Anda ganti menjadi class='footer' id='footer'.

Dan dibawah ini untuk membuat bagian header pada template Anda.


   // Digunakan pada bagian dalam tag body sebelum tag main blog

<b:section class='header' id='header' maxwidgets='1'>
   <b:widget id='Header1' locked='true' title='BUNG MADAF (Header)' type='Header'></b:widget>
</b:section>

Back to Top ↑

Pembuatan Bagian Header Pada Template


Nah sekarang kita keproses pembuatan header pada templatenya. Silakan copy semua css dan html dibawah ini kedalam template Anda.


<header id='jp' itemscope='itemscope' itemtype='http://schema.org/WPHeader' role='banner'>
<b:section class='' id='jpt' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='BUNG MADAF(Header)' type='Header'></b:widget>
</b:section>
<b:section class='jpk' id='jpk' maxwidgets='1' showaddelement='yes'></b:section>
<div class='clear'/>
</header><!-- end header-wrapper -->


/* Header */
#ha{width:auto;height:auto;background:#2a58e0;-webkit-box-shadow:0 3px 5px rgba(0,0,0,0.25);box-shadow:0 3px 5px rgba(0,0,0,0.25)}
#jp{position:relative;display:block;padding:20px 0 10px 0;overflow:hidden;}
#jpt{float:left;width: 30%;padding:5px}
#jp .title{color:#222;font-size:260%;letter-spacing:1px;line-height:1.4em;margin:0;}
#jp .title a{color:#222;}
#jp .title a:hover{color:#dd5252;}
#jp p.description{margin:5px auto 0 auto;color:#444;}
#jpgd{height: 80px;margin-top: 10px;}
.jp img,.jpk img{display:block;}
.jpk img{max-height:90px;}
.jpk{float:right;padding:0;overflow:hidden;margin:10px 0 0 0;width:100%;max-width:728px}

Back to Top ↑

Pembuatan Bagian Navigation Pada Template


Next adalah membuat navigasi pada template, agar terlihat elegant dan profesional. Silakan copy kode dibawah ini kedalam template Anda.


<nav id='nav' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='menu-slide' href='#'><i class='fa fa-list'/> Menu</a>
<ul class='nav arlina-mainmenu'>
<li><a class='active' href='/'><span itemprop='name'>Home</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Web Tools</span></a>
<ul>
<li><a href='http://www.arlinadzgn.com/p/ads-converter.html' itemprop='url'><span itemprop='name'>Ad Converter</span></a></li>
<li><a href='http://www.arlinadzgn.com/p/color-picker.html' itemprop='url'><span itemprop='name'>Color Picker</span></a></li>
<li><a href='http://www.arlinadzgn.com/p/css-filter.html' itemprop='url'><span itemprop='name'>CSS Filter</span></a></li>
<li><a href='http://www.arlinadzgn.com/p/css-minifier.html' itemprop='url'><span itemprop='name'>CSS Minifier</span></a></li>
<li><a href='http://www.arlinadzgn.com/p/css-triangle.html' itemprop='url'><span itemprop='name'>CSS Triangle</span></a></li>
<li><a href='http://www.arlinadzgn.com/p/font-awesome.html' itemprop='url'><span itemprop='name'>Fontawesome</span></a></li>
<li><a href='http://www.arlinadzgn.com/p/kamus-html_21.html' itemprop='url'><span itemprop='name'>Kamus HTML</span></a></li>
</ul>
</li>
<li><a href='http://www.arlinadzgn.com/search/label/SEO?&amp;max-results=6' itemprop='url'><span itemprop='name'>SEO</span></a></li>
<li><a href='http://www.idntheme.com' itemprop='url' target='_blank'><span itemprop='name'>Template</span></a></li>
<li><a href='http://www.arlinadzgn.com/search/label/Tips%20Blogger?&amp;max-results=6' itemprop='url'><span itemprop='name'>Tips Blogger</span></a></li>
<li><a href='http://www.arlinadzgn.com/search/label/Widget?&amp;max-results=6' itemprop='url'><span itemprop='name'>Widget</span></a></li>
</ul>
  </nav>


/* nav */
a.menu-slide{display:none;background:transparent;padding:0 15px;height:46px;line-height:46px;color:#fff;text-transform:uppercase}
a.menu-slide:hover,#ja{color:#fff;}
#nav {font-size:14px;font-weight:700;background:transparent;height:56px;line-height:56px;margin:0 auto;}
.arlina-mainmenu {background:transparent;list-style:none;margin:0;float:left;}
.arlina-mainmenu:before,.arlina-mainmenu:after {content: &quot; &quot;;display:table;}
.arlina-mainmenu:after {clear:both;}
.arlina-mainmenu ul {list-style:none;margin:0;width:11em;}
.arlina-mainmenu a {display:block;padding:0 15px;}
.arlina-mainmenu li {position:relative;margin:0;}
.arlina-mainmenu &gt; li {float:left;}
.arlina-mainmenu &gt; li &gt; a {display:block;font-size: 15px;height:56px;line-height:56px;color:#fff;overflow:hidden;transition:initial}
.arlina-mainmenu &gt; li &gt; a.active {border-bottom:4px solid #fff;color:#fff;}
.arlina-mainmenu &gt; li:hover &gt; a {background:transparent;color:#fff;border-bottom:4px solid rgba(255,255,255,0.2);}
.arlina-mainmenu &gt; li:hover &gt; a.active {border-bottom:4px solid #fff;}
.arlina-mainmenu li ul {background:#fafafa;display:block;position:absolute;top:50%;left:0;z-index:10;visibility:hidden;opacity:0;transition:all .3s}
.arlina-mainmenu li li ul {left:100%;top:-1px;}
.arlina-mainmenu &gt; li.hover &gt; ul {visibility:visible;opacity:1;top:100%;}
.arlina-mainmenu li li.hover ul {visibility:visible;opacity:10;}
.arlina-mainmenu li li a {display:block;color:#768187;position:relative;z-index:100;height:42px;line-height:42px;font-weight:400;transition:initial}
.arlina-mainmenu li li a:hover {background:#3cc091;color:#fff;}
.arlina-mainmenu li li li a {background:#fff;z-index:20;color:#151515;}
.arlina-mainmenu li .parent:after {content: &quot;\f0d7&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#858d8f;}
.arlina-mainmenu li:hover .parent:after{color:#fff;}
.arlina-mainmenu li ul li .parent:after {content: &quot;\f0da&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px;color:#768187;float:right;}
.arlina-mainmenu li ul li .parent:hover:after {color:#fff;}
#search-form {background:#0a3d53;float:right;margin:0;width:210px;}
#search-form table {width:100%;margin:0;}
#search-form input#search-box[type=&quot;text&quot;] {background:#fff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;border:none;}
#search-form input#search-button[type=&quot;submit&quot;] {font-family:FontAwesome;background:#3cc091;color:#fff;height:36px;line-height:36px;margin:5px 10px 5px -2px;padding:0 15px;border:none;outline:none;transition:all 0.25s;}
#search-form input#search-button[type=&quot;submit&quot;]:hover{background:#37b185;cursor:pointer;}
#search-form input#search-box[type=&quot;text&quot;]:focus {background:#fdfdfd;outline:none;}
#blog-pager .pageicon{font-size:200%;line-height:17px}#blog-pager{width:100%;font-family:&#39;Roboto&#39;,Arial}
#blog-pager a,.showpagePoint{padding:10px 14px}#blog-pager{clear:both;overflow:visible;width:auto;background-color:#fff;margin:40px 0 20px 20px;padding:0;text-align:center;line-height:normal;font-size:13px;font-weight:400}.blog-pager,#blog-pager{margin:10px 0 15px;padding-top:20px;clear:both;text-align:left}.showpageOf{display:inline-block;font-size:90%;vertical-align:top;padding:10px 18px;line-height:21px;font-weight:700;background:#eee;text-transform:uppercase;color:#444;border-radius:3px;margin-right:5px}.showpage a,.showpageNum a,.showpagePoint{display:inline-block;vertical-align:top;background:#eee;height:40px;line-height:20px;border-radius:3px;margin:0;margin-left:5px;font-size:13px;text-align:center;font-weight:700;color:#666;transition:all .3s ease-in-out}.showpagePoint{background:#07acec;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12)}.showpage a:hover,.showpageNum a:hover{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);background-color:#07acec;color:#fff;transition:all .3s ease-in-out}

Back to Top ↑

Pembuatan Bagian Sidebar Pada Template


Untuk sidebar si tidak terlalu rumit yah, tinggal kasih saja style float right dan otomatis sudah berada di sebelah kanan. Disini saya tulis dengan style popular post saja yah, nnti Anda tinggal terapkan saja widget popular postnya.


/* sidebar */
  #sw{float:right;width:30%;padding:10px;}
/* Bagian bawah */
.ca{background: rgba(17,17,17,.95);
    font-size: 11px;
    overflow: hidden;
    padding: 18px;
    line-height: 18px;}.ca,.ca a{color: #7b7b7b;}
.tabs ul{list-style:none;padding:0;margin:0}.tab h2{font-size:12px;font-weight:700;padding:5px 15px;display:block;line-height:37px;transition:All .4s ease-out}.tab h2:hover{border-bottom-color:#d6d6d6}.tabs .widget{border:none!important}.tabs,.tab{margin:0;overflow:hidden}.tabs .tab{padding:0}.tabs-menu{padding:0;margin:0;margin-bottom:0;box-shadow:0 0 0 1px #D3D3D3}.tabs-menu li{margin-bottom:0;margin-top:0;font-size:12px;font-weight:700;line-height:37px;width:33%;list-style:none;text-align:center;display:inline-block;padding:5px 0;background:#22A65A;color:#fff;border-bottom:3px solid #22A65A;cursor:pointer;position:relative;transition:all .1s ease-out}.tabs-menu li:last-child{border-right:0}.tabs-menu li span{margin-left:2px;font-size:13px;text-transform:uppercase;font-family:&#39;Open Sans&#39;,Arial}.tabs-menu .active-tab{border-color:#26F881;transition:all .5s ease-in-out}.tabs-content{padding:10px;background:#fff;border-top:none;margin-bottom:15px}.tabs-content .sidebar li{margin:0;padding:0}.tabs-content .widget li{background:#fff;color:#333;float:none!important;padding:0 20px}.tabs-content .widget ul{background:#fff;color:#333;overflow:visible}
/* Popular Post */
.item-snippet {display:none}
.PopularPosts .item-thumbnail{float:left;margin:0}
#PopularPosts1 h2,#PopularPosts2 h2 {margin:0}
.PopularPosts .popular-posts ul li{background:#fff;list-style:none;overflow:hidden;margin: 0 0 10px 0;     padding: 0 10px;}
#PopularPosts1 .popular-posts,#PopularPosts2 .popular-posts {position:relative}
.PopularPosts ul {counter-reset:trackit}
.PopularPosts .popular-posts ul li .item-content {counter-increment:trackit}
div.item-thumbnail-only {counter-increment:trackit}
.PopularPosts .popular-posts ul li a{color:#333;transition:all .3s;font-size:13px!important;font-weight: 700;}
.PopularPosts .popular-posts ul li a:hover {color:#2DCC70}
.PopularPosts .item-title{display:table-cell;vertical-align:middle;line-height:normal;text-overflow:ellipsis;padding:10px 10px 0 10px}
.PopularPosts .item-thumbnail img {display:block;float:left;border-radius:100%;width:70px;height:auto;padding:0}
.popular-posts ul {padding-left: 0;}
#footer-wrapper .popular-posts ul li:nth-child(n+4) {display:none;}
#footer-wrapper .popular-posts ul li {border-bottom-color:#4f4f4f;background:#262525;}
#footer-wrapper .popular-posts ul li:nth-child(3) {border-bottom:0;}
.makesticking{background:none!important;position:fixed;top:15px;z-index:20;-webkit-transform:translateZ(0);}
#PopularPosts2 .widget-content {margin:auto;}
#sidebar2 .widget-content {margin-top:7px;color:#fff}
#sidebar2 ul{font-size:100% !important;list-style:none; margin:0; padding:0 10px 10px;}
#sidebar2 li{font-size:100% !important;margin:0; padding:0 0 .25em 0; line-height:18px;color:#aaa;font-weight:normal}
#sidebar2 ul li{padding-top:10px; padding-bottom:10px}
#sidebar2 ul li:last-child {border-bottom:none}


<aside id='sw' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'>
<div class='tabs tabs-1'>
<b:section class='tab tab1 section' id='tab1' maxwidgets='3' showaddelement='yes'>
<b:widget id='PopularPosts2' locked='false' title='Popular' type='PopularPosts'></b:widget>
</b:section>
<b:section class='tab tab2 section' id='tab2' maxwidgets='3' showaddelement='yes'>
<b:widget id='Label1' locked='false' title='Label' type='Label'></b:widget>
</b:section>
<b:section class='tab tab3 section' id='tab3' maxwidgets='3' showaddelement='yes'>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'></b:widget>
</b:section>
</div>

Back to Top ↑

Pada template yang saya buat kali ini tidak memakai footer wrapper, jika Anda ingin memberikan footer wrapper, silakan ikuti langkah pertama pada bagian membuat struktur template.

Jika Anda berminat dengan template ini, berikut ini merupakan tombol download template yang sudah saya buat dari awal hingga benar-benar jadi dan fast loading.


Demikian artikel kali ini yang membahas tentang panduan membuat template blog sendiri secara online dari awal lengkap dengan attributnya, semoga bermanfaat, terimakasih.