Html Dan Css Editor Online Untuk Blog

Untuk membuat tampilan blog yang menarik dan beda dengan blog lainnya, biasanya blogger mengganti, mengedit atau merubah kode - kode html dan css dalam template blog yang telah ada.

Namun hal tersebut akan sangat melelahkan bila tiap kali mencoba mengedit atau merubah html dan css blog harus login ke template blogger, lalu menyimpannya dan terus preview untuk melihat tampilannya. Bila tampilan yang diinginkan tidak sesuai maka harus mengulang lagi dari awal. Untuk menghindari semua itu, agar lebih cepat dan efektif sebaiknya gunakanlah html dan css editor online.

Dengan html dan css editor online, setiap kali mengganti atau merubah html dan css blog akan langsung kelihatan. Tidak perlu login ke blogger dan menyimpannya sebelum tampilan yang dikehendaki benar - benar final.

Silahkan coba mengganti atau merubah kode css untuk contoh tampilan berikut:

Contoh Border

Contoh Border dengan style Dashed - Double - Solid dan Dotted dengan memakai background warna.

Contoh Text Shadow

Contoh Css Text Shadow

Contoh Link

Contoh Css Untuk Link Klik Disini

Copy kode Css dibawah ini kemudian klik tombol "Coba" yang berada di pojok kanan bawah text area, lalu paste ke "editor area".

Kode Css Contoh Border

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:14px;font-family:arial;color:#222;
margin-left:25px;margin:25px 25px;}

div
{
padding:10px 20px; 
background:#F5F5DC;
width:400px;
border-top: 5px dashed #0000FF;
border-bottom: 5px double #006400;
border-left: 5px solid #DC143C;
border-right: 5px dotted #9400D3; 
}

</style>
</head>
<body>

<div>
Contoh Border dengan style Dashed - Double -
 Solid dan Dotted dengan memakai background warna.</div>
<br>
<p>
<b>Catatan: </b>Silahkan edit css di editor area untuk
memperoleh berbagai tampilan yang diinginkan.</p>
</body>
</html>

Kode Css Contoh Text Shadow

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size:14px;font-family:arial;color:#222;
margin:20px 5px 20px 25px;
}

div {
font-family:harlow solid italic; 
font-size:40px;
font-weight:700;
color:#116cb3;
text-shadow:5px 5px 5px #5a819f;
font-weight:700;
}

</style>
</head>
<body>

<div>
Contoh Text Shadow</div>
<p>
<b>Catatan: </b>Silahkan edit css di editor area untuk
memperoleh berbagai tampilan yang diinginkan.</p>
</body>
</html>

Kode Css Contoh Link

<!DOCTYPE html>
<html>
<head>

<style>
body {
font-size:14px;font-family:arial;color:#222;
margin:20px 5px 20px 25px;
}

.dm_link a:link {color:#00CCFF;text-decoration:underline;}
.dm_link a:visited {color:#CC0033;text-decoration:none;}
.dm_link a:hover {color:#3399FF;text-decoration:underline;
font-style:italic;font-size:20px;font-family:lucida grande;}
.dm_link a:active {color:#0000FF;text-decoration:underline;}
.dm_link {border-radius:7px;text-align:center;padding:10px 20px;
width:400px;border:2px solid #0000FF; -webkit-border-radius: 7px;
 -moz-border-radius: 7px;}

</style>
</head>
<body>

<div class="dm_link">
Contoh Css Untuk Link 
<a href="http://menggantitemplates.blogspot.com/search/label/Link" 
target="_blank">Klik Disini</a></div>
<br/>
<div style="font-size:13px;color:#000;">
<b>Catatan: </b>Silahkan 
Edit Css style link sesuai dengan yang diinginkan.</div>
</body>
</html>

Selamat mencoba, semoga membawa manfaat.

Mengganti Dan Merubah Template

Html Dan Css Editor Online Untuk Blog

Related Posts :

Tidak ada komentar:

Posting Komentar