Test Demo Button

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Iseng iseng mengintip kode CSS dari orang lain, eh ternyata saya berhasil juga.hehehe..(Maap bagi yang mempunyai CSS aslinya). Saya cuman mau share saja CSS colongan yang telah saya dapatkan. Sebenarnya mudah saja untuk mengcopynya, tapi saya tidak tahu bagaimana orang yang membuat, pasti sangat sulit sekali untuk membuatnya. Untuk itu saya menghargai orang yang membuat CSS asli, ini dia link aslinya. Contohnya ada di bawah ini bila sudah jadi nantinya.

Cuma mencoba sajaKlik disini untuk melihat demo Cuma mencoba saja

1. Masuk ke akun blogger
2. Kemudian klik Rancangan, Edit HTML
3. Setelah itu centang Expand Template Widget
Expand Template Widget
4. Cari kode di bawah ini dengan tombol F3

</b:skin>

5. Kemudian copy paste kode di bawah ini

.view_demo{
background-image:url(http://lh5.ggpht.com/_xcD4JK_dIjU/S4QDNcLX0MI/AAAAAAAAD1w/1bSswbDuHb4/d/view_demo.jpg);
background-color:#212121;
background-position:20px 0;
background-repeat:no-repeat;
-moz-border-radius:10px;
border:1px solid #585858;
display:block;
font-size:10px;
margin-bottom:10px;
overflow:auto;
padding:20px;
text-align:center;
}
.view_demo a:link,.view_demo a:active,.view_demo a:visited{
display:block;
font-size:24px;
outline:none;
padding-bottom:5px;
text-decoration:none!important;
text-shadow:1px 1px 1px #000;
}
.view_demo a:hover{
color:red!important;
outline:none;
text-decoration:none;
}
.view_demo:hover{
border:1px solid #fff;
}

6. Kemudian paste kode tadi di atas kode

</b:skin>

7. Simpan Template
8. Untuk memasukkan ke dalam artikel.
   Buat suatu artikel, kemudian tambahkan kode di bawah ini

<div class="view_demo">
<a href="URL ANDA" target="_blank">Cuma mencoba saja</a><span>Klik disini untuk melihat demo Cuma mencoba saja</span></div>

9. Terbitkan artikel anda

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait