KODE IKLAN DFP 1 Cara Membuat Show Hide Search Box dan Social Profil | Masgunggoyo

Recents Posts

    Iklan Atas Artikel

    Cara Membuat Show Hide Search Box dan Social Profil

    KODE IKLAN 200x200
    KODE IKLAN 336x280
     Ada banyak cara ternyata untuk memodifikasi template blog untuk membuat tampilan blog men Cara Membuat Show Hide Search Box dan Social Profil

     Ada banyak cara ternyata untuk memodifikasi template blog untuk membuat tampilan blog men Cara Membuat Show Hide Search Box dan Social Profil

    Ada banyak cara ternyata untuk memodifikasi template blog untuk membuat tampilan blog menjadi lebih terlihat animatif dan profesional. Untuk postingan kali ini akan membahas mengenai Cara Membuat Show Hide Search Box dan Social Profil di blog. Cara ini saya dapat dari blognya kang Adhy Suryadi yang sedikit saya modifikasi.

    Untuk navigasi search dan sosial profil biasanya dan lebih seringnya ditempatkan diatas sebagai navigasi halaman tambahan dan ada juga di sidebar tergantung selera sobat mau diletakkan dimana, yang menurut saya sih wajib juga ada di blog karena nanti navigasi search ini pun bisa di modifikasi dan berkaitan dengan penautan account adsense seperti yang pernah saya posting sebelumnya Cara Buat Google Search Custome di Blog. Bagi sobat yang ingin mencobanya silahkan simak cara penerapannya di blog.

    Untuk membuat Show Hide Search Box dan Social Profil di blog silahkan sobat salin kode-kode yang diberikan dibawah ini, ikutin petunjuknya.


    Langkah pertama penerapan kode CSS

    .search-sosprofil {   position: relative;   width: 250px; }  #search-box {   width: 100%;   padding-right: 38px;   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box;   box-sizing: border-box; }  #search-box form {   position: absolute;   top: 0;   right: 38px;   display: block;   height: 30px;   padding: 0;   margin: 0px;   border: 1px solid #dedede;   border-radius: 3px;   line-height: 30px;   background: #fff; }  #search-form, .search-button {   border: none!important;   line-height: 28px }  #search-form {   color: gray;   width: 100%;   padding: 0 30px 0 10px;   height: 28px;   font-size: 14px;   margin: 0;   -moz-box-sizing: border-box;   -webkit-box-sizing: border-box;   box-sizing: border-box; }  .search-button {   padding: 0 10px;   text-align: center;   margin: 0;   top: 1px;   right: 1px;   font-size: 16px;   color: #888;   position: absolute;   background: none;   cursor: pointer; }  #search-form:focus, #search-form:hover, .search-button:focus, .search-button:hover {   border: none;   outline: 0;   color: #000 }  .sos-profil {   position: absolute;   top: 2px;   right: 38px; }  .sos-profil ul {   padding: 0!important;   margin: 0!important; }  .sos-profil li {   display: inline-block;   margin-left: 5px }  .sos-profil a {   color: #555;   font-weight: 500;   font-size: 24px }  .sos-profil a:hover {   color: #000!important }  #search-box, #close-icon {   display: none; }  .search-icon {   color: #555;   float: right;   cursor: pointer; }  .search-icon .fa-search, .search-icon .fa-times {   color: #fff; }

    Kalau sobat mau menempatkannya di sebelah kanan silahkan tambahkan kode float:right di CSS .search-sosprofil yang nantinya penampakannya seperti ini

    .search-sosprofil {   position: relative;   width: 250px;   float:right }


    Langkah Ke dua Penerapan Kode HTML

    <div class='search-sosprofil'>   <div id='search-box'>     <form action='/search' method='get'>       <input id='search-form' itemprop='query-input' name='q' placeholder='Search here and hit enter' required='required' type='text' />       <button class='search-button' title='Search' type='submit'><i class='fa fa-search'></i></button>     </form>   </div>   <div class='sos-profil' id='sos-profil'>     <ul>       <li><a href='https://www.facebook.com/your-username' target='_blank' title='Facebook'><i class='fa fa-facebook-square fa-lg'></i></a></li>       <li><a href='https://twitter.com/your-username' target='_blank' title='Twitter'><i class='fa fa-twitter-square fa-lg'></i></a></li>       <li><a href='https://www.google.com/your-username' target='_blank' title='Google+'><i class='fa fa-google-plus-square fa-lg'></i></a></li>       <li><a href='id.linkedin.com/in/your-username' target='_blank' title='LinkedIn'><i class='fa fa-linkedin-square fa-lg'></i></a></li>       <li><a href='//www.youtube.com/c/your-username' target='_blank' title='Youtube'><i class='fa fa-youtube-square fa-lg'></i></a></li>     </ul>   </div>   <div class='search-icon' onclick='openSosprofil()'>     <div class="fa-stack" id="search-icon">       <i class="fa fa-square fa-stack-2x"></i>       <i class="fa fa-search fa-stack-1x"></i>     </div>     <div class="fa-stack" id="close-icon">       <i class="fa fa-square fa-stack-2x"></i>       <i class="fa fa-times fa-stack-1x"></i>     </div>   </div> </div>


    Langkah Ke Tiga Penerapan Kode Javascript

       function openSosprofil() {     var e = document.getElementById("sos-profil");     "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";     var e = document.getElementById("search-box");     "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";     var e = document.getElementById("search-icon");     "none" !== e.style.display ? e.style.display = "none" : e.style.display = "block";     var e = document.getElementById("close-icon");     "block" !== e.style.display ? e.style.display = "block" : e.style.display = "none";   };

    Yang harus sobat perhatikan adalah penggunaan kode diatas itu menggunakan fontAwesome jadi pastikan sobat sobat memasang kode JS FontAwesome agar icon-icon sosial profil dapat muncul dan terlihat.

    Hasil penampakannya di JSfiddle



    Baiklah sobat ini saja yang bisa saya bagikan selamat mencobanya.

    Sumber https://www.dibalikseo.com
    KODE IKLAN 300x 250
    close
    ==[ Klik disini 1X ] [ Close ]==
    KODE IKLAN DFP 2
    KODE IKLAN DFP 2