Nih liat SSnya menu animasi dengan CSS !!
Biar gk kecewa liat Demo dulu >> Klik disini
Mau pasang ? ikuti tutorialnya !
1. lagin ke Blogger
2. pergi ke Rancangan/Layout
3. Klik Tambah Gadget/Add Gadget
4. Pilih HTML/Java Script
5. terus COPAS kode ini :
<style type="text/css">
.menuqu ul li{display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff; list-style: none;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>
<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://sidayz.tk'>Home</a></li>
<li class="menuqu2"><a href='URL km'>Menu1</a></li>
<li class="menuqu1"><a href='URL km'>Menu2</a></li>
<li class="menuqu1"><a href='URL km'>Menu3</a></li>
<li class="menuqu2"><a href='URL km'>Menu4</a></li>
<li class="menuqu1"><a href='URL km'>Menu5</a></li>
<li class="menuqu2"><a href='URL km'>Menu6</a></li>
<li class="menuqu1"><a href='URL km'>Menu7</a></li>
<li class="menuqu1"><a href='URL km'>Menu8</a></li>
<li class="menuqu2"><a href='URL km'>Menu9</a></li>
<li class="menuqu1"><a href='URL km'>Menu10</a></li>
</ul>
</div>
NB : yang warna merah bisa di ganti dengan Link & namanya xD
<li class="menuqu1"><a href='URL km'>Menu10</a></li> kode ini bisa di hapus/ditambah :D
5. Klik simpan dan liat hasilnya !
2
Comment
Energy Saving mode dengan CSS3 ini memang keren :D gk percaya ? liat SSnya
Penasaran langsung liat DEMO aja di TKP xD
nanti pada saat kalian klik Link DEMO kalian langsung bisa liat energy saving modenya ! kayak SS di atas !
Udah liat demonya ? tertarik? mau pasang di blog ? oke ikuti tutornya :D
1. login dulu deh ke Blogger
2. masuk ke Template > Edit HTML
3. cari kode ]]></b:skin> lalu
*, body .bgsGR_esm{
margin:0;
padding:0;
}
body .bgsGR_esm{
position:fixed;
width:98%;
top:0;
left:0; /* original code by: gubhugreyot.blogspot.com */
height:97%;
opacity:.99;
filter:alpha(opacity=99);
-ms-filter:alpha(opacity=99);
background:#000;
border:10px solid #666;
border-bottom:30px solid #666;
z-index:99999999;
transition:all 6s ease-in-out 60s;
-o-transition:all 6s ease-in-out 60s;
-moz-transition:all 6s ease-in-out 60s;
-webkit-transition:all 6s ease-in-out 60s;
-ms-transition:all 6s ease-in-out 60s;
}
body:hover .bgsGR_esm{
border-color:#F00;
background:#930;
width:50%;
height:3%;
left:25%;
top:40%; /* original code by: gubhugreyot.blogdetik.com */
transition:3.5s ease-out;
-o-transition:3.5s ease-out;
-moz-transition:3.5s ease-out;
-webkit-transition:3.5s ease-out;
-ms-transition:3.5s ease-out;
}
body:hover .bgsGR_esm,body:hover .bgsGR_esm p.esm1,body:hover .bgsGR_esm p span.esm2,body:hover .bgsGR_esm p span.esm3,body:hover .bgsGR_esm .by_gubhugreyot{
transition:3s;
-o-transition:3s;
-moz-transition:3s;
-webkit-transition:3s;
-ms-transition:3s;
z-index:-10;
opacity:.0;
filter:alpha(opacity=0);
-ms-filter:alpha(opacity=0);
}
body .bgsGR_esm p.esm1{
margin:0; /* original code by: gubhugreyot */
padding:0;
width:92%;
height:100%;
background:transparent;
font-size:100px;
font-family:Serif,Times New Roman;
color:#333;
text-shadow:1px 1px 2px #ccc;
position:relative;
margin-top:200px;
line-height:20px;
font-weight:bold;
text-align:center;
display:block;
margin-left:auto;
margin-right:auto;
}
.bgsGR_esm p span.esm2{
font-size:18px;
opacity:.5;
filter:alpha(opacity=50);
-ms-filter:alpha(opacity=50);
display:block;
text-align:center;
margin:-10px auto;
font-weight:normal;
padding:2px 8px;
background:#000;
border:1px solid #333;
color:#00f;
text-shadow:none;
font-family:Arial,Helvetica,sans-serif;
}
.bgsGR_esm p span.esm3{
color:#ccc;
font-family:Tahoma,Arial,Helvetica;
display:block;
margin:10px auto;
background:#111;
background:-moz-linear-gradient(top,#111 0,#666 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#111),color-stop(100%,#666));
background:-webkit-linear-gradient(top,#111 0,#666 100%);
background:-o-linear-gradient(top,#111 0,#666 100%);
background:-ms-linear-gradient(top,#111 0,#666 100%);
background:linear-gradient(top,#111 0,#666 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111',endColorstr='#666666',GradientType=0);
opacity:.6;
filter:alpha(opacity=60);
-ms-filter:alpha(opacity=60);
width:250px;
text-shadow:1px 1px 1px #000;
border:1px solid #333;
border-radius:4px;
padding:2px 10px;
font-size:12px;
font-weight:normal;
line-height:16px;
}
.bgsGR_esm .by_gubhugreyot{
margin-left:30px;
text-align:left;
color:#015828;
font-size:12px;
font-weight:normal;
position:absolute;
top:550px;
width:100%;
height:20px;
left:0;
}
.bgsGR_esm .by_gubhugreyot span.esm4{
color:#aaa;
font-style:italic;
}
4. COPAS xHTML di bawan ini, tepat DIBAWAH kode <body>
<div class='bgsGR_esm'><p class='esm1'>dayZ Blog's<br/><span class='esm2'>Energy Saving Mode</span><br/><br/><span class='esm3'>Move your mouse to go back to the page!<br/>Gerakkan mouse anda dan silahkan nikmati kembali posting kami!</span></p><div class='by_dayZ'>Copyright 2011-2012 <span class='esm4'>http://sidayz.tk</span> - All rights reserved</div></div>
selesai deh :* xD
Thanks to ghubug reyot atas CSSnya :D
Ingat saya tidak melarang COPAS!! tetapi jikalau kalian COPAS harap cantumkan Sumber dengan Link ! HARGAI LAH KARYA ORANG !!
Celestia adalah sebuah software Gratis alias FREE xD yang dapat
digunakan untuk belajar tentang astronomi dalam tampilan 3 dimensi (3D) ,
di software ini terdapat bumi , tata surya, galaksi bimasakti,
rasi bintang, komet, DKK yang terdapat di jagatraya
ini. Software ini cocok buat Guru IPA xD
Mau Download ? Klik ajah > KLIKME
Lagi banyak tugas nih bero xD maklum lah kelas 9 lagi sibuk Ujian praktek :)
Yaudah langsung ajah sekarang aku mau share navigation CSS dock menu di blog tau gk ? kalo gk tau liat di gambar di bawah ini !
Dock menu di blog
Yaudah langsung ajah sekarang aku mau share navigation CSS dock menu di blog tau gk ? kalo gk tau liat di gambar di bawah ini !
Hmm.. hampir sama kayak RocketDock di dekstop PC nih liat dekstop Laptopku !
oke bagi yang mau pasang di blogya silahkan ikuti tutornya !!
Biar gak kecewa mending liat dulu DEMONYA klik > disini
1. Login ke blogger, gk punya akunnya ? bikin dulu, males ? mending jangan pasang haha xD
2. Pergike Template > Edit HTML
3.
/* ---------------
Menu navigasi CSS Mac Dock top with jQuery
---------------------------------- */
/* dock - top */
.dock {
position: relative;
height: 50px;
text-align: center;
}
.dock-container {
position: absolute;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivcRW3NMuwWGDo-Ucc4S20ETkzlXw_oFks5qCTu9dNYPgx70K1kYn3I8Kcqy2bbZXayF-lMHd5EAkwjREvp7skiHi-NaiuhqdGieYfc_PzLG6jR5P0g7KQ6KmpV4obNKEIX0qBdtpUCb4/s1600/dock-bg2.gif);
padding-left: 20px;
}
a.dock-item {
display: block;
width: 40px;
color: #000;
position: absolute;
top: 0px;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.dock-item span {
display: none;
padding-left: 20px;
}
/* dock2 - bottom */
#dock2 {
width: 100%;
bottom: 0px;
position: relative;
left: 0px;
}
.dock-container2 {
position: absolute;
height: 50px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKmsCdVPH4N4nL-dxZIa5LT40A8xz26PHbQvIe21OJ4DFT8lUmXYq0ESsu175rhyEcvsn8DqiWUkgPhpc-kUJ14aW8bpwBCHvPKvPZRU-L-TZnisCEXttTbrE2PsTLP6fm__zWexxbO4/s1600/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
4.
<script type="text/javascript" src="http://scriptbase.googlecode.com/files/jquery1.3.2.min.js"></script>
<script type="text/javascript" src="http://scriptbase.googlecode.com/files/interface.js"></script>
5. Satu lagi, sekarang simpan SEBELUM kode </body>
<!--dock menu JS options -->
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
6. Klik simpan Temlplate
Jika sudah, sekarang pergi ke Tata letak >> tambah Gadget >> HTML/JavaScript
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuAgtlqQYk__ZYR5kTQtUJ7Rdjb1pMyRNAcF8OlYvldN8UNWTBmKP7QRdAmJ7rp_lFAI2G_WQ2gWekKuccyThqSSri7QZzZfxzZZOV3kPAe-tbw5kFQLhVXx3HWPNir3wk-lKQg6aXToA/s1600/home.png" alt="home" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaY9q7ejYHn_e6CQNEPdVitU-iyCsFTBkYFttbEfwM2TJn6DxcFxgvCSdr0Yem1vIoPq7HsXpztTQpmpwixJILKbE5Cjp-QduV6gr8nJ9rvQfUurJYblGuJAz3bmeRTdZuNSM22ycvR-Q/s1600/email.png" alt="contact" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB-wWg_d7SBPbrbggSez7OnSeqW1mYL98VgvOA37mbPRgVLCCo-Wvy0OEO1fQ9WkJ1Cor6hPENn2qwQpE9TAzl-fYfJy0EUv_c91Drk7lhD5peEPUKc-5goxg5zWSv2OfgztFnTzPQrCM/s1600/portfolio.png" alt="portfolio" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-FZeYy3qh7No12NTeYBgwFvUFG1Kjv2cnyLugi8Rgyufb6eImwbIanX7M-CgZOHg68zzTlr3Qvklnhg_ps7p46j7pmEx12XD9FSeQEY_Thqc5jQ2L_ILxyLE4KcDSLuJvsuULtZIcfos/s1600/music.png" alt="music" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgs32XLq-Xy2GSIw74vpEpE_G7Ga4i4Dovjx6x8dMH_b3O3H4HIAv4W4uzbpAJnMWE_GjxsMMqsa-JJgQrILzoM8koJ7phfh6Dzg30cCnXm2bplMLstsqH1EN40U9FUPb5KxZwEJ1Cq0/s1600/video.png" alt="video" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_c7mZQP7fYwq7Zj2tViXUyZb2T7lG2RbUiXkIDUUvmIelrtvWy0GK_IzRwqnKk7i968lRDtnwoog5_1_dWt0T5ENdSjoxVt4vXs-TMQ-QS54kwfOOsxU9SXNRTVwwI4H1_ZaAvy3FhE/s1600/history.png" alt="history" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXsroPaTAdtpsGrcOIOo4oG89zfLkBlMF4wPv67O9Sq_RA8ydOdSMDCxHsHxGuDNnd9sNOCcN5mP57WdGr9DjOLx_jIILCfKd8rFe2-_cPTj6eLMYFotKsINg6ZdYNMrtlRmAHsKdsS-k/s1600/calendar.png" alt="calendar" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj597KXEP7471CSmc2YcfNxVbFQWaA2XbEBmVuDjE5N8-vXta2y2CdQMMX5nDoQVYq4NdtVEifqLx-qI5bEt_CJ_0nKf2BgzhJIHkEFrH1MR7ziKfrRbhXsmWKsNNHmxa5gbdjJ0rLSOWc/s1600/rss.png" alt="rss" /></a>
<a class="dock-item2" href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtpNs1FL67kwtDEByzTU2pOamN_xW-Q2sNrK-WB_rOQ_M98JBhZAykUE2NVNU7vnhIX4iQ7PHuqxbQZGVkHG-UOFzyGbTsMwbf1adUojRscVtbleX56rIqAHikuCHJUgLULSuAUKQXH7Q/s1600/rss2.png" alt="rss" /></a>
</div>
</div>
NB : Tanda Pagar Biru "#" silahkan ganti dengan Link sesuka mu !
Nah kalo yang warna biru itu Link gambar, mau di ganti atau gk juga Gpp !
kalo udah di edit-edit Klik SIMPAN, cek deh blogmu xD
yaudah segitu aja, semoga bermanfaat, mohon maaf kalo agak GJ maklum Niubi !! >.<
Game Horror anak SMU, Tokohnya anak smu, cewek bawa pistol terus nembakin Hantu !
Maininnyah :
-w,s,a,d untuk bergerak,
-shift untuk lari,
-klik kiri untuk menembak,
-misi: kumpulkan jiwa2 yg tersesat agar dapat keluar dari mimpi buruk xD
Sensitivity option:
Miss Kunti
PENASARAN ?? kalo aku gk soalnya pernah main xD
Kalo mau silahkan DONLOT via IDWS
>>> DONWLOAD DISINI <<<
Source : kaskus.us
