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: