Cara Membuat Menu Navigasi invertedshiftdown Di blogspot - Dengan membuat Menu Navigasi Ini blog Anda akan terlihat lebih menarik, keren dan akan terlihat unik di para mata pengunjung dengan Menu Navigasi Invertedshiftdown , dan ini adalah artikel pertama Hujangede Online tentang Membuat Navigasi Di Blogspot/Diblogger, dan Menu Navigasi Inverted Down ini saya pasang di blogger q yang 1 lagii, dan menu ini saya tidak pasang di blog ini, sebelumnya juga Hujangede Online telah memposting artikel tentang Tutorial blog yang sebelumnya (Artikel : 20 Blockquote Keren Untuk Blogspot ) Dan (Artikel : Cara Pasang Blockquote Di Blogger ) dan sekarang kita lanjutkan lagii ke Cara Membuat Menu Navigasi Invertedshiftdown Di blogspot , dan ini lah contoh menu nya liat dibawah bro.
Gimana Bro setelah melihat gambar contoh menu di atas keren kan, dan saya juga memberi demo bagi yang kurang jelas dengan gambar di atas , Dan ini Blog DEMO adalah blog saya juga , clik demo dibawah ini :
Oke bila anda ingin membuat Menu Navigasi Inverted Down ikuti cara- cara dibawah ini :
Cara pembuatan (Cara Membuat Menu Navigasi Inverted Down Di blogspot) :
- Log In ke Blogger
- Silahkan Menuju Layout ( Rancangan )> Edit HTML dan check Expand Widget Templates. Sebelumnya Download Template Lengkap untuk jaga - jaga
- Cari Kode ]]></b:skin> Dan simpan kode CSS dibawah ini tepat diatas Kode tadi .
.invertedshiftdown{
padding: 0;
width: 100%;
border-top: 5px solid #7ECF01; /*Green color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.invertedshiftdown ul{
margin:0;
margin-left: 40px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
.invertedshiftdown li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.invertedshiftdown a{
float: left;
display: block;
font: bold 12px Arial;
color: black;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px 9px 10px; /*Padding within each menu item*/
background-color: white; /*Default menu color*/
/*BELOW 4 LINES add rounded bottom corners to each menu item.
ONLY WORKS IN FIREFOX AND FUTURE CSS3 CAPABLE BROWSERS
REMOVE IF DESIRED*/
-moz-border-radius-bottomleft: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-right-radius: 5px;
}
.invertedshiftdown a:hover{
background-color: #7ECF01; /*Green color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
.invertedshiftdown .current a{ /** currently selected menu item **/
background-color: #7ECF01; /*Green color theme*/
padding-top: 9px; /*Flip default padding-top value with padding-bottom */
padding-bottom: 5px; /*Flip default padding-bottom value with padding-top*/
color: white;
}
- Silahkan anda Edit warna - Warna nya.
4. Jika sudah cari kode berikut
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>
... dan seterusnya ...
</b:section></div>
- Bila tidak ada, cari yang sama persis dengan kode diatas
5. Jika sudah ketemu Copas kode berikut tepat dibawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu)
<div class='invertedshiftdown'>
<ul>
<li><A REL="NOFOLLOW" HREF='#' title='home'>Home</a></li>
<li><A REL="NOFOLLOW" HREF='http://zonesia.blogspot.com/2011/04/contact-hujangede-online.html' title='contact us'>Contact Us</a></li>
<li class='current'><a expr:href='data:blog.homepageurl' title='revised'>Revised</a></li>
<li><A REL="NOFOLLOW" HREF='#' title='facebook'>Facebook</a></li>
<li><A REL="NOFOLLOW" HREF='http://zonesia.blogspot.com' title='css'>CSS</a></li>
<li><a expr:href='data:blog.homepageurl + "feeds/posts/default"' title='rss feed'>Rss Feed</a></li>
</ul></div>
- Note : Silahkan tulisan warna biru ganti dengan halaman Web/Blog kamu
- Sedangkan yang berwarna merah ganti dengan kata2 kenginan kamu
Akhirnya Postingan Cara Membuat Menu Navigasi Inverted Down Di blogspot Sudah selesai. Semoga Bermanfaat.
0 komentar:
Posting Komentar