Cara membuat 2 Tema Dalam 1 Blog

 Kali ini saya akan memberi tau cara membuat 2 Tema Dalam 1 Blog.  Silahkan di simak Tutorialnya di Bawah ini :)

Pertama-tama kalian harus memasukan Stylenya terlebih dahulu.. Taroh Css Di bawah ini di atas </head>

<style> /*Dock Skin*/ #dock-skin{display:none;overflow:hidden;font:18px Courier New,Courier,monospace;color:#A9A9F5; } #dock-skin{background:#A9A9F5 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAADCAYAAACwAX77AAAAFklEQVQI12NgYGCQ+v//PwM6ZiBZAgBcVS0iPBgVUgAAAABJRU5ErkJggg==) repeat center;position:fixed;top:0;left:0;width:99%;height:98%;overflow:hidden;cursor:move;border-left:5px solid #8181F7;border-right:5px solid #8181F7;border-top:5px solid #8181F7;border-bottom:10px solid #8181F7;box-shadow:inset 0 0 0 2px #C4CDE0,inset 0 0 15px #000;z-index:9; } #h3{width:100%;height:95px;position:absolute;top:55px;font:bold 105px/95px Courier New,Courier,monospace;text-transform:capitalize;letter-spacing:-15px;background:#8181F7;box-shadow:0 0 0 2px #C4CDE0,0 0 15px #000;cursor:help; } .h3-first{font:bold 140px/50px Courier New,Courier,monospace;background:#8181F7;padding-left:10px;letter-spacing:10px;color:#A9A9F5;margin-left:10px;border-radius:10px;border:2px solid #C4CDE0;box-shadow:inset 0 0 10px #000,0 0 5px #000; } .copy{position:absolute;top:70px;right:5px;background:#A9A9F5;display:inline-block;padding:3px;border:4px double #8181F7;font:12px Verdana;line-height:10px;color:#8181F7;letter-spacing:1px; } .nice:hover{color:#8181F7; } .nice{position:absolute;bottom:15%;right:50px;z-index:-999;font:bold 60px Courier New,Courier,monospace;color:#C4CDE0;letter-spacing:-10px;text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000,0 0 5px #000; } #dock-skin a:link,#dock-skin a:visited{color:#A9A9F5;text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000,0 0 10px #000;text-decoration:none;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out; } #dock-skin a:hover{color:#ddd; } #lefdock{position:absolute;width:100%;height:30%;bottom:30%;left:0;display:block;padding:0 9% 0 9%; } #lefdock a{float:left;display:inline-block;width:15%;height:80%;border-radius:20px;padding:5px;border:2px solid #C4CDE0;box-shadow:0px 0px 15px #8181F7,0 0 40px #000,inset 0 0 30px #000;text-align:center;font-size:0px; } #lefdock a:hover{border-radius:5px;background-size:85% 95%;display:inline-block;width:15%;height:90%;background-color:#ddd;box-shadow:0 0 50px #000,inset 0 0 10px #000;border:2px solid #C4CDE0;-webkit-transform: rotate(10deg);transform: rotate(10deg);z-index:9; } #lefdock .home{background:#8181F7 url(https://sites.google.com/site/binkbenk77/omah.png) no-repeat center;background-size:80% 60%; } #lefdock .isi{background:#8181F7 url(https://sites.google.com/site/binkbenk77/isi.png) no-repeat center;background-size:80% 60%; } #lefdock .quest{background:#8181F7 url(https://sites.google.com/site/binkbenk77/blog.png) no-repeat center;background-size:80% 60%; } #lefdock .follow{background:#8181F7 url(https://sites.google.com/site/binkbenk77/quest.png) no-repeat center;background-size:80% 60%; } #lefdock .fb{background:#8181F7 url(https://sites.google.com/site/binkbenk77/kontak.png) no-repeat center;background-size:80% 60%; } #thempik{height:55px;width:100%;margin:0 auto;position:absolute;bottom:10px;z-index:-999; } #sikil{color:#BDBDBD;font:bold 18px Courier New,Courier,monospace;text-align:center;text-shadow:2px 2px 2px #000;margin:0 auto;width:95%;padding:10px;background:#8181F7;box-shadow:inset 0 0 20px #000,0 0 10px #000;border-radius:5px;border:2px solid #C4CDE0; } #sikil a{color:#BDBDBD;text-shadow:2px 2px 2px #000; } #sikil a:hover{color:#ddd;text-shadow:-1px 0 #000,0 1px #000,1px 0 #000, 0 -1px #000; } /*button change skin*/ .open{display:block;position:absolute;top:10px;right:100px;padding:5px;background:#ddd;border-radius:0 0 5px 5px;border:1px solid #fff;cursor:pointer;box-shadow:0 0 0 1px #888,inset 0px 0 1px #555;opacity:0.8;font:10px Verdana; } .open:before{content:"Change Skin";font:10px Verdana;color:#444; } .open:hover{background:#fa0;padding-top:15px;transition:all 0.5s;-webkit-transition:all 0.5s; } .closed{display:block;position:absolute;top:-5px;right:150px;padding:5px;background:#8181F7;border-radius:5px;border:1px solid #C4CDE0;box-shadow:0 0 5px #000;cursor:pointer;font:12px Verdana; } .closed:before{content:"Change Skin";font:12px Verdana;color:#ddd;text-shadow:0 0 2px #000; } .closed:hover{padding-top:15px; } /*tooltip dock skin*/ #tooltip{position:relative; } #tooltip span{display:block;position:absolute;top:-1000px;font:11px Courier New,Courier,monospace;color:#fff;text-align:center;padding:5px;border-radius:10px;box-shadow:0px 0px 0 1px #000;border:1px solid #ddd;background:#08088A;opacity:0.7;width:200px;z-index:9; } #tooltip span:before{content:"i";position:absolute;top:-10px;left:-10px;font:bold 40px/40px Courier New,Courier,monospace;color:#ddd;text-shadow:0 0 3px #000;border-radius:100%;background:#000;border:1px solid #ddd;padding:5px;width:40px;height:40px; } #tooltip:hover span{position:absolute;top:-50px;left:0;-webkit-transform:rotate(-10deg);transform:rotate(-10deg); } .closed:hover #tooltip span{position:absolute;top:20px;left:0; } .open:hover #tooltip span{position:absolute;top:10px;right:0;width:200px;background:#aa0; } #tooltip p{font:bold 20px/35px Courier New,Courier,monospace;margin:0 0 0 30px; } #tooltip em{font:bold 20px/20px Courier New,Courier,monospace; }</style>

Yang Saya tandai Warna merah ganti penempatan menu change skinnya sesuka Kalian :)
Cara Ke dua Taroh Javascript Di bawah ini di atas </head> Juga

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='https://binal33.googlecode.com/svn/trunk/sound-ganteng.js' type='text/javascript'></script>
<link href='http://fonts.googleapis.com/css?family=Niconne' rel='stylesheet' type='text/css'/>

Cara Ke Tiga Taroh Script Di bawah ini di bawah <body>

<a class='open' href='javascript:toggle6()' onclick='clicksound.playclip()'><div id='tooltip'>
<span><p>
Information</p>
<em>V</em>iew On Dock Skin</span></div>
</a><div id='dock-skin'>
<a class='closed' href='javascript:toggle6()' onclick='clicksound.playclip()'><div id='tooltip'>
<span><p>
Information</p>
<em>V</em>iew On Sledding Skin</span></div>
</a><div id='h3'>
<a href=''><span class='h3-first'>H</span>arris Munahar</a> &#174;</div>
<div class='copy'>
My Personal Blog</div>
<div class='loading' id='lefdock'>
<a class='home' href='/p/portal.html' id='tooltip' onclick='clicksound.playclip()' onmouseover='mouseoversound.playclip()'>BLOG portal<span><p>
Blog Portal</p>
<em>U</em> can see my portal</span></a><a class='isi' href='/p/archive.html' id='tooltip' onclick='clicksound.playclip()' onmouseover='mouseoversound.playclip()' target='_blank'>Blog Archive<span><p>
Blog Archive</p>
<em>A</em>ll Blog Content</span></a><a class='quest' href='/p/new-entry.html' id='tooltip' onclick='clicksound.playclip()' onmouseover='mouseoversound.playclip()' target='_blank'>Blog Entry<span><p>
Blog Entry</p>
<em>U</em> Can Read New Entry</span></a><a class='follow' href='/p/forum.html' id='tooltip' onclick='clicksound.playclip()' onmouseover='mouseoversound.playclip()' target='_blank'>Blog Forum<span><p>
Blog Forum</p>
<em>U</em> Can Write Anything</span></a><a class='fb' href='/p/about-me.html' id='tooltip' onclick='clicksound.playclip()' onmouseover='mouseoversound.playclip()' target='_blank'>Contact Us<span><p>
Contact Us</p>
<em>U</em> Can Find My Place</span></a></div>
<div class='nice'>
Share Any More</div>
<div id='thempik'>
<div id='sikil'>
||Copyright 2013 By : <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>| |Template Created By : <a href=' http://zimibot.blogspot.com/
'>Harris Munahar</a>||</div>
</div>
</div>

Selamat Mencoba :)

Dan jadinya akan seperti blog ini http://zimibot.blogspot.com/

Screen SHotnya
After

Before