-->
Home › Tutorial Blogger Cara Menciptakan Top Sajian Plus Search Box Di Blog
Cara Menciptakan Top Sajian Plus Search Box Di Blog
4/ 5 stars - "Cara Menciptakan Top Sajian Plus Search Box Di Blog" Setelah sebelumnya saya membagikan tutorial cara menciptakan hidangan laman menjadi hidangan dropdown , kali ini beda lagi yaitu cara mencip...

Cara Menciptakan Top Sajian Plus Search Box Di Blog


Baca Juga

Setelah sebelumnya saya membagikan tutorial cara menciptakan hidangan laman menjadi hidangan dropdown, kali ini beda lagi yaitu cara menciptakan menu navigasi bar di atas header plus search box (kotak pencarian) di blog. Contoh nya dapat anda lihat pada blog ini. Bahkan lebih dari itu alasannya ialah sudah ada sub hidangan dropdown nya.

Update : Berhubung templatenya sudah ganti, untuk pola dapat dilihat pada blog percobaan saya [ Uji Coba ]

Pada umumnya top menu dipakai sebagai kawasan menaruh link menuju halaman Contact us, sitemap, disclaimer atau privacy policy dan lain sebagainya, yang terang fungsinya untuk memudahkan para pengunjung blog dalam menavigasi atau untuk menjelajahi seluruh isi blog atau website.

Sedangkan search box atau kotak pencarian dalam blog berfungsi untuk memudahkan pengunjung dalam mencari warta atau data terkait yang ada dalam blog itu sendiri. Sebenarnya kotak pencarian ini sudah ada di dalam widget Navbar, berhubung top menu yang akan kita buat letaknya sama dengan widget Navbar, maka mau tidak mau widget Navbar harus di nonaktifkan baik fungsi maupun tampilannya. Maka dari itu kotak amalnya pencariannya kita buat ulang untuk menggantikannya.

Pelajari juga:
Cara menciptakan top hidangan navigasi slide samping di Blog

Silahkan ikuti tutorial cara menciptakan top hidangan di blog / web plus kotak pencarian (search box).

1. Langkah pertama jikalau blog anda masih menampilkan widget Navbar, maka yang harus dilakukan yaitu menonaktifkan dan menghilangkan tampilan Navbar. Cara nya masuk ke tata letak kemudian klik edit pada elemen navbar, pada halaman konfigurasi pilih off kemudian klik simpan. Selanjutnya masuk ke template kemudian klik edit html, copy arahan di bawah ini, kemudian pastekan sempurna di atas arahan ]]></b:skin> atau </style>
.navbar {display: none}

(Jika tampilan blog anda sudah tidak menampilkan Navbar maka lewati saja langkah pertama)
2. Masuk edit html kemudian Copy arahan HTML di bawah ini, kemudian pastekan atau letakkan di bawah arahan <body ...>
       <div id='top-menu'>
         <div id='menu'>
           <input type='checkbox'/>
           <label>
             &#8801;
           </label>
           <ul>
             <li><a class='active' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
             <li><a>Kategori</a>
               <ul>
                 <li><a href='#'>Kategori1</a></li>
                 <li><a href='#'>Kategori2</a></li>
                 <li><a href='#'>Kategori3</a></li>
               </ul>
             </li>
             <li><a>About</a>
               <ul>
                 <li><a href='#'>About Me</a></li>
                 <li><a href='#'>Contact Me</a></li>
               </ul>
             </li>
             <li><a href='#'>Sitemap</a></li>
             <li><a href='#'>Privacy Policy</a></li>
           </ul>
         </div>
         <div id='pencarian'>
           <form action='/search' id='pencarian' method='get' visibility='true'>
             <input id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...'/>
             <button class='fa fa-search' id='searchsubmit' type='submit'>
             </button>
           </form>
         </div>
         <div style='clear:both;'/>
       </div>

Silahkan ganti (#) dengan alamat / link milik anda.

3. Copy arahan css di bawah ini, kemudian pastekan sempurna di atas ]]></b:skin> atau </style>
 /*Top Menu*/
 #top-menu{position:relative;width: 100%;max-width: auto;height: 40px;margin: 0 auto;border-bottom:1px solid #3489db;}
 #top-menu,#menu {background:#66bbdd;}
 #menu{top: 0px;left: 0;right: 0px;width: auto; max-width: 100%;position:absolute;padding-right:200px;color: #fff;height: 40px;white-space: nowrap;margin: auto;}
 #menu ul,#menu li {width: auto;margin:0;padding:0;list-style:none;z-index:100;}
 #menu ul{height:40px}
 #menu li{float:left;display:inline;position:relative;font: 14px;}
 #menu li a{color: #fff}
 #menu a{display: block;line-height: 40px;padding:0 10px;text-decoration:none;color:#333;}
 #menu input{display:none;margin:0 0;padding:0 0;width:40px;height:40px;opacity:0;cursor:pointer;}
 #menu label{font:bold 45px Arial;display:none;width:45px;height:41px;line-height:41px;text-align:center;}
 #menu ul ul{display:none;background:#2288bb;list-style:none;float: none;height:auto;position:absolute;}
 #menu ul li:hover> ul {display: block;}
 #menu ul ul li{display:block;text-align:left;border-bottom:1px solid #000;}
 /*Seach Box*/
 #pencarian{float:right;margin:0 0;padding:0;}
 #q{padding:3px 0;background: #fff;right:50px;display:block;position:absolute;border:1px solid rgba(0, 0, 0, .2) ;top:7px;outline:none;width:115px;font-size:15px; color:#000;}
 #searchsubmit {position:absolute;top:7px;padding:3px;border:1px solid rgba(0, 0, 0, .1);margin:0;font-size:17px;display:block;float:right;right:25px;background: #2288bb;color:#fff;outline:none;cursor:pointer;}
 #pencarian button#searchsubmit[type=&quot;submit&quot;]:hover{cursor:pointer;}
 #pencarian input#q:focus{background:#fff;outline:none}
 #pencarian input#form {display: block;color:#000;background:#fff;}


4. Khusus buat template yang sudah responsive anda dapat menambahkan arahan berikut untuk mengubah tampilan top menu dari type inline menjadi checkbox / dropdown.
Copy arahan css di bawah ini, kemudian pastekan sempurna di bawah arahan @media screen and (max-width: 768px) {
Jika tidak ada 768px, cari yang mendekati.
 #menu{margin:auto;}
 #menu a.active{ border-top: 4px solid #3498DB;}
 #menu a{border-bottom:1px solid #e5e5e5;}
 #menu ul{background:#666;position:absolute;top:100%;right:0;left:0;height:auto;display:none;}
 #menu ul ul{background:#000;left:100px;width:auto;}
 #menu li{display:block;float:none;width:auto;text-align:left}
 #menu li a{color:#fff}
 #menu li a:hover{color:#333;border-bottom:none}
 #menu input, #menu label{color: #fff;right:0;position:absolute;display:block;}
 #menu input{z-index:4}
 #menu input:checked + label{color:#fff;}
 #menu input:checked   ul{display:block}
 #q {right:80px;width:185px;}
 #searchsubmit {right:55px;}

Satu lagi, alasannya ialah icon yang dipakai untuk kotak pencarian memakai Font Awesome, maka pastikan di dalam template anda telah terpasang arahan berikut, silahkan periksa, jikalau belum ada, copy dan pastekan sempurna di atas arahan </head>.
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>


Terakhir klik Simpan Template.

Selanjutnya :
Cara menciptakan hidangan melayang (sticky navigation)

Sekian tutorial cara menciptakan hidangan navigasi responsive di Blog plus kotak pencarian, semoga bermanfaat dan salam Blogger.
#Tutorial Blogger
Komentari
icon-pencil