Menu Yang Satu ini Agak sedikit Unik dan Sangat Elegant, Silahkan Pelajari Cara memasang diblog anda...













IlmuKomputer95.co.cc- Bismillah"
Kali ini saya akan Sedikit berbagi Tips dan Trik Blogger yang bisa membuat blog anda tampil lebih Elegan dan Baik.

Silahkan Lihat DEMO NYA klik :



Untuk itu, Silahkan Pelajari Caranya dibawah ini.

1. Masuk Akun Blogger anda.
2. Pada Menu pilihan, Pilih Template Kemudian Pilih lagi, Edit HTML.

Contoh :



3. Kemudian Tekan atau Centang "Expand Template Widget"
4. Cari code : </head> dan Letakkan Code dibawah ini tepat diatas nya.

<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>
<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

5. Selanjutnya, Cari Code : ]]></b:skin>  dan Letakkan Code dibawah ini diatas Code ]]></b:skin>

#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}


#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}


#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}


#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}


#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}


#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}


#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}


#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}


#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}


#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}


#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}


#rocking-rolling .item_content a:hover{
color:#0b965b;
}


#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}


#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}