cara cepat membuat menu start windows pada blog

Belajar SEO dan Blog Bagi pemula
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='http://2.bp.blogspot.com/-XihpcfY1sW8/Ts25gmIBr-I/AAAAAAAAAwQ/HaLQZgg5d3s/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="http://4.bp.blogspot.com/-lVIudeKs17g/Ts4aRVxahRI/AAAAAAAAAwg/dWjciAGy7oM/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

0 Response to "cara cepat membuat menu start windows pada blog"

Poskan Komentar

Jika ada Tutorial Info Blog Indonesia ini, yang kurang dimengerti silahkan luangkan saja waktu anda untuk berkomentar, karena pertanyaan anda sangat berharga untuk perkembangan dan kemajuan blogs ini.

Soalnya diblogs ini adalah wadah untuk belajar mengenal webs/blogs, disini kita sama - sama belajar, seandainya anda adalah seorang pakar blogger profesional atau pakar seo indonesia bimbinglah saya, untuk menulis artikel berkualitas.

Oia sebelum menyisipkan script silahkan gunakan tools konversi terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.

Terimakasih.. salam kenal dan salam hangat untuk blogger indonesia, yang selalu setia di Info blog Indonesia variasi blogger.

¯\(◕ ‿◕)/¯



convert TOS

ADMIN Blog