Menu


Menu Tab

Pages

Expanding Codeblock

Expanding Codeblock
Memasang Expanding Codeblock, kode ini Fungsinya dapat menampilkan Teks, hampir sama dengan kode textarea, perbedaanya kode ini menggunakan efek hover, selain itu kode ini dapat dimodif menjadi textarea dengan cara menyisipkan kode textarea dibawah kode <div class="inner"> dan di tutup dengan   kode </div> penerapannya dapat diletakan di area gadged atau di entri halaman baru. dibawah ini adalah kode tersebut.
Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai
<style type="text/css">
.container {
position:relative;
}
.container:after {
text-align: center; position: absolute; background:#999;
top: 17px; right: -28px; width: 120px; height: 1.6em;
font-size: 1.1em; content: "Mys2010";
-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.outer, .outer:hover {
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
.outer{
color: #000; background: #DDD; overflow: hidden;
}
.outer:hover {
color: #FFF; background: #666; overflow: hidden;
}
.inner {
max-height: 110px; overflow: auto;
-webkit-transition: max-height 1.7s ease; transition: max-height 1.7s ease;
}
.outer:hover > .inner {
max-height: 1200px;
-webkit-transition: max-height 3.5s ease 0.7s; transition: max-height 3.5s ease 0.7s;
}</style>
   
<div class="container outer">
<div class="inner">

 isi Teks disini
</div>
</div>


Contoh
Expanding Codeblock Sebelum dimodif


Contoh Expanding Codeblock Setelah dimodif
Penjelasan :
Edit kode yang di warnai sesuai keinginan
All Sources
Edited by. Myscript2010

CSS3 Advanced slider

CSS3 Advanced slider
Memasang Kode CSS3 Advanced slider, kode ini dapat menampilkan Gambar dengan format JPG, GIF dan PNG. gambar yang ada pada kode ini  akan berubah menjadi slide melayang ketika disentuh oleh cursor sekaligus menjadi tombol yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya
Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai
<style type="text/css">
.container {
position:relative; width:200px; height:150px;
}
.container img {
position:absolute; top:0; left:0; opacity:0;
}
.container:hover img {
-webkit-animation-name: slider; -webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite;
animation-name: slider; animation-timing-function: ease;
animation-duration: 10s; animation-iteration-count: infinite;
}
@-webkit-keyframes slider {
0% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;-webkit-transform: rotate(0) scale(1) skew(0deg,0deg);}
30% {opacity:0;-webkit-transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;-webkit-transform: rotate(0) scale(0.5) skew(30deg,20deg);}
}
@keyframes slider {
0% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
20% {opacity:1;transform: rotate(0) scale(1) skew(0deg,0deg);}
30% {opacity:0;transform: rotate(-360deg) scale(0) skew(0deg,0deg);}
100% {opacity:0;transform: rotate(0) scale(0.5) skew(30deg,20deg);}
}
.container img:nth-of-type(1) {-webkit-animation-delay: 8s;animation-delay: 8s;}
.container img:nth-of-type(2) {-webkit-animation-delay: 6s;animation-delay: 6s;}
.container img:nth-of-type(3) {-webkit-animation-delay: 4s;animation-delay: 4s;}
.container img:nth-of-type(4) {-webkit-animation-delay: 2s;animation-delay: 2s;}
.container img:nth-of-type(5) {-webkit-animation-delay: 0s;animation-delay: 0s;}

.container .hovertext {
position: absolute; top:60px; left:30px;
font-size:1.5em; color: rgba(255,255,255,1);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
.container:hover .hovertext {
top:20px; color: rgba(255,255,255,0);
-webkit-transition: all 0.7s ease; transition: all 0.7s ease;
}
</style>
<div class="container"> 
<a href="http://Your Link/">
<img alt="img5" src="http://Link Gambar" />
<img alt="img4" src="
http://Link Gambar" />
<img alt="img3" src="
http://Link Gambar" />
<img alt="img2" src="
http://Link Gambar" />
<img alt="img1" src="
http://Link Gambar" />
<div class="hovertext">

Hover here</div>
</div>
Penjelasan :
Ganti Link yang di warnai dengan link sobat
Sumber by. Jhon Star
Edited by. Myscript2010

CSS3 Basic Image Slider

CSS3 Basic Image Slider
Memasang Kode CSS3 Basic Image Slider, kode ini dapat menampilkan Gambar dengan format JPG, GIF dan PNG. gambar yang ada pada kode ini  akan berubah menjadi slide ketika disentuh oleh cursor sekaligus menjadi tombol yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya
Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai
<style type="text/css">
.container {
position:relative; width:200px; height:150px;
}
.container img {
position:absolute; top:0; left:0;
}
.container:hover img {
-webkit-animation-name: slider;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
animation-name: slider;
animation-timing-function: ease;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@-webkit-keyframes slider {
0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}
}
@keyframes slider {
0% {opacity:1;} 20% {opacity:0;} 80% {opacity:0;} 100% {opacity:1;}
}
.container img:nth-child(1) {-webkit-animation-delay: 8s; animation-delay: 8s;}
.container img:nth-child(2) {-webkit-animation-delay: 6s; animation-delay: 6s;}
.container img:nth-child(3) {-webkit-animation-delay: 4s; animation-delay: 4s;}
.container img:nth-child(4) {-webkit-animation-delay: 2s; animation-delay: 2s;}
.container img:nth-child(5) {-webkit-animation-delay: 0s; animation-delay: 0s;}

</style>
<div class="container">
<a  href="http://Your Link/">
<img src="http://Link Gambar.jpg" alt="img5">
<img src="http://Link Gambar.jpg" alt="img4">
<img src="http://Link Gambar.jpg" alt="img3">
<img src="http://Link Gambar.jpg" alt="img2">
<img src="http://Link Gambar.jpg" alt="img1">
</div>
Penjelasan :
Ganti Link yang di warnai dengan link sobat
All Sources
Edited by. Myscript2010

Slide Effect Text Overlay

Slide Effect  Text Overlay
Memasang Kode Slide Effect  Text Overlay, kode ini dapat menampilkan Gambar dengan format JPG, GIF dan PNG serta Teks sebagai judul yang menuju kesatu postingan. Dibawah ini adalah kode tersebut berikut cara penerapannya
Login ke akun blog klik entri halaman baru HTML
copy kode berikut ini dan pastekan kedalam halaman baru tersebut klik simpan selesai
<style type="text/css">
.container {
position:relative;
overflow:hidden;
}
.container .textbox {
width:350px;
height:250px;
position:absolute;
top:0;
left:0;
margin-top:-160px;
border-radius:5px;
background-color: rgba(30.144.255);
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
}
.container:hover .textbox {
margin-top:0;
}
.text {
padding-top: 50px;
}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>
<div class="container">
<img src="http://Link Gambar" alt="img5">
<div class="textbox">
<p class="text">
<a href="Your Link" target="_blank">Your Text</p></a>

</div>
</div>

Penjelasan :
Terapkan Link dan edit kode yang di warnai
All Sources
Edited by. Myscript2010

Myscript2010

Home Page
 
 

Copyright@2015

Copyright © Cibeber Cimahi