Belajar menciptakan template sederhana tolong-menolong tidaklah susah, hanya saja secara garis beras kita malas untuk melaksanakan hal repot selagi masih ada alternatif lain yaitu mendownload template yang sudah tersedia di google.
Membuat template juga memerlukan waktu yang tidak sedikit tentunya, bukan dalam hitungan jam maupun menit ibarat mendownload template gratis. Sedikit pemahaman wacana HTML dan CSS sangatlah diharapkan dalam desain template, ya meskipun masih ada hal lain yang harus dipelajari juga.
Layaknya desainer populer kini dengan mengikuti sedikit tutorial sederhana anda sanggup menciptakan tubuh template blog anda sendiri. Berikut ikuti step by step nya hingga simpulan untuk pembuatan template blog secara manual dari NOL ini.
Membuat Template Blogspot Manual
Dalam tutorial ini mamang akan mencoba menciptakan template sederhana berstuktur Header, Main Content, Sidebar, dan juga Footer. Jika dalam penggambaran maka akan nampak ibarat ini template yang aku pakai sekarang.Sudah ada bayangan bagaimana kira - kira tutorial ini berlanjut, sepakat kini mari kita masuk kedalam Dashboard Blogger anda dan masuk ke hidangan Edit HTML.
1. Membuat kerangka template
Hapus semua arahan yang ada pada Edit HTML dan masukkan arahan utama template dibawah ini :<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> <head> <!-- [ Meta Tag SEO ] --> <include expiration='7d' path='*.css'/> <include expiration='7d' path='*.js'/> <include expiration='3d' path='*.jpeg'/> <include expiration='3d' path='*.jpg'/> <include expiration='3d' path='*.png'/> <meta charset='utf-8'/> <meta content='width=device-width, initial-scale=1' name='viewport'/> <meta content='blogger' name='generator'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <link href='http://www.blogger.com/openid-server.g' rel='openid.server'/> <link expr:href='data:blog.homepageUrl' rel='openid.delegate'/> <link expr:href='data:blog.url' rel='canonical'/> <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType != "error_page"'> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if></b:if> <b:if cond='data:blog.pageType == "error_page"'> <title>Page Not Found - <data:blog.title/></title> </b:if> <b:if cond='data:blog.pageType == "archive"'> <meta content='noindex' name='robots'/> </b:if> <b:if cond='data:blog.searchLabel'> <meta content='noindex,nofollow' name='robots'/> </b:if> <b:if cond='data:blog.isMobile'> <meta content='noindex,nofollow' name='robots'/> </b:if> <b:if cond='data:blog.pageType != "error_page"'> <meta expr:content='data:blog.metaDescription' name='description'/> <script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term}", "query-input": "required name=search_term" } }</script> <b:if cond='data:blog.homepageUrl != data:blog.url'> <meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + data:blog.title' name='keywords'/> </b:if></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta content='DESKRIPSI-BLOG' name='keywords'/></b:if> <link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/> <link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/> <link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.postImageThumbnailUrl'> <link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/> </b:if></b:if> <link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/> <link href='/favicon.ico' rel='icon' type='image/x-icon'/> <link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/> <link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/> <link href='https://plus.google.com/USER-GOOGLE-PLUS' rel='me'/> <meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/> <meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/> <meta content='Indonesia' name='geo.placename'/> <meta content='NAMA-ADMIN' name='Author'/> <meta content='general' name='rating'/> <meta content='id' name='geo.country'/> <!-- [ Social Media Meta Tag ] --> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageName' property='og:title'/> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='article' property='og:type'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:blog.url == data:blog.homepageUrl'> <meta expr:content='data:blog.metaDescription' name='description'/> <meta expr:content='data:blog.title' property='og:title'/> <meta content='website' property='og:type'/> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' property='og:description'/> <b:else/> <meta expr:content='"Silakan kunjungi " + data:blog.pageTitle + " Untuk membaca postingan menarik."' property='og:description'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.metaDescription' property='og:description'/> </b:if> <b:if cond='data:blog.postImageUrl'> <meta expr:content='data:blog.postImageUrl' property='og:image'/> <b:else/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postThumbnailUrl' property='og:image'/> <b:else/> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzac8zQv2ndok2X8li-eRcsbBneW4Qz6QjbX14M4qzsgBVHdmEE0Sv0b50AxmGX7yd6PBtlQuDHWiVUfK8nA-F2K71San1PFYoPdElXuOdMTr7dEqomGG7h21M_K2RDy0jVc17KCTXeP1c/w200-c-h150/test+gambar+1.png' property='og:image'/> </b:if> </b:if> <meta content='https://www.facebook.com/PROFIL-FACEBOOK' property='article:author'/> <meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/> <meta content='KODE-APLIKASI-FACEBOOK' property='fb:app_id'/> <meta content='KODE-ADMIN-FACEBOOK' property='fb:admins'/> <meta content='en_US' property='og:locale'/> <meta content='en_GB' property='og:locale:alternate'/> <meta content='id_ID' property='og:locale:alternate'/> <meta content='summary' name='twitter:card'/> <meta expr:content='data:blog.pageTitle' name='twitter:title'/> <meta content='USER-TWITTER' name='twitter:site'/> <meta content='USER-TWITTER' name='twitter:creator'/> <meta content='summary_large_image' name='twitter:card'/> <style type="text/css"><!-- /* <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 : MangOri Template Date : 18/07/2018 Updated by : Yosep Eko Prambudi Website : https://www.mangotep.com /* tata letak fixed */ body#layout .outer-wrapper {width:970px} body#layout #wrapper {width:970px} body#layout #header {width:29%;float:left;margin-top:30px} body#layout #header-ads {width:69%;float:right;margin-top:30px} body#layout #artikel-wrapper {width:69%;float:left} body#layout #sidebar-wrapper{width:29%;float:right} body#layout #footer {width:970px} .footer {width:100%} body#layout ul {display: none} /* HTML5 */ #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> 2. Membuat Main Wrapper Template
Setelah melaksanakan langkah pertama kita akan menciptakan wrapper, silahkan anda tentukan lebar ukuran template yang kalian ingin, disini aku akan menciptakan lebar template 970px. Jika sama silahkan copas arahan berikut :- Copas arahan dibawah ini sempurna di atas arahan </style> pada langkah pertama.
- Kemudian biar CSS tersebut sanggup berfungsi masukkan HTML dengan mencari arahan <body> lalu letakkan arahan ini sempurna di bawahnya.
- Selanjutnya kita tutup HTML dengan mencari arahan </body> dan letakkan arahan dibawah ini sempurna diatas arahan </body>
- Save !! Sekarang kita sudah membentuk wrapper utama body template dengan lebar yang sudah diatur tadi. Akan tetapi ini hanya akan memuat daerah untuk artikel saja, mari kita lanjut ketahap yang ketiga
#wrapper{ background:#FFF; width:970px; overflow:hidden; margin:0 auto; } <div id='wrapper'> </div> 3. Membuat Header dan Header ADS
Setelah menciptakan wrapper kini kita menciptakan header dan header ads yang biasanya niscaya terletak pada bab atas template, untuk itu desain sederhana nya ialah sebagai berikut ini:- Pasang Css Header berikut diatas arahan </style>
- Kemudian ibarat langkah kedua, pasanglah arahan pemanggil CSS tadi yang berupa HTML dan letakkan dibawah <div id='wrapper'>
- Save saja dan lanjut
#header-wrapper{width:100%;overflow:hidden;} #header{width:30%;overflow:hidden;float:left;} #header-ads{width:70%;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='Cobain Blogger Template (Header)' type='Header'></b:widget> </b:section> <b:section class='header' id='header-ads' maxwidgets='1'/> <div class='clear'/> </header> 4. Membuat Artikel dan Sidebar Wrapper
Dalam menciptakan artikel dan sidebar wrapper pada tutorial ini akan diletakkan (kiri untuk artikel wrapper) dan (kanan untuk sidebar wrapper) maka arahan yang akan kalian butuhkan kiranya ibarat ini:- Pasang Css Postingan dan Sidebar berikut diatas arahan </style>
- Pasang HTML Sidebar berikut dan letakan di atas <b:section class='main' id='main'>
- Pasang HTML Artikel berikut dan letakan di atas <b:section class='main' id='main'>
- Tutup HTML artikel tadi dengan meletakan arahan epilog berikut sempurna di bawah </b:section> yang terakhir (widget posting blog) atau di atas </div> terakhir.
- Silahkan save dan lihat kesannya maka pada tampilan template sudah akan terbagi antara artikel wrapper anda dan juga sidebar wrapper. Sesuai width nya dengan mengatur presentase kode CSS yang sudah dimasukkan tadi.
#artikel-wrapper{float:left;width:68%;overflow:hidden} #sidebar-wrapper{float:right;width:29%;overflow:hidden} #sidebar{padding:5px} .sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;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> 5. Membuat Footer Wrapper
Terakhir ialah menciptakan footer wrapper, sebagian besar footer wrapper terbagi menjadi 3 kolom footer pada umumnya, maka untuk itu mari kita samakan saja untuk pembuat template sederhana ini.- Pasang Css Footer berikut diatas arahan </style>
- Pasang HTML Footer berikut dan Letakkan sempurna di atas </div> yang terkahir
#footer-wrapper{width:100%;clear:both} .footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;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> Selesai sudah deh komponen komponen utama pada pembuatan template blogspot anda secara sederhana akan tampilannya ibarat itu. Akan tetapi ibarat yang sudah disebutkan diawal artikel komponen lainnya juga sangat penting dalam pembuatan template ibarat : Navigation menu, Breadcrumbs, Readmore, Related Post, dan masih banyak lagi.
Untuk itu anda sanggup kreasikan template yang sudah anda buat kini menjadi lebih keren lagi dengan beberapa tutorial yang ada di google atau sanggup juga anda mencarinya pada ini. Seperti misalnya artikel yang sanggup mempercantik template anda :
Demikianlah artikel wacana Tutorial Lengkap Membuat Template Blogspot Manual Dari NOL ini, semoga bermanfaat untuk anda. Jangan lupa untuk tinggalkan jejak komentar yah untuk membangun blogwalking yang baik.
Jika menyukai artikel dari , anda bisa like and share ke sosial media kesayangan anda atau juga sanggup subscribe blog ini untuk mendapat artikel menarik dan terbaru lainnya eksklusif dari email anda. Terimakasih banyak. Sumber https://www.mangotep.com/