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