cara cepat membuat menu start windows pada blog

Masih di Variasi Blogger share cara cepat membuat menu start windows pada blog cekidot

Silahkan sobat Copy Paste script di bawah ini di Edit HTML jangan lupa centang Expand Template Widget kemudian tekan Ctrl+f dan paste script ]]></b:skin> jika sudah ketemu silahkan copy paste script di bawah ini simpan sebelum script ]]></b:skin> di blog sobat

*{margin:0;padding:0}.GRbottomToolbar{ position:fixed; overflow:hidden; text-align:center; height:30px; bottom:0; margin:0; padding:0; width:100%; -o-transition:all 08s ease-in; -moz-transition:all 0.8s ease-in; -webkit-transition:all 0.8s ease-in}.toolbarcontrol{ position:absolute; right:4px; top:0;        opacity:0.8;        filter:alpha(opacity=80);       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";        height:16px;        width:170px;        background:#006;        cursor:pointer;        border:2px solid #5484de;        border-bottom:0;        text-shadow:1px 1px 1px #000;        font-size:11px;        font-weight:bold;        font-family:Verdana;        text-align:left;        color:#FC0;        padding:5px 8px;        margin-left:5px;        border-top-right-radius:8px;border-top-left-radius:8px;       -moz-border-radius-topright:8px;-moz-border-radius-topleft:8px;       -webkit-border-top-right-radius:8px;-webkit-border-top-left-radius:8px;       -o-transition:all 08s ease-in;       -moz-transition:all 0.8s ease-in;       -webkit-transition:all 0.8s ease-in}.toolbarcontrol:hover{        opacity:1.0;        filter:alpha(opacity=100);        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";        background:#900;        color:#0CF}.toolbarcontent{        opacity:0.9;        filter:alpha(opacity=90);       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";        margin-top:28px;        height:25px;        padding:4px 10px;        background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgBTblueH1010V30b.gif) left top; border:1px solid #5484de; width:100%; -o-transition:all 1.2s ease-in; -moz-transition:all 1.2s ease-in; -webkit-transition:all 1.2s ease-in}.toolbarcontent:hover{ opacity:1.0; filter:alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"}.toolbarcontent a{ font-family:Serif; font-size:14px; font-weight:bold; text-decoration:none; color:#0CF; border-right:1px solid #888; text-shadow:none; border-left:1px solid #888; padding:1px 8px; margin-right:10px; -o-transition:all 0.8s linear; -moz-transition:all 0.8s linear; -webkit-transition:all 0.8s linear}.toolbarcontent a:hover{ color:#F00; background:#999; border:1px solid #444; text-shadow:1px 1px 1px #000}.toolbarcontrol a.btop{ display:block; position:absolute; font-size:11px; top:4px; right:6px; padding:1px 5px; text-decoration:blink; text-shadow:none; color:#F00; border:1px solid #aaa; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background:#333}.toolbarcontrol a.btttop:hover{ text-decoration:none; color:#fff}a.bttbot{ display:block; float:right; border-left:1px solid #777; text-decoration:blink; margin-right:23px}
           

#startmenu{border:solid 1px #102a3e;overflow:visible;display:inline-block;margin:0px 0 0 0px; -moz-border-radius:5px;-webkit-border-radius:5px;position:relative; box-shadow:inset 0 0 1px #fff;-moz-box-shadow:inset 0 0 1px #fff;-webkit-box-shadow:inset 0 0 1px #fff; background-color:#619bb9; background:-moz-linear-gradient(top,rgba(50,123,165,0.75),rgba(46,75,90,0.75) 50%,rgba(92,176,220,0.75)); background:-webkit-gradient(linear,center top,center bottom,from(#327aa4),color-stop(45%,#2e4b5a),to(#5cb0dc))}#programs,#links{float:left;display:block;padding:0;list-style:none} #programs{background:#fff;border:solid 1px #365167;margin:3px 0 3px 3px; box-shadow:0 0 1px #fff;-moz-box-shadow:0 0 1px #fff;-webkit-box-shadow:0 0 1px #fff; -moz-border-radius:3px;-webkit-border-radius:3px} #programs a{border:solid 1px transparent;display:block;padding:3px;margin:3px; color:#4b4b4b;text-decoration:none;min-width:100px} #programs a:hover{border:solid 1px #7da2ce; -moz-border-radius:3px;-webkit-border-radius:3px; box-shadow:inset 0 0 1px #fff;-moz-box-shadow:inset 0 0 1px #fff;-webkit-box-shadow:inset 0 0 1px #fff; background-color:#cfe3fd; background:-moz-linear-gradient(top,#dcebfd,#c2dcfd); background:-webkit-gradient(linear,center top,center bottom,from(#dcebfd),to(#c2dcfd))} #programs a img{border:0;vertical-align:middle;margin:0 5px 0 0}  #links{margin:0px;margin-top:-30px} #links li.icon{text-align:center} #links a{border:solid 1px transparent;display:block;margin:3px 0;position:relative; color:#fff;text-decoration:none;min-width:130px;hight120px:} #links a:hover{border:solid 1px #000; -moz-border-radius:3px;-webkit-border-radius:3px; box-shadow:0 0 1px #fff;-moz-box-shadow:inset 0 0 1px #fff;-webkit-box-shadow:inset 0 0 1px #fff; background-color:#658da0; background:-moz-linear-gradient(center left,rgba(81,115,132,0.55),rgba(121,163,184,0.55) 50%,rgba(81,115,132,0.55)); background:-webkit-gradient(linear,0% 100%,100% 100%,from(#517384),color-stop(50%,#79a3b8),to(#517384))} #links a span{padding:5px;display:block} #links a:hover span {background:-moz-linear-gradient(center top,transparent,transparent 49%,rgba(2,37,58,0.5) 50%,rgba(63,111,135,0.5)); background:-webkit-gradient(linear,center top,center bottom,from(transparent),color-stop(49%,transparent), color-stop(50%,rgba(2,37,58,0.5)),to(rgba(63,111,135,0.5)))}

Kemudian cari kembali kode script <body> jika sudah ketemu silahkan copy paste script di bawah ini dan simpan sesudah kode script <body>

<div id='wido2' style='bottom:0px;width:100%; position:fixed;'>
<div class='toolbarcontent'>
<a href='javascript:void(0)' onclick='gb_showHideGB()' style='display:scroll;position: fixed; bottom:2px;left:3px;' title='START'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6kJmeicDQxl2SkhyyM9vzD19PvdYwIoYELlgCYOeIjOxu08TnQ3dZHdhFigjKVT9-Nmi8tUC5SMhLcNcO0dfCC4ryWMD1LwLGbZmhZqVjZScWjjGVXrLf-xqIUAnkw-mdeehFNBPejIk/s1600/Strwido2.png' title='==STAR==' width='30'/></a>
         <a href='#' target='_blank'/>
         <a class='bttbot' href='#'/>
</div></div>

Simpan template , masih ada satu langkah lagi copy paste kembali script di bawah ini dan simpan di HTML/Javascript

<div class='widget-content'>
<style type="text/css">
.gb_fixed{position:fixed;Bottom:30px;Left:0px;}
* html .gb_fixed {position:relative;}
#hidden_gb2 {display:none;border:0px ;background:#;padding:0px;padding-top:0px;-moz-border-radius:0px;border-radius:0px;}
</style>
<center>

<div class="gb_fixed">
<table cellpadding="0" cellspacing="0" id="hidden_gb2"><tbody>
<tr><td>
<div id="cboxdiv" style="text-align:Left; line-height: 25px">
<div id='startmenu'>
        <ul id='programs'>
         
            <li><a href='http://mi-five.blogspot.com/'><img alt='' src='chrome.png'/>My Blog Mi5</a></li>

            <li><a href='https://www.facebook.com/#!/groups/d3.mi5/'><img alt='' src='safari.png'/>My Group fb</a>

<li><a href='#'><img alt='' src='opera.png'/>Opera</a></li>

            <li><a href='#'><img alt='' src='ie.png'/>Internet Explorer</a></li>

            <li><a href='#'><img alt='' src='rss_32.png'/>RSS Feeds</a></li>

            <li><a href='#'><img alt='' src='twitter_32.png'/>Twitter</a></li>

            <li><a href='http://mi-five.blogspot.com/2011/06/tukeran-link.html'><img alt='' src='delicious_32.png'/>Tukeran Link ►</a></li>

        </li></ul>
        <ul id='links'>
            <li class='icon'><img alt='' src='folder.png'/></li>

            <li><a href='#'><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD8lK12DroWhXoTmKb-dv6LrwC6QfrYGWFH5heJE3K_7gt2fNeEl5DfhTNAa4bTykKzBU_oz833v8RxFdXQg1OY3sAH3gU4txoD05hh3iTS06mpUn0un_ejD5hHk3hTok4CfQF9AKRrg/s1600/usermi5.png"/></span></a></li>

 <li><a href='http://mi-five.blogspot.com/2011/11/my-documen.html'><span>My Documens</span></a></li>


<li><a href='http://mi-five.blogspot.com/search/label/picture'><span>Picture</span></a></li>

<li><a href='#'><span>Vidio</span></a></li>

<li><a href='http://mi-five.blogspot.com/2011/09/download-materi.html'><span>Materi</span></a></li>

 <li><a href='#'><span>Connect to</span></a></li>
        </ul>

    </div>
</div></td></tr>
</tbody></table>
</div></center>
<script src="http://hidecbox.googlecode.com/files/Cbox.js">

</div></script></div>

Simpan dan lihat hasilnya semoga bermanfaat

DEMO 1 dan DEMO 2
Untuk Demo 2 belum ada tutorialnya tapi bisa dipelajari kode scriptnya

sumber 1 dan sumber 2

Share to

 â