Skip to content

Latest commit

 

History

History
151 lines (100 loc) · 4.24 KB

README.md

File metadata and controls

151 lines (100 loc) · 4.24 KB
Raw

Hyde Blogger Template

Hyde adapted into the Blogger from Jekyll. The Jekyll version is here.

Hyde is a brazen two-column Blogger template that pairs a prominent sidebar with uncomplicated content.

Demo

Hyde screenshot

Contents

Usage

Only available on Blogger / Blogspot based blogs. Install Blogger dashboard > Template > Edit HTML or Blogger dashboard > Template > Backup / Restore

Options

Hyde includes some customizable options, typically applied via classes on the <body> element.

Sidebar menu

Create a list of links in the sidebar.

<nav class='sidebar-nav'>
    <a class='sidebar-nav-item active' href='/'>Home</a>
    <a class='sidebar-nav-item' href='/p/example-page.html'>Example Page</a>
    <a class='sidebar-nav-item' href=''>Download</a>
    <a class='sidebar-nav-item' href=''>GitHub project</a>
</nav>

Sticky sidebar content

By default Hyde ships with a sidebar that affixes it's content to the bottom of the sidebar. You can optionally disable this by removing the .sidebar-sticky class from the sidebar's .container. Sidebar content will then normally flow from top to bottom.

<!-- Default sidebar -->
<div class="sidebar">
  <div class="container sidebar-sticky">
    ...
  </div>
</div>

<!-- Modified sidebar -->
<div class="sidebar">
  <div class="container">
    ...
  </div>
</div>

Themes

Hyde ships with eight optional themes based on the base16 color scheme. Apply a theme to change the color scheme (mostly applies to sidebar and links).

Hyde in red

There are eight themes available at this time.

Hyde theme classes

To use a theme, add anyone of the available theme classes to the <body> element.

<body class="theme-base-08">
  ...
</body>

Jquery Cookie Theme Switcher

Use the jQuery Cookie Theme Switcher on Blogger. *Does not change when the page is refreshed

Jquery Theme Switcher

If you want to remove.

<ul class='cscheme'>
    <li class='default' id='default'><a href=''/></li>
    <li class='red' id='orange'><a href=''/></li>
    <li class='yellow' id='blue'><a href=''/></li>
    <li class='orange' id='green'><a href=''/></li>
    <li class='green' id='rosse'><a href=''/></li>
    <li class='cyan' id='dark'><a href=''/></li>
    <li class='blue' id='mavi'><a href=''/></li>
    <li class='magenta' id='mor'><a href=''/></li>
    <li class='brown' id='kahve'><a href=''/></li>
</ul>
<a class='color-div' id='sright' value='s'>Sidebar Right</a>

Using together optional theme and reverse layout.

<body class="theme-base-08 layout-reverse">
...
</body>

Reverse layout

Hyde with reverse layout

Hyde's page orientation can be reversed with a single class.

<body class="layout-reverse">
  ...
</body>

Development

Hyde has two branches, but only one is used for active development.

  • master for development. All pull requests should be submitted against master.
  • gh-pages for our hosted site, which includes our analytics tracking code. Please avoid using this branch.

Author

Zafer Zent

License

Open sourced under the MIT license.

<3