Tampilan Baru


Sudah lama ngga main ke websiteku yang susiloharjo.web.id, hmm setelah tak lihat lihat sepertinya sudah waktunya dibuat lebih menarik, walhasil yang tadinya tampilannya begini

tampilan lama

Dirubah menjadi lebih ringan dan mengikuti trend sekarang dengan background wallpaper fullscreen, setelah utak atik jadilah seperti dibawah ini

Screen Shot 2014-06-16 at 9.28.47 AMLebih simple dan kelihatan lebih segar dilihat, hmm bener ngga? btw ini hanya static page dengan link kemana mana dibagian atas, males nginstall cms, selain menuh menuhin males ngisinya ha3 dasar pemalas, walhasil akhirnya cuman pasang link kemana-mana salah satunya ya ke blog ini.

Buatnya gampang kalau tertarik ingin buat cekidot script dibawah

Script ini terdiri dari 2 file index.html dan index.css dan satu lagi buat folder dengan nama images yang didalamnya adalah gambar untuk background websitenya silahkan dibuat sendiri ya, disini saya hanya share mengenai index.html dan index.cssnya saja silahkan untuk merubah gambar utak atik deh tu dibagian index.css di div class .body, selamat mencoba dibawah ini scriptnya silahkan bebas dimodif sesuka hati syukur syukur bisa ngasih copyright he3.

File index.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>+susiloharjo</title>
<link href=”index.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div class=”logo”></div>
<div class=”header”>
<div class=”title”>
<a href=”https://www.facebook.com/susiloharjo”></a&gt;
<a href=”https://plus.google.com/u/0/106122060861964798662/posts”>%5Bg+%5D</a&gt;
<a href=”https://twitter.com/susiloharjo”>%5Btwitter%5D</a&gt;
<a href=”http://www.linkedin.com/in/susiloharjo”>%5BIn%5D</a&gt;
<a href=”https://kakeko.wordpress.com”>%5Bwordpress%5D</a&gt;
<a href=”http://www.flickr.com/photos/susiloharjo”></a&gt;
<a href=”http://www.youtube.com/user/susiloharjo”&gt;</a>
</div>
</div>
<div class=”content”>
<div class=”content-title”>susiloharjo</div>
<div class=”content-title2″>Like Photography, Web Designer, Web Programming, Robot</div>
</div>

</div>
<div class=”footer”></div>

 

</body>
</html>

———————->

Index.css

body {
background-color: #F3F3F3;
margin: 0px;
top:0px;
background-attachment: fixed;
background-image: url(images/home.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-cover-size:cover;
background-size:cover;
z-index: 0;
}

.header {
width: 100%;
height:30px;
background-color:#000;
opacity: 0.80;
filter: alpha(opacity=80);
}

.title {
width: 500px;
color:#f0f0f0;
font-family: “Lucida Console”, Monaco, monospace;
font-size: 14px;
padding-right:10px;
padding-top:10px;
float:right;
}

 

.content{
width: 520px;
height: 70px;
position: fixed;
z-index: 1;
top: 70%;
left: 0px;
box-shadow: 0px 1px 5px #000;
opacity: 0.50;
filter: alpha(opacity=50);
background-color: #F0F0F0;
}

.content-title {
color:#000;
font-family: “Lucida Console”, Monaco, monospace;
font-size: 32px;
margin-left:10px;
margin-top:10px;
letter-spacing: 0.2em;
}

.content-title2 {
color:#000;
font-family: “Lucida Console”, Monaco, monospace;
font-size: 15px;
margin-left:15px;
margin-top:2px;
//letter-spacing: 0.1em;
}

 

a {
text-decoration: none;
color: #FFF;

}
a:hover{
text-decoration: none;
color: #00bcff;

}

2 thoughts on “Tampilan Baru

  1. felladyma says:

    assalaamu’alaykum..
    saya lagi pengen banget belajar desain wordpress nih..
    tapi belum menemukan tutorial yang mudah untuk saya yang awam..

    apakah step di artikel ini aplicable untuk wordpress?
    atau ada saran saya harus belajar dari artikel mana untuk memperindah tampilan wordpress?😀

    terima kasih sebelumnya..

    • susiloharjo says:

      Waalaikum salam

      Sudah nyoba nyari nyari template yang ada, sebenarnya saya juga ngga mahir untuk mendesign template wordpress, kalau cuman single page sih lumayan lah, kalau saran saya tinggal cari template2 yang sudah ada tinggal nanti dimodifikasi sesuai keinginan.

Ditunggu komennya ...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s