Menu Start Windows Pada Blog

Udah beberapa hari ini saya gak bisa update dikarnakan menyusun tugas dikesempatan ini saya akan berbagi tips-tips blog lagi yaitu cara membuat menu star windows pada blog Saya kira menu Star windows hanya bisa dikomputer saja tapi kali ini menu star windows bisa kita terapin di blog tapi lumayan banyak kode cssnya buat temen2 yang tertarik silahkan dipasan kalau gak komenya aja ditunggu soalnya ini harus menentukan blog kita kalo blog kita berat mending gak usah dipasang ok

langsung aja ya kita ke tutorialnya:

DEMO

1. Silahkan Login Ke Akun Blogger.com

2. Masuk Ke Desaign/Rancangan

3. Pilih Html

4. Jangan Lupa Centang : Expand Widget Templates

5. Silahkan Download untuk Mengantisipasi Jika terjadi Keslahan...?

6. Silahkan Masukkan Kode dibawah ini Di Atas. ]]></b:skin> untuk pencarian cepat Tekan CTRL+F

*{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)))}

7. Silahkan Masukkan Kode Dibawah ini Di Bawah <body>

Up Jangan Lupa Simpan Template 8. Silalhkan masuk ke Page Element/ Edit tata Layout

9. Silhkan Tambah Gadget Java Scrips Copy Paste Kode Biawah ini

<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/AVvXsEiLA-DBKIFtvigZjh1lP2wk4OgdiIcHQQj0wommYpk5qPN9T91CKHPd8ON-YU19ZKC0R8SnhaylYOQVpDbu2kaZksqW0n8eqLTzFE18NI2EwTZhsKgLFY0XnW27nXk5MXF1h_VZ85ZWwA/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>

10. Silhkan Simpan

SEMOGA SUKSES....?

KE - U

Search This Blog

Menu Start Windows Pada Blog

Comments

Post a Comment