Hy semua sudah lama ya kita sudah tidak bertemu maaf ya terma-teman aku sedang ada banyak perkerjaan yang harus kuselesaikan.
hehehhe,. Maklum namanya saja pelajar jadi banyak tugas yang harus dikerjakan sebagai seorang pelajaran/ murid yang baik.
Sudah langsung saja kita bahas Cara memasang menu Horizontal diatas header dengan sedikit efek hover.
Demo
jika kalian tertarik silhkan kuti langkah-langkah dibawah ini:
1. Login blogger Anda
2. Pilih Rancangan/Design
3. Klik Edit HTML
4. Cari Kode ]]></b:skin> untuk memudahkan pencarian coba kalian tekan CRL + F dan F3 jika sudah
ketemu copykan kode dibawah ini tepat diatas kode ]]></b:skin>
#hisyam 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;}
#hisyam li .current{color: transparant;}
#hisyam li a:hover, #hisyam 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;}
#hisyam {width: auto;float: left;margin: 0;padding: 0;}#hisyam {margin: 0;padding: 0;}#hisyam ul {float: left;list-style: none;margin: 0;padding: 0;}
#hisyam li {list-style: none;margin: 0;padding: 0;}
#hisyam li a, #hisyam li a:link, #hisyam li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}
#hisyam li a:hover, #hisyam li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}
#hisyam li li a, #hisyam li li a:link, #hisyam 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;}
#hisyam li li a:hover, #hisyam 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;}
#hisyam li {float: left;padding: 0;}
#hisyam li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}
#hisyam li ul a {width: 140px;}
#mhisyam li ul ul {margin: -32px 0 0 171px;}
#hisyam li:hover ul ul, #hisyam li:hover ul ul ul, #hisyam li.sfhover ul ul, #mhisyam li.sfhover ul ul ul {left: -999em;}
#hisyam li:hover ul, #hisyam li li:hover ul, #hisyam li li li:hover ul, #hisyam li.sfhover ul, #hisyam li li.sfhover ul, #hisyam li li li.sfhover ul {left: auto;}
#hisyam li:hover, #hisyam li.sfhover {position: static;}
#footer-column-divide {clear:both;}
#hisyam{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEuPB47rQDNj4_mnu5PgvbdjYhq6zNwJ1uD80TQd6UcwoiisuYmJ5zj7jP-8TWjwDmJQu8Wln_F9JvtUpgkeZwua5gd5MlLKh5XW8XsNfjV_j6Je6PljBWmi0AKMuEQRA6p-rgmOq8wKos//)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;}
5. Kalau sudah kemudian klik Save
6. Pilih rancangan / Design
7. Tambah Add a Gadget Klik HML/Javascript.
8. silahkan pastekan kode dibawah ini.
hehehhe,. Maklum namanya saja pelajar jadi banyak tugas yang harus dikerjakan sebagai seorang pelajaran/ murid yang baik.
Sudah langsung saja kita bahas Cara memasang menu Horizontal diatas header dengan sedikit efek hover.
Demo
jika kalian tertarik silhkan kuti langkah-langkah dibawah ini:
1. Login blogger Anda
2. Pilih Rancangan/Design
3. Klik Edit HTML
4. Cari Kode ]]></b:skin> untuk memudahkan pencarian coba kalian tekan CRL + F dan F3 jika sudah
ketemu copykan kode dibawah ini tepat diatas kode ]]></b:skin>
#hisyam 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;}
#hisyam li .current{color: transparant;}
#hisyam li a:hover, #hisyam 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;}
#hisyam {width: auto;float: left;margin: 0;padding: 0;}#hisyam {margin: 0;padding: 0;}#hisyam ul {float: left;list-style: none;margin: 0;padding: 0;}
#hisyam li {list-style: none;margin: 0;padding: 0;}
#hisyam li a, #hisyam li a:link, #hisyam li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}
#hisyam li a:hover, #hisyam li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}
#hisyam li li a, #hisyam li li a:link, #hisyam 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;}
#hisyam li li a:hover, #hisyam 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;}
#hisyam li {float: left;padding: 0;}
#hisyam li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}
#hisyam li ul a {width: 140px;}
#mhisyam li ul ul {margin: -32px 0 0 171px;}
#hisyam li:hover ul ul, #hisyam li:hover ul ul ul, #hisyam li.sfhover ul ul, #mhisyam li.sfhover ul ul ul {left: -999em;}
#hisyam li:hover ul, #hisyam li li:hover ul, #hisyam li li li:hover ul, #hisyam li.sfhover ul, #hisyam li li.sfhover ul, #hisyam li li li.sfhover ul {left: auto;}
#hisyam li:hover, #hisyam li.sfhover {position: static;}
#footer-column-divide {clear:both;}
#hisyam{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEuPB47rQDNj4_mnu5PgvbdjYhq6zNwJ1uD80TQd6UcwoiisuYmJ5zj7jP-8TWjwDmJQu8Wln_F9JvtUpgkeZwua5gd5MlLKh5XW8XsNfjV_j6Je6PljBWmi0AKMuEQRA6p-rgmOq8wKos//)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;}
6. Pilih rancangan / Design
7. Tambah Add a Gadget Klik HML/Javascript.
8. silahkan pastekan kode dibawah ini.
<div id='hisyam'>
<ul id='hisyam'>
<li><a href='/'>Home</a></li>
<li><a href='#' target='_blank'>Daftar Isi</a></li>
<li><a href='#' target='_blank'>Download</a>
<ul class='children'>
<li><a href='#' target='_blank'>Download Aplikasi</a></li>
<li><a href='#' target='_blank'>Download Software</a></li>
<li><a href='#' target='_blank'>Download Template</a></li>
</ul>
</li>
<li><a href='#' target='_blank'>Tips And Triks</a>
<ul class='children'>
<li><a href='#' target='_blank'>Tips Blogger</a></li>
<li><a href='#' target='_blank'>Trik Facebook</a></li>
</ul>
</li>
<li><a href='http://his4myahya.blogspot.com/'>Tutorial</a>
<ul class='children' target='_blank'>
<li><a href='#' target='_blank'>Tutorial Blog</a></li>
<li><a href='#' target='_blank'>Tutorial Photosop</a></li>
</ul>
</li>
<li><a href='#' target='_blank'><blink>Tukar Link</blink></a></li>
<li><a href='http://his4myahya.blogspot.com' title='htc' target='_blank'><blink>Hisyam yahya</blink></a></li>
</ul>
</div>
<ul id='hisyam'>
<li><a href='/'>Home</a></li>
<li><a href='#' target='_blank'>Daftar Isi</a></li>
<li><a href='#' target='_blank'>Download</a>
<ul class='children'>
<li><a href='#' target='_blank'>Download Aplikasi</a></li>
<li><a href='#' target='_blank'>Download Software</a></li>
<li><a href='#' target='_blank'>Download Template</a></li>
</ul>
</li>
<li><a href='#' target='_blank'>Tips And Triks</a>
<ul class='children'>
<li><a href='#' target='_blank'>Tips Blogger</a></li>
<li><a href='#' target='_blank'>Trik Facebook</a></li>
</ul>
</li>
<li><a href='http://his4myahya.blogspot.com/'>Tutorial</a>
<ul class='children' target='_blank'>
<li><a href='#' target='_blank'>Tutorial Blog</a></li>
<li><a href='#' target='_blank'>Tutorial Photosop</a></li>
</ul>
</li>
<li><a href='#' target='_blank'><blink>Tukar Link</blink></a></li>
<li><a href='http://his4myahya.blogspot.com' title='htc' target='_blank'><blink>Hisyam yahya</blink></a></li>
</ul>
</div>
wah mantep gan :D
ReplyDeleteterima kasih informasiny gan,,bisa mnta trik n tips lainnya untuk membuat menu g,,??klo buleh ditunggu disinii ya http://ilmu-pendidikanislam.blogspot.com/
ReplyDeletemakasi banyak gan
ReplyDeletesyip... Keep posting... Salam blogger
ReplyDeleteizin di coba gan
ReplyDeleteminta follow nya gan di kaskus informasi.blogspot.com
This comment has been removed by the author.
ReplyDeleteThak's artikelx Gan...biar kucoba semua jurus-jurusx
ReplyDeleteTapi izinkan aku dulu Gan mungkin aku campur dengan gado2 milikku yah
Heheheh...bercanda Gan....
INI yang says cari membantu bgt
ReplyDelete