Blogger Mania, untuk memudahkan para pengunjung mendapatkan berbagai info dari blog yang anda kelola, dapat dilakukan dengan berbagai cara. Mulai dari membuat icon. thumbnail dan menu (horizontal dan Vertikal) dan menu Search.
Kali ini Riau Spirit akan mencoba bersama dengan anda untuk membuat membuat Search dan menu Horizontal.
Langkah-langkah yang dapat kita lakukan adalah sebagai berikut:
1. Masuk kemenu Setting, selanjutnya
2. Pilih Tata Letak
3. Tambahkan Gadget
4. Pilih HTML/ Javascript
5. Copykan CSS/HTML berikut:
3. Tambahkan Gadget
4. Pilih HTML/ Javascript
5. Copykan CSS/HTML berikut:
<nav class="navix" id="nav" style="background-color: #333333; font-family: Arial, sans-serif; font-size: 13px; font-stretch: normal; font-weight: bold; height: 46px; position: relative; text-transform: uppercase; z-index: 9;"><ul class="muh-4kram" id="makram" style="float: left; list-style: none; margin: 0px; padding: 0px;"><li style="float: left; margin: 0px; padding: 0px; position: relative; transition: background-color 0.2s; white-space: nowrap;"><a class="home" href="https://riauspirit.blogspot.co.id/" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY24BJsHCn9PX8CXn87pdwgrYNYePBYjKNn0SEkykCiO9qLSPTDJRtRXbI-u3NChh5fxyXFB3vcfnvJN0uKL3bynMaufriL00hVNubtkTozV2r1NT8Ogr3L2TTzXDy2F-dP-uQsg0Uce4/); background-position: 10px 10px; background-repeat: no-repeat; box-shadow: rgb(52, 152, 219) 0px 4px 0px inset; color: #fafafa; display: block; height: 46px; line-height: 46px; margin-left: 5px; outline: none; padding: 0px; position: relative; text-decoration: none; text-indent: -9999px; width: 46px;" title="Beranda">HOME</a></li>
<li style="float: left; margin: 0px; padding: 0px; position: relative; transition: background-color 0.2s; white-space: nowrap;"><a href="http://riauspirit.blogspot.co.id/2015/10/dapatkan-karikatur-sketsa-wajah-dan_3.html" style="color: #fafafa; display: block; height: 46px; line-height: 46px; outline: none; padding: 0px 10px; position: relative; text-decoration: none;" target="_blank" title="Tentang Pendidikan">KARIKATUR</a></li>
<li style="float: left; margin: 0px; padding: 0px; position: relative; transition: background-color 0.2s; white-space: nowrap;"><a href="http://riauspirit.blogspot.co.id/2015/10/dapatkan-karikatur-sketsa-wajah-kaos_72.html" style="color: #fafafa; display: block; height: 46px; line-height: 46px; outline: none; padding: 0px 10px; position: relative; text-decoration: none;" title="Lukis Wajah Pekanbaru-ART">LUKIS WAJAH</a></li>
<li style="float: left; margin: 0px; padding: 0px; position: relative; transition: background-color 0.2s; white-space: nowrap;"><a href="http://riauspirit.blogspot.co.id/2015/09/blog-post.html" style="color: #fafafa; display: block; height: 46px; line-height: 46px; outline: none; padding: 0px 10px; position: relative; text-decoration: none;" title="Photoshop Pekanbaru-ART">PHOTOSHOP</a></li>
<li class="sub" style="float: left; margin: 0px; padding: 0px; position: relative; transition: background-color 0.2s; white-space: nowrap;"><a href="http://riauspirit.blogspot.co.id/2015/10/dapatkan-karikatur-sketsa-wajah-kaos_3.html" style="color: #fafafa; display: block; height: 46px; line-height: 46px; outline: none; padding: 0px 30px 0px 10px; position: relative; text-decoration: none;" title="Kaos Lukis Pekanbaru-ART">KAOS LUKIS</a></li><li class="sub" style="float: left; margin: 0px; padding: 0px; position: relative; transition: background-color 0.2s; white-space: nowrap;"><a href="http://riauspirit.blogspot.co.id/search/label/OTOMOTIF" style="color: #fafafa; display: block; height: 46px; line-height: 46px; outline: none; padding: 0px 30px 0px 10px; position: relative; text-decoration: none;" title="Dunia Otomotif">OTOMOTIF</a></li>
<li class="sub" style="float: left; margin: 0px; padding: 0px; position: relative; transition: background-color 0.2s; white-space: nowrap;"><a href="https://www.blogger.com/blogger.g?blogID=4840749925016419255#template" style="color: #fafafa; display: block; height: 46px; line-height: 46px; outline: none; padding: 0px 30px 0px 10px; position: relative; text-decoration: none;" title="Masuk kemenu Setting">LOGIN</a></li>
</ul><form action="http://riauspirit.blogspot.co.id/search" id="search-form" method="get" style="display: inline; float: right; margin: 0px; padding: 0px; width: 300px;"><table style="border-collapse: collapse; border-spacing: 0px; margin: 0px; max-width: 100%; width: 250px;"><tbody><tr><td class="search-box"><input id="search-box" name="q" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border-style: none; border-width: initial; color: #666666; font-family: sans-serif; height: 28px; line-height: 1px; margin: 4px 0px 5px 10px; padding: 0px 10px; width: 154.234px;" type="text" value="Search..." /></td><td class="search-button"><input id="search-button" style="background: rgb(52, 152, 219); border: none; color: white; font-family: sans-serif; height: 36px; line-height: 36px; margin: 4px 5px 5px 0px; outline: none; padding: 0px 75px; transition: all 0.25s;" type="submit" value="Search" /></td></tr></tbody></table></form></nav><br />
Perhatikan semua tulisan berwarna diatas, untuk anda Blogger tingkat menengah akan segera paham dan dapat mempraktekkannya
5. Letakkan Gadget dibawah Header
6. Simpan
Untuk anda yang mengalami kesulitan dalam menerapkan langkah-langkah diatas silahkan hubungi Riau Spirit di Contact.
Untuk anda yang mengalami kesulitan dalam menerapkan langkah-langkah diatas silahkan hubungi Riau Spirit di Contact.
