CARA MEMBUAT TAB MENU UNIK DAN SIMPLE DI BLOG

Haduuhh...kehabisan ide menulis nih...Ga ada ide yang melayang layang di atas kepala...bagaimana ini....haduuuhhh.... terinsfirasi dari salah satu teman blogger yang menyarankan blog itu sesuai tema memang bagus..tapi sekali-kali ngasih tips and triks sih gak masalah,,,haduhh lieur...Dan pada akhirnya kali ini saya mau berbagi tentang Tutorial blog saja deh...boleh yah....(maksa)

Kali ini saya mau share tentang bagaimana sih bikin tab menu Unik dan Simple di blog tanpa edit html ..waahh tanpa masuk ke edit HTML...biasanya sih kalau masuk ke edit html agak ribet juga yah...tapi santailah... disini kita akan membuat Tab menu dropdown yang cuikup menarik atau bisa dilihat contohnya seperti screenshoot dibawah ini

Atau Jika kita geser mouse ke tab yang lain akan seperti ini

Masih penasaran yah...lihat demo nya disini...

Oke sudah cukup jelas kan... Dropdown menu ini letaknya di bagian paling atas blog kita...kalau begitu kita langsung saja ke Tempat kejadian perkara yah biar gak ragu ..

Langkah pertama yang harus dilakukan adalah Login ke Blogger masing-masing..(jangan blogger orang lain yah gak enak sama yang punya)..
Setelah itu masuk ke Dashboard kemudian pilih 'Layout' atau kalau bahasa indonesia nya 'Tata letak'..
Kemudian pilih Add gadget atau 'Tambah gadget'.. sudah dipilih yah..nanti akan ada pilihan gadget banyak banget..tapi kita pilih html/javascript.. selanjutnya langkah yang paling penting adalah masuka code script berikut ini ke dalam nya.

<style type="text/css"> #japmenu ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#japmenu li .current{color: transparant;}#japmenu li a:hover, #japmenu li a:active {background: #4B0082;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#japmenu {width: auto;float: left;margin: 0;padding: 0;}#japmenu {margin: 0;padding: 0;}#japmenu ul {float: left;list-style: none;margin: 0;padding: 0;}#japmenu li {list-style: none;margin: 0;padding: 0;}#japmenu li a, #japmenu li a:link, #japmenu li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#japmenu li a:hover, #japmenu li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#japmenu li li a, #japmenu li li a:link, #japmenu li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#japmenu li li a:hover, #japmenu li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#japmenu li {float: left;padding: 0;}#japmenu li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#japmenu li ul a {width: 140px;}#japmenu li ul ul {margin: -32px 0 0 171px;}#japmenu li:hover ul ul, #japmenu li:hover ul ul ul, #japmenu li.sfhover ul ul, #japmenu li.sfhover ul ul ul {left: -999em;}#japmenu li:hover ul, #japmenu li li:hover ul, #japmenu li li li:hover ul, #japmenu li.sfhover ul, #japmenu li li.sfhover ul, #japmenu li li li.sfhover ul {left: auto;}#japmenu li:hover, #japmenu li.sfhover {position: static;}#footer-column-divide {clear:both;}#japmenu{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj3RaER7iYFZlfahi9SvtOsNACqt4HsmKWuagUw3MvyzlwS3hRLTPcWgHA5j-ZJTrjILjjPgc8Y5-6IfCszn-m71-E8KPtT0r72ARfiCzeT11J4vDUAlNhiXVssRdido4gmWGsbmFROty7/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;} </style> <div id='japmenu'> <ul id='japmenu'> <li><a href='disini letak link sobat'>Home</a></li> <li><a href='disini letak link sobat' target='_blank'>Daftar Isi</a></li> <li><a href='http://indra-antara.blogspot.com/' target='_blank'>link7</a> <ul class='children'> <li><a href='disini letak link sobat' target='_blank'>link7</a></li> <li><a href='disini letak link sobat' target='_blank'>link7</a></li> <li><a href='disini letak link sobat' target='_blank'>link7</a></li> <li><a href='disini letak link sobat' target='_blank'>link7</a></li> <li><a href='disini letak link sobat' target='_blank'>link7</a></li> </ul> </li> <li><a href='http://indra-antara.blogspot.com/' target='_blank'>link8</a> <ul class='children'> <li><a href='disini letak link sobat' target='_blank'>link8</a></li> <li><a href='disini letak link sobat' target='_blank'>link8</a></li> </ul> </li> <li><a href='disini letak link sobat' target='_blank'>link9</a> <ul class='children'> <li><a href='disini letak link sobat' target='_blank'>link9</a></li> <li><a href='disini letak link sobat' target='_blank'>link9</a></li> <li><a href='disini letak link sobat' target='_blank'>link9</a></li> </ul> </li> <li><a href='http://indra-antara.blogspot.com/'>link10</a> <ul class='children' target='_blank'> <li><a href='disini letak link sobat' target='_blank'>link10</a></li> <li><a href='disini letak link sobat' target='_blank'>link10</a></li> </ul> </li> <li><a href='disini letak link sobat' title='titleeeeee' target='_blank'>link11</a> <ul class='children'> <li><a href='disini letak link sobat'>link11</a></li> <li><a href='disini letak link sobat' target='_blank'>link11</a></li> </ul> </li> <li><a href='disini letak link sobat' target='_blank'>link12</a></li> <li><a href='http://indra-antara.blogspot.com' title='tutorial' target='_blank'><blink>Tutorial</blink></a></li> </ul> </div>

Sudah kan ctrl + C nya.. karena disini otomatis tersimpan sumbernya maka biar lebih maksimal Pastekan di word atau notpade dulu...lihat bagian atas hasil copy nya... hapus semua link sumber: blablabla... Jangan lupa disesuaikan lagi dengan blog masing2.. Seperti contoh yang bertuliskan Link 1 sampai dengan link 12  (jika bingung mencarinya gunakan Ctrl + F) ..ganti dengan nama tab blog masing2 atau terserah sobat semua deh...nah yang paling penting adalah bagian yang beruliskan disini letak Link sobat..ganti dengan Alamat Link blog masing-masing...Setelah itu Simpan Dan lihat hasilnya...
Semoga bermanfaat Postingan Tab menu Unik Dan simple di blog tanpa edit html ini bermanfaat untuk sobat blogger...
Dijamin Bagus....