Gudang Tutorial Blog

Sebuah menu horizontal minimalis dan ringan dibangun dengan CSS murni. Menu ini juga responsif, mengubah dirinya menjadi menu vertikal pada perangkat mobile dengan layar kecil. DEMO @import url(https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_veN9XN7opZzAOIO_fvJIpeLM-4iyaiRmHZhDshpr9rqyYHC9dxRVYHpZGvxTGb_Lh9AbnfrzzDVDgUzoSDNSh-1viG224SeNsfKzctOuyuDwOEsfLaUw=s0-d); #cssmenu{ background:#f96e5b; width:auto} #cssmenu ul{ list-style:none; margin:0; padding:0; line-height:1; display:block; zoom:1} #cssmenu ul:after{ content:' '; display:block; font-size:0; height:0; clear:both; visibility:hidden} #cssmenu ul li{ float:left; display:block; padding:0} #cssmenu ul li a{...

Continue Reading

Tutorial blog kali ini tentang cara membuat orange menu vertikal.DEMO#cssmenu { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; padding: 0px;}#cssmenu ul { margin: 0px; padding: 0px; list-style: none;}#cssmenu li a { height: 32px; height: 24px; text-decoration: none; font-weight: normal; color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL1fxzkdxVVnP3i9I2aiVprPiEaDFmQWjI83IunDeI7bUFb3ZE1rmsoy-9mgk8jBH9jvBVgiGDCki7AVbogs5BbBOHm9E5rfrXDIKdxnl4xOU8WZvtMxvE6jiwpE6EsdJlceZq_KoiGww/s1600/mig33eaglemenu4.gif); padding: 8px 0 0 30px;}#cssmenu li a:hover {...

Continue Reading

Menu navigasi yang saya share berikut cocok untuk blog girly, fashion. Karena hover menu berwarna pink.  LIVE DEMO #menu8 ul { list-style:none; font-family: Helvetica, Arial, sans-serif; font-size: 44px; letter-spacing: -2px; line-height: 1.2em; float:left; clear:both; margin:20px; border:5px solid #fff; } #menu8 ul li{ float:left; } #menu8 ul li a{ display:block; text-decoration:none; padding:5px 10px 5px 10px; background-color:#fff; width:170px; border-left:6px solid...

Continue Reading

King Of Black Navigation Menu dapat di gunakan pada blog, wordpress dan semua website lainnya.Karena kode scriptnya murni css dan html.LIVE DEMOLogin blogLayoutAdd gadget "html/javascript"Simpan kode berikut<style type="text/css">/* this code is by www.mig33eagle.com Main */#menu{width: 100%;margin: 0;padding: 10px 0 0 0;list-style: none;background: #111;background: -moz-linear-gradient(#444, #111);background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));background: -webkit-linear-gradient(#444, #111);background: -o-linear-gradient(#444, #111);background: -ms-linear-gradient(#444, #111);background: linear-gradient(#444, #111);-moz-border-radius:...

Continue Reading

Cute Yellow Navigation Menu untuk Blog, contoh sepeti gambar di atas.Detail penampakan  Cute Yellow Navigation Menu:LIVE DEMOKode cssnya sebagai berikut, simpan di layout sobat.<style type="text/css">#menu6 ul {list-style:none;font-family: "Trebuchet MS", sans-serif;font-size: 28px;font-weight: bold;letter-spacing: -1px;line-height: 1.1em;float:left;clear:both;margin:20px;border:4px groove #ffe430;}#menu6 ul li{float:left;}#menu6 ul li a{display:block;text-decoration:none;padding:10px 10px 5px 10px;color:#fff;background-color:#ffc730;width:170px;}#menu6 ul li a span{display:block;}#menu6 ul li a span.title{border-bottom:2px solid #ffc730;}#menu6 ul li a:hover{background-color:#fff;}#menu6 ul li...

Continue Reading

Ga asing bagi blogger yang infonya pada terupdate tentang modif blog dan tutorialnya.Bagi yang blom tau, coba menu navigasi kwick ney, keren ko...sumpaa ヽ(ヅ)ノ1. Login blog2. Template3. Letakkan kode css berikut di atas ]]></b:skin>.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2}.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}#kwick1 a:hover{background-position:0 -50px!important}#kwick2 a{background-position:-190px 0}#kwick2 a:hover{background-position:-190px -50px!important}#kwick3 a{background-position:-380px 0}#kwick3 a:hover{background-position:-380px -50px!important}#kwick4 a{background-position:-570px 0}#kwick4 a:hover{background-position:-570px -50px!important}#kwick5 a{background-position:-760px 0}#kwick5 a:hover{background-position:-760px -50px!important}#kwick6 a{background-position:-950px 0}#kwick6 a:hover{background-position:-950px -50px!important}.kwicks li...

Continue Reading

Banyak sekali menu blog yang dapat di modifijasi sesuai selera sobat.Pada kesempatan kali ini saya akan share cara membuat menu blog slide yang berada pasa sisi halaman blog.Jika sobat tertarik ingin mencobanya, simak cara2nya:1. Login blog2. Layout dan add gadget "html/javascript"3. Letakkan script berikut dan simpan<script language="JavaScript1.2" src="http://mig33eaglemenu.googlecode.com/files/slidemenu.js"></script><script>resizereinit=true;menu[3] = {id:'menu3',bartext:'MENU BLOG',menupos:'left',kviewtype:'fixed',barbgcolor:"#00ff00",barcolor:"#000000",barfontweight:"bold",bordercolor:'#000000',hdingbgcolor:"#ffffff",fontsize:'80%',linkheight:20 ,hdingwidth:210 ,menuItems:[["Home", "http://www.mig33eagle.com/", "_self"],["My Facebook", "http://www.facebook.com/mig33eagle",""],["Berita", "http://www.okezone.com/",...

Continue Reading

Menu horisontal colourful yang kali saya share adalah seperti gambar di atas.Sobat boleh ganti warna sesuai keinginan sobat.Dan berikut ini caranya:1. Login blog2. Layout3. Add gadget html/javascript4. Letakkan kode berikut dan simpan<style>#menuwrapperpic{margin:0 auto;padding:0 auto;}#menuwrapper{width:980px;height:27px;margin:0 auto}.clearit{clear:both;height:0;line-height:0.0;font-size:0}#menubar{width:100%}#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#menubar a{display:block;text-decoration:none;font-size:14px;font-weight:700;text-transform:uppercase;color:#333;padding:8px 8px 8px}#menubar a.trigger{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;}#menubar a.trigcome{padding:8px 18px 8px 20px;}#menubar li{float:left;position:static;width:auto}#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#008E00;color:#fff;-webkit-transition: all...

Continue Reading

Sobat ingin  membuat menu horisontal seperti gambar  di atas?Berikut ini  caranya:1. Login  blog2. Rancangan3.Add gadget html/javascript4. Copast kode script di bawah ini<style type="text/css">#msuteja 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;}#msuteja li .current{color: transparant;}#msuteja li a:hover,#msuteja li a:active {background: #4B0082;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000));background:...

Continue Reading

Menu dropdown dengan efek bubble menarik untuk di coba.Contoh seperti gambar di atas.Berikut ini caranya:1. Login blog2. Rancangan3. Edit html4. Letakkan kode berikut di atas </head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script type="text/javascript" src="http://tympanus.net/Tutorials/BubbleNavigation/jquery.easing.1.3.js"></script><script type="text/javascript"> $(function() {  $('#nav > div').hover(  function () {   var $this = $(this);   $this.find('img').stop().animate({    'width'     :'199px',    'height'    :'199px',    'top'       :'-25px',    'left'      :'-25px',    'opacity'...

Continue Reading