11 Oktober 2011

Cara Membuat Daun Berjatuhan di Blog -

Cara Membuat Daun Berjatuhan di Blog -
Kali ini Ane Akan Sharing Tutorial Tentang Cara Membuat Daun berjatuhan di Blog. Selama 2 Hari Ane tidak memposting Tutorial ataupun Tips Trik, disebabkan karna sakit. Hari ini Ane sudah mulai Sehat dan bisa Memposting Tips Membuat Daun berjatuhan. Klw Ane Curhat mulu kapan Tutorial n Tips Trik ?? :D
Ok, Langsung saja Cara Membuatnya :
1. Log In blogger.com
2.Tata Letak
3.Tambah Gadget / Add Gadget
 4.Pilih HTML/JavaScript
 5.Copy Paste Code diatas jangan Lupa Simpan

Sekian Tentang Cara Membuat daun Berjatuhan di Blog. Selamat Mnecoba :)

readmore...

5 Mei 2011

cara membuat header melayang di blog


 
 
 
 
 
 
 
 
 
 hari ini saya akan membuat tutorial membuat menu header melayang seperti di blog ini contoh pada gambar atau lihat pada bagian atas blog ini:


Tambah code ini dibagian mana saja terserah.

<style type='text/css'>
* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic {background:#2a4375 top center;width:100%;margin:0 auto;padding:0 auto;border-bottom:1px solid #165D92;}
#menuwrapper {width:110%;margin:0 auto;height:41px; background:#2a4375;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:Arial, sans-serif;}
#menubar a {display: block;text-decoration: none;padding: 13px 12px 12px 12px;font-size:12px;font-weight:bold;text-transform:none;color:#d1d8e5;border-left:1px solid #165D92}
#menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAaViM8cJaCvfxGNMtOp9recGRjpii7DCd3jzkbVC1Nz5I1DdHm31tSPe9Xo_17757uM_EPXh0vMQ6tTj5xWhBJ2ebg1LFmFT47g0Qw2ufv40aW3jBrbrVntIXBFxdj0onUQMLVLilwu4/s1600/arrow.gif);background-repeat: no-repeat;padding: 13px 24px 12px 12px;background-position: right center;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:165px;}
#menubar ul li a  {text-align:left;color:#13598D;padding: 6px 12px;font-size: 12px;font-weight:bold;text-transform:none;font-family:Arial;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#0F4E7D;padding-bottom:5px;}
#menubar li ul {-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
#menubar li ul {-moz-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 5px 5px rgba(0, 0, 0, 0.6);filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#115383;color:#d1d8e5;text-decoration:none;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color:#d1d8e5;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr {border-bottom:1px solid #296A99; border-top:1px solid #0E4064; display:block; font-size: 1px; height: 0px; line-height: 0px; margin:4px 0; }
#menubar ul a:hover {background-color: #0E3B5D!important;color: #d1d8e5 !important;text-decoration:none;}
#menubar li.home a, #menubar li.home a:visited {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisjOuvjDfnPn9TLDDn8jfU1VOS1LKvzn02OsftLrmK3wQNDh56NzMYucqlaDIV4iTz_8kChDqrFvTZAV5zo8r-eP458BGLpg2DYYQUv30YJG2Ny2thgUwFtAfH6VIgiDCYBDE6FqRHYBc/s1600/menu_hover.gif) repeat-x top left;border-left:none}
#menubar li.home a:hover {background:#1d335d;}
/* Fixed Position */
#inner{padding-top:41px;}
#fixed {position:fixed;top:0;left:0;width:100%;height:41px;z-index:999;}
#fixedinner{text-align:center;background:transparent;height:41px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #fixedinner{margin-right:17px;}
* html #fixed {position:absolute;}
/* -- SET FOR STATUS MESSAGE -- */

#search {
}
#search input[type="text"] {
    background: #fffff;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #0000;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 150px;
    }
</style>

 
Lalu tambahkan code HTMLnya dibawah code </head>

<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='-'>Home</a></li>
<li><a href='-'>Downloads</a>
<ul class='children'>
<li><a href='-'>Software</a></li>
<li><a href='-'>Keygen</a></li>
<li><a href='-'>Games</a></li>
<li><a href='-'>My Plugins</a></li>
<li><a href='-'>My Theme</a></li>
<li><a href='-'>My Product</a>
</li>
</ul>
</li>
<li><a href='-'>MyBB</a>
<ul class='children'>
<li><a href='-'>MyBB Mods</a>
<ul class='children'>
<li><a href='-'>Theme</a></li>
<li><a href='-'>Plugins</a></li>
<li><a href='-'>Source</a></li>
</ul>
</li>
<li><a href='-'>MyBB Tips</a></li>
<li><a href='-'>MyBB Tutorial</a></li>
<li><a href='-'>MyBB Plugins</a></li>
</ul>
</li>
<li><a href='-'>WebCorner</a>
<ul class='children'>
<li><a href='-'>Javascript</a></li>
<li><a href='-'>CSS</a></li>
<li><a href='-'>jQuery Plugins</a></li>
<li><a href='-'>Open Source</a></li>
</ul>
</li>
<li><a href='-'>Template</a>
<ul class='children'>
<li><a href='-'>Blogger Template</a></li>
<li><a href='-'>MyBB Template</a></li>
<li><a href='-'>Wordpress Template</a></li>
<li><a href='-'>Joomla Template</a></li>
</ul>
</li>
<li><a href='-'>Partner</a>
<ul class='children'>
<li><a href='-'>MyBB Indonesia</a></li>
<li><a href='-'>Public Indonesia</a></li>
<li><a href='-'>IndoModding</a></li>
</ul>
</li>
<li><a href='-'>Uncategorized</a></li>
<li><a href='-'><img alt='Home' border='0' src='-' style='padding:0px;'/></a></li>
<li><a href='-'><img alt='Home' border='0' src='-' style='padding:0px;'/></a></li>
</ul>
<br class='clearit'/>
</div>
readmore...