cara meniru tampilan web/blog orang lain

Bismillahirohmanirhim.....
Sebelumnya ada sedikit cerita nih... sejelek apapun blog kita tapi kalau karya sendiri akan membuat hati puas, namun jika kita  melihat halaman orang lain biasanaya lebih indah dibanding halaman sendiri, sekitar seminggu yang lalu saya berkunjung pada sebuah blog yang menurut saya template atau tampilan blognya lumayan  unik, dan sekedar basa basi disana saya berkomentar pada salah satu postingnya, isi komentarnya saya begini: ( mas gemana kalo tampilan blognya saya tiru?) tak lama kemudian beliaupun berkunjung ke salah satu posting saya yang judulnya: cara membuat button navigasi berpijar
dan beliaupun meninggalkan komennya begini: (salam sahabat...mau meniru gaya blog saya? silahkan sob terima kasih) nah dari situlah saya berpikir  hemmm... gemana ya cara menirunnya...?? lalu iseng iseng aku coba pelajari walau hanya untuk praktek praktek saja... akhirnya sedikit demi sedikit saya bisa mempraktekkannya... dan hasilnya ini   blog percontohan dan ini blog beliau yang coba saya tiru blog sobat, buat sobat yang mau praktek praktek saja silahkan kedua blog tersebut
dilihat dulu untuk meyakinkan bahwa kita bisa meniru template blog/web orang lain walau hanya untuk menambah pengetahuan saja.

Adapun cara caranya adalah sebagai berikut:

1.silahkan sobat kunjungi salah satu blog/web yang mau ditiru, setelah sobat menemukannya lalu klick berkas/file pada sebelah kiri atas browser mozila sobat pilih simpan halaman dengan nama, lalu kasih nama file sobat kira kira seperti ini: web-percobaan-edit tanpa spasi lalu simpan pada hardisk sobat terserah dimana saja yang penting sobat ingat dimana file itu disimpan,
2.buka file yang sobat simpan tadi, disitu akan terlihat dua file yang berbeda pilih salah satu  file yang berisi kode html, kalau browser mozila disetel untuk peramban utama pada kompi sobat maka akan terlihat gambar atau logo mozila dalam file tersebut,
klick kanan pada file mozila tadi lalu klick edit atau open with pilih noteped maka disitu akan terlihat banyak dan berantakan kode kode html, (saran buka ukuran penuh pada noteped agar tidak terlihat berantakan)
nah...! disini kita agak dibingungkan dengan kode html yang begitu banyak (dan entah apa apaan tuh isinya pusing dah gue..) tapi sobat jangan menyerah dulu karena saya sudah pilih kode kodenya yang bisa kita ambil dari noteped tadi agar tampilan blog kita sama dengan blog yang kita tiru, namun jujur saya katakan saya belum bisa meniru untuk tampilan navbarnya, mungkin buat sobat yang sudah bisa meniru bagian navbarnya mohon bisa menambahkan dalam kolom komentar nantinya, oke... sekarang kita ketahap selanjutnya.

silahkan sobat pilih kode kode yang bisa diambil dari noteped tadi yang biasanya seperti ini:

untuk bagian header biasnya akan terlihat kodenya seperti ini:
#header bla bla bla }diawali tanda # dan diakhiri tanada }  atau .header bli bli bli }  dan diawali dengan titik diakhiri tanda}

silahkan sobat cari kode kode itu untuk mengganti tampilan header nya, contohnya seperti ini:

#header {
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: inset 0px 0px 20px #000;
-webkit-box-shadow: inset 0px 0px 20px #000;
-moz-box-shadow: inset 0px 0px 20px #000;
width: 960px;
height: 150px;
color: #FFF;
font-size: 18px;
margin: 0;
padding: 0;
overflow: hidden;
font-family:Impact;
text-transform: Title Case;
}

atau seperti ini:

.headerleft {
width: 460px;
float: left;
font-size: 16px;font:Impact;
font-weight: normal;
margin: 0;
padding: 0;
color: #fff;
}

dua contoh diatas adalah untuk kode bagian header, lalu bagaimana dengan bagian posts, sidebar dan yang lainnya...? oke.. intinya sama saja... semua kode yang bisa kita ambil akan diawali tanda # dan diakhiri tanda }  atau diawali dengan tanda titik (.) tanpa tanda kurung dan diakhiri tanda }

untuk bagian posts atau bagian halaman posting contoh kodenya seperti ini:

#post bla bla bla } atau .post bli bli bli }

untuk bagian sidebar seperti ini:

#sidebar bla bla bla }atau .sidebar bli bli bli }

begitulah seterusnya, lalu bagaimana untuk meletakkan kode kode tersebuuuuuuut....??

begini... sebaiknya satu satu dulu untuk sobat praktekkan yaitu untuk bagian header nya dulu agar sobat tidak dibingungkan dengan banyaknya kode kode yang akan sobat pasang,

sekarang coba sobat login ke blog sobat lalu pilih edit html expan template widget boleh dicentang, tidak dicentang juga boleh,   lalu sobat cari bagian header untuk memudahkan pencarian silahkan sobat klick ctrl F lalu ketikkan kode #header pada kolom yang berada disebelah kiri bawah,  kalau sudah sobat temukan biasanya akan terlihat beberapa kode kode tersebut berurutan kebawah,  nah silahkan sobat ganti satu persatu kode kode tadi,

misalnya kode html sobat seperti ini:

#header {
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow: inset 0px 0px 20px #000;
-webkit-box-shadow: inset 0px 0px 20px #000;
-moz-box-shadow: inset 0px 0px 20px #000;
width: 960px;
height: 150px;
color: #FFF;
font-size: 18px;
margin: 0;
padding: 0;
overflow: hidden;
font-family:Impact;
text-transform: Title Case;
}
#header-inner {
background-position: left;
background-repeat: no;
}
#header h1 {
color: #fefefe;
font-size: 40px;
font-family: arial black;
font-weight: normal;
margin: 0;
padding: 15px 0 0 20px;
text-decoration: none;
text-shadow: 0px 1px 8px #000;
}
#header h1 a, #header h1 a:visited {
color: #fefefe;
font-size: 40px;
font-family: arial black;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
text-shadow: 0px 1px 8px #000;
}
#header h1 a:hover {
color: #fff;
text-decoration: none;
text-shadow: 0px 1px 8px #549bcc;
}
#header h3 {
color: #fff;
font-size: 18px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0px;
padding: 0px;
}

atau seperti ini:

.headerleft {
width: 460px;
float: left;
font-size: 16px;font:Impact;
font-weight: normal;
margin: 0;
padding: 0;
color: #fff;
}
.headerleft a img {
border: none;
margin: 0;
padding: 0;
}
.headerright {
width: 486px;
float: right;
margin: 0;
padding: 18px 0 0;
font-weight: bold;font-family:Georgia;
font-size: 18px;
}
.headerright a img {
border: 0px solid #FFF;
margin: 0 0 3px;
padding: 0;
}

dua contoh diatas adalah kode bagian header yang harus sobat hapus dan diganti dengan kode yang ada di noteped, setelah diganti silahakan  klick pratinjau dulu untuk melihat dan meyakinkan bahwa tampilan header sudah berubah atau belum, jika sudah berubah tapi belum sesuai letak letaknya, sobat bisa rubah ukuran lebar atau tingginya ukuran dengan merubah angka angka yang biasanya terlihat seperti contoh diatas yang berwarna kuning, begitu juga dengan ukuran ukuran lainnya. setelah semua sudah terlihat mirip bahkan persis barulah sobat boleh simpan template.

dan untuk merubah halaman posting, sidebar dan yang lain linnya caranya sama saja dengan contoh contoh diatas sobat cari saja kode kodenya pasti ada untuk bagian masing masing,

nah jika sobat sudah berhasil mempraktekkan cara ini maka selanjutnya sobat akan bisa mendesain web/blog sendiri dengan mudah yang kemungkinan bisa dijadikan uang... amin... iya gak...??

buat sobat yang lebih mahir dalam bidang ini saya mohon untuk bisa menambahkan hal hal yang lebih penting, berbagi pengetahuan itu baik... terimakasih dan alhamdulillah posting sampai disini dulu...

Belajar Cara Membuat Template Blog
Belajar Membuat Template Bagian Dua
Belajar Cara Membuat Template Tahap Tiga
Belajar Membuat Template tahap empat