Membuat Menu Navigasi dengan Kotak Pencarian Google

Dalam memulai suatu blog, secara tak kita sadari pada awalnya kita akan memperhatikan baik-baik penampilan daripada blog yang kita kelola tersebut, tanpa memikirkan pekerjaan yang sebenarnya jauh lebih penting dari itu, yakni cara agar blog kita ramai kunjungan dan komentar, karena rasanya tidak ada artinya sebuah blog tanpa ada pengunjung atau visitor. Namun, perlu anda ketahui juga bahwasanya penampilan blog adalah salah satu faktor yang menunjang kenyamanan para pengunjung, pasalnya pengunjung cenderung menyukai blog yang sederhana dengan segala navigasinya yang jelas dan mudah dipahami, tentu hal ini akan menjadi nilai plus tersendiri di mata para pengunjung, tak terkecuali mesin pencari.

Untuk memaksimalkan utilitas blog pada sektor tampilan, tentu ada berbagai macam jalur yang bisa kita tempuh, mulai dari memasang beragam widget, hingga mengganti desain template atau theme. Namun, saya sarankan anda untuk berfikir dua kali pada saat anda berkeinginan untuk mengganti template blog ataupun mengganti template versi mobile, pasalnya secara tak kita sadari, tenyata penggantian template memiliki efek samping bagi search engine optimization atau SEO. Karena pada saat anda berganti template, itu artinya anda juga mengubah struktur website anda, baik itu HTML5 maupun CSS3, tentunya para robot-robot mesin pencari nantinya juga harus menyesuaikan perubahan struktur template baru blog anda, yang nampaknya cukup memakan waktu.

Oleh sebab itu, saya sarankan agar anda bersifat "loyal" atau setia kepada satu template saja, karena selain tidak menyulitkan robot dalam penyesuaian struktur template, hal ini juga memberikan daya tarik sendiri bagi pengunjung terhadap blog anda, karena dengan template "loyalitas" tersebut, blog anda akan memiliki ciri khas. Baik, jika anda tidak ingin mengganti template untuk memodifikasi tampilan blog, maka dibawah ini sudah saya siapkan tutorial atau cara untuk sedikit memoles tampilan blog anda, yakni dengan Membuat Menu Navigasi dengan Kotak Pencarian Google, semoga anda menyukainya :)

Membuat Menu Navigasi dengan Kotak Pencarian Google

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Klik tanda panah disebelah kode yang mirip <b:skin>...</b:skin> (untuk membuka kode css).

5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode berikut ini tepat di atas-nya.

#tuliskancom1nav{border:none 5px #000000;
-moz-border-radius-topleft: 15px;-moz-border-radius-topright:14px;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:14px;-webkit-border-bottom-left-radius:14px;-webkit-border-bottom-right-radius:14px;
border-top-left-radius:15px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;-moz-box-shadow: 2px 3px 5px #000000;-webkit-box-shadow: 2px 3px 5px #000000;box-shadow: 2px 3px 5px #000000;
width:900px;
margin: 0 0 0 0px;
padding: 12px 0 8px 0;
clear: both;
background: #696969 left bottom no-repeat;
}
#tuliskancom1nav .catList{
padding: 4px 0 0 35px;
float: left;
margin-top:-3px;
}
#tuliskancom1nav .pageList{
padding: 8px 0px 0 0;
float: right;
}
#tuliskancom1nav ul li{
float: left;
margin: 0 18px 0 0 ;
}
#tuliskancom1nav a{
color: #fff;
list-style:none;
text-decoration: none;

}
#tuliskancom1nav a:hover{
color: #919191;
}
#tuliskancom1nav li {
list-style:none;
text-decoration:none;
}
#tuliskancomsearch{
margin: -2px 20px 0 0;
float: right;
}
#tuliskancomupdatesBox {

margin-left: 20px;
}

6. Klik "Simpan/Save" Template.

7. Sekarang, buka Laman Tata Letak / Layout.

8. Klik Add Gadget.

9. Pilih HTML/JavaScript.

10. Lalu, letakkan kode berikut ini kedalamnya.

<div class="clearfix" id="tuliskancom1nav">
<ul class="catList">
<li class="cat-item cat-item-5"><a href="#">Menu1</a></li>
<li class="cat-item cat-item-3"><a href="#">Menu2</a></li>
<li class="cat-item cat-item-6"><a href="#">Menu3</a></li>
<li class="cat-item cat-item-4"><a href="#">Menu4</a></li>
<li class="cat-item cat-item-4"><a href="#">Menu5</a></li>
<li class="cat-item cat-item-4"><a href="#">Menu6</a></li>
</ul>
<div id="tuliskancomsearch">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input name="cx" type="hidden" value="004972222991511809341:kobh4_l5t3m" />
<input name="ie" type="hidden" value="ISO-8859-1" />
<input class="googleSearchField" name="q" size="20" style="background-color: white; background-image: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(126, 157, 185); padding: 2px;" type="text" />
<input class="button" name="sa" type="submit" value="Search" /></div>
<input name="siteurl" type="hidden" value="bloggertrix.com/" /><input name="ref" type="hidden" value="" /><input name="ss" type="hidden" value="" /></form>
<script src="http://www.google.com/cse/brand?form=cse-search-box&lang=en" type="text/javascript"></script>
</div>
<div id="tuliskancomupdatesBox">
<a alt="Subscribe to RSS" class="updatesIcon" href="http://feeds.feedburner.com/tuliskancom" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkIuxzdPxy1kBRCpeiOgty6PyjmZsxGxj7udhDL66SrlHp8FmF5CXlpG4lBOFsoUUUStYsuf9TG1snSoqQR7IuUQspEy89KtOUrUWAL5Yr-0hhGwEfrdmqGAoAqF-7HQRVkGfcZnEgYSI/s1600/btrix_RSS-icon.png" style=""></a>
<a alt="Follow Us" class="updatesIcon" href="http://twitter.com/tuliskancom" target="_blank" title="Follow Us"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjo-ZrR5aEyWATg-KDzuZj9tTqhPnIzqM6dTp3K79kdJCksGLUCZqNv15YORkNRp22oTOTVEYpndth4v7VYUijtWeBT-7QdZInbVMToD9REqoytlrFvKBE5_SpnmRDnaZCVDeSSmOCA8k/s1600/btrix-twitter-icon.png" /></a>
<a alt="Become a Fan" class="updatesIcon" href="http://www.facebook.com/tuliskancom" target="_blank" title="Become a Fan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1XLMaL5j-xK4G9jvEeZKduv16RZoFHS3S2WDZcquE0UP5ZVYwm1vkuOeaAlejBbxFp0j0rMVIu137Ik-_GzTzkU9mUtcFy_j8Wtqqr2IRrH8SKg4Q0SpHrV38dQulsd67l07B83C-TNk/s1600/btrix-facebook-icon.png" /></a></div>
</div>

Keterangan:

Ganti kode yang berwarna oranye dengan Judul dari URL masing-masing menu
Ganti kode yang berwarna hijau dengan URL dari masing-masing menu
Ganti kode yang berwarna merah dengan ID Feedburner blog anda
Ganti kode yang berwarna biru muda dengan Username Twitter anda
Ganti kode yang berwarna biru tua dengan Nama Fan Page / ID Facebook anda

10. Klik "Simpan/Save" gadget, dan selesai.

Bagaimana sobat? mudah sekali bukan untuk "sekedar" mempercantik penampilan blog dengan cara membuat menu navigasi yang lengkap dengan kotak pencarian dan sosial media. Demikian informasi terbaru tentang Membuat Menu Navigasi dengan Kotak Pencarian Google, baca juga artikel menarik lainya seputar tutorial blog tentang Membuat Tombol Share Minimalis dibawah Posting Blog, semoga bermanfaat, dan selamat mencoba.

Referensi:

Membuat Menu Navigasi dengan Kotak Pencarian Google

Share this

Author : Admin

Related Posts