Menu


Menu Tab

Pages

css3 tooltip hover

Memasang kode css3 tooltip hover,
kode ini Fungsinya dapat menampilkan Gambar dengan format JPG, GIF dan PNG.
gambar yang ada pada kode ini  akan menampilkan title ketika disentuh oleh cursor 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">
.tooltip {
position: relative; opacity: 0; color: #dad;
top: -100px; left: 0px;
width: 180px; padding: 10px;
border-radius: 25px; -webkit-border-radius: 25px;
background-color: rgba(0,0,30,0.5);
-webkit-box-shadow: 0px 0px 15px 2px rgba(255,255,255,.75);
box-shadow: 0px 0px 15px 2px rgba(255,255,255, .75);
-webkit-transition: .5s; transition: .5s;
-webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.container .tooltip:after {
position: absolute; top: 100%; left: 45%; height: 0; width: 0;
border: 0px solid transparent; border-top: 0px solid rgba(0, 0, 30, 0.5);
content: "Myscript2010"; white-space: nowrap; color:#DDD;
}
.container:hover .tooltip {
opacity: 1; top: -225px;
-webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
    </style>
<a href="http://Your Link" title="Mymenu">
<div class="container">
<img src="http://Link Gambar" />
<div class="tooltip">
<center>
<p class="tooltiptxt">

Your Text</p>
</div></div>
Penjelasan :
Ganti Link dan edit kode yang di warnai 
Sumber by. Codepen
Edited by. Myscript2010
Contoh Tampilan Tooltip Hover



Your Text

Card Flip

Memasang kode Card Flip, kode ini Fungsinya dapat menampilkan Gambar dengan format JPG, GIF dan PNG.
gambar yang ada pada kode ini  akan berputar 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">
body {
  font: 600 24px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  margin: 12px 0;
}
.card-container {
  cursor: pointer;
  height: 150px;
  perspective: 600;
  position: relative;
  width: 150px;
}
.card {
  height: 300;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
  width: 400;
}
.card:hover {
  transform: rotateY(180deg);
}
.card .side {
  backface-visibility: hidden;
  border-radius: 6px;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;
}
.card .back {
  background: #000;
  color: #0087cc;
  line-height: 150px;
  text-align: center;
  transform: rotateY(180deg);
}
</style>
 <div class="card-container">
  <div class="card">
    <div class="side">
<img src="http://Link Gambar.gif" alt="Myscript2010">
</div>
    <div class="side back">
<a href="http://Your Link"><b>Your Text</b></div>
  </div>

</div>
Penjelasan :
Ganti Link dan edit kode yang di warnai 
Sumber by. Codepen
Edited by. Myscript2010

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

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>

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








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




Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi