Cara buat Drop Down menu Blue Dawn

Berikut caranya :
Pertama
Klik + Centang

Kedua
Cari kode ]]></b:skin>

Setelah ketemu Letakkan kode berikut diatasnya / Sebelum ]]></b:skin>

.wrapper1{
color: #44433f;
font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
margin: 0;
padding: 4px 0 0;
}
.wrapper1 a{
color: #E5F2FB;
text-decoration: none;
}
.wrapper1 a:hover {
color: #09548B;
}
.wrapper1 p {
margin: 0 0 17px;
padding: 0;
line-height: 18px;
}
.wrapper {
/*width: 710px;*/
margin: 20px auto;
}
.nav {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht4mgJwugH03QyxBfMjnUbgBpMEyZ-pnF7QtuaiCJktX6FFJ1404I0Yh0qpzC-DWYY6jvufYYbCvMKor5UciS2SNrm-5XTtQqz8w-yWdf-B6sP6qtBkh_8GSHIQnKFUfofRvk8sN7nFgU/h120/nav_bg.png) repeat-x;
float: left;
}
.nev-wrapper {
clear: both;
float: left;
}
.nav-left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaqw5f1ViREDLMXJQ9W46oBdBLsOS1NnDHk7GCjblbYXCL0ywRvleM2fmR5E0ozevs1zjCeRYMHPedS1A2m06Q4cGnMTe2rR8lyV4F1S90CFjPzvPejHnOL8YCHPxEQIfIfsdWCKEWiTA/h120/nav_left.png) no-repeat top left;
float: left;
width: 11px;
height: 41px;
}
.nav-right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2I4MCP6PFgPzZ8aXQaTZaZtQtDxhvwGVkSj0pY3GxtV5urJSnEDzhNX0BArqWBNbzEbCbhoJE72X1OE_CwLx8ZGYWg4ccJ4yd_NRVyCYEMnne5kd4WAnwz5SdIeuz7rL1YvnnfolnIhY/h120/nav_right.png) no-repeat top right;
float: left;
width: 11px;
height: 41px;
}
.nav ul {
/*width: 648px;*/
height: 38px;
float: left;
margin: 0;
padding-top: 3px;
list-style: none;
font-size: 15px;
}
.nav li {
float: left;
padding: 0 7px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIO8yM-so5ba7nRvmJAsUiq42PVs-yZhbF3jTkFPjfi3UNIEW-1QSm5_sJnh-z4Hktqo4ro05wu2_o_BKrP4ie-PYk2Em97eRVqG7mVvyv7cYCpQUKjXtXuECEqGdBQY05tAto-gh-2g/h120/split.png) no-repeat right center;
position: relative;
z-index: 1;
}
.nav li.last {
background:none;
}
.nav li:hover {
z-index:2;
}
.nav li a {
display: block;
line-height: 38px;
overflow: hidden;
float: left;
}
a .menu-left {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA6i1IG1t6Gie1-SA-kAb1JLM_jH45ypy9B86XAp0arMI-EdwbWpVtdIVjzYIQrmX8-PRMsq2t-xtcxPTx2jA9MfoMrPfsPLpR9S5smsUTdoFk-5oRByZLJCZfOLuqRDUu-O0jdZBS38k/h120/menu_left.gif) no-repeat left top;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-mid {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf4lPezHM9MqqJXJA-cP8eIV74ia4qV4uaxJ9fvhAtlgjVZMoeKZJHIqPuWl1NeaUC-JUl8I46sYe2kmkdX-mfAzfGCGtZBt8Fc4FgwqI4XE2x1xIDwHsSIl8rwzDcsJBs0TGisgVFU4w/h120/menu_mid.gif) repeat-x top left;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
a .menu-right {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUWdlfThmdv30gi9UtOzb10YY2iYlsgqg6S1RYRWgKYFDEcoZRjkqDl0D0_7Ct8oXM4OGQg_yPWZspYP5dNF9LLX0LSZTth7n8y3h_X6DWIt3l24JEOhjIWJUvDZ2nmL8pVNdpccb9qVk/h120/menu_right.gif) no-repeat top left;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;
}
.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
background-position: 0 -37px;
line-height: 35px;
}
.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
color: #09548B;
}
.nav li:hover .sub,
.nav li.hover .sub {
display:block;
}
.nav li .sub {
display: none;
position: absolute;
top: 27px;
left: 6px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgK9gO1-INCXL6lFdRhVa21q2yMRXmUzEnsr9o2y7YTzEhKmQIWqkgAWG4N8g4Q6f_iUaA-s4tqbwN6O64uyIf18RAYvK8qyoVMs2rKsE9wMJBa_UH9FhrpPlqIqRVYT5q0AEIdl6mVJQ/s144/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;
}
.nav li ul {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv6_O9xXVdnosnGQ2KwCks4wnaVN5MaBzDbGGPu5_Fa8s1TfOZJjT7PqEu_LtkbbXFyCjy_HcB_VzHZHyhz3p7F5FatmpOk9QQsbMjIblpmV9bOpNwJueZa8D3cq7MWmOpfS2l7jkfQZOk/s1600/submenu_bg.png) repeat-y;
width: 162px;
height: auto;
margin: 0;
padding: 0 12px 10px;
list-style: none;
font-size: 14px;
}
.nav li:hover li,
.nav li.active li {
width: 100%;
padding: 1px 0 2px;
border-bottom: 1px #C1D9F0 dashed;
background: none !important;
}
.nav li:hover li a,
.nav li.active li a {
color: #09548B;
background: none !important;
line-height: normal;
width: 156px;
padding: 8px 3px 3px;
text-indent: 1px;
}
.nav li:hover li a:hover,
.nav li.active li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/*IE*/
.nav li li a:hover,
.nav li li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;
}
/**/
.nav .btm-bg {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNw973ToSjuepmemO6xKG1SN9LKrb5YKsnkUpxP_BOxhXb1LVoBuf8SqaD20tGGxaJVod-xmsFw-gzEHRynFTeUSpg9_WE-kvPkuqlOpdOoPvZm-Ag1nAo1RpfslCRBpNacmfw0lDUV7Eu/s1600/submenu_bottom.png) no-repeat;
width: 205px;
height: 9px;
overflow: hidden;
clear: both;
}
.content {
width: 670px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAFYN-TsEOqfz3_iy8HRQjVFWguQtoP9jv011RUP2nUbKOg00t6fPbmmzy_DjR_7DhJm9KfoUKyEoisUwIrKD4XJoytAn52uswxqeaSIeGDUaREDkAuH8GmYOR8VKg-J2YhNpyOq6TFV8n/s1600/content_bg.png) repeat-y;
float: left;
padding: 10px 20px;
}
.content h1 {
color: #333;
font-weight: 400;
text-transform: uppercase;
font-size: 18px;
border-bottom: 1px dashed #C1D9F0;
}
.content h2 {
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
padding-left: 10px;
margin-bottom: -5px;
}
.content p {
padding: 0 15px;
text-align: justify;
}
.content-bottom {
width: 710px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGvR4DaLXN7Bac5MNdHfqn7mBq-EYIJq6YlAb0ppcMQGf3HGINQVEEYJ34JjaAu2XyirVXPr87GHs2XhNlk7hmWMxScNvdyXXVWQgFu37locBiGp_mzl_BwU_3ZyCoMuxqCUIwG07r3geP/s1600/content_bottom.png) no-repeat;
height: 13px;
float: left;
}

Silahkan Simpan

Ketiga
Klik + Pilih

Silahkan Copy dan Paste Kode Berikut ini

<div class="wrapper1">
<div class="wrapper">
<div class="nav-wrapper">
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation">
<li class="active">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Home</span>
<span class="menu-right"></span>
</a>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Blog</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Archives</a>
</li>
<li>
<a href="#">Categories</a>
</li>
<li>
<a href="#">Top-rated Posts</a>
</li>
<li>
<a href="#">Most-viewed Entries</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Development</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Wordpress Themes</a>
</li>
<li>
<a href="#">Wordpress Plugins</a>
</li>
<li>
<a href="#">Mac OS X</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Tutorials</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Photoshop</a>
</li>
<li>
<a href="#">Illustrator</a>
</li>
<li>
<a href="#">Css, Html</a>
</li>
<li>
<a href="#">Post Your Tutorial!</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Gallery</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">Personal Photos</a>
</li>
<li>
<a href="#">My Friends</a>
</li>
<li>
<a href="#">Tech</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Portfolio</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li>
<a href="#">My Works</a>
</li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="last">
<a href="">
<span class="menu-left"></span>
<span class="menu-mid">Contact</span>
<span class="menu-right"></span>
</a>
</li>
</ul>
</div>
<div class="nav-right"></div>
</div>
<div class="content">
<p> </p>
<p> </p>
</div>
<div class="content-bottom"></div>
</div>
</div>

Silahkan Sobat Ganti kode berikut dengan menu sesuai keinginan sobat, dan bisa juga ditambahkan atau dikurangi sesuai kebutuhan

<a href="#">Home</a>
<li><a href="#">Product</a>
dst

Kode # = Alamat Link dan Link One = Nama Link
contoh
Kode # saya ganti dengan http://www.akbari-syahputra.blogspot.com
Link One saya berikan nama = Home

Terakhir Jangan lupa letakkan atau Geret Gatget Tepat dibawah Header

Cara Mudah buat Menu Melayang di sisi kiri Blog - Floating left sidebar menu
Menu Floating ini selain mudah diterapkan juga berpenampilan keren dan tentunya memiliki fungsi yang tak kalah dengan menu lainnya dan bisa dijadikan juga sebagai penghias blog.

Cukup menarik dan keren bukan?, saya yakin seorang pemulapun akan cepat menerapkan atau menambahkan menu ini di blognya.

Berikut cara pasang di blog :

Pertama
Klik +

Pilih

Kedua
Silahkan Copy dan Paste Kode Berikut ini

<script src="http://acbary.16mb.com/file_akbari/SCRIPT1.js" type="text/javascript"></script>

<script src="http://acbary.16mb.com/file_akbari/script2.js" type="text/javascript"></script>
<script src="http://acbary.16mb.com/file_akbari/script3.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVd6babLy7D1BoO4mxZI3FdPKsjtBX1PHgfLuB4rqnsDNLHNFFifbJjQz_uqVX8duTiJ4cBz0fQ9lEmwDvtNczYfB4EtSq9TgpN5dI4-PsqCXpKohOJdS7UoA1KWoHLR04rpldSPGpxOMN/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://acbary.16mb.com/file_akbari/sidebar.gif" title="sideBar" /></a>
</div>

Silahkan Sobat Ganti kode berikut dengan menu sesuai keinginan sobat, dan bisa juga ditambahkan sesuai kebutuhan

<a href="#">Link One</a>
<a href="#">Link Two</a>
<a href="#">Link Three</a>
<a href="#">Link Four</a>

Kode # = Alamat Link dan Link One = Nama Link
contoh
Kode # saya ganti dengan http://www.akbari-syahputra.com
Link One saya berikan nama = Home

Menu Blog merupakan hal yang sangat penting, baik itu di mata pengunjung atau di mata mesin pencari. Semakin menarik Menu yang sobat gunakan di blog tentu semakin keren pula tampilan blog kita, selain berfungsi memperindah blog tentu juga mempermudah pengunjung mencari berbagai artikel di blog.
Sudah banyak bertebaran di dunia maya, di blog tetangga berbagai macam cara membuat menu blog namun tidak ada salahnya akbari-syahputra.blogspot.com ikut berpartisipasi meramaikan tutorial Menu me Menu " wkakakkk" dan terus terang bukan bermaksud ikut-ikutan atau Copas blog lain, karena saya tahu si PANDA sangat benci Blog Copas.
Kali ini kumpulancara mengawali Dunia Menu dengan Drop Down menu Massive Blue dan selanjutnya akan membahas berbagaimacam menu-menuan.

Berikut cara pasang Drop Down menu Massive Blue

Pertama
Klik + Centang

Kedua
Cari kode ]]></b:skin>

Setelah ketemu Letakkan kode berikut diatasnya / Sebelum ]]></b:skin>

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsIJi82UNNfGyohCFFcy_pXFORcLAs3ScR1iFkynTgC9RRtbgHnDHKlzyBsEMnKo9i3gvYnTUThYExWirBG184gKjWU0qJYYMyMtHaLlnWt61pRfdzZJyEaS_NOvz4_dhzScURZBxO1O-k/s1600/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qx5RIAweR5JwjWLy0KF7tHOzJwuuvSLXBNMe46Oylnylx_O_NjY6sWQf37HooMKmn58csYo0lwFRaCEZu7TToICkvbEM2wgclX1Ed54kh_0_3ZTpKscpEMKrb1lQ3LpDQCYQ-_j9Xu0/h120/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qx5RIAweR5JwjWLy0KF7tHOzJwuuvSLXBNMe46Oylnylx_O_NjY6sWQf37HooMKmn58csYo0lwFRaCEZu7TToICkvbEM2wgclX1Ed54kh_0_3ZTpKscpEMKrb1lQ3LpDQCYQ-_j9Xu0/h120/hover.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;

Silahkan Simpan

Kedua
Klik + Pilih

Silahkan Copy dan Paste Kode Berikut ini

<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

Silahkan Sobat Ganti kode berikut dengan menu sesuai keinginan sobat, dan bisa juga ditambahkan atau dikurangi sesuai kebutuhan

<a href="#">Home</a>
<a href="#">Product</a>
dst

Kode # = Alamat Link dan Link One = Nama Link
contoh
Kode # saya ganti dengan http://www.akbari-syahputra.com
Link One saya berikan nama = Home

Terakhir Jangan lupa letakkan atau Geret Gatget Tepat dibawah Header

Selamat mencoba dan semoga bermanfaat.

Cara buat efek animasi panah pada link

Ingin memperindah tampilan link dengan tampilan berbeda?, dimana saat Cursor diarahkan ke link mana saja di blog yang sudah dipasangkan css ini maka akan muncul efek panah bergerak dibawah link.

Letakkanlah Cursor pada link yang ada, maka sobat akan lihat efek Panahnya.

Berikut cara pasang diblog:

Pertama

Klik + +

Kedua
Cari kode ]]></b:skin>

Ketiga
Setelah ketemu silahkan Letakkan kode css berikut dibawahnya:

Berikut langkah-langkah membuat cursor berbintang.

copy dan pastekan script-script di bawah ini pada widget javascrit/HTML.

cursor bintang warna merah

<script src="http://blogtegal.googlecode.com/files/cursor_merah.js" type="text/javascript"/>

cursor warna hijau

<script src="http://blogtegal.googlecode.com/files/cursor_hijau.js" type="text/javascript"/>

cursor warna biru

<script src="http://blogtegal.googlecode.com/files/cursor_biru.js" type="text/javascript"/>

cursor warna ungu

<script src="http://blogtegal.googlecode.com/files/cursor_ungu.js" type="text/javascript"/>

cursor warna putih

<script src="http://blogtegal.googlecode.com/files/cursor_putih.js" type="text/javascript"/>

Jika anda newbie dan kurang jelas dalam memasukan script-script di atas, boleh lah Blogtegal berbagi caranya.

login ke dashboard blog anda.
pilih Rancangan
pada halaman elemen laman pilih tambah gadget
pilih widget HTML/JAVASCRIPT
lalu pastekan salah satu script di atas.
klik ''simpan'' selesai.

AKBARI SYAHPUTRA

Minggu, 12 Februari 2012

Cara buat Drop Down menu Blue Dawn