Cooking - Minimalist Template

Feature:

• 2 Column
• 2 Menu
• Fast load
• Less CSS design

Base theme: Simple with 2 column of body layout & 1 column footer layout.
Any suggestion and advice are welcome.

Designed by: http://cookingwithamy.blogspot.com/

---

CSS Code:
How to apply:
- From your Blogger Dashboard, go to Theme. Click Backup/Restore then Download theme to backup your current template.
- From your Blogger Dashboard, go to Theme then choose Edit HTML. Paste the following code after </b:skin>: (note: you can change and adjust the red parts to suit your taste)

<style>
      /*general padding, margin, etc*/
      body { background-color: #e0d786; padding-bottom: 0; }
      a, a:hover, a:visited { text-decoration: none; }
      .navbar.section, .header-inner .Header .descriptionwrapper, .body-fauxcolumn-outer .cap-top { display: none; }
      .body-fauxcolumn-outer .fauxcolumn-inner { background-image: none; }
      header { height: 355px; }
      .Header h1::after { content: 'Blog only for designing Blogger template'; font-size: 24px; }
      .header-outer { background: transparent; }
      .header-inner::after {
          content: '';
          background: url(http://images.amybsherman.com/splash.jpg) no-repeat;
          padding: 130px 470px 260px;
          height: 275px;
          background-position: 0 123px;
      }
      .header-inner .widget.Header .titlewrapper {
          background: url(http://amybsherman.com/images/bg-header.gif);
          position: relative;
          bottom: 7px;
          padding: 10px 30px 1px;
      }
      .header-inner .Header #header-inner { /*overflow: visible;*/ }
      .main-outer .columns-inner .column-center-outer { margin-top: 40px; }

      /*right sidebar widget*/
      form input.gsc-input { max-width: 120px; }
      form input.gsc-search-button {
          background: #e0d786;
          color: #fff;
          outline: none;
      }
      .widget { margin-top: 0; margin-bottom: 15px; }
      .widget:not(:last-child) { border-bottom: 2px dotted #e0d786; }
      .widget .widget-content { margin-bottom: 10px; }
      .widget-content .social-badge {
        font-size: 20px;
        background: #e0d786;
        border-radius: 8px;
        padding: 5px 8px;
        margin-right: 5px;
        cursor: pointer;
      }
      .widget-content .social-badge.third { padding: 5px 10px; }

      /*navigation*/
      .top-nav {
          position: absolute;
        right: 10px;
        z-index: 1;
        background: #4ea6ca;
        padding: 10px;
        border-radius: 0 0 0 10px;
      }
      .top-nav a span { color: #fff; padding: 12px 5px; font-size: 10px; }
      .top-nav a:hover span, .top-nav a:active span, .top-nav a:focus span { background: #e0d786; }
      .primary-nav {
        position: absolute;
        top: 70px;
        left: -70px;
        z-index: 1;
        width: 487px;
        height: 370px;
        background: url(http://images.amybsherman.com/post-it.png);
      }
      .primary-nav .nav { list-style-type: none; position: absolute; bottom: 220px; }
      .primary-nav li { position: absolute; top: -10px; left: 60px; }
      .primary-nav li div { position: absolute; transform: rotate(-10deg); }
      .primary-nav li.first .nav-title { font-size: 20px; width: 90px; top: 10px; }
      .primary-nav li.first .nav-description { font-size: 15px; width: 250px; left: 90px; bottom: 0; color: #333; }
      .primary-nav li.second .nav-title { font-size: 20px; width: 90px; top: 50px; left: 10px; }
      .primary-nav li.second .nav-description { font-size: 15px; width: 250px; left: 100px; top: 25px; color: #333; }
      .primary-nav li.third .nav-title { font-size: 20px; width: 90px; top: 90px; left: 20px; }
      .primary-nav li.third .nav-description { font-size: 15px; width: 250px; left: 105px; top: 63px; color: #333; }
      .primary-nav li.fourth .nav-title { font-size: 20px; width: 90px; top: 133px; left: 30px; }
      .primary-nav li.fourth .nav-description { font-size: 15px; width: 250px; left: 110px; top: 108px; color: #333; }

       footer .footer-outer { display: none; }
      .custom-footer { background: #e0d786; max-width: 66.66666667%; padding: 20px; display: flex; }
      .custom-footer a { color: #c61; cursor: pointer; }
      .custom-footer a:hover { color: #ff9900; }
      .custom-footer a:visited { color: #888; }
      .custom-footer .left-footer, .custom-footer .middle-footer, .custom-footer .right-footer {
        width: 100%;
        max-width: 33.333333%;
      }
      .custom-footer div[class$='footer'] { padding: 0 15px; }

</style>
<style>
      /*mobile*/
      @media only screen and (max-width: 720px) {
        body.mobile header { height: 170px; }
        body.mobile .widget.Header .titlewrapper { bottom: 0; }
        body.mobile .Header h1 { font-size: 210%; }
        body.mobile .Header h1::after { font-size: 22%; }
        body.mobile .top-nav { padding: 5px; margin-top: 10px; }
        body.mobile .top-nav a span { padding-top: 8px; padding-bottom: 4px; font-size: 7px; }

        body.mobile .header-inner::after {
       background-size: 97.25% 30%;
   margin-left: 10px;
   padding-left: 350px;
   padding-right: 0;
   background-position: 0 120px;
        }
        body.mobile .primary-nav {
   width: 210px;
   height: 159px;
   background-size: 210px 159px;
   background-repeat: no-repeat;
   left: -20px;
   top: 45px;
        }
        body.mobile .primary-nav li { top: 100px; left: 30px; }
        body.mobile .primary-nav li.first .nav-title { font-size: 12px; width: 50px; top: 23px; }
        body.mobile .primary-nav li.first .nav-description {
font-size: 9px;
width: 110px;
top: 11px;
left: 58px;
bottom: 0;
}
        body.mobile .primary-nav li.second .nav-title { font-size: 12px; width: 50px; top: 45px; left: 5px; }
        body.mobile .primary-nav li.second .nav-description {
font-size: 9px;
width: 90px;
top: 32px;
left: 63px;
}
        body.mobile .primary-nav li.third .nav-title { font-size: 12px; width: 40px; top: 65px; left: 9px; }
        body.mobile .primary-nav li.third .nav-description {
font-size: 9px;
width: 70px;
top: 54px;
left: 67px;
}
        body.mobile .primary-nav li.fourth .nav-title { font-size: 12px; width: 40px; top: 85px; left: 14px; }
        body.mobile .primary-nav li.fourth .nav-description {
font-size: 9px;
width: 80px;
top: 75px;
left: 70px;
}

        body.mobile .main-outer .column-center-outer { margin-top: 0; }
        body.mobile .custom-footer { max-width: 100%; font-size: 10px; }
      }

  @media only screen and (max-width: 720px) and (orientation: landscape) {
        body.mobile .header-inner::after {
           background-size: 98.95% 30%;
   padding-left: 680px;
        }
      }
    </style>

Additional Navigation Code:
How to apply:
- From your Blogger Dashboard, go to Theme then choose Edit HTML. Paste the following code after <header>: (note: you can change the red parts to suit your taste)

<div class='custom-nav top-nav'>
  <a href='/'><span>Home</span></a>
  <a href='#'><span>About</span></a>
  <a href='#'><span>Guestbook</span></a>
  <a href='#'><span>Contact</span></a>
</div>
<div class='custom-nav primary-nav'>
  <ul class='nav'>
    <li class='first'>
        <a href='/'>
            <div class='nav-title'>Recipes </div>
            <div class='nav-description'>Original recipes from Karen's kitchen</div>
        </a>
    </li>
    <li class='second'>
        <a href='#'>
            <div class='nav-title'>Reviews</div>
            <div class='nav-description'>Books, products, movies, restaurants</div>
        </a>
    </li>
    <li class='third'>
        <a href='#'>
            <div class='nav-title'>News</div>
            <div class='nav-description'>Commentary, events, contests</div>
        </a>
    </li>
    <li class='fourth'>
        <a href='#'>
            <div class='nav-title'>Travel</div>
            <div class='nav-description'>Travel experiences and observations</div>
        </a>
    </li>
  </ul>
</div>

Additional Footer Code:
How to apply:
- From your Blogger Dashboard, go to Theme then choose Edit HTML. Paste the following code after <footer>: (note: you can change the red parts to suit your taste)

<div class='custom-footer'>
    <div class='left-footer'>
        put some additional html here
    </div>
    <div class='middle-footer'>
        <span class='copyright' style=''>
          <i class='fa fa-copyright'/> <span class='year'/> owner.blogspot.com
        </span>
        <script type='text/javascript'>
          //<![CDATA[
            $(".middle-footer .year").text(new Date().getFullYear());
          //]]>
        </script>
    </div>
    <div class='right-footer'>
        put some additional html here
    </div>
</div>

Additional Social Badge Code:
How to apply:
- Import Font Awesome to your blog. Read here to know how to apply Font Awesome.
- From your Blogger Dashboard, go to Layout. Click Add a Gadget then choose HTML/Javascript. Paste the following code: (note: you can change the red parts to suit your taste)

<a class="social-badge first" href="your instagram link"><i class="fa fa-instagram"></i></a><a class="social-badge second" href="your twitter link"><i class="fa fa-twitter"></i></a><a class="social-badge third" href="your facebook link"><i class="fa fa-facebook"></i></a><a class="social-badge fourth" href="your pinterest link"><i class="fa fa-pinterest"></i></a>

Additional Search Form Code:
How to apply:
- From your Blogger Dashboard, go to Layout. Click Add a Gadget then choose HTML/Javascript. Paste the following code: (note: you can change the red parts to suit your taste)

<form action="https://yourblog.blogspot.com/search" class="gsc-search-box" target="_top"><input autocomplete="off" class="gsc-input" name="q" size="10" title="search" type="text" value="" placeholder="Search in this blog" /><input class="gsc-search-button" title="search" type="submit" value="Search" /></form>

Download
How to apply:

1. Download the theme from the link above.
2. From your Blogger Dashboard, go to Theme then click "Backup/Restore" on the top right.
3. Click "Choose File" to choose the file you have downloaded. Then click "Upload".

Screenshot: