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

TESTSCRIPT

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

TESTSCRIPT

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

TESTSCRIPT

Circle Hover Effects

Circle Hover Effects
Memasang Kode Circle Hover Effects
kode ini cukup menarik untuk menghiasi blog, selain itu kode ini juga dapat diterapkan link yang menuju kestu postingan, kode ini menggunakan link gambar dengan format JPG, PNG dan GIF, dibawah ini kode tersebut serta cara penerapannya.

Login ke akun blog klik tombol blog baru buat satubuah
link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Bila sudah selesai klik entri halaman baru HTML pada link tersebut 
copy kode berikut : pastekan ke area entri halaman baru  dan klik simpan selesai

<style type="text/css">
.my2010-item {
 width: 100%;
 height: 100%;
 border-radius: 50%;
 position: relative;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 cursor: default;
}
.my2010-info-wrap,
.my2010-info{
 position: absolute;
 width: 180px;
 height: 180px;
 border-radius: 50%;
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
 -webkit-perspective: 800px;
 -moz-perspective: 800px;
 -o-perspective: 800px;
 -ms-perspective: 800px;
 perspective: 800px;
}
.my2010-info-wrap {
 top: 20px;
 left: 20px;
 background:url(http://Link Gambar.jpg) no-repeat center center;
 box-shadow: 0 0 0 20px rgba(255,255,255,0.2),inset 0 0 3px rgba(115,114, 23, 0.8);}
.my2010-info {
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -o-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
}
.my2010-info > div {
 display: block;
 position: absolute;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-position: center center;
 -webkit-transition: all 0.6s ease-in-out;
 -moz-transition: all 0.6s ease-in-out;
 -o-transition: all 0.6s ease-in-out;
 -ms-transition: all 0.6s ease-in-out;
 transition: all 0.6s ease-in-out;
}
.my2010-info .my2010-info-front {
 -webkit-transform-origin: 50% 100%;
 -moz-transform-origin: 50% 100%;
 -o-transform-origin: 50% 100%;
 -ms-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
  z-index: 100;
 box-shadow:
  inset 2px 1px 4px rgba(0,0,0,0.1);
}
.my2010-info .my2010-info-back {
 background: rgba(230,132,107,0);
}
.my2010-img-1 {
 background-image: url(http://Link Gambar.jpg);
}
.my2010-img-2 {
 background-image: url(http://Link Gambar.jpg);
}
.my2010-img-3 {
 background-image: url(http://Link Gambar.jpg);
}
.my2010-info h3 {
 color: lime;
 text-transform: uppercase;
 letter-spacing: 2px;
 font-size: 14px;
 margin: 0 25px;
 padding: 40px 0 0 0;
 height: 90px;
 font-family: Helvetia;
 text-shadow: 2px 2px 2px red,0 1px 2px #080;}
.my2010-info p {
 color: #fff;
 padding: 10px 5px;
 font-style: italic;
 margin: -2.5em 20px;
 font-size: 12px;}
.my2010-item:hover .my2010-info-front {
 -webkit-transform: rotate3d(1,0,0,-180deg);
 -moz-transform: rotate3d(1,0,0,-180deg);
 -o-transform: rotate3d(1,0,0,-180deg);
 -ms-transform: rotate3d(1,0,0,-180deg);
 transform: rotate3d(1,0,0,-180deg);
 box-shadow:
  inset 0 0 5px rgba(255,255,255,0.2),
  inset 0 0 3px rgba(0,0,0,0.3);
}
.my2010-grid {
 margin: 15px 0 0 0;
 padding: 0;
 list-style: none;
 display: block;
 text-align: center;
 width: 100%;
}
.my2010-grid:after,
.my2010-item:before {
 content: '';
    display: table;
}
.my2010-grid:after {
 clear: both;
}
.my2010-grid li {
 width: 220px;
 height: 220px;
 display: inline-block;
 margin:15px;
}
</style>

<ul class="my2010-grid">
<li>
<div class="my2010-item my2010-img-1">
<div class="my2010-info-wrap">
<div class="my2010-info">
<div class="my2010-info-front my2010-img-1">
</div>
<div class="my2010-info-back">
<h3>Your Text</h3>
<a href="http://Your Link.blogspot.co.id/" target="_blank" title="Your Text"><b>Your Text</b></a></div>
</div>
</div>
</div>
</li>
<li>
<div class="my2010-item my2010-img-2">
<div class="my2010-info-wrap">
<div class="my2010-info">
<div class="my2010-info-front my2010-img-2">
</div>
<div class="my2010-info-back">
<h3>Your Text</h3>
<a href="http://Your Link.blogspot.co.id/" target="_blank" title="Your Text"><b>Your Text</b></a></div>
</div>
</div>
</div>
</li>
<li>
<div class="my2010-item my2010-img-3">
<div class="my2010-info-wrap">
<div class="my2010-info">
<div class="my2010-info-front my2010-img-3">
</div>
<div class="my2010-info-back">
<h3>Your Text</h3>
<a href="http://Your Link.blogspot.co.id/" target="_blank" title="Your Text"><b>Your Text</b></a></div>
</div>
</div>
</div>
</li>
</ul>
<div align="center">
<span style="color: tan; font-family: &quot;bernard mt condensed&quot;; font-size: small;">Your Text<span style="color: cyan; font-family: &quot;vivaldi&quot;; font-size: large;">
<a href="http://Your Link.blogspot.co.id/" title="Your Text">
<b>Your Text</b></a></span></span></div>

Penjelasan :
Edit kode yang diberi warna sesuai keinginan
Tambahkan background gambar pada kode CSS tepat dibawah kode 
<style type="text/css">  jika diperlukan

body {background-image: url(http://Link Gambar.png);color:red;height:100%;overflow:hidden;}

Sumber by. Tympanus
Edited by. Myscript2010

DEMOSHOW

CSS3 Hover With Web Symbols

CSS3 Hover With Web Symbols
Memasang Kode CSS3 Hover With Web Symbols, kode ini memiliki efek berputar bila disentuh oleh Cursor dan juga dapat menampilkan beberapa judul artikel, tampilan kode ini tidak menggunakan background gambar. kecuali warna latar sebagai background. dibawah ini adalah kode tersebut serta cara penerapannya :

Login ke akun blog klik tombol blog baru buat satubuah
link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Bila sudah selesai klik entri halaman baru HTML pada link tersebut 
copy kode berikut : pastekan ke area entri halaman baru  dan klik simpan selesai

<style type="text/css">
@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('images/websymbols/websymbols-regular-webfont.eot');
    src: url('images/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('images/websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('images/websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('images/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.ca-menu{
    padding:0;
    margin:20px auto;
    width: 1020px;
    font-family: 'Dosis', sans-serif;
}
.ca-menu li{
    width: 230px;
    height: 230px;
    border: 10px solid #333;
    overflow: hidden;
    position: relative;
    float:left;
    background: #777;
    margin-right: 4px;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    border-radius: 125px;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:last-child{
    margin-right: 0px;
}
.ca-menu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #808080;
    position: relative;
   -moz-box-shadow:0px 0px 3px #000000;
   -webkit-box-shadow:0px 0px 3px #000000;
   box-shadow:0px 0px 3px #000000;

}
.ca-icon{
    font-family: 'WebSymbolsRegular', cursive;
    font-size: 40px;
    color: #E6E6FA ;;
    line-height: 60px;
    position: absolute;
    width: 100%;
    height: 60px;
    left: 0px;
    top: 30px;
    text-align: center;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-main{
    font-size: 24px;
    position: absolute;
    top: 110px;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    opacity: 0.8;
    text-align: center;
}
.ca-sub{
    text-align:center;
    color: #dad ;
    font-size: 26px;
    position: absolute;
    height: 80px;
    width: 170px;
    left: 50%;
    margin-left: -85px;
    top: 110px;
    opacity: 0;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
.ca-menu li:hover{
    background: #444;
    border-color: #ff0000;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    box-shadow: 0 45px 60px -50px #000000;
}
.ca-menu li:hover .ca-icon{
    color: #B20000 ;
    font-size: 60px;
}
.ca-menu li:hover .ca-main{
    display: none;
}
.ca-menu li:hover .ca-sub{
    opacity: 0.8;
}
</style>

<ul class="ca-menu">
<li>
<a href="https:// Your Link">
<span class="ca-icon">M</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 1</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>                 
</li>
<li>
<a href="https:// Your Link">
<span class="ca-icon">M</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 2</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>                 
</li>
<li>
<a href="https:// Your Link">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 3</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>                  
</li>
<li>
<a href="https:// Your Link">
<span class="ca-icon">C</span>
<div class="ca-content">
<h2 class="ca-main">
Open Menu 4</h2>
<h3 class="ca-sub">
Enter Menu</h3>
</div>
</a>
</li>
</ul>
</div>

Penjelasan :
Edit kode yang diberi warna sesuai keinginan
Tambahkan background gambar pada kode CSS tepat dibawah kode 
<style type="text/css">  jika diperlukan

body {background-image: url(http://Link Gambar.png);color:red;height:100%;overflow:hidden;}

Edited by. Myscript2010
Sumber by. 1stwebdesigner

DEMOSHOW

Diamond Grids with CSS3

Diamond Grids with CSS3
Memasang Kode Grids Diamond, kode ini fungsinya sama dengan sitemap dapat menampilkan beberapa judul artikel, dengan background yang dapat diedit baik menggunakan kode warna maupun background gambar. dibawah ini adalah kode tersebut serta cara penerapannya :

Login ke akun blog klik tombol blog baru buat satubuah
link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus smua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Bila sudah selesai klik entri halaman baru HTML pada link tersebut 
copy kode berikut : pastekan ke area entri halaman baru  dan klik simpan selesai

<style type="text/css">
body {
    background: #888;
}
h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;
    text-align: left;
    color: #fff; 
    font-size: 38px;
    width: 700px;
    padding-bottom: 0px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 0px;
}
/* DIAMOND GRIDS STYLES
-------------------------------------------------*/
.diamond-grid {
    width: 1000px;
    margin: 0 auto;
    padding-right:  0px;
}
ul li {
    list-style: none;
    float: left;
    margin-left: 66px;
    margin-top: 20px;
}
.diamond {
    height: 150px;
    width: 150px;
    background: transparent;
    color: #fff;
    display: block;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    border: 3px solid #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: color .35s linear;
    -moz-transition: color .35s linear;
    -o-transition: color .35s linear;
    transition: color .35s linear;
}
.diamond:hover {
    background: #444;
    color: #3cddb9;
}
.diamond-grid > li:nth-child(9n+6) {
    margin-left: 66px;
    margin-top: -6px;
}
.diamond-grid > li:nth-child(5) {
    margin-left: 182px;
}
.diamond-grid > li:nth-child(n+5) {
    margin-top: -51px;
}
.text {
    width:  110px;
    height:  110px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    padding: 0 10px;
    display: table-cell;
    vertical-align: middle;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    text-align: center;
}
</style>

<h1>
Diamond Grids with CSS3</h1>
 <ul class="diamond-grid">
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">Judul Artikel
</div>
</a>
</li>
<li>
<a href="http://myscript2010s.blogspot.co.id/2015/12/diamond-grids-with-css3.html" class="diamond">
<div class="text">
Judul Artikel
</div>
</a>
</li>
</ul>
 

Tambahkan background gambar pada kode CSS tepat diatas h1 jika diperlukan
body {background-image: url(http://Link Gambar.png);color:red;height:100%;overflow:hidden;}

Penjelasan :
Edit kode yang diberi warna sesuai keinginan

Edited by. Myscript2010
Sumber by. 1stwebdesigner
DEMOSHOW

Feed Burner

Your email

 <style>
.Mys2010subscribe {background: URl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_-q5ooy9lc8oLAM7YtyOUgOxzT4UMB1xeVu7dMGf33Nf7iqJIldnCkWPFomwfDumCrSjMPDXTzBaegYp7NFlmtwS3dgDLb-0IcCRlgiACS6JKRYh7Zh3I9qMULL84pSjsOklQSKjOy-A/s320/rsfeed_cinta.png) repeat-x top;
border: 1px solid #9f1d00 ;border-radius:5px;
padding:0 8px 8px 8px;
width: 397px;
-webkit-transition: all 0.5s ease-in-out;
-Mys2010-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.Mys2010subscribe:hover {
-Mys2010-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.Mys2010mailbox {
border: 1px solid #9f1d00 ;
-webkit-border-radius: 4px;
border-radius: 4px;
-Mys2010-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #9f1d00 ;
font: 16px "trebuchet ms", sans-serif;
padding: 5px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-Mys2010-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.Mys2010mailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-Mys2010-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.Mys2010submit {
font:  16px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #fff;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcc85x_6vAbANqepdzazRpuubTXpQViLgJuC_QKMSHdtjRkF5juN4LfnuhSh7RJzUJeqL_BOJB0Etn27oDRuNMFtslcYPvH7dZS96NYc6ckyyAD3TwI-asF141x3qIiLk4q5QQma8gwSGK/s1600-r/button-RSS.png);
border: 2px solid #9f1d00 ;
text-shadow: 0;
border-radius: 5px;
padding: 6px 26px;
cursor: pointer;
margin: 0 auto;
}
. Mys2010submit:active {
cursor: pointer;
position: relative;
top: 2px;
}
. Mys2010submit::- Mys2010-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>

<link href='http://yourjavascript.com/851323151861/font-google-apis-mys2010.js' rel='stylesheet' type='text/css' />
<div class='Mys2010subscribe'>
<div style='background: no-repeat 6px;padding:4px 5px 5px 45px;color: #fff ; font-weight: bold; font: 20px Oswald, cursive; margin: 0px 0px 10px 0px;border-radius:5px;'>
<a href="https://Your Link ">
<img src="http://www.digitalleafmedia.com/images/email-list-rental-company-for-business-database.png" name="e902" border="0" width="150" height="100" /></a>
</div>
<div align="center">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot / KODE FEED SOBAT', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="border: 0px solid #444; padding: 3px; text-align: center;" target="popupwindow">
<span style="color: green; font-family: &quot;mistral&quot;; font-size: large;"><b>Your email </b></span><br>
<span style="color: green; font-family: &quot;mistral&quot;; font-size: large;"><input name="email" style="width: 140px;" type="text" /></span>
<span style="color: green; font-family: &quot;mistral&quot;font-size: large;"><input name="uri" type="hidden" value="blogspot / KODE FEED SOBAT" />
<input alt='Mys2010' class='Mys2010submit' title='Mys2010' type='submit' value='ENTER'/>
</form>

</div>
<img src="http://icongal.com/gallery/image/3912/feedburner.png" name="e902" border="0" width=" 35" height="35" /></a>
</div>
</div>

Contact US

Button Share

Sosial Media
Memasang Tombol Share berbentuk love dari sumber
dynamic drive dan juga beberapa code tombol share dari berbagai sumber, dibawah ini adalah kode tersebut.
Penerepannya bisa melalui Gadged maupun Entri halaman baru HTML

Kode Tombol Share Efek Transisi


<style>
#iconoshoverfadems {float:center;margin: 0 auto;}
#iconoshoverfadems ul li {list-style-type: none;float:left;margin-right:5px;:}
#iconoshoverfadems ul li:hover{-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
</style>

<div id="iconoshoverfadems">
<ul class="bubblewrap"></li>
<li><a href="https://www.facebook.com/learn.editing.myscript2010" target="_blank" title="facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7neaFGN1833i9kuJznzmvCUbvY-L4Dwl8Tk-9iJBfEyvRn2xz_HYkfLza6U4JqeIUXiAWz-x7MPEWHbhUdDLSPOCpeo7LzpgNxZaGjIoCqCRtP3CfGwyoliAgoofIqwxcS6JlbTZ10_o/s1600-r/facebook_cinta.png" title="Facebook" /></a>

</li>
<li><a href="https://twitter.com/myscript2010s" target="_blank" title="Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qVR_EftG_wXiUy3n_EYHrbBEbSAjgCPih_wPo14UVaV5-0qsiKmUyEWSecYoxJ0rJxf7cuScN6RCvscJ6_uvoweytLkQO1HkvDoQIwSqKHf7mYS6Uck8OqmqY87f2Ld4WsfElMxDjh4/s1600-r/twitter-cinta.png" title="Twitter" /></a>
</li>

<li><a href="https://feedburner.google.com/fb/a/myfeeds" target="_blank" title="feedburner"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6wDSFc-zKPo30gzKX59n7OnZ29tVYrYQ86IDQOACSDNYieP-BdbNy1qQbK27WaBWFGq03Bqbuu91-skktXqBgO5icSLw4og5mLW0aEv2-ZwRca1k2i5saiH7Ky6nk2C8SIK37ASFE6c/s1600-r/rsfeed_cinta.png" title="feedburner" /></a>
</li>

<li><a href="https://plus.google.com/u/0/101254379497511200564/posts" target="_blank" title="Google +"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-PwKMohxVcttWYHnCMnIoELY94zh77xKhpofVaMKInWGoEKoeGq4Db2ELNQZWAYNMqyqHX-kR7tRz84-AE1-M9a1adB-oiAJlnufzYwNAoGKHrNnB5_YKu7_00P9XHgC58cM2Kw8d7F4/s1600-r/google-cinta.png" title="Google +" /></a></li>
</ul>

<script src=" http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>
$(document).ready(function() {
    $('#iconoshoverfadems a').hover(function() {
        $('#iconoshoverfadems a img').not($('img', this)).stop().fadeTo(250, '0.1');
    }, function() {
        $('#iconoshoverfadems a img').stop().fadeTo(250, '1.0');
    });
});
</script> </div>

Kode Tombol Share Efek Hover Animasi


<style type="text/css">
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-moz-transition:-moz-transform 0.1s ease-in; /*animate transform property */
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>


 <center>
<ul class="bubblewrap"></li>
<li><a href="https://www.facebook.com/learn.editing.myscript2010" target="_blank" title="facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7neaFGN1833i9kuJznzmvCUbvY-L4Dwl8Tk-9iJBfEyvRn2xz_HYkfLza6U4JqeIUXiAWz-x7MPEWHbhUdDLSPOCpeo7LzpgNxZaGjIoCqCRtP3CfGwyoliAgoofIqwxcS6JlbTZ10_o/s1600-r/facebook_cinta.png" title="Facebook" /></a>

</li>
<li><a href="https://twitter.com/myscript2010s" target="_blank" title="Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8qVR_EftG_wXiUy3n_EYHrbBEbSAjgCPih_wPo14UVaV5-0qsiKmUyEWSecYoxJ0rJxf7cuScN6RCvscJ6_uvoweytLkQO1HkvDoQIwSqKHf7mYS6Uck8OqmqY87f2Ld4WsfElMxDjh4/s1600-r/twitter-cinta.png" title="Twitter" /></a>
</li>

<li><a href="https://feedburner.google.com/fb/a/myfeeds" target="_blank" title="feedburner"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6wDSFc-zKPo30gzKX59n7OnZ29tVYrYQ86IDQOACSDNYieP-BdbNy1qQbK27WaBWFGq03Bqbuu91-skktXqBgO5icSLw4og5mLW0aEv2-ZwRca1k2i5saiH7Ky6nk2C8SIK37ASFE6c/s1600-r/rsfeed_cinta.png" title="feedburner" /></a>
</li>

<li><a href="https://plus.google.com/u/0/101254379497511200564/posts" target="_blank" title="Google +"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-PwKMohxVcttWYHnCMnIoELY94zh77xKhpofVaMKInWGoEKoeGq4Db2ELNQZWAYNMqyqHX-kR7tRz84-AE1-M9a1adB-oiAJlnufzYwNAoGKHrNnB5_YKu7_00P9XHgC58cM2Kw8d7F4/s1600-r/google-cinta.png" title="Google +" /></a></li>
</ul>

All Sources
Edited by. Myscript2010


Berikutnya

pinterest

linkedin

Facebook

twitter

Efek Gambar Transisi

Memasang Gambar dengan efek transisi.
efek gambar transisi ini berfungsi juga sebagai tobol yang menuju kearah satu postingan, dibawah ini adalah kode efek transisi tersebut
Login ke akun blog klik entri halaman baru HTML
copy kode berikut letakan kedalam ruangan halaman baru tersebut dan klik simpan selesai

<style>
h1 {
    font-size: 96px;
    display: inline-block;
    -webkit-transform: scale(3);
    transform: scale(3);
    -webkit-transition: -webkit-transform 2s;
    transition: transform 2s;
}
h1:hover {
    -webkit-transform: scale(1);
    transform: scale(1);
}
 </style>
<center>
 <h1>
<a href="https://Your link" target="_blank">
<img border="0" class="expando" src="http://Link Gambar" height="75"
idth="100" />
</a></h1>
</center>

All Sources
Edited by. Myscript2010

DEMOSHOW

Hover Gallery

Hover Gallery
Memasang gambar zoom dengan kode efek hover
sekaligus sebagi tombol menuju satu postingan berikut cara penerapannya serta kode tersebut

Login ke akun blog klik entri halaman baru HTML copy kode dibawah ini pastekan kedalam halaman baru terdebut dan klik simpan selesai

<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>
<div class="hovergallery">
<a href="http://Your Link" target="_blank" title="Mys2010">
<img src="https://Link Gambar" /> </a>
</div>

Penjelasan :
Ganti Link tujuan dan link gambar yang berwarna biru dengan link sobat

Sumber : Dynamic Drive
Edited by. Myscript2010

DEMOSHOW