Gudang Tutorial Blog

Ga asing bagi blogger yang infonya pada terupdate tentang modif blog dan tutorialnya.

Bagi yang blom tau, coba menu navigasi kwick ney, keren ko...

sumpaa ヽ(ヅ)ノ

1. Login blog

2. Template

3. Letakkan kode css berikut di atas ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2

}

.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}

.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg

);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}

#kwick1 a:hover{background-position:0 -50px!important}

#kwick2 a{background-position:-190px 0}

#kwick2 a:hover{background-position:-190px -50px!important}

#kwick3 a{background-position:-380px 0}

#kwick3 a:hover{background-position:-380px -50px!important}

#kwick4 a{background-position:-570px 0}

#kwick4 a:hover{background-position:-570px -50px!important}

#kwick5 a{background-position:-760px 0}

#kwick5 a:hover{background-position:-760px -50px!important}

#kwick6 a{background-position:-950px 0}

#kwick6 a:hover{background-position:-950px -50px!important}

.kwicks li ul a{float:left;width:12em}

.kwicks ul ul{top:auto}

.kwicks li ul ul{left:12em;margin:0 0 0 10px}

.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}

4. Kemudian letakkan kode script jquery di atas </head>

<script src='http://mig33eaglemenu.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>

<script src='http://mig33eaglemenu.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>

<script src='http://mig33eaglemenu.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

<script type='text/javascript'>

$().ready(function() {

$(&#39;.kwicks&#39;).kwicks({

max : 205,

spacing : 5

});

});

</script>

@hilangkan script jquery berwarna merah jika sobat sudah memasang jquery versi brapapun.



5. Selanjutnya add gadget dan pilih html/javascript dan letakkan kode berikut kemudian simpan

<center><div class='kwickswrap'>

<ul class='kwicks'>

<li id='kwick1'><a href='http://www.mig33eagle.com/' title='Mig33 Eagle'>Home</a></li>

<li id='kwick3'><a href='http://mig33eagle.com/2012/09/sitemap.html' title='Sitemap'>Sitemap</a></li>

<li id='kwick4'><a href='http://mig33eagle.com/2012/02/link-exchange.html' title='Link Exchange'>Exchange</a></li>

<li id='kwick5'><a href='http://www.123contactform.com/form-366627/Ayuningnareswari' title='contact us'>Contact</a></li>

<li id='kwick6'><a href='http://www.mig33eagle.com/2011/12/eagle-bot-flooder-multy-flood.html' title='Info EBF'>Info EBF</a></li>

</ul>

</div></center>

 @Ubah url sesuai keinginan sobat.



Demikian tutorial blog cara membuat menu navigasi kwick, semoga infonya berguna!

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'/>