Two Column Tutorial Section (With many style)

       Bonjour! Belakangan ini, banyak visitor blog aku yang request cara buat tutorial section dua kolum seperti punya aku. Baru sekarang aku bisa buat hehe, maaf ya buat yang udah lama request ini. Disini juga sekalian aku kasih macam macam style tutorial sectionnya, jadi kalian tinggal pilih aja oke. This is my own code, so give clickable credits if you repost this things;)

[I'm apologize, but this codes and steps only work on classic template]

Style one

[Preview vers one]

The codes :

.grace {
display:inline-block;
width: 270px;
padding:3px;
margin:5px;
background:#f4f4f4;
font:10px trebuchet ms;
text-align:left;
Text-decoration:none;
color:#b0b0b0;
text-transform:uppercase;
border:0px solid #b1b1b1;
}

.grace:hover{
display:inline-block;
width: 270px;
padding:3px;
margin:5px;
background:#fcfcfc;
font:10px trebuchet ms;
text-align:left;
Text-decoration:none;
color:#fff;
text-transform:uppercase;
border:0px solid #b1b1b1;
}

Style two

[Preview vers one]

The codes :

.grace {
display:inline-block;
width: 270px;
padding:3px;
margin:5px;
background: #fafafa;
font:10px trebuchet ms;
text-align:left;
Text-decoration:none;
color:#b0b0b0;
text-transform:uppercase;
border:1px solid #ececec;
}

.grace:hover{
display:inline-block;
width: 270px;
padding:3px;
margin:5px;
background:#fafafa;
font:10px trebuchet ms;
text-align:left;
Text-decoration:none;
color:#fff;
text-transform:uppercase;
border:1px solid #ececec;
}

Style three

[Preview vers one]

The codes :

.grace {
display:inline-block;
width: 270px;
padding:3px;
margin:5px;
background:url(Url Background);
font:10px trebuchet ms;
text-align:left;
Text-decoration:none;
color:#b0b0b0;
text-transform:uppercase;
border:1px solid #ececec;
}

.grace:hover{
display:inline-block;
width: 270px;
padding:3px;
margin:5px;
background:#fafafa;
font:10px trebuchet ms;
text-align:left;
Text-decoration:none;
color:#fff;
text-transform:uppercase;
border:1px solid #ececec;
}

Style four

[Preview vers one]

The codes :

.grace {
display:inline-block;
width: 270px;
padding:3px;
margin:5px;
background:#fbfbfb;
border: 1px dashed #d8d8d8;
font:10px trebuchet ms;
text-align:left;
Text-decoration:none;
color:#b0b0b0;
text-transform:uppercase;
border-top-right-radius:6px;
border-bottom-right-radius:6px;
border-top-left-radius:6px;
border-bottom-left-radius:6px;
}

.grace:hover{
display:inline-block;
width: 270px;
padding:3px;
margin:5px;
background:#fbfbfb;
font:10px trebuchet ms;
text-align:left;
Text-decoration:none;
color:#fff;
text-transform:uppercase;
border-top-left-radius:6px;
border-bottom-left-radius:6px;
}

---

Keterangan :

• Taruh kode yang kamu pilih tepat diatas kode </style>
• Ubah kode yang berwarna dengan seleramu
• Cara menerapkan tutorial section :

- Copy kode ini

<a class="grace" href="http://www.blogger.com/">Tutorial</a>
<a class="grace" href="http://www.blogger.com/">Tutorial</a>
<a class="grace" href="http://www.blogger.com/">Tutorial</a>
<a class="grace" href="http://www.blogger.com/">Tutorial</a>
<a class="grace" href="http://www.blogger.com/">Tutorial</a>
<a class="grace" href="http://www.blogger.com/">Tutorial</a>
<a class="grace" href="http://www.blogger.com/">Tutorial</a>
<a class="grace" href="http://www.blogger.com/">Tutorial</a>
<a class="grace" href="http://www.blogger.com/">Tutorial</a>
<a class="grace" href="http://www.blogger.com/">Tutorial</a>

- Pastekan dimanapun kamu mau.

•  Done! Jangan lupa tinggalkan komentar:)

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest