CSS3 Navigation Bar Dengan Google Custom Search Box

Ini adalah tutorial yang unik. Dalam posting ini saya mas basir menjelaskan Bagaimana menambahkan CSS3 Navigation Bar Dengan Google Custom Search Box. Itu termasuk profil jaringan sosial seperti Facebook, 
twitter dan Rss dengan kotak pencarian Google kustom. Menu ini baik-baik saja bekerja dengan setiap internet yang modern browser. Anda dapat menghubungkan dengan halaman utama Anda dengan menggunakan navigasi bar. sya menggunakan CSS3 dan HTML, Hanya memeriksa demo. ini sangat mudah untuk ditambahkan ke blogger.

Demo

1. Pergi ke Blogger.com >> Situs Anda.
2. Klik Template >> Edit HTML.
3. Sekarang Anda masuk dalam Blogger HTML Editor tekan CTRL+F untuk mencari code ]]> </ b: skin>
4. Pastekan Kode dibawah ini di atas kode ]]> </ b: skin>

#tempatblogging1nav{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;
}
#tempatblogging1nav .catList{
 padding: 4px 0 0 35px;
 float: left;
    margin-top:-3px;
}
#tempatblogging1nav .pageList{
 padding: 8px 0px 0 0;
 float: right;
}
#tempatblogging1nav ul li{
 float: left;
 margin: 0 18px 0 0 ;
}
#tempatblogging1nav a{
 color: #fff;
    list-style:none;
    text-decoration: none;

  

}
#tempatblogging1nav a:hover{
 color: #919191;
}
#tempatblogging1nav li {
list-style:none;
text-decoration:none;
}
#search{
 margin: -2px 20px 0 0;
 float: right;
}
#updatesBox {
 margin-left: 100px; 

}

    5. Simpan Template
    6. Pergi ke Layout 
    7. Klik Tambah Gadget dan pilih 'HTML / Javascript 
    8. Paste kode di bawah ini.

<div class="clearfix" id="tempatblogging1nav">
<ul class="catList">
<li class="cat-item cat-item-5"><a href="#">Home</a></li>
<li class="cat-item cat-item-3"><a href="#">Downloads</a></li>
<li class="cat-item cat-item-6"><a href="#">Tools</a></li>
<li class="cat-item cat-item-4"><a href="#">Css3</a></li>
<li class="cat-item cat-item-4"><a href="#">HTML</a></li>
<li class="cat-item cat-item-4"><a href="#">Tips</a></li>
<li class="cat-item cat-item-31"><a href="#">About</a></li>
<li class="cat-item cat-item-11"><a href="#">Contact Us</a></li>
</ul>
<div id="search">
<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="mas-basir.blogspot.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&amp;lang=en" type="text/javascript"></script>
    </div>
<div id="updatesBox">
<a alt="Subscribe to RSS" class="updatesIcon" href="http://feeds.feedburner.com/TempatBlogging" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzGUz_OdTBvT_lXZjGmODSGZpwJgLjs1SEIGGoEns9XEjFH7_K9o_O1hD7IxdR4yfkVILANxvEo228S44VRhJLlmAeLJvvlK44x5qGXgVjrMiziaBlSwhzWtY3RqdSErH9EFRH0xDA5E/s1600/tempatblogging_RSS-icon.png" style=""></a>
<a alt="Follow Us" class="updatesIcon" href="http://twitter.com/TempatBlogging" target="_blank" title="Follow Us"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukkS78-9t3kJmNmA_f35ns1_sP53A90DhJvyyy8MQppvjGu31lZX7F_EgOqZZoTMHMg1gNIqZRHMOu2nPiMIXAK7tq6F7wF97VCpK2x4koZ5lH4M5HuQJWjyHtd14SShqXVWud3BjCTU/s1600/tempatblogging-twitter-icon.png" /></a>
<a alt="Become a Fan" class="updatesIcon" href="http://www.facebook.com/TempatBlogging" target="_blank" title="Become a Fan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4ALQWfrn3Hnpxvp1fO1YdeKuQ20W2c3COOzmQMmwXYDscN_C1CFeOETpshk9-s705jNd1z9S_RHLhyphenhyphen5DL3m26FrktdAljCmfke1AJt5jL_vEN9sBRJ6VX0b_TdTgsEkyLwhzjpyoXA2Y/s1600/tempatblogging-facebook-icon.png" /></a></div>
</div>

Ganti # dengan link Anda.

• Ganti TempatBlogging dengan Feedburner ID
• Ganti TempatBlogging dengan nama pengguna Facebook Anda
• Ganti TempatBlogging dengan Twitter Nama 

   9. Save Edit HTML/javascript

Sekian dulu Postingan Artikel kali ini yang membahas tentang Membuat CSS3 Navigation Bar Dengan Google Custom Search Box. semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Share this post