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:

  

How To Make Popup Modal For Bootstrap Template

Modal is a term for popup dialog on bootstrap template. To apply this, you need to apply bootstrap template and import bootstrap.min.js file. Go here to read how to apply bootstrap template in blogspot.

Next, apply the code. You can do this using Add a gadget then choose HTML/Javascript on Layout section on your blogger Dashboard or directly on Edit HTML on the Theme section.

How To Make Back To Top Button

Back To Top button serve as the name implied: to back at the top of the page. Sometimes you may want to use this type of button if your blog have long article. Like seriously, who want to scroll back to the top of the page after reading very long long long post?

How To Use Font Awesome In Blogger

Font Awesome is a symbol that you can use inside a HTML. There are a lot of symbol that we can use, some of example are on the picture of this post. Usually Font Awesome is used on button, such as back button, previous button, back to top button, etc.

To use Font Awesome on blogspot, follow these steps:
1. On your blogspot dashboard, click Theme. Then, click Edit HTML.
2. Click inside of the code box then press CTRL+S to search for <head>.
3. Next, we need to include/import the Font Awesome file to the blog. Paste this below the <head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

4. Click Save Theme to save the change.

Now that the Font Awesome have been imported to your blog, next is to use it. Font Awesome must be used inside of <i> tag or <span> tag. Use them as a class inside of that tag. The format is fa fa-your_fontAwesome.
Example:

<i class="fa fa-arrow-up"></i>

There are a lot of Font Awesome type. Read here to find more. Be sure to check the version of Font Awesome that you have imported before using the symbol (this post using version 4.7.0).

How To Use JQuery In Blogger

To use JQuery for your blogspot is pretty simple. Follow these steps bellow:
1. On your blogspot dashboard, click Theme. Then, click Edit HTML.
2. Click inside of the code box then press CTRL+S to search for <head>.
3. Next, we need to include/import the JQuery file to the blog. Paste this below the <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

4. Click inside of the code box then press CTRL+S to search for </head>.
5. Just above the </head> add the following:

<script type='text/javascript'>
//<![CDATA[
              jQuery(document).ready(function() {
               content of your jquery function and event
             });
//]]>
</script>

6. Click Save Theme to save the change.

---

Simple Bootstrap Responsive Theme v 1.0

Simple Bootstrap Responsive Theme v 1.0

Feature:

• Responsive design
• Responsive Menu Bar

Base theme: Simple.
Default background is white.

How to change the background (1):
From your Blogger Dashboard, go to Theme then click "Customize". Click "Background" tab and choose the color you want.
How to change the background (2): [if you want to use image as your background]
- From your Blogger Dashboard, go to Theme then click "Customize". Click "Advanced" tab then click "Add CSS".
- Copy paste this: body{ background-image: url(your image url); background-position: top center; }
- You can adjust the background-position to fit your style (like center center, or top center, or use px)
- You can also add background-repeat and background-size to fit your background.

How to edit the navigation bar:
- From your Blogger Dashboard, go to Theme then click "Edit HTML"
- Click inside of the box then press ctrl+F to search what you want to change from the navbar (Project Name, About, Contact, etc).
- Change the # on <a href='#'> to the suitable page link. Example: http:www.google.com.

Read this if you want to build from scratch.
Also, read this if you want to add Font Awesome for the bootstrap template.

Any suggestion and advice are welcome.

---

Download Download (with header image)

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:

     

School Idol Festival Responsive Theme v 1.0

School Idol Festival Responsive Theme v 1.0

Feature:

• Responsive design
• Floating Header & Menu Bar

Base theme: Simple.
Any suggestion and advice are welcome.

---

CSS Code:

From your Blogger Dashboard, go to Theme then choose "Edit HTML". Copy the following code after </b:skin>:

<!--desain: Custom CSS-->
<style>
/*============================================================================*/
body { background: #ccf799 url(https://i.pinimg.com/originals/87/4f/2a/874f2a3be063afcbc2d910b364af95ab.png) no-repeat fixed center left; }
.status-msg-body { padding: .3em; }
body:not(.mobile)>.navbar.section, body:not(.mobile) header, body:not(.mobile) .content .content-inner .blog-feeds { display: none; }
body:not(.mobile) .content .content-inner .main-outer { border-top: none; }
body:not(.mobile) .content .content-inner .main-inner .fauxcolumn-outer.fauxcolumn-center-outer {
 background-size: 70px; background-position: 95% 102%;
}
body:not(.mobile) #container-Searchbox { position: relative; bottom: 65px; left: 60px; padding-left: 20px; max-width: 310px; }
body:not(.mobile) #container-Searchbox #searchbox { background-size: 100% 80%; width: 300px; }
body:not(.mobile) #container-Searchbox input[type="text"] { padding-left: 7px; width: 80%; }

.main-outer, .footer-outer { background-color: transparent; }
.footer-outer { background: transparent; }
body:not(#layout) .main-inner { left: 220px; padding-bottom: 0; }
body:not(#layout) .main-inner .fauxcolumn-center-outer {
background-color: #fff;
background-image: url("https://i.pinimg.com/originals/59/c9/93/59c99362ad8f6c0841c2cd3c2d053d09.png");
background-repeat: no-repeat;
border: 5px solid #e1b5d5 !important;
border-radius: 10px;
}
body:not(#layout) footer .region-inner.footer-inner { padding: 0; }

/*desain: for mobile*/
body.mobile>.navbar, body.mobile .content .content-inner header h1 { display: none; }
body.mobile .content-outer { box-shadow: none; }
body.mobile .main-inner, body.mobile .footer-inner { background: transparent; }
body.mobile .main-inner .fauxcolumn-center-outer, body.mobile .blog-pager { max-width: 500px; }
body.mobile .content-inner .main-outer { margin-top: 0; border-top: none; }
body.mobile .column-center-outer { padding-top: 20px; }
body.mobile .main-inner .mobile-date-outer.date-outer { padding-left: 20px; }
body.mobile .mobile-date-outer>.mobile-post-outer { max-width: 460px; }
/*desain: end for mobile*/

/*desain: primary navigation*/
h2.title { display: none; }
#navigation-primary {
position: fixed; bottom: 120px; right: 620px; left: 0; top: 0; -webkit-user-select: text !important; -moz-user-select: text !important; -ms-user-select: text !important; user-select: text !important; -webkit-user-select: none !important; -moz-user-select: -moz-none !important; -ms-user-select: none !important; user-select: none !important;
}
body:not(.mobile) #navigation-primary { max-width: 500px; }
#menu-shiitake {
position: absolute; top: 94%; left: 50px; cursor: pointer;
}
#menu-shiitake img { width: 70px; height: 51px; }
#welcomeImage { position: relative; }
#welcomeImage img { width: 500px; height: 500px; }
.bg-search { position: absolute; top: 366px; left: 48px; }
.bg-search img { width: 378px; }
.greetingMsg { position: absolute; top: 400px; left: 120px; text-align: center; max-width: 230px; }

@media screen and (max-device-width: 768px) {
#navigation-primary { top: 20px; right: 470px; position: fixed; }
#menu-shiitake { top: 320px; left: 5px; }
#menu-shiitake img { width: 50px; height: 31px; }
#welcomeImage img { width: 250px; height: 250px; }
.bg-search { top: 206px; left: 5px; }
.bg-search img { width: 212px; height: 112px; }
.greetingMsg { top: 230px; left: 36px; font-size: 10px; max-width: 150px; }
#container-Searchbox { position: relative; left: 4px; }
#container-Searchbox #searchbox { width: 237px; }
}
@media screen and (max-device-width: 720px), screen and (min-height: 1024px) {
     .content-inner .main-outer .fauxborder-left.main-fauxborder-left { margin-top: 100px; margin-left: -75px; }
     body.mobile .main-inner .fauxcolumn-center-outer, body.mobile .blog-pager { max-width: 210px; }
     body.mobile .mobile-date-outer>.mobile-post-outer { max-width: 190px; border-bottom: 1px solid #ddd; }
     body.mobile .column-center-outer { padding-top: 5px; }
     body.mobile .main-inner .mobile-date-outer.date-outer { padding-left: 10px; border-bottom: none; }
     .main-inner .fauxcolumn-center-outer {
          background-size: 15% 15%;
          background-position: 100% 103%;
     }
     body.mobile .status-msg-wrap { max-width: 190px; margin: 10px; font-size: 90%; }
     body.mobile .post-footer { max-width: 194px; }

     #navigation-primary { top: 11%; left: 0; position: fixed; }
     #menu-shiitake { min-width: 220px; top: 290px; }
     #menu-shiitake img { width: 32px; height: 21px; }
     #welcomeImage { top: 55px; right: 20px; }
     #welcomeImage img { width: 180px; height: 180px; }
     .bg-search img { width: 138px; height: 82px; }
     .greetingMsg { font-size: 7px; width: 95px; max-width: 100px; left: 30px; }
     #container-Searchbox { top: 65px; }
     #container-Searchbox #searchbox { background-size: 50% 50%; }
     #container-Searchbox #searchbox input[type='text'] { padding-top: 3px !important; margin-left: 10px; font-size: 8pt !important; max-width: 100px; }
     #container-Searchbox #button-submit { margin: 3px; }
}
@media screen and (max-height: 320px) {
       body.mobile .main-inner .fauxcolumn-center-outer, body.mobile .blog-pager { max-width: 465px; }
       body.mobile .mobile-date-outer>.mobile-post-outer { max-width: 435px; }
       body.mobile .column-center-outer { padding-top: 5px; }
       .main-inner .fauxcolumn-center-outer {
            background-size: 15% 15%;
            background-position: 100% 103%; /*background-position: 365px 300px;*/
       }
       body.mobile .post-footer { max-width: 448px; }

       #navigation-primary { top: -70px; right: 455px; }
       #welcomeImage { top: 40px; }
       #welcomeImage img { width: 200px; height: 200px; }
       #container-Searchbox { top: 52px; }
}
/*desain: end primary navigation*/
</style>
<!--desain: end Custom CSS-->

Widget Code:

From your Blogger Dashboard, go to Theme then choose "Layout". Click "Add a gadget" then choose "HTML/Javascript". Copy the following code:

<!--welcome image-->
<div id="navigation-primary">
<!--menu shiitake-->
<div id="menu-shiitake">
<img src="https://i.pinimg.com/originals/aa/c2/48/aac24854d710c24430ac8ad58239b3d7.png" onmouseout="normalImg(this)" onmouseover="bigImg(this)" title="Home" onmousedown="return false;" />
<img src="https://i.pinimg.com/originals/cd/97/35/cd973596cbb9cb4a86ab9fa77dcdc32e.png" onmouseout="normalImg(this)" onmouseover="bigImg(this)" title="News" onmousedown="return false;" />
<img src="https://i.pinimg.com/originals/f8/63/07/f86307edb94845ef3deaca4e2b3e6530.png" onmouseout="normalImg(this)" onmouseover="bigImg(this)" title="Event" onmousedown="return false;" />
<img src="https://i.pinimg.com/originals/ee/37/40/ee3740d589ca6315be3e008c02b54eb2.png" onmouseout="normalImg(this)" onmouseover="bigImg(this)" title="Regional" onmousedown="return false;" />
<script>
var curLoc = window.location.href;
var cekMobile = curLoc.split("/");
var isMobile = false;
for(var i=2; i<cekMobile.length; i++){
if(cekMobile[i]=="?m=1"){
isMobile = true;
}
else{
isMobile = false;
}
}

function bigImg(x) {
if(isMobile) {
x.style.height = "41px";
x.style.width = "60px";
}
else{
x.style.height = "61px";
x.style.width = "80px";
}
}
function normalImg(x) {
if(isMobile) {
x.style.height = "31px";
x.style.width = "50px";
}
else{
x.style.height = "51px";
x.style.width = "70px";
}
}
</script></div>
<!--end menu shiitake-->


<!--image slider-->
<link rel="stylesheet" type="text/css" href="https://www.w3schools.com/lib/w3.css" /><style></style>

<div id="welcomeImage">
<center>
<img class="mySlides w3-animate-fading" src="https://i.pinimg.com/originals/24/a2/c0/24a2c0e804035ebad8f2b564ac24caab.png" onmousedown="return false;" />
<img class="mySlides w3-animate-fading" src="https://i.pinimg.com/originals/59/27/97/592797d032845c1c3a9f9834cd2abc79.png" onmousedown="return false;" />
<img class="mySlides w3-animate-fading" src="https://i.pinimg.com/originals/52/3a/6f/523a6ff1c24a3eadbb83e8ca17db8dd8.png" onmousedown="return false;" />
<img class="mySlides w3-animate-fading" src="https://i.pinimg.com/originals/1a/51/1c/1a511c097541f05ac59b4cf8853dbb4d.png" onmousedown="return false;" />
</center>
</div>
<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
    x[myIndex-1].style.display = "block";
    setTimeout(carousel, 9000);
}
</script>
<!--selesai image slider untuk banner-->

<!--search section-->
<span class="bg-search">
<img src="https://i.pinimg.com/originals/65/76/47/6576472b67f9abfd87940bbb80f17a6d.png" onmousedown="return false;"/></span>
<span class="greetingMsg">Selamat datang di Komunitas Love Live Indonesia<br /></span>
<!--search box-->
<style>
#searchbox {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyxp9MdEgcf3TNwAgmKutrnDp6YBDVvvKALKZlewUMd2Ef9l69p29XPOJZ7KLYOd6cRcqX0ohcFpVG0lW_hSGeulHwdVABCq3p2R1ftFlpnr_fr9TruXNenYMrjq_bBznTnMMJC_Gc1zRv/s1600/search-box1.png) no-repeat;
    width:250px;
    height:65px
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    color: #828282;
    width: 70%;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOyuttm-rnWmNLyolUsccjsc4VAZKmGE-CZ0dACRzY8JFQ1PDEl1h31QiYRktDbSJwnWMJcERjSqvS_clxNCIfWuOuyqIEE8tT0Fb4KlA0PA6Fe8j_DBi49hi5ZhGBX5TXM0_Bsh_iZ36c/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 21px;
    height: 22px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7fKz8XuQjksTudCwa_BzDzUdreHbX1Grj4-yKnvqwt75AzvhGJm57uvzvLar5JFLGtaIrrn7tSGmuBGtXmxvXy8o11x1GZxjpjGMpKFrcUR00aQPgfBDAshEz9P-lpcR7NkcYPZt77R_G/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7fKz8XuQjksTudCwa_BzDzUdreHbX1Grj4-yKnvqwt75AzvhGJm57uvzvLar5JFLGtaIrrn7tSGmuBGtXmxvXy8o11x1GZxjpjGMpKFrcUR00aQPgfBDAshEz9P-lpcR7NkcYPZt77R_G/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<div id="container-Searchbox" style="padding-top:10px"><form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" style="font-size:11pt; padding-top:10px" placeholder="Search in this site..." />
    <input id="button-submit" type="submit" value="" />
</form></div>
<!--end search section--></div>

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: