Labels

How do I maintain Blogger's theme

Here are the steps how I customized my theme

Theme

  1. Sign in to Blogger.
  2. Click the blog to update.
  3. In the left menu, click Theme.
  4. Click Customize.
  5. In the top left corner, click Advanced.
  6. Choose the font, font size, and font color.
    • Body
      • Text color: #999999
    • Header
      • Title font (large): Lato, 36px
    • Posts
      • Title font (large): Lato, bold, 24px
      • Text color: #999999
  7. In the top right, click Apply to Blog.

Layout gadget

  • Sidebar
    • Remove Profile
    • Remove AdSense
    • Enable HTML/JavaScript
    • Enable Blog Archive
    • Enable Labels
    • Disable Report Abuse
  • Subscription
    • Disable Follow by Email
  • Search (Top)
    • Enable Blog Search
  • Header
    • Enable Page Header
  • Page List (Top)
    • Disable Pages
  • Page Body
    • Enable Featured Post
      • Uncheck Show images
    • Enable Blog Posts
      • Number of posts on main page: 5 Posts
      • 5 Comments
      • Labels：
    • Disable Popular Posts
    • Remove AdSense
  • Footer
    • Enable Attribution

Favicon

  • Upload customized 16x16 256 favicon.ico
  • Force a favicon refresh 
    <link rel="icon" href="https://technoir2019.blogspot.com/favicon.ico?v=2" />

HTML/JavaScript

<style>
.hero-image.has-image {
    max-height:25vh!important;
    min-height:10vh!important;
}
#Attribution1 {
    display: none;
}
.post-title {
    text-transform: none;
}
strong {
    color: #CCCCCC;
}
.post-body {
    color: #999999;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
}
pre code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border-radius: 0;
}
code {
    padding: 2px 4px;
    font-size: 87.5%;
    color: #A63425;
    background-color: #FFBBB2;
    border-radius: 4px;
}
/* pre { color: #6cdb04; background-color: #0f0f0f; } */
</style>
<!-- highlight.js Additions START -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/ocean.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- highlight.js Additions END -->
<!-- KaTeX Additions START-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.css' rel='stylesheet'/>
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/katex.min.js'/>
<!-- To automatically render math in text elements, include the auto-render extension: -->        
<script src='https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.11.1/contrib/auto-render.min.js'/>
<script>
    renderMathInElement(document.body);
     [{left: &quot;$&quot;, right: &quot;$&quot;, display: false}]
    });
</script>
<!-- KaTeX Additions END-->
<!-- Mermaid Additions START-->
<script  src=”https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.3.1/mermaid.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/mermaid/7.0.14/themes/mermaid.dark.css" />
<style>.section { opacity: 1; }</style>
<script>mermaid.initialize({startOnLoad:true});</script>
<!-- Mermaid Additions END-->
<!-- Google Fonts Additions START -->
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Karla&amp;display=swap" rel="stylesheet" />
<style>
/* google fonts */
.widget.Header h1, h1, h2, h3, h4, h5, h6 {
    font-family: 'Crimson Text', serif;
}
.post-title {
    font-family: 'Karla', sans-serif;
}
</style>
<!-- Google Fonts Additions END-->

Reference Links

Labels：

Comments

Post a Comment