Gudang Tutorial Blog

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 blog

2. 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/", ""],

["Kaskus", "http://www.kaskus.us", ""],

["My Profile", "http://www.blogger.com/profile/08032455232856850277", ""],

["free Download", "http://www.download.com", ""],

["Tips And Trics Blog", "http://www.mig33eagle.com/", ""],

["Bisnis Uang Blog", "http://www.bisnis.com/", ""],

["free game", "http://freegamepick.com", ""],

["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry

]};

make_menus();

</script>

@Ubah url sesuai keinginan sobat



Demikian Cara membuat menu slide pada sisi blog.

SEMOGA BERMANFAAT...

a.openpanel {color:#fff;display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#282828; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;}

a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;}

a.openpanel.active {background-color:#282828;}

a.openpanel.active em {top:6px;border color:#222222;}

div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}

div.hienzoPanel {padding:10px 20px 20px;margin:0px 0px !important;}

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

    <script type='text/javascript'>

    //<![CDATA[

    var panelSelector = '#comments',

    openPanelText = "Comment Here",

    closePanelText = "Close Comment",

    slideDownPanelSpeed = 600,

    slideUpPanelSpeed = 400;

    //]]>

    </script>

    <script type='text/javascript'>

    </script>

    <script src='http://mig33eaglecomment.googlecode.com/files/show-hide-mig33eagle.js.txt' type='text/javascript'/>