Menu


Menu Tab

Pages

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




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

Loading Animation CSS3

Loading Animation CSS3
Memasang Loading animasi
menggunakan CSS3 pada postingan dihalaman blog, Fungsi Loading adalah untuk melewati halaman blog yang kosong dalam waktu singkat, selain itu loading dapat memperindah interface blog, berikut cara penerapan serta kode loading animsi
Login ke akun blog klik halaman baru HTML, copy kode dibawah ini pastekan dihalaman baru tersebut dan klik simpan selesai
<style type="text/css">
body {
    font-size: 14px;
    font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
color: #333;
text-align: center;
margin-top: 100px;
}
span {
display: block;
margin: 0 auto;
}
span[class*="l-"] {
    height: 4px; width: 4px;
    background: #000;
    display: inline-block;
    margin: 12px 2px;
  
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
  
    -webkit-animation: loader 4s infinite;
    -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -webkit-animation-fill-mode: both;
    -moz-animation: loader 4s infinite;
    -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -moz-animation-fill-mode: both;
    -ms-animation: loader 4s infinite;
    -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -ms-animation-fill-mode: both;
    animation: loader 4s infinite;
    animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    animation-fill-mode: both;
}

span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}

@-webkit-keyframes loader {
    0% {-webkit-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-webkit-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
@-moz-keyframes loader {
    0% {-moz-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-moz-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
@-keyframes loader {
    0% {-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
@-ms-keyframes loader {
    0% {-ms-transform: translateX(-30px); opacity: 0;}
    25% {opacity: 1;}
    50% {-ms-transform: translateX(30px); opacity: 0;}
    100% {opacity: 0;}
}
</style>

<span>Loading</span>
<span class="l-1"></span>
<span class="l-2"></span>
<span class="l-3"></span>
<span class="l-4"></span>
<span class="l-5"></span>
<span class="l-6"></span>
Penjelasan :
Tambahkan <span class="l-7"></span> sesuai nomor urut jika diperlukan
Edited by. Myscript2010
Sumber by. Kode Player / Daniel Eden

Test Script Building Editor

Memasang Kode Test Script
Test Script berfungsi untuk mengedit script yang akan ditampilkan pada postingan blog
berikut cara penerapan serta kode test script tersebut :
Login ke akun blog klik pada tombol blog baru
buat satu 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
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Mys2010</title>
<link href="/stdtheme.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js'
type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
function searchfield_focus(obj){
obj.style.color=""
obj.style.fontStyle=""
if (obj.value=="Search w3schools.com"){  obj.value=""  }}
var pageTracker = _gat._getTracker("UA-3855518-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>
<span style="color: brown; font-family: Verdana,Arial,Helvetica,Georgia; font-size: 12px;">KLIK TESTER
UNTUK MELIHAT HASIL</span></div>
<div>
</div>
</body>
Penjelasan -1 :
Edit Kode tersebut yang berwarna biru sesuai fungsinya.
kemudian buat lagi satu link baru  langkahnya sama dengan diatas
Pilih template satu kolom klik pada tombol Sesuikan, dan klik sesuaikan lebar max 970px kemudian klik tombol terapkan ke blog, Bila sudah selesai klik entri halaman baru HTML copy kode berikut : pastekan dihalaman baru tersebut
<div align="center">
<form action="http://www.w3schools.com/js/tryit_view.asp" method="post"  target="view" onsubmit="test(script)">
<table align=middle border=5  cellpadding=5>
<tr bgcolor="silver"></tr>
<tr> <td bgcolor=silver  align=center><form name="copy">
<input type="button" value="Select All" onclick="javascript:this.form.code.focus();this.form.code.select();" /></div>
<input type="code" name="total" value=" Myscript2010 " size=" 9 " /></div>
<center>
<textarea name="code" rows="38" cols="54" wrap="logical">AREA SCRIPT</textarea>
<div>
<center>
<input name="submit" type="submit" style="background-color : #D2B48C; color : #0000FF ;" value="TESTER" />
<td width="50%" valign="top" bgcolor="  #000">
<table border="0" cellpadding="3" cellspacing="0" width="30"><!--FOOTER SECTION--> </table>
<iframe width="430" height="670"  name="view" src="http://ganti link.blogspot.co.id/">
</iframe> </td></center>
</div>
Penjelasan -2 :
Edit background warna dan ukuran yang berwarna merah sesuai keinginan
Ganti link yang berwarna biru dengan link yang pertama dibuat, klik simpan selesai
Edited by. Myscript2010
Sumber : w3schools - w3.org


CSS3 3D Transforms

CSS3 3D Transforms
Memasang CSS3 3D Transforms untuk menhiasi blog menggunakan CSS3 dan HTML yang berpenampilan cukup menarik. berikut kode tersebut serta cara penerapannya :
Login ke akun blog klik entri halaman baru HTML copy kode berikut, letakan kedalam halaman baru tersebut dan klik simpan selesai.
.
<style>/*Custom Font*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

/*Basic Reset*/
* {margin: 0; padding: 0;}
body {
    background: #333;
    /*Removing scrollers*/
    overflow: hidden;
    /*A high perspective to give the UL an isometric look*/
perspective: 3000;
}
h1 {
    color: white;
    font: 45px 'Open Sans';
    width: 500px;
    padding: 50px;
}
.grid {
position: absolute; top: 100px; left: 0;
    /*Width = (225 + 20 + 20) * 4 = 1060*/
    width: 1060px;
    /*3D Transform*/
    transform: rotateX(60deg) rotateZ(-50deg);
    /*Preserve 3D style for children*/
    transform-style: preserve-3d;
}
.grid li {
    height: 400px; width: 225px;
    float: left; margin: 20px;
    list-style-type: none;
    /*Hide the lighting gradient from the front face*/
    background-size: 0, cover;
    /*Preserve 3D style for children(pseudo elements)*/
    transform-style: preserve-3d;
}
/*Left and Bottom Sides*/
.grid li:before, .grid li:after {
    content: '';
    position: absolute;
    /*100% height and width*/
    top: 0; left: 0; right: 0; bottom: 0;
    background: inherit;
    background-size: cover;
}
/*Left Side*/
.grid li:before {
    transform-origin: left center;
    transform: rotateY(90deg);
    /*Reducing the width of the left side for a flat feel*/
    width: 5px;
}
/*Bottom Side*/
.grid li:after {
    transform-origin: bottom center;
    transform: rotateX(90deg);
    /*Reducing the height*/
    height: 5px; top: auto; bottom: 0;
    /*Background fix - start the background from the bottom*/
    background-position: bottom center;
}
/*Shadow time - sadly all pseudo elements are used so we will have to add an HTML element in each LI*/
.s {
    position: absolute;
    /*30px smaller from each side*/
    top: 30px; left: 30px; right: 30px; bottom: 30px;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 30px 30px rgba(0, 0, 0, 0.5);
    /*Pushing down the shadow to give an elevated feel*/
transform: translateZ(-50px);
}
/*We will add a light gradient to the sides to give some lighting effect*/
.one {
background:
linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),
        url("http://Link Gambar.png");
}
.two {
    background:
        linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),
        url("http://Link Gambar.png");
}
.three {
    background:
        linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),
        url("http://Link Gambar.png");
}
.four {
    background:
        linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)),
        url("http://Link Gambar.png");
}
</style>
<h1>Your Text</h1>
<ul class="grid">
    <li class="one"><span class="s"></span></li>
    <li class="two"><span class="s"></span></li>
    <li class="three"><span class="s"></span></li>
    <li class="four"><span class="s"></span></li>
</ul>
Penjelasan :
Terapkan Link gambar beri judul pada your text yang berwarna merah
Edited by. Myscript2010
Sumber by. Kode Player

Widget Footer Empat Kolom

Widget Footer Empat Kolom
Memasang footer empat kolom di edit HTML
Footer pada blog yang berada dibagian paling bawah pada halaman blog, biasanya berjumlah lebih dari satu kolom, yang memiliki fungsi untuk menambahkan  gadged dihalaman blog, gadged tersebut berfungsi untuk tempat penyimpanan file. Dibawah ini adalah kode footer empat kolom,
berikut cara penerapannya.
Login ke akun blog klik edit HTML temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian copy kode berikut pastekan diatas kode ]]></b:skin> 

/*----- MBT MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
Kemudian cari kode </body>
copy kode berikut ini pastekan diatas kode tersebut dan klik simpan selesai

<div id='lower'>
<div id='lower-wrapper'>


<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>


<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>


<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>


<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>


<div style='clear: both;'/>
</div> </div>
Edited   by. Myscript2010
Sumber by. Mybloggertricks

Tombol Link 3D Button

Tombol link 3D button
tombol ini dapat digunakan untuk demoshow maupun download isi postingan yang sudah disediakan
dibawah ini adalah kode tombol link 3D button yang dapat diterapkan di area gadged maupun entri halaman baru HTML
<style> <style type'text/css'>
#menu{ list-style: none; margin: 0; padding: 0; }
#menu img { border: none; } #menu { width: 150px; margin: 10px; }
#menu   a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #0033CC; height: 24px; text-decoration: none; }
#menu a:link,
#menu a:visited { color: #FEF280; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSL9c7OwJn54_HZ3VZvcsJAgR7XD8ibo5WQfJuYTFc68oRHEL8a2p0G0c6aWVJGJcLX4Mw8-UoSoWFLkc6UXXKF5NPmM6NHBqKK8F7jhgMSNs5RlNL35uOSAfyyicaqz2FJao2wDVENwg/s1600-r/3Dbuttons.png); padding: 8px 0 0 35px; }
#menu a:hover { color: #1919B3; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSL9c7OwJn54_HZ3VZvcsJAgR7XD8ibo5WQfJuYTFc68oRHEL8a2p0G0c6aWVJGJcLX4Mw8-UoSoWFLkc6UXXKF5NPmM6NHBqKK8F7jhgMSNs5RlNL35uOSAfyyicaqz2FJao2wDVENwg/s1600-r/3Dbuttons.png) 0 -32px; padding: 8px 0 0 35px; }</font>
</style>

 <p align="center">
     <div id="menu">
 <a href="
http://Your Link" target="_blank">3D BUTTON</a></li> </ul> </div>
</font>
<style> <style type'text/css'>
#menu{ list-style: none; margin: 0; padding: 0; }
#menu img { border: none; } #menu { width: 150px; margin: 10px; }
#menu   a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #0033CC; height: 24px; text-decoration: none; }
#menu a:link,
#menu a:visited { color: #FEF280; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiWunaICOrU85lgZoHqyjJFya70ZW_w-FSwAHcTXytGfUO2uypYDMinkZXbKL5UChNaIooYCe7XyyriVPzWOyEaEM-s0ZL6X5U8GPcECmtgrTXZsbGLhA8qyRvhmPm1nYu9xWTfnkS3LU/s1600-r/bt_mys2010.png); padding: 8px 0 0 35px; }
#menu a:hover { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiWunaICOrU85lgZoHqyjJFya70ZW_w-FSwAHcTXytGfUO2uypYDMinkZXbKL5UChNaIooYCe7XyyriVPzWOyEaEM-s0ZL6X5U8GPcECmtgrTXZsbGLhA8qyRvhmPm1nYu9xWTfnkS3LU/s1600-r/bt_mys2010.png) 0 -32px; padding: 8px 0 0 35px; }</font>
</style>

 <p align="center">
     <div id="menu">
 <a href="
http://Your Link" target="_blank">3D BUTTON</a></li> </ul> </div>
</font>
<style> .button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#00008B;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#00008B;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#00008B;
text-align:center;
width:100px;
}
.homebutton:hover {
background-color: #00BFFF;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);}}
</style>
 <p align="center">

    <a class="button homebutton" href="http://Your Link" rel="nofollow"
    style="float: center;" target="_blank"><span style="display:
    inline-block;">3D BUTTON</span></a></p>
<style>

a.css3dbutton {
    background: darkred; /* background color of button */
    color: white;
    text-decoration: none;
    font: bold 28px Arial; /* font size and style */
    position: relative;
        top: 0; /* anchor main button's position */
    bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
        margin-bottom: 12px;
    -moz-box-shadow: 0 -15px 5px darkred inset;
    -webkit-box-shadow: 0 -15px 5px darkred inset;
    box-shadow: 0 -15px 5px darkred inset;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
a.css3dbutton, a.css3dbutton:after {
    display: inline-block;
    padding: 10px 15px; /* vertical and horizontal padding of button */
    -moz-border-radius: 8px/15px;
    -webkit-border-radius: 8px/15px;
    border-radius: 8px/15px;
    outline: none;
}
a.css3dbutton:after { /* pseudo element to construct 3D side of button */
    content: "";
    position: absolute;
    padding: 0;
    z-index: -1;
    bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
    left: 0;
    width: 100%;
    height: 100%;
    background: #6e0e0c; /* background color of 3D effect */
    -moz-box-shadow: 1px 0 3px gray;
    -webkit-box-shadow: 1px 0 3px gray;
    box-shadow: 1px 0 3px fff;
}
a.css3dbutton:hover {
    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    background: #bc3835; /* background color when mouse rolls over button */
}
a.css3dbutton:active {
    top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
    bottom: 0;
    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
</style>
<a href="
http://Your Link" class="css3dbutton">3D BUTTON</a>
<style type="text/css">

.rssbutton{
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
color: white;
text-decoration: none;
font: bold 10px Verdana;
}
.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: white;
}
.cssbutton{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}
.cssbutton:visited{
color: black;
}
.cssbutton:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}
.cssbutton:active{
color: black;
}
</style>
<p>
<a href="http://Your Link" class="rssbutton">Menu 1</a>
<a href="http://Your Link" class="rssbutton">Menu 2</a>
</p> <a href="http://Your Link" class="cssbutton">3D BUTTON</a>
 <a href="http://Your Link" class="cssbutton">3D BUTTON</a></p>
<style type="text/css">
.container {
  margin: 50px auto;
  width: 480px;
  text-align: center;
}
.container .button {
  margin: 10px;
}
.button {
  display: inline-block;
  vertical-align: top;
  position: relative;
  padding: 0 15px 0 15px;
  line-height: 35px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  background: #576dce;
  background-clip: padding-box;
  border: 1px solid;
  border-color: #374fbb #344cb3 #2b3e94;
  border-radius: 2px;
  -webkit-font-smoothing: antialiased;
  background-image: -webkit-linear-gradient(top, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
  background-image: -moz-linear-gradient(top, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
  background-image: -o-linear-gradient(top, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
  background-image: linear-gradient(to bottom, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.button:hover, .button.hover {
  background-color: #5f74d0;
  border-color: #2d429c #2d429c #253680;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #576dce;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #576dce;
}
.button:active, .button.active {
  border-color: #253680 #2b3e94 #3147a8;
  background: #475fc9;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
}
.button:before {
  content: '';
  position: absolute;
  top: 9px;
  right: 12px;
  width: 17px;
  height: 17px;
  background: #374fbb;
  border-radius: 9px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.2);
}
.button:after {
  content: '>';
  float: right;
  position: relative;
  margin-left: 15px;
  font: bold 18px/33px "Comic Sans MS";
  /* I tried everything but couldn't get the vertical alignment to be
     consistent in IE, so this is a hack targeting IE8-9-10. */
  line-height: 31px\0;
  color: #6377d1;
  text-shadow: 0 -1px #8696dc, 0 1px 1px rgba(0, 0, 0, 0.3);
  -webkit-font-smoothing: subpixel-antialiased;
}
.button-green {
  background: #75a940;
  border-color: #5b8432 #567d2f #425f24;
  background-image: -webkit-linear-gradient(top, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
  background-image: -moz-linear-gradient(top, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
  background-image: -o-linear-gradient(top, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
  background-image: linear-gradient(to bottom, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
}
.button-green:hover, .button-green.hover {
  background-color: #7ab043;
  border-color: #476627 #476627 #354d1d;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #75a940;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #75a940;
}
.button-green:active, .button-green.active {
  border-color: #354d1d #425f24 #4f722b;
  background: #6b9a3a;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
}
.button-green:before {
  background: #5b8432;
}
.button-green:after {
  color: #7db444;
  text-shadow: 0 -1px #94c462, 0 1px 1px rgba(0, 0, 0, 0.3);
}
.button-red {
  background: #cf3e38;
  border-color: #ab2e29 #a32c27 #82231f;
  background-image: -webkit-linear-gradient(top, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
  background-image: -moz-linear-gradient(top, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
  background-image: -o-linear-gradient(top, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
  background-image: linear-gradient(to bottom, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
}
.button-red:hover, .button-red.hover {
  background-color: #d14640;
  border-color: #8a2521 #8a2521 #6d1e1a;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #cf3e38;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #cf3e38;
}
.button-red:active, .button-red.active {
  border-color: #6d1e1a #82231f #962924;
  background: #c3352f;
  -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
}
.button-red:before {
  background: #ab2e29;
}
.button-red:after {
  color: #d24a44;
  text-shadow: 0 -1px #db6e69, 0 1px 1px rgba(0, 0, 0, 0.3);

    </style>
<div class="container">
<a href="
http://Your Link" class="button">Start</a><a href="http://Your Link" class="button button-green">Start</a><a href="http://Your Link" class="button button-red">Start</a><br><a href="http://Your Link" class="button hover">Start</a><a href="http://Your Link" class="button button-red hover">Start</a>
<a href="
http://Your Link" class="button button-green hover">Start</a> </div>
Penjelasan :
Terapkan Link dan edit kode yang di warnai sesuai keinginan
All Sources
Edited by. Myscript2010
Test Script Untuk melihat hasil

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi