Tips Tutorial 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...
https://tutorialcarapintar.blogspot.com/2019/11/tips-tutorial-cara-menciptakan-top.html
Setelah sebelumnya saya membagikan tutorial cara menciptakan hidangan laman menjadi hidangan dropdown, kali ini beda lagi yaitu cara menciptakan
Update : Berhubung templatenya sudah ganti, untuk pola dapat dilihat pada blog percobaan saya [ Uji Coba ]
Pada umumnya
Sedangkanamalnya 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 instruksi di bawah ini, kemudian pastekan sempurna di atas instruksi
(Jika tampilan blog anda sudah tidak menampilkan Navbar maka lewati saja langkah pertama)
2. Masuk edit html kemudian Copy instruksi HTML di bawah ini, kemudian pastekan atau letakkan di bawah instruksi
Silahkan ganti (#) dengan alamat / link milik anda.
3. Copy instruksi css di bawah ini, kemudian pastekan sempurna di atas
4. Khusus buat template yang sudah
Copy instruksi css di bawah ini, kemudian pastekan sempurna di bawah instruksi
Jika tidak ada 768px, cari yang mendekati.
Satu lagi, alasannya yakni icon yang dipakai untuk kotak pencarian memakai
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.
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 yakni 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 daerah 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 gosip 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 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 instruksi di bawah ini, kemudian pastekan sempurna di atas instruksi
]]></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 instruksi HTML di bawah ini, kemudian pastekan atau letakkan di bawah instruksi
<body ...><div id='top-menu'>
<div id='menu'>
<input type='checkbox'/>
<label>
≡
</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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' 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 instruksi 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="submit"]: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 instruksi berikut untuk mengubah tampilan top menu dari type inline menjadi checkbox / dropdown.Copy instruksi css di bawah ini, kemudian pastekan sempurna di bawah instruksi
@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 yakni icon yang dipakai untuk kotak pencarian memakai
Font Awesome, maka pastikan di dalam template anda telah terpasang instruksi berikut, silahkan periksa, jikalau belum ada, copy dan pastekan sempurna di atas instruksi </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.
