Mengedit HTML Tema Blog Blogger.com

Asiknya ngeblog di Blogger.com bisa belajar banyak mengenai HTML dan CSS juga javascript serta lainnya. Untuk mengedit tema bisa dimulai dengan mengakses menu Tema > SESUAIKAN > Edit HTML.

Pada blog ini, Videlocus, menerapkan tema Simple Simply Simple kemudian diedit sedemikan rupa sehingga tampilannya sesuainya dengan yang diinginkan Admin Videlocus.

Pengeditan Bagian <head>

Pengeditannya sebagai berikut:

Dari <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> menjadi <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' prefix='og: http://ogp.me/ns#'>.

Dari <meta expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/> menjadi <meta content='width=device-width, initial-scale=1' name='viewport'/>.

Dari <title><data:blog.pageTitle/></title> menjadi
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <title><data:blog.pageTitle/></title>
        <meta expr:content='data:blog.title' property='og:title'/>
        <meta content='noarchive' name='robots'/>
    </b:if>
    <b:if cond='data:blog.pageType == "index" and data:blog.url != data:blog.homepageUrl and !data:blog.searchLabel and !data:blog.searchQuery'>
        <title><data:blog.pageTitle/></title>
        <meta expr:content='data:blog.title' property='og:title'/>
        <meta content='noarchive' name='robots'/>
    </b:if>
    <b:if cond='data:blog.pageType == "archive"'>
        <title><data:blog.pageTitle/></title>
        <meta expr:content='data:blog.title' property='og:title'/>
        <meta content='noindex' name='robots'/>
    </b:if>
    <b:if cond='data:blog.pageType == "item"'>
        <title><data:blog.pageName/> — <data:blog.title/></title>
        <meta content='article' property='og:type'/>
        <meta expr:content='data:blog.pageName' name='twitter:title'/>
        <meta content='summary' name='twitter:card'/>
        <meta content='@dwijayasse' name='twitter:creator'/>
       <meta content='notranslate' name='google'/>
    </b:if>
    <b:if cond='data:blog.pageType == "static_page"'>
        <title><data:blog.pageName/> — <data:blog.title/></title>
    </b:if>
    <b:if cond='data:blog.searchLabel'>
        <title><data:blog.pageName/> — Label — <data:blog.title/></title>
        <meta expr:content='data:blog.title + " membahas artikel dengan Label " + data:blog.pageName + ". "' name='description'/>
        <meta content='noindex' name='robots'/>
    </b:if>
    <b:if cond='data:blog.searchQuery'>
        <title><data:blog.pageName/> Pada <data:blog.title/></title>
        <meta expr:content='data:blog.title + " membahas artikel dengan Label " + data:blog.pageName + ". "' name='description'/>
        <meta content='noindex' name='robots'/>
    </b:if>
    <b:if cond='data:blog.pageType == "error_page"'>
        <title><data:blog.pageName/> — <data:blog.title/></title>
        <meta content='noindex' name='robots'/>
    </b:if>
    <meta expr:content='data:blog.title' name='twitter:site'/>

Mengganti isi <b:skin></b:skin> dengan
body {margin:0 auto;padding:0;font-family:arial,sans-serif;font-size:16px;}
.post-body img, .post-body iframe {max-width:80%;height:auto;}
.comments {display:none;}
.widget .popular-posts ul {list-style:none;}
.wrapper {display:flex;flex-flow:row wrap;}
.wrapper > * {flex:1 100%;}
@media all and (min-width:600px) {.aside {flex:1 0 0;}}
@media all and (min-width:800px) {.main {flex:3 0px;} .aside-1 {order:1;} .main {order:2;}}

Menghapus <b:template-skin>, <b:if cond='data:skin.vars.body_background.image.isResizable'> dan <b:include data='blog' name='google-analytics'/>.

Pengeditan Bagian <body>

Pengeditannya sebagai berikut:

Mengganti <body expr:class='"loading" + data:blog.mobileClass'> menjadi <body>.

Mengganti isi <body> menjadi
<b:if cond='data:blog.pageType == "index"'/>
<div class='wrapper'>
   <article class='main'>
          <header>
           <div class='headerwrapper'>
               <h1><data:blog.title/></h1>
           </div>
          </header>
          <b:section id='main' name='Main' showaddelement='yes'>
            <b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'/>
          </b:section>
   </article>
   <aside class='aside aside-1'>
<b:section id='sidebar' name='Sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Postingan Populer' type='PopularPosts' version='1'/>
<b:widget id='Label1' locked='false' title='Label' type='Label' version='1'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive' version='1'/>
</b:section>
    <footer>
        <div class='footer'>
            <a href='https://creativecommons.org/licenses/by-sa/4.0/deed.id' rel='license'>CC BY-SA 4.0</a> 2022 Videlocus Oleh Dipo Dwijaya S
        </div>
    </footer>
   </aside>
</div>

Cukup rumit keliatannya, ya? Tapi kalo udah biasanya bakal bisa dengan mudah nemu'in dan ngatasin masalah pengeditan HTML.