Cara Menciptakan Template Blogger Sendiri Part 1
Hai semua, kali ini aku akan mengembangkan Tutorial Cara Membuat Template Blogger Sendiri. Meski aku balum pro dalam bidang ini alias masih newbie aku akan mencoba bebagi pengetahuan aku ihwal template.
Sebelum itu ada sedikit klarifikasi ihwal Tema atau Template Blogger, sepakat simak klarifikasi berikut.
Apa sih bekerjsama Tema atau Template Blog itu? Tema atau Template Blog itu ialah desain-desain halaman blog ataupun halaman website beserta seluruh komponennya baik berupa file statis maupun file dinamis yang berupa agenda atau aplikasi yang berjalan sebagai aplikasi web.
Template dapat juga anda artikan sebagai tema blog atau tampilan blog. Seperti yang anda lihat ketika ini di blog denylistianto.com, bahwa terlihat tatanan gambar atau tampilan serta goresan pena di layar monitor anda, itulah yang dinamakan template.
Lalu, apa funsinya? Fungsinya ialah memperindah tampilan blog dan juga menciptakan blog kita terlihat profesional.
Cukup sedikit klarifikasi dari saya, mari kita mulai cara membuatnya.
Siapkan alat dan bahan, Seperti : Laptop, Blog, Text Editor (gunakan text editor yang free aja ya, semoga templatnya berkah), dan jangan lupa sedia kopi dan kudapan semoga gak cepat bosen.
Jika alat dan materi di atas sudah ada, mari kita mulai.
Pertama, Buka text editor yang sudah terinstall atau dapat juga pribadi di blogger.
Kedua, Buat komponen utama dari template, jika belum tahu silahkan gunakan aba-aba dibawah ini.
Ketiga, pasang Meta tag didalam template.
1. Cari aba-aba <head>, lebih gampang mencari dengan CTRL + F.
2. Buat meta tag sendiri atau lebih gampang gunakan meta tag dibawah ini dan pastekan sempurna di bawah <head>.
Keempat, moifikasi sedikit pada tampilan template atau gunakan aba-aba berikut dan pastekan sebelum aba-aba ]]><b:skin> atau </style>.
Kelima, Membuat Wrapper Pada Template.
1. Buat CSS Buat wrapper atau gunakan aba-aba berikut ini dan pastekan sebelum aba-aba ]]></b:skin> atau </style>.
2. Gunakan aba-aba HTML berikut untuk memangil Kode CSS diatas.
Letakan HTML berikut sempurna dibawah <body>.
Letakan HTML berikut sempurna diatas </body>.
Nah, kini coba anda simpan template dan lihat hasilnya.
Sampai disini anda sudah dapat menciptakan template paling sederhana, baca juga part selanjutnya : Cara Membuat Template Blogger Sendiri Part 2. Sampai Jumpa. Sumber https://www.denylistianto.com/
Sebelum itu ada sedikit klarifikasi ihwal Tema atau Template Blogger, sepakat simak klarifikasi berikut.
Apa sih bekerjsama Tema atau Template Blog itu? Tema atau Template Blog itu ialah desain-desain halaman blog ataupun halaman website beserta seluruh komponennya baik berupa file statis maupun file dinamis yang berupa agenda atau aplikasi yang berjalan sebagai aplikasi web.
Template dapat juga anda artikan sebagai tema blog atau tampilan blog. Seperti yang anda lihat ketika ini di blog denylistianto.com, bahwa terlihat tatanan gambar atau tampilan serta goresan pena di layar monitor anda, itulah yang dinamakan template.
Lalu, apa funsinya? Fungsinya ialah memperindah tampilan blog dan juga menciptakan blog kita terlihat profesional.
Cukup sedikit klarifikasi dari saya, mari kita mulai cara membuatnya.
Cara Membuat Template Blogger Sendiri Part 1
Siapkan alat dan bahan, Seperti : Laptop, Blog, Text Editor (gunakan text editor yang free aja ya, semoga templatnya berkah), dan jangan lupa sedia kopi dan kudapan semoga gak cepat bosen.
Jika alat dan materi di atas sudah ada, mari kita mulai.
Pertama, Buka text editor yang sudah terinstall atau dapat juga pribadi di blogger.
Kedua, Buat komponen utama dari template, jika belum tahu silahkan gunakan aba-aba dibawah ini.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> <head> <b:skin> <![CDATA[/* Theme Name : Nama Template Anda Theme Designer : Nama Anda Thanks to : All supported Special Thanks : Deny Listanto / www.denylistianto.com */ ]]></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> Ketiga, pasang Meta tag didalam template.
1. Cari aba-aba <head>, lebih gampang mencari dengan CTRL + F.
2. Buat meta tag sendiri atau lebih gampang gunakan meta tag dibawah ini dan pastekan sempurna di bawah <head>.
<b:include data='blog' name='all-head-content'/> <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.page( DENYLISTIANTO.COM )quot;error_page"'> <title>Page Not Found - <data:blog.title/></title> <meta content='3;/' http-equiv='refresh'/> </b:if> <!-- [ Social Media meta tag ] --> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:blog.url'> <meta expr:content='data:blog.url' property='og:url'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <b:if cond='data:blog.pageName'> <meta expr:content='data:blog.pageName' property='og:title'/> </b:if></b:if></b:if></b:if> <b:if cond='data:blog.pageType == "item"'> <meta content='article' property='og:type'/> <b:else/> <meta content='website' property='og:type'/> </b:if> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <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 expr:content='data:blog.blogspotFaviconUrl' property='og:image'/> </b:if></b:if> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' property='og:description'/> </b:if> <meta expr:content='data:blog.title' property='og:site_name'/> <meta content='en_US' property='og:locale'/> <!-- Meta tags here --> <b:if cond='data:blog.url == data:blog.homepageUrl'> <b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if> <b:if cond='data:blog.pageType == "item"'><meta expr:content='data:blog.pageName' name='keywords'/></b:if> <meta content='xxxxxxx' name='Author'/> <link href='https://plus.google.com/xxxxxxx' rel='author'/> </b:if> <meta content='xxxxxx' name='google-site-verification'/> <meta content='xxxxxx' name='msvalidate.01'/> <meta content='xxxxxx' name='alexaVerifyID'/> <meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/> Keempat, moifikasi sedikit pada tampilan template atau gunakan aba-aba berikut dan pastekan sebelum aba-aba ]]><b:skin> atau </style>.
/* CSS Reset */ 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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} /* Layout */ body { background:#f6f9fc; font-family:'Roboto',sans-serif; font-size:16px;font-weight:400; text-align:left; color:#000; } a,a:link,a:visited { color:#f44336; text-decoration:none } a:hover,a:hover:visited { color:#fd6458 } .quickedit { display:none; }Kelima, Membuat Wrapper Pada Template.
1. Buat CSS Buat wrapper atau gunakan aba-aba berikut ini dan pastekan sebelum aba-aba ]]></b:skin> atau </style>.
/* Template Wrapper */ #wrapper{position:relative;background:#fff;max-width:970px;margin:auto;padding:20px;overflow:hidden} 2. Gunakan aba-aba HTML berikut untuk memangil Kode CSS diatas.
Letakan HTML berikut sempurna dibawah <body>.
<div id='wrapper'> Letakan HTML berikut sempurna diatas </body>.
</div> Nah, kini coba anda simpan template dan lihat hasilnya.
Sampai disini anda sudah dapat menciptakan template paling sederhana, baca juga part selanjutnya : Cara Membuat Template Blogger Sendiri Part 2. Sampai Jumpa. Sumber https://www.denylistianto.com/