Cara Membuat Judul Link Terbuka Saat Kursor Mouse Diatasnya
What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Judul Link Terbuka Saat Kursor Mouse Diatasnya"
Dari judulnya aja udah panjang banget, apa lagi tutorialnya..??
Hmm, tenang aja gan tutorialnya sangat mudah dan tidak terlalu panjang kok..
Kalau gan penasaran apa maksud dari judulnya, silahkan lihat beberapa gambar di bawah.. ::
Dari 2 gambar diatas pasti kita sudah mengetahui, bahwa script kali ini akan membuat judul link akan terlihat/terbuka saat kita menaruh kursor mouse kita tepat di linknya.
Allright gan, langsung aja kita ke tutorialnya :
1. Loggin di blogger.com
2. Dari Dasbor > Template > Edit HTML > Lanjutkan > Centang
3. Cari kode <body> (Untuk mempermudah pencarian tekan tombol F3 atau tekan tombol CTRL + F), jika sudah ketemu, letakkan code dibawah ini sebelum code <body>
Jika code <body> tidak ditemukan, cobalah taruh di atas kode </body>, jika scriptnya tidak jalan juga, cobalah letakkan di CSS.
4. Simpan Template
5. Gan sudah bisa melihat hasilnya
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Judul Link Terbuka Saat Kursor Mouse Diatasnya"
Dari judulnya aja udah panjang banget, apa lagi tutorialnya..??
Hmm, tenang aja gan tutorialnya sangat mudah dan tidak terlalu panjang kok..
Kalau gan penasaran apa maksud dari judulnya, silahkan lihat beberapa gambar di bawah.. ::
Dari 2 gambar diatas pasti kita sudah mengetahui, bahwa script kali ini akan membuat judul link akan terlihat/terbuka saat kita menaruh kursor mouse kita tepat di linknya.
Allright gan, langsung aja kita ke tutorialnya :
1. Loggin di blogger.com
2. Dari Dasbor > Template > Edit HTML > Lanjutkan > Centang
3. Cari kode <body> (Untuk mempermudah pencarian tekan tombol F3 atau tekan tombol CTRL + F), jika sudah ketemu, letakkan code dibawah ini sebelum code <body>
<!-- SweetTitlesTooltips Plugin -->
<link href='http://www.geocities.com/cuitnazz/SweetTitles.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.geocities.com/cuitnazz/ToolTips.js' type='text/javascript'/>
<script src='http://www.geocities.com/cuitnazz/SweetTitles.js'
type='text/javascript'/>
<link href='http://www.geocities.com/cuitnazz/SweetTitles.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.geocities.com/cuitnazz/ToolTips.js' type='text/javascript'/>
<script src='http://www.geocities.com/cuitnazz/SweetTitles.js'
type='text/javascript'/>
Jika code <body> tidak ditemukan, cobalah taruh di atas kode </body>, jika scriptnya tidak jalan juga, cobalah letakkan di CSS.
4. Simpan Template
5. Gan sudah bisa melihat hasilnya
*jika ada yang kurang jelas silahkan berkomentar*
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
Cara Membuat Tulisan Berjalan Pada Halaman Awal Blog
What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Tulisan Berjalan Pada Halaman Awal Blog"
Sebetulnya, tutorial ini sangatlah mudah.. Langsung aja kita lihat contoh/demonya :
itu dia demonya..
Cara Membuat :
1. Loggin di blogger.com
2. Dari dasbor pilih Tata Letak > Tambah Gadget > HTML/JavaScript
3. Masukkan code di bawah ini :
** Silahkan ganti tulisan SELAMAT DATANG dengan tulisan yang gan inginkan
4. Setelah itu Simpan
5. Silahkan dipindah-pindahkan di mana akan dibuat Tulisan berjalannya, misalnya ditaruh di bawah Header.
6. Klik Simpan Setelan
7. Gan sudah bisa melihat hasilnya
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Tulisan Berjalan Pada Halaman Awal Blog"
Sebetulnya, tutorial ini sangatlah mudah.. Langsung aja kita lihat contoh/demonya :
itu dia demonya..
Cara Membuat :
1. Loggin di blogger.com
2. Dari dasbor pilih Tata Letak > Tambah Gadget > HTML/JavaScript
3. Masukkan code di bawah ini :
<div><script
src="http://www.widgeo.net/message.php?msg=SELAMAT
DATANG &adult=0&cat=internet&big=&cl=rainbow"><br
/>
<noscript><a href="http://www.widgeo.net">widgets</a></noscript>
<a href="http://www.widgeo.net"><img alt="widgets" border="0" src="http://www.widgeo.net/img/logopm.png" /></a></script></div>
<noscript><a href="http://www.widgeo.net">widgets</a></noscript>
<a href="http://www.widgeo.net"><img alt="widgets" border="0" src="http://www.widgeo.net/img/logopm.png" /></a></script></div>
** Silahkan ganti tulisan SELAMAT DATANG dengan tulisan yang gan inginkan
4. Setelah itu Simpan
5. Silahkan dipindah-pindahkan di mana akan dibuat Tulisan berjalannya, misalnya ditaruh di bawah Header.
6. Klik Simpan Setelan
7. Gan sudah bisa melihat hasilnya
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
0 comments
Peraturan yang harus diikuti ketika membuat komentar :
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
Cara Mengubah Kursor di Blog
What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Mengubah Kursor di Blog"
Sudah banyak teman-teman saya yang bertanya-tanya, bagaimana sih cara mengganti kursor di blog??..
Kali ini saya akan mengshare tutorialnya, mudah-mudahan tutorialnya bisa membantu gan-gan semua.
Okelah gan, langsung aja kita ke intinya..
Langkah-langkah Mengubah Kursor Di Blog :
1. Login di blogger.com
2. Dari dasbor pilih Tata Letak/Page Element > Tambah Gadget > HTML/JavaScript
3. Letakkan code dibawah ini :
4. Setelah itu kilih Simpan
5. Setelah itu klik Simpan Setelan
Gan juga bisa merubah link http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif dengan link-link gambar kursor yang lainnya, saya ada beberapa link kursor, silahkan memilih-milih.. :
Are you fine today?
If you fine, I want to tell you about "Cara Mengubah Kursor di Blog"
Sudah banyak teman-teman saya yang bertanya-tanya, bagaimana sih cara mengganti kursor di blog??..
Kali ini saya akan mengshare tutorialnya, mudah-mudahan tutorialnya bisa membantu gan-gan semua.
Okelah gan, langsung aja kita ke intinya..
Langkah-langkah Mengubah Kursor Di Blog :
1. Login di blogger.com
2. Dari dasbor pilih Tata Letak/Page Element > Tambah Gadget > HTML/JavaScript
3. Letakkan code dibawah ini :
<style type="text/css"> body{cursor:
url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"),
auto;} body a:hover{cursor: url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"),
auto;} </style>
- Code yang diatas adalah code cursor permanen, yang artinya jika kursor diletakkan di link, kursornya tidak berubah.
- Tapi jika gan tidak ingin yang permanen, gan tinggal hapus aja code body a:hover{cursor: url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"), auto;}
- Tapi jika gan tidak ingin yang permanen, gan tinggal hapus aja code body a:hover{cursor: url("http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif"), auto;}
4. Setelah itu kilih Simpan
5. Setelah itu klik Simpan Setelan
Gan juga bisa merubah link http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif dengan link-link gambar kursor yang lainnya, saya ada beberapa link kursor, silahkan memilih-milih.. :
➪ http://i1122.photobucket.com/albums/l524/riyosuke/7updot-ani-1.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/aliendance-1.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/bananathumbsup.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/banghead.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/bullseye-ani.gif
➪
http://cursors2.totallyfreecursors.com/thumbnails/earwig.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/guitarblackglitter.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/heartbowarrow1-1.gif
➪
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnyCH1o0ZCLzfC-v5Fgj7BIZdx8RuQBmd3xmsjV-cE7KeAsN_1HuVujaJGrIB9GSEXt530y2syclaavG0oNZU95PXaCMiFyxNdRQjzt8-17guvcnAULOdEuDxguUDeRu3HXqcd0IKBjl8/s1600/jasablogsitus-web-id.gif
➪
http://i1122.photobucket.com/albums/l524/riyosuke/tail2.gif
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
2 comments
Peraturan yang harus diikuti ketika membuat komentar :
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
Cara Membuat Menu Horizontal Tanpa JQuery
What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Menu Horizontal Tanpa JQuery"
Di Post/Artikel saya yang sebelumnya, saya telah mengshare tentang Cara Membuat Menu Drop-Down/Horizontal, tetapi artikel saya yang itu membuat menu horizontal dengan menggunakan JQuery, maka saya akan mengshare yang tanpa JQuery, karena saya rasa lebih aman kalau kita tidak menggunakan versi yang menggunakan JQuery, karena jika terjadi kesalahan bisa terjadi GALAT. Maka itu, supaya lebih aman, saya akan memberitahukan langkah-langkahnya.
LAHKAH - LANGKAH :
1. Loggin di blogger.com
2. Dari Dasbor, pilih Template
3. Pilih Edit HTML, pilih Lanjutkan,Centang
4. Cari kode berikut ini :
*!! Untuk mempermudah mencari tekan F3 atau tekan CTRL + F !!*
5. Kemudian copy script/codenya dan letakkan diatas kode yang diatas.
DESAIN 1 / MODEL 1 :
Untuk melihat demo/previewnya, silahkan klik tulisan DEMO dibawah ini :
::DEMO::
Untuk melihat demo/previewnya, silahkan klik tulisan DEMO dibawah ini :
::DEMO::
6. Jika sudah merasa sempurna, silahkan pratinjau terlebih dahulu
7. Kalau sudah sempurna, silahkan simpan template anda.
8. Anda sudah bisa melihat hasilnya.
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Menu Horizontal Tanpa JQuery"
Di Post/Artikel saya yang sebelumnya, saya telah mengshare tentang Cara Membuat Menu Drop-Down/Horizontal, tetapi artikel saya yang itu membuat menu horizontal dengan menggunakan JQuery, maka saya akan mengshare yang tanpa JQuery, karena saya rasa lebih aman kalau kita tidak menggunakan versi yang menggunakan JQuery, karena jika terjadi kesalahan bisa terjadi GALAT. Maka itu, supaya lebih aman, saya akan memberitahukan langkah-langkahnya.
LAHKAH - LANGKAH :
1. Loggin di blogger.com
2. Dari Dasbor, pilih Template
3. Pilih Edit HTML, pilih Lanjutkan,Centang
4. Cari kode berikut ini :
<div class='main-outer'> atau
<div id='main-wrapper'> atau
<div id='main'>
<div id='main-wrapper'> atau
<div id='main'>
*!! Untuk mempermudah mencari tekan F3 atau tekan CTRL + F !!*
5. Kemudian copy script/codenya dan letakkan diatas kode yang diatas.
DESAIN 1 / MODEL 1 :
Untuk melihat demo/previewnya, silahkan klik tulisan DEMO dibawah ini :
::DEMO::
<style>
/* -- Menu
Horizontal + Sub Menu-- */
#cat-nav
{background:#156994;margin:0 15px;padding:0;height:35px;}
#cat-nav a {
color:#eee; text-decoration:none; text-shadow: #033148 0px 1px
0px;border-right:1px solid #156994;}
#cat-nav
a:hover { color:#fff; }
#cat-nav
li:hover { background:#000; }
#cat-nav a
span { font-family:Verdana, Geneva, sans-serif; font-size:11px;
font-style:normal; font-weight:400; color:#fff; text-shadow:none;}
#cat-nav
.nav-description { display:block; }
#cat-nav
a:hover span { color:#fff; }
#secnav,
#secnav ul { position:relative; z-index:100; margin:0; padding:0;
list-style:none; line-height:1; background:#0d5e88; }
#secnav a {
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100;
padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li {
float:left; width: auto; height:35px;}
#secnav li
ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li
ul li { height:30px; border-top:1px solid #fff; }
#secnav li
ul li a { font-family:Verdana, Geneva, sans-serif; width:180px;
line-height:30px; padding:0 10px; font-size:11px; font-style:normal;
font-weight:400; color:#eee; }
#secnav li
ul ul { margin: -30px 0 0 180px; }
#secnav
li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav
li.sfhover ul ul ul { left:-999em; }
#secnav
li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav
li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left:
auto; }
#secnav
li:hover,#secnav li.hover { position:static; }
#cat-nav
#secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl'
id='secnav'>
<li><a
href='#'>Home</a></li>
<li><a
href='#'>Menu 1</a></li>
<li><a
href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a
href='#'>Sub Menu 1</a></li>
<li><a
href='#'>Sub Menu 2</a></li>
<li><a
href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a
href='#'>Menu</a></li>
<li><a
href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a
href='#'>Sub 1</a></li>
<li><a
href='#'>Sub 2</a></li>
<li><a
href='#'>Sub 3</a></li>
<li><a
href='#'>Sub 4</a></li>
<li><a
href='#'>Sub 5</a></li>
<li><a
href='#'>Sub 6</a>
<ul id='sub-custom-nav'>
<li><a
href='#'>Sub Menu Sub 6 </a></li>
<li><a
href='#'>Sub Menu Sub 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a
href='#'>Menu</a></li>
</ul>
</div>
- Ganti tulisan #156994 untuk merubah warna background dengan warna yang gan suka
- Ganti tanda pagar (#) dengan link tujuan menu tersebut, bisa link posting, bisa juga link kategori
- Ganti tulisan Menu, Sub Menu, Sub 1-6, Anak Sub Menu dengan kata-kata yang gan suka
- <ul id='sub-custom-nav'> berfungsi untuk menambahkan Sub Menu/Anak menu. Dan jika gan mau menambahkan sub menu/anak menu, gan harus menghapus code "</li>" yang ada di menu yang mau dibuat anak menunya, dan gan copy code <li><a href='#'>Judul Menu</a></li> dan dibawahnya diakhiri dengan code
- Gan juga bisa mengganti-ganti warna-warna backgound anak-anak menunya, silahkan aja dicoba untuk mengganti-ganti kode warna yang ada di bagian <style> nya.
- Ganti tanda pagar (#) dengan link tujuan menu tersebut, bisa link posting, bisa juga link kategori
- Ganti tulisan Menu, Sub Menu, Sub 1-6, Anak Sub Menu dengan kata-kata yang gan suka
- <ul id='sub-custom-nav'> berfungsi untuk menambahkan Sub Menu/Anak menu. Dan jika gan mau menambahkan sub menu/anak menu, gan harus menghapus code "</li>" yang ada di menu yang mau dibuat anak menunya, dan gan copy code <li><a href='#'>Judul Menu</a></li> dan dibawahnya diakhiri dengan code
</ul>
</li>
Dan setiap kali gan menambahkan anak menu lagi harus di akhiri kode tersebut, yaitu kode </ul> dan </li>.- Gan juga bisa mengganti-ganti warna-warna backgound anak-anak menunya, silahkan aja dicoba untuk mengganti-ganti kode warna yang ada di bagian <style> nya.
DESAIN 2 / MODEL 2 :
Untuk melihat demo/previewnya, silahkan klik tulisan DEMO dibawah ini :
::DEMO::
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#FF0000;margin:0 15px;padding:0;height:35px; border-top:4px double #000; border-left:4px double #000; border-bottom:4px double #000; border-right:4px double #000;}
#cat-nav a { color:#fff; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:2px dotted #000;}
#cat-nav a:hover { color:#fff; background:#000;}
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none; background:#FF0000; }
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; background:#FF0000;}
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#FF0000; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; border-left:2px solid #000;}
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Anak Sub Menu 3</a></li>
<li><a href='#'>Anak Sub Menu 3</a></li>
<li><a href='#'>Anak Sub Menu 3</a></li>
<li><a href='#'>Anak Sub Menu 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Anak Sub 6 </a></li>
<li><a href='#'>Anak Sub 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
</ul>
</div>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#FF0000;margin:0 15px;padding:0;height:35px; border-top:4px double #000; border-left:4px double #000; border-bottom:4px double #000; border-right:4px double #000;}
#cat-nav a { color:#fff; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:2px dotted #000;}
#cat-nav a:hover { color:#fff; background:#000;}
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none; background:#FF0000; }
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; background:#FF0000;}
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#FF0000; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li { height:30px; border-top:1px solid #fff; border-left:2px solid #000;}
#secnav li ul li a { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu + Sub Menu</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Anak Sub Menu 3</a></li>
<li><a href='#'>Anak Sub Menu 3</a></li>
<li><a href='#'>Anak Sub Menu 3</a></li>
<li><a href='#'>Anak Sub Menu 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu + Sub</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Sub 1</a></li>
<li><a href='#'>Sub 2</a></li>
<li><a href='#'>Sub 3</a></li>
<li><a href='#'>Sub 4</a></li>
<li><a href='#'>Sub 5</a></li>
<li><a href='#'>Sub 6</a>
<ul id='sub-custom-nav'>
<li><a href='#'>Anak Sub 6 </a></li>
<li><a href='#'>Anak Sub 6</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Menu</a></li>
</ul>
</div>
Keterangan sama dengan desain 1/model 1.
Untuk mengganti background, silahkan ganti code #FF0000 yang ada di code "cat-nav {background:#FF0000;margin:0 15px;padding:0;height:35px; border-top:4px double #000; border-left:4px double #000; border-bottom:4px double #000; border-right:4px double #000;}"
Untuk mengganti background, silahkan ganti code #FF0000 yang ada di code "cat-nav {background:#FF0000;margin:0 15px;padding:0;height:35px; border-top:4px double #000; border-left:4px double #000; border-bottom:4px double #000; border-right:4px double #000;}"
6. Jika sudah merasa sempurna, silahkan pratinjau terlebih dahulu
7. Kalau sudah sempurna, silahkan simpan template anda.
8. Anda sudah bisa melihat hasilnya.
..JIKA ADA YANG KURANG JELAS SILAHKAN TULIS DI KOTAK KOMENTAR, SAYA AKAN SIAP SEDIA UNTUK MEMBANTU..
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
0 comments
Peraturan yang harus diikuti ketika membuat komentar :
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
Cara Membuat Menu Drop-Down/Horizontal
What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Menu Drop-Down/Horizontal"
Pada para pemula-pemula yang baru saja menggunakan blogger, mungkin sedikit bingung bagaimana sih caranya membuat menu-menu yang bisa ada anak-anaknya atau yang bisa bercabang-cabang??
..Nah, supaya para gan2 semua tidak bingung, kali ini saya akan memberitahukannya kepada gan2 semua dengan cara2 saya dan semoga artikel ini dapat membantu gan2 semua.
Okelah gan cukup basa-basinya, langsung aja kita ke langkah-langkahnya..
*(Tapi sebelumnya, saya punya beberapa style/desainnya, jdi silahkan gan yang pilih desain mana yang mau gan pilih)*
Cara 1 / Model 1 :
1. Login di blogger.com
2. Masuk ke Menu Template
*!! sebelum memulai langkah yang ke-3, sebaiknya gan BackUp/Unduh dulu template yang gan gunakan sekarang, agar ketika step ini gagal, gan bisa mengembalikannya ke awal/sebelumnya. (Cara BackUp/Mengunduh/Mendownload Template Sendiri) !!*
3. Pilih Edit HTML, pilih Lanjutkan
4. Centang/Ceklis
5. Search/Cari kode </body> (untuk lebih mudah mencari, tekan tombol F3 / tekan tombol CTRL + F) , lalu letakkan kode berikut diatas kode </body>
6. Setelah itu gan letakkan code berikut ini diatas kode yang tadi ( </body> )
7. Selanjutnya gan cari code ]]></b:skin> , dan letakkan code berikut tepat diatas kode ]]></b:skin>
Untuk menyesuaikan warna dengan keinginan sobat, silahkan ganti tulisan-tulisan yang berwarna merah dengan warna yang gan sukai, untuk melihat kode-kode warna, silahkan kunjungi beberapa artikel saya :
- Kode Warna 238 Warna
- Tabel & Kode Warna
*!! Tapi untuk mengubah-ubah warnanya, saya harap itu belakangan saja karena belum bisa dilihat/dipratinjau
8. Selanjutnya cari kode <div id='content-wrapper'> jika gan tidak menemukan kodenya coba kode yang satu ini <div class='content'>, jika sudah ketemu, letakkan kode berikut di atas kode <div id='content-wrapper'> atau <div class='content'> :
*!! Silahkan gan ganti tanda pagar (#) dengan link tujuan menu tersebut !!*
*!! Silahkan ganti tulisan "Kategori, Sub Kategori, dan Sub Menu Kategori" dengan keinginan gan masing-masing !!*
9. Coba gan pratinjau terlebih dahulu, jika tidak ada gangguan, silahkan simpan templatenya, dan silahkan gan ubah-ubah warna, dan tulisan-tulisannya.
Sekian dulu desain yang Pertama, saya akan meng-share desain yang kedua segera, karena saya sedang sibuk jadi saya tidak sempat untuk mengsharenya sekaligus. Dan saya akan segera menerbitkan live demo untuk desain yang pertama. Thanks.
Are you fine today?
If you fine, I want to tell you about "Cara Membuat Menu Drop-Down/Horizontal"
Pada para pemula-pemula yang baru saja menggunakan blogger, mungkin sedikit bingung bagaimana sih caranya membuat menu-menu yang bisa ada anak-anaknya atau yang bisa bercabang-cabang??
..Nah, supaya para gan2 semua tidak bingung, kali ini saya akan memberitahukannya kepada gan2 semua dengan cara2 saya dan semoga artikel ini dapat membantu gan2 semua.
Okelah gan cukup basa-basinya, langsung aja kita ke langkah-langkahnya..
*(Tapi sebelumnya, saya punya beberapa style/desainnya, jdi silahkan gan yang pilih desain mana yang mau gan pilih)*
Cara 1 / Model 1 :
1. Login di blogger.com
2. Masuk ke Menu Template
*!! sebelum memulai langkah yang ke-3, sebaiknya gan BackUp/Unduh dulu template yang gan gunakan sekarang, agar ketika step ini gagal, gan bisa mengembalikannya ke awal/sebelumnya. (Cara BackUp/Mengunduh/Mendownload Template Sendiri) !!*
3. Pilih Edit HTML, pilih Lanjutkan
4. Centang/Ceklis
5. Search/Cari kode </body> (untuk lebih mudah mencari, tekan tombol F3 / tekan tombol CTRL + F) , lalu letakkan kode berikut diatas kode </body>
<script
src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'
type='text/javascript'/>
6. Setelah itu gan letakkan code berikut ini diatas kode yang tadi ( </body> )
<script
type='text/javascript'>
//<![CDATA[
(function($){
/* hoverIntent by Brian Cherne */
$.fn.hoverIntent = function(f,g) {
// default configuration options
var cfg = {
sensitivity: 7,
interval: 100,
timeout: 0
};
// override configuration options with user supplied object
cfg = $.extend(cfg, g ? { over: f, out: g } : f );
// instantiate variables
// cX, cY = current X and Y position of mouse, updated by mousemove event
// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
var cX, cY, pX, pY;
// A private function for getting mouse position
var track = function(ev) {
cX = ev.pageX;
cY = ev.pageY;
};
// A private function for comparing current and previous mouse position
var compare = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
// compare mouse positions to see if they've crossed the threshold
if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
$(ob).unbind("mousemove",track);
// set hoverIntent state to true (so mouseOut can be called)
ob.hoverIntent_s = 1;
return cfg.over.apply(ob,[ev]);
} else {
// set previous coordinates for next time
pX = cX; pY = cY;
// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
}
};
// A private function for delaying the mouseOut function
var delay = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = 0;
return cfg.out.apply(ob,[ev]);
};
// A private function for handling mouse 'hovering'
var handleHover = function(e) {
// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
if ( p == this ) { return false; }
// copy objects to be passed into t (required for event object to be passed in IE)
var ev = jQuery.extend({},e);
var ob = this;
// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
// else e.type == "onmouseover"
if (e.type == "mouseover") {
// set "previous" X and Y position based on initial entry point
pX = ev.pageX; pY = ev.pageY;
// update "current" X and Y position based on mousemove
$(ob).bind("mousemove",track);
// start polling interval (self-calling timeout) to compare mouse coordinates over time
if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
// else e.type == "onmouseout"
} else {
// unbind expensive mousemove event
$(ob).unbind("mousemove",track);
// if hoverIntent state is true, then call the mouseOut function after the specified delay
if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
}
};
// bind the function to the two event listeners
return this.mouseover(handleHover).mouseout(handleHover);
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* Superfish v1.4.8 - jQuery menu widget
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
*/
;(function($){
$.fn.superfish = function(op){
var sf = $.fn.superfish,
c = sf.c,
$arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
over = function(){
var $$ = $(this), menu = getMenu($$);
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
out = function(){
var $$ = $(this), menu = getMenu($$), o = sf.op;
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(function(){
o.retainPath=($.inArray($$[0],o.$path)>-1);
$$.hideSuperfishUl();
if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
},o.delay);
},
getMenu = function($menu){
var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
sf.op = sf.o[menu.serial];
return menu;
},
addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
return this.each(function() {
var s = this.serial = sf.o.length;
var o = $.extend({},sf.defaults,op);
o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
$(this).addClass([o.hoverClass,c.bcClass].join(' '))
.filter('li:has(ul)').removeClass(o.pathClass);
});
sf.o[s] = sf.op = o;
$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
if (o.autoArrows) addArrow( $('>a:first-child',this) );
})
.not('.'+c.bcClass)
.hideSuperfishUl();
var $a = $('a',this);
$a.each(function(i){
var $li = $a.eq(i).parents('li');
$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
});
o.onInit.call(this);
}).each(function() {
var menuClasses = ;
if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
$(this).addClass(menuClasses.join(' '));
});
};
var sf = $.fn.superfish;
sf.o = [];
sf.op = {};
sf.IE7fix = function(){
var o = sf.op;
if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
this.toggleClass(sf.c.shadowClass+'-off');
};
sf.c = {
bcClass : 'sf-breadcrumb',
menuClass : 'sf-js-enabled',
anchorClass : 'sf-with-ul',
arrowClass : 'sf-sub-indicator',
shadowClass : 'sf-shadow'
};
sf.defaults = {
hoverClass : 'sfHover',
pathClass : 'overideThisToUse',
pathLevels : 1,
delay : 800,
animation : {opacity:'show'},
speed : 'normal',
autoArrows : true,
dropShadows : true,
disableHI : false, // true disables hoverIntent detection
onInit : function(){}, // callback functions
onBeforeShow: function(){},
onShow : function(){},
onHide : function(){}
};
$.fn.extend({
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
.find('>ul').hide().css('visibility','hidden');
o.onHide.call($ul);
return this;
},
showSuperfishUl : function(){
var o = sf.op,
sh = sf.c.shadowClass+'-off',
$ul = this.addClass(o.hoverClass)
.find('>ul:hidden').css('visibility','visible');
sf.IE7fix.call($ul);
o.onBeforeShow.call($ul);
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
return this;
}
});
})(jQuery);
//]]>
</script>
<script>
$(document).ready(function(){
$("ul.menu-secondary").superfish({
pathClass: 'current'
});
});
</script>
//<![CDATA[
(function($){
/* hoverIntent by Brian Cherne */
$.fn.hoverIntent = function(f,g) {
// default configuration options
var cfg = {
sensitivity: 7,
interval: 100,
timeout: 0
};
// override configuration options with user supplied object
cfg = $.extend(cfg, g ? { over: f, out: g } : f );
// instantiate variables
// cX, cY = current X and Y position of mouse, updated by mousemove event
// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
var cX, cY, pX, pY;
// A private function for getting mouse position
var track = function(ev) {
cX = ev.pageX;
cY = ev.pageY;
};
// A private function for comparing current and previous mouse position
var compare = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
// compare mouse positions to see if they've crossed the threshold
if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
$(ob).unbind("mousemove",track);
// set hoverIntent state to true (so mouseOut can be called)
ob.hoverIntent_s = 1;
return cfg.over.apply(ob,[ev]);
} else {
// set previous coordinates for next time
pX = cX; pY = cY;
// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
}
};
// A private function for delaying the mouseOut function
var delay = function(ev,ob) {
ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
ob.hoverIntent_s = 0;
return cfg.out.apply(ob,[ev]);
};
// A private function for handling mouse 'hovering'
var handleHover = function(e) {
// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
while ( p && p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
if ( p == this ) { return false; }
// copy objects to be passed into t (required for event object to be passed in IE)
var ev = jQuery.extend({},e);
var ob = this;
// cancel hoverIntent timer if it exists
if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
// else e.type == "onmouseover"
if (e.type == "mouseover") {
// set "previous" X and Y position based on initial entry point
pX = ev.pageX; pY = ev.pageY;
// update "current" X and Y position based on mousemove
$(ob).bind("mousemove",track);
// start polling interval (self-calling timeout) to compare mouse coordinates over time
if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
// else e.type == "onmouseout"
} else {
// unbind expensive mousemove event
$(ob).unbind("mousemove",track);
// if hoverIntent state is true, then call the mouseOut function after the specified delay
if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
}
};
// bind the function to the two event listeners
return this.mouseover(handleHover).mouseout(handleHover);
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*
* Superfish v1.4.8 - jQuery menu widget
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
*/
;(function($){
$.fn.superfish = function(op){
var sf = $.fn.superfish,
c = sf.c,
$arrow = $(['<span class="',c.arrowClass,'"> »</span>'].join('')),
over = function(){
var $$ = $(this), menu = getMenu($$);
clearTimeout(menu.sfTimer);
$$.showSuperfishUl().siblings().hideSuperfishUl();
},
out = function(){
var $$ = $(this), menu = getMenu($$), o = sf.op;
clearTimeout(menu.sfTimer);
menu.sfTimer=setTimeout(function(){
o.retainPath=($.inArray($$[0],o.$path)>-1);
$$.hideSuperfishUl();
if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
},o.delay);
},
getMenu = function($menu){
var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
sf.op = sf.o[menu.serial];
return menu;
},
addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
return this.each(function() {
var s = this.serial = sf.o.length;
var o = $.extend({},sf.defaults,op);
o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
$(this).addClass([o.hoverClass,c.bcClass].join(' '))
.filter('li:has(ul)').removeClass(o.pathClass);
});
sf.o[s] = sf.op = o;
$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
if (o.autoArrows) addArrow( $('>a:first-child',this) );
})
.not('.'+c.bcClass)
.hideSuperfishUl();
var $a = $('a',this);
$a.each(function(i){
var $li = $a.eq(i).parents('li');
$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
});
o.onInit.call(this);
}).each(function() {
var menuClasses = ;
if (sf.op.dropShadows && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
$(this).addClass(menuClasses.join(' '));
});
};
var sf = $.fn.superfish;
sf.o = [];
sf.op = {};
sf.IE7fix = function(){
var o = sf.op;
if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
this.toggleClass(sf.c.shadowClass+'-off');
};
sf.c = {
bcClass : 'sf-breadcrumb',
menuClass : 'sf-js-enabled',
anchorClass : 'sf-with-ul',
arrowClass : 'sf-sub-indicator',
shadowClass : 'sf-shadow'
};
sf.defaults = {
hoverClass : 'sfHover',
pathClass : 'overideThisToUse',
pathLevels : 1,
delay : 800,
animation : {opacity:'show'},
speed : 'normal',
autoArrows : true,
dropShadows : true,
disableHI : false, // true disables hoverIntent detection
onInit : function(){}, // callback functions
onBeforeShow: function(){},
onShow : function(){},
onHide : function(){}
};
$.fn.extend({
hideSuperfishUl : function(){
var o = sf.op,
not = (o.retainPath===true) ? o.$path : '';
o.retainPath = false;
var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
.find('>ul').hide().css('visibility','hidden');
o.onHide.call($ul);
return this;
},
showSuperfishUl : function(){
var o = sf.op,
sh = sf.c.shadowClass+'-off',
$ul = this.addClass(o.hoverClass)
.find('>ul:hidden').css('visibility','visible');
sf.IE7fix.call($ul);
o.onBeforeShow.call($ul);
$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
return this;
}
});
})(jQuery);
//]]>
</script>
<script>
$(document).ready(function(){
$("ul.menu-secondary").superfish({
pathClass: 'current'
});
});
</script>
7. Selanjutnya gan cari code ]]></b:skin> , dan letakkan code berikut tepat diatas kode ]]></b:skin>
.menus,.menus
*{margin:0;padding:0;list-style:none;list-style-type:none;}
.menus ul{position:absolute;top:-999em;100%;}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-wrap{padding:0;margin:0;position:relative;height:40px;z-index:300;background: #BDB76B; width: 100%;}
.menu-secondary{height:40px}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#1B1A1A;padding:13px 15px 12px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif; border-right: 1px solid #A52A2A;}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background: #C3C3C3;outline:0;}
.menu-secondary li li a{color::#A52A2A;background:#FFEBCD;padding:10px 15px;text-transform:none;font-weight:normal; border-right: 0;}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#A52A2A;background:#FFEBCD;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:10px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}
.menus ul{position:absolute;top:-999em;100%;}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-wrap{padding:0;margin:0;position:relative;height:40px;z-index:300;background: #BDB76B; width: 100%;}
.menu-secondary{height:40px}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#1B1A1A;padding:13px 15px 12px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif; border-right: 1px solid #A52A2A;}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background: #C3C3C3;outline:0;}
.menu-secondary li li a{color::#A52A2A;background:#FFEBCD;padding:10px 15px;text-transform:none;font-weight:normal; border-right: 0;}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#A52A2A;background:#FFEBCD;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:10px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}
Untuk menyesuaikan warna dengan keinginan sobat, silahkan ganti tulisan-tulisan yang berwarna merah dengan warna yang gan sukai, untuk melihat kode-kode warna, silahkan kunjungi beberapa artikel saya :
- Kode Warna 238 Warna
- Tabel & Kode Warna
*!! Tapi untuk mengubah-ubah warnanya, saya harap itu belakangan saja karena belum bisa dilihat/dipratinjau
8. Selanjutnya cari kode <div id='content-wrapper'> jika gan tidak menemukan kodenya coba kode yang satu ini <div class='content'>, jika sudah ketemu, letakkan kode berikut di atas kode <div id='content-wrapper'> atau <div class='content'> :
<div
class='menu-secondary-wrap'>
<ul class='menus menu-secondary'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Kategori1</a>
<ul class='children'>
<li><a href='#'>Sub Kategori1</a></li>
<li><a href='#'>Sub Kategori1</a></li>
<li><a href='#'>Sub Kategori1</a></li>
</ul>
</li>
<li><a href='#'>Kategori2</a>
<ul class='children'>
<li><a href='#'>Sub Kategori2</a></li>
<li><a href='#'>Sub Kategori2</a></li>
<li><a href='#'>Sub Kategori2</a>
<ul class='children'>
<li><a href='#'>sub menu kategori2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Kategori3</a>
<ul class='children'>
<li><a href='#'>Sub Kategori3</a>
<ul class='children'>
<li><a href='#'>Sub menu Kategori3</a></li>
<li><a href='#'>Sub menu Kategori3</a></li>
<li><a href='#'>Sub menu Kategori3</a></li>
</ul>
</li>
<li><a href='#'>Sub Kategori3</a></li>
<li><a href='#'>Sub Kategori3</a></li>
<li><a href='#'>Sub Kategori3</a></li>
</ul>
</li>
<li><a href='#'>Kategori4</a></li>
<li><a href='#'>Kategori5</a>
<ul class='children'>
<li><a href='#'>Sub Kategori5</a></li>
<li><a href='#'>Sub Kategori5</a></li>
</ul>
</li>
<li><a href='#'>Kategori6</a></li>
<li><a href='#'>Kategori7</a></li>
</ul>
</div>
<ul class='menus menu-secondary'>
<li><a href='/'>Home</a></li>
<li><a href='#'>Kategori1</a>
<ul class='children'>
<li><a href='#'>Sub Kategori1</a></li>
<li><a href='#'>Sub Kategori1</a></li>
<li><a href='#'>Sub Kategori1</a></li>
</ul>
</li>
<li><a href='#'>Kategori2</a>
<ul class='children'>
<li><a href='#'>Sub Kategori2</a></li>
<li><a href='#'>Sub Kategori2</a></li>
<li><a href='#'>Sub Kategori2</a>
<ul class='children'>
<li><a href='#'>sub menu kategori2</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Kategori3</a>
<ul class='children'>
<li><a href='#'>Sub Kategori3</a>
<ul class='children'>
<li><a href='#'>Sub menu Kategori3</a></li>
<li><a href='#'>Sub menu Kategori3</a></li>
<li><a href='#'>Sub menu Kategori3</a></li>
</ul>
</li>
<li><a href='#'>Sub Kategori3</a></li>
<li><a href='#'>Sub Kategori3</a></li>
<li><a href='#'>Sub Kategori3</a></li>
</ul>
</li>
<li><a href='#'>Kategori4</a></li>
<li><a href='#'>Kategori5</a>
<ul class='children'>
<li><a href='#'>Sub Kategori5</a></li>
<li><a href='#'>Sub Kategori5</a></li>
</ul>
</li>
<li><a href='#'>Kategori6</a></li>
<li><a href='#'>Kategori7</a></li>
</ul>
</div>
*!! Silahkan gan ganti tanda pagar (#) dengan link tujuan menu tersebut !!*
*!! Silahkan ganti tulisan "Kategori, Sub Kategori, dan Sub Menu Kategori" dengan keinginan gan masing-masing !!*
9. Coba gan pratinjau terlebih dahulu, jika tidak ada gangguan, silahkan simpan templatenya, dan silahkan gan ubah-ubah warna, dan tulisan-tulisannya.
Sekian dulu desain yang Pertama, saya akan meng-share desain yang kedua segera, karena saya sedang sibuk jadi saya tidak sempat untuk mengsharenya sekaligus. Dan saya akan segera menerbitkan live demo untuk desain yang pertama. Thanks.
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
1 comments:
Peraturan yang harus diikuti ketika membuat komentar :
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
Cara Back Up/Mengunduh/Mendownload Template Sendiri
What's up gan?
Are you fine today?
If you fine, I want to tell you about "Cara Back Up/Unduh Template Sendiri"
Bagi gan2 semua yang belum tahu bagaimana cara mengunduh template yang kita sedang gunakan/aktifkan sekarang, saya akan memberitahukan solusinya.
Langkah-langkah :
1. Login di blogger.com
2. Masuk ke Menu Template
3. Pilih kotak "Cadangkan/Pulihkan" yang berada di ujung sebelah kanan atas.
(untuk lebih jelas, lihat gambar dibawah)
4. Lalu gan akan melihan tampilan seperti yang dibawah ini :
5. Lalu gan pilih "Unduh Template Lengkap"
6. Save File, tunggu sampai file siap di unduh/download.
*!! hati-hati gan jika gan sudah selesai mengunduh/mendownload templatenya, sebaiknya gan simpan baik-baik, agar jika gan ingin mengunggah templatenya, gan tidak kehilangan templatenya.
7. Selesai deh,
Are you fine today?
If you fine, I want to tell you about "Cara Back Up/Unduh Template Sendiri"
Bagi gan2 semua yang belum tahu bagaimana cara mengunduh template yang kita sedang gunakan/aktifkan sekarang, saya akan memberitahukan solusinya.
Langkah-langkah :
1. Login di blogger.com
2. Masuk ke Menu Template
3. Pilih kotak "Cadangkan/Pulihkan" yang berada di ujung sebelah kanan atas.
(untuk lebih jelas, lihat gambar dibawah)
Gambar 1
Gambar 2
4. Lalu gan akan melihan tampilan seperti yang dibawah ini :
Gambar 3
6. Save File, tunggu sampai file siap di unduh/download.
*!! hati-hati gan jika gan sudah selesai mengunduh/mendownload templatenya, sebaiknya gan simpan baik-baik, agar jika gan ingin mengunggah templatenya, gan tidak kehilangan templatenya.
7. Selesai deh,
Sekian dulu pemberitahuan dari
saya..
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
See you in my next pages..
Bye gan..!!
Selamat mencoba..
*jangan lupa komentarnya ya gan.. :D
1 comments:
Peraturan yang harus diikuti ketika membuat komentar :
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon
Subscribe to:
Posts (Atom)
1 comments:
1. Tidak Membuat Link Aktif
2. Tidak SPAM
3. Menggunakan Bahasa Yang Sopan
4. Tidak Berhubungan Dengan SARA, Seks, dan Judi
Selamat Berkomentar..
Terima Kasih Atas Kerjasamanya.. ^_^
Show Konversi KodeHide Konversi Kode Show Emoticon Hide Emoticon