Blogskins Page di Blog

Halo temen-temen! Ada request lagi, nih! Wafia nanya, gimana cara bikin blogskins page. Kalian mau tahu kayak gimana? Bisa lihat page blogskins di blogku, kok, untuk live previewnya! Baca aja yuk!
Nah, ini dia contohnya.

Sebelum di hover

Setelah di hover

Sebenarnya, ini bias list dari Kak Atin. Tapi, aku bikinnya dibuat page blogskins aja, hehe. Special credit Kak Atin yaa. Aku yang translate bahasa Melayu nya.

• Template Simple/Design/Denim --> paste dalam laman/page tapi di HTML, bukan Compose!
• Template Klasik/Blogskins --> paste di tempat page blogskins kalian.
• Copy kode ini

<style>
.icon2 {
margin: 5px;
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
border: 3px solid #FFD7D7;
float: left;
 box-shadow:2px 2px 5px #ccc;
}
#bias {
position: absolute;
display: block;
width: 300px;
height: 30px;
top: 30px;
margin-left: -20px;
opacity: 0;
text-align: center;
color: #AAA;
background: #FBEBED;
-webkit-transition-duration: 0.8s;
border-top: 3px solid #FFD7D7;
border-bottom: 3px solid #FFD7D7;
line-height: 4px; text-transform: uppercase ;
-webkit-transform: rotate(-30deg);
font-size: 12px;
font-family:arial;
}
.icon2:hover #bias{left: 20px; top: 60px;
bottom: 5px; opacity: 1;
width: 103px; height: 20px;
line-height: 20px;
-webkit-transform: rotate(0deg)}
</style>

<table border="0" bordercolor="" style="background-color:" width="520" cellpadding="3" cellspacing="0">
<tr>
  <td><div class="icon2">
<img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">
Name</div>
</div>
</td>
 </tr>
<tr>
  <td><div class="icon2">
<img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">
Name</div>
</div>
</td>
 </tr>
</table>

• Untuk kode link blogskins kalian, cari kode ini

<td><div class="icon2">
<img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">
Name</div>
</div>
</td>

• Gantikan kode tersebut dengan kode ini

<td><a href="LINK"><div class="icon2">
<img src="http://i.imgur.com/CUSgC.png" width="100px"><div id="bias">
Name</div>
</div>
</td>

• Setelah di paste, untuk template selain klasik dan blogskins, klik publikasikan.
• Blogskins/Template Klasik : save template!

Semoga bermanfaat! ^^