Membuat new menu Gadget di blogger





Di depan halaman gadget saya ada halaman baru, bingung juga mau memberi nama apa.. jadi aku kasih judul begini
saja..hehehehe..
Membuat gadget gini saya rasa dapat mempercantik blog.^^..

(Lebih baik lakukan backup template terlebih dahulu)

Langsung saja tutorial nya ya!!..^^..



1. Login saja ke blogger anda
2. Pilih layout – edit html (Expand Widget Templates gak perlu di klik)
3. Copy paste code html yang ada di bawah ini sesudah <head> (untuk lebih cepat pencarian kode bisa tekan ctrl + f)

 

<script src='http://www.hotlinkfiles.com/files/2096147_8gjww/jquery-1.2.6.pack.js]jquery-1.2.6.pack.js' type='text/javascript'/>
<script src='http://www.hotlinkfiles.com/files/2096146_3tpwj/ddaccordion.js]ddaccordion.js' type='text/javascript'/>


<script type='text/javascript'>


ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script> 
4. Selanjut
nya copy code di bawah ini dan paste sebelum kode ]]></b:skin>

.alert { background: #DDE4FF;
text-align: left;
padding: 10px 10px 10px 10px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

.arrowlistmenu{
width: 320px; /*ukuran lebar dari menu*/
}

.arrowlistmenu
.menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(http://img84.imageshack.us/img84/7623/ocimtitlebarpr5.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(http://img515.imageshack.us/img515/6545/ocimtitlebaractivekj3.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}


.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #A
70303;
background: url(http://img227.imageshack.us/img227/2667/ocimarrowbulletqk9.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90
%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
backgroun
d-color: #F3F3F3;
}

Note: kode berwarna merah width: 320px; untuk menentukan lebar menu tersebut, bagusnya seh disesuaikan dengan template blog anda.
Kamu juga bisa edit html code ini sesuai keinginan, bagi kamu yang bisa code hmtl..^^..

- Udah gitu
save dulu, setelah itu masuk ke langkah yang ke 5.

5. Masuk ke page element -> klik gadget -> html/javascript , masukkan code ini di dalam html / javascript

<div class="arrowlistmenu">
<h3 class="menuheader expandable">Judul Menu</h3>
<ul class="categoryitems">
<li><
a href=" http://lubangbisnis.blogspot.com/">lubang bisnis</a></li>
<li><a href=" http://lubangbisnis.blogspot.com/">blogroll</a></li>
</ul>

<h3 class="menuheader expandable">Judul</h3>
<ul class="categoryitems">
<li><a href=" http://lubangbisnis.blogspot.com/">lubangbisnis</a></li>
<li><a hre
f=" http://lubangbisnis.blogspot.com/">Oppoertine</a></li>
</ul>
</div>

Save dan liat hasilnya..thx..

code di atas bisa kamu rubah sendiri, dengan memasukkan alamat blog address kamu, dan kamu juga bisa men
gubah judulnya sesuai keinginan kamu..

lubang
 bisnis
lubang  bisnis

0 comments:

Post a Comment

Twitter Delicious Facebook Digg Favorites More