Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / TUTORIAL MEMBUAT SEARCH BOX- VERSI TEMPLATE IFY- VERSI ARIEF STUDENT.COM

TUTORIAL MEMBUAT SEARCH BOX- VERSI TEMPLATE IFY- VERSI ARIEF STUDENT.COM

Posting Komentar

 

1.   








Taruh kode ini diantara (variabel grup) dibawah <head>

.hero-search{float:left;width:100%;text-align:center;margin:0 0 13px}

.hero-search .search-form{display:inline-block;position:relative;width:480px;max-width:100%;height:50px;border:0}

.hero-search .search-input{float:left;width:100%;height:50px;background-color:#ffffff;overflow:hidden;font-size:14px;color:#95a5a6;font-family:inherit;font-weight:400;line-height:51px;padding:0 20px;border:0;border-radius:6px}

.hero-search .search-input::placeholder{color:var(--title-color);opacity:.55}

.hero-search .search-input:focus{box-shadow:0 2px 8px rgba(0,0,0,0.1)}

.hero-search .search-button{position:absolute;top:0;right:0;height:50px;background-color:transparent;overflow:hidden;font-size:14px;color:#95a5a6;text-align:center;line-height:51px;cursor:pointer;opacity:.85;padding:0 20px;border:0;border-radius:0 6px 6px 0}

.hero-search .search-button:before{display:block;content:"\f002";font-family:'Font Awesome 5 Free';font-weight:900}

.hero-search .search-button:hover{background-color:rgba(155,155,155,0.1)}

 





2.       Taruh search boxnya di atas head atau taruh dimana saja ya

 

<b:if cond='data:view.isHomepage'>

    <div id='hero-wrapper'>

        <div class='row'>

            <div class='container'>

                <div class='hero-content'>

                    <h1 class='hero-title'>Best Free and Premium Blogger Templates 2020</h1>

                    <p class='hero-text'>Find a perfect template with SEO Optimized and improve your blog right now</p>

                </div>

                <div class='hero-search'>

                    <form action='/search' class='search-form' method='get'>

                        <input aria-label='search' autocomplete='off' autocorrect='off' class='search-input' name='q' placeholder='e.g. blogger template' spellcheck='false' type='text'/>

                        <button class='search-button' type='submit' value=''/>

                    </form>

                </div>

                <div class='hero-tags'>

                    <span class='tags-label'>Popular Searches:</span><a class='popular-tag' href='/search/label/Pro?max-results=9'>Premium</a>,<a class='popular-tag' href='/search/label/Ecommerce?max-results=9'>Ecommerce</a>

                </div>

            </div>

        </div>

    </div>

</b:if>



LIHAT CONTOHNYA: https://viralgosongshopstore.blogspot.com/

Posting Komentar untuk "TUTORIAL MEMBUAT SEARCH BOX- VERSI TEMPLATE IFY- VERSI ARIEF STUDENT.COM"