Putra Semarang: Membuat Tab Navigasi Horisontal Blogger

. Putra Semarang: Membuat Tab Navigasi Horisontal Blogger

Follow our Network

Membuat Tab Navigasi Horisontal Blogger

Selasa, 25 Mei 2010 06.59

Diposting oleh Putra Semarang

Label: Tutorial Blog

Salam kenal shobat semua...!!! Apa kabar...??? Pasti baik nsehat-sehat saja bukan...???

Kali ini saya akan berbagi tutorial yang saya pelajari dari Blog Teman, sudah saya praktekkan dan berhasil. "Cara Membuat Tab Navigasi Horisontal. Ga' sulit-sulit amat kok shobat sekalian.

Langkah Pertama

Pilih dulu Tipe Navigasi Horisontal yang sesuai dengan keinginan dan sesuai dengan Tamplate shobat sekalian. Dibawah ini contoh macam Navigasi Horisontal

<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBXlA4ACinZReLnU4W-JTt-oUQgnifDWTFLM2qrN5Cn5h_scSDVpk_VEryrNsNDgnvwBub9MYWZCEIHQrJnKSs9T85ey3h87yWIfOF3sFZ9DzYiFBBzMfmBvgxNiQhTN8LRVBhyphenhyphenS-Xw4g/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsKi5ZmOjtv0OOpcfySi1TsjBzpbCuZlWm4wp3WD9DX-rim-MoAt8fS7AUnsOzy4QPH1u463XmzuQO2ZCKI6YgpzgblkKdUvlLciBgdnoksFFeEMHcSAS9OfJrPzKyDHu_ZqcUeGClUnQ/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJutVpg0vADz6tzFu_ApS-2U0GTn0VhsfCdFiGU1irF4uMGwRwXR8ca6TolyywF-NVXmzb4CqDsh6B5KvZj9Ro-3sWt6SVQA2zhvOHZUufmNCVMNux8KnQOzD33sGiUtD5yqYOA77NKZQ/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj93OkBxfOoXJEasTIH4as6-6qriG9gFLWk8U7RWQAkFB4PSh9fHPCtamKg91QUfeIPZaOwAGAMvAwAs-qYEVRwUoIx6VDt3obU9jCjFbi0lMq3qomdTQoDLGxtxfx5_1AgEUQ_IxhM494/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwARHkNaIIDMl6tU_jOGCXL1sx57k0zZTyWaB4cOk1syx3wUKPrbLG-k4n2jqoBUc9neB8Tzyqp1zVTvh4gv8oDVr4eFjEjzhjXxeSWATlruFH-C5KrZVk6_TksOwdKHv65mHUlwM7KEk/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnHoJY-yFr2rcrSH075PvoTTw867RjAWutE87FGiYu2j0L6-zTj1_c0WbdRo01HQFAz8kKmx5sFar4hODBSOkC9ftiFXZ7GkwhOT6FJs4eWlrGCTRcGWuiTtkRI0KsHdeJUERkDBz8Bh0/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq0Rt4ZEHtqrJuGgMHTvgo3XXGCBnonmrH9Gv_2NHjsPphfl4w5vCr0sETwJu9qJjeOO90DmokCH3R94KokApxC1RCwo_IVTEepOhYHbX1sY8URU_YQ79D7KxxErYysnKz_9Sb-tiAy7M/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVKfvu5aHMnhEQtXENfXeLI0q814hTl1bIel4UqY20ZbuGIzd0c0IRZLikONlZsdAa2ydToHn4Mvwb4-SCaHHPdeLPNhkF8hfbky9G6cQjcLW4gh4OblUrIWmf49k2PjcE63SyN79thgQ/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5hvi1PbWsbirsehu2cAxvkX8nlAHybXTriYGfHlVkv9euNools4IBPqXDQe4qk03saNiUNcLfI_b29r0ERNkMpm5HvlpybZkzLyQ0Djdv46x85i1NVkHEv5KnzuCi-qXP1p7H-QBevng/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_GDlhnF5lAo4C52a_lifg88P131q3Tll7JJvugzE6X-j_IcM9vlxvJHcPq7KEbkEWyOVUj37FqWUb1QO8cRtXBkO2YSkiLAFNZUd-n8hRbNXB0buMyTFdCagt0smQ6sz55abPM3by83c/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Kalo shobat sekalian dah memilih Navigasi yang cocok dengan selera shobat dan sesuai dengan tamplate shobat tinggal copy code html dibawah gambar tersebut.

Langkah Kedua

Pilih Tambah Elemen terus pilih HTML/Java Scrip dan paste code tadi didalam kotak HTML/Java Scrip.

Langkah Ketiaga

Jangan lupa klik simpan dan lihat Blog shobat sekalian.

Kalo ketiga langkah tersebut sudah selesai... tinggal finishing-nya

Ganti Tulisan Link 1 dan seterusnya sesuai dengan keinginan shobat, berikut ini cara editnya :

<li><a href="Ganti dengan url/link shobat"><span>Judul 1</span></a></li>
<li><a href="Ganti dengan url/link shobat" ><span>Judul 2</span></a></li>
<li><a href="Ganti dengan url/link shobat" ><span>Judul 3</span></a></li>
<li><a href="Ganti dengan url/link shobat" ><span>Judul 4</span></a></li>
<li><a href="Ganti dengan url/link shobat" ><span>Judul 5</span></a></li>
<li><a href="Ganti dengan url/link shobat" ><span>Judul 6</span></a></li>
<li><a href="Ganti dengan url/link shobat" ><span>Judul 7</span></a></li>

Ganti huruf yang ditulis tebal sesuai dengan keinginan shobat sekalian.

Langkah terakhir jangan lupa klik simpan....!!! Selamat Mencoba...!!! Semoga Berhasil...!!! Ucapkan Alhamdulillah...!!!

Ikon ini merupakan link ke situs bookmark sosial dimana pembaca dapat berbagi dan menemukan halaman web baru.

Digg

Sphinn

Delicious

Mixx

Google

Furl

Reddit

Spurl

StumbleUpon

Technorati

Comments (2)

anak smpi said on 6 Februari 2011 pukul 06.13
	keren bang tutorialnya

m fannanul gh said on 16 Februari 2011 pukul 22.52
	kereen bro tp ada satu pertanyaan nih bro; cara mengisi/post tiap2 tab nav nya gmana bro..?misalkan judul 1,judul 2 ,judul 3...saya ganti dg 'home','contac','gallery'. agar ketika orang membuka home nantinya yg muncul cuman ttg home saya,trus ketika membuka gallery nantinya yg muncul cmn gallery saya.... tq...salam kenal

Posting Komentar

Langganan: Posting Komentar (Atom)