Cara mengedit template mentah 5
Senin, 30 Agustus 2010
, Posted by GAPTEK at 03.47
BISMILLAAHIRROHMAANIRROHIIM
Kini kita sampai pada sesen akhir pengeditan template mentah. Walaupun akhir, masih banyak hal yang bisa kita lakukan. Tapi, kalau sahabat merasa lelah, sahabat cukup sampai pada tahapan ini Insya Allah sedikit banyak sahabat mendapatkan pengalaman dan inspirasi pengolahan template mentah.
Pada kali ini kita mencoba untuk mengedit tampilan template yang terletak pada bagian bawah blog seperti gambar di bawah ini
klik gambar untuk memperbesar
Untuk melakukan pengeditan, silahkan sahabat cari kode seperti di bawah ini. Biasanya terletak di bagian bawah Edit HTML
<center><div style='height:20px;margin-top:9px;margin-bottom:5px;'>
Powered by <a href='http://www.blogger.com' style='color:#ff86a5'>Blogger</a> <span style='color:#999999'>|</span> <a href='http://zenverse.net/lunated-theme/' title='Lunated - Free Wordpress Theme with Premium Features'><span style='border-bottom:1px solid #616161;'>Lunated</span></a> designed by <a href='http://zenverse.net/' style='color:#ff86a5' title='ZenVerse - Web Design and Development'>ZenVerse</a> | Converted to <a href='http://www.wordpresstoblogger.com' style='color:#ff86a5'>Blogger Templates</a> and <a href='http://www.wp2b.com' style='color:#ff86a5'>Blogger Themes</a> for <a href='http://www.cinta.net/' style='color:#ff86a5'>Cinta</a> | <a href='http://www.jewelrymall.com/watches/' style='color:#ff86a5'>Discount Watch</a></div></center>
Jangan merubah susunan yang ada, apalagi menghilangkan. Kita harus menghormati karya orang lain dan harus kita akui bahwa itu adalah karya orang lain. Jika sahabat ingin menambahkan barisannya, itu tidak masalah.
Cara untuk menambahkannnya cukup mudah. Misalnya ingin menambahkan link dengan nama GAPTEK maka langkahnya kita tambahkan kode seperti di bawah ini
<a href='http://kumpulgaptek.blogspot.com/watches/' style='color:#ff86a5'>GAPTEK</a>
Kode di atas kita pasang setelah "Discount Watch" seperti ini
<center><div style='height:20px;margin-top:9px;margin-bottom:5px;'>
Powered by <a href='http://www.blogger.com' style='color:#ff86a5'>Blogger</a> <span style='color:#999999'>|</span> <a href='http://zenverse.net/lunated-theme/' title='Lunated - Free Wordpress Theme with Premium Features'><span style='border-bottom:1px solid #616161;'>Lunated</span></a> designed by <a href='http://zenverse.net/' style='color:#ff86a5' title='ZenVerse - Web Design and Development'>ZenVerse</a> | Converted to <a href='http://www.wordpresstoblogger.com' style='color:#ff86a5'>Blogger Templates</a> and <a href='http://www.wp2b.com' style='color:#ff86a5'>Blogger Themes</a> for <a href='http://www.cinta.net/' style='color:#ff86a5'>Cinta</a> | <a href='http://www.jewelrymall.com/watches/' style='color:#ff86a5'>Discount Watch</a> | <a href='http://kumpulgaptek.blogspot.com/watches/' style='color:#ff86a5'>GAPTEK</a> </div></center>
Bagi sahabat Gaptek yang mau menerjuni dunia ngeblog, Insya Allah dengan mengikuti langkah pengolahan template mentah dari tahap 1 s/d 5 ini, sahabat bisa mengaplikasikannya untuk jenis-jenis template lainnya. Memang, setiap template itu berbeda kode HTML-nya, tapi memiliki kemiripan letak dan mode pengeditan.
Bagi yang mau mengembangkan pembahasan pengeditan kode template yang kita bahas, ada bebera hal yang mungkin bias membantu
seluruh kode gambar yang bisa kita akses bias kita ganti. Buatlah renovasi gambarnya dengan menggunakan photoshop dan upload gambarnya di photobucket. Setelah itu ambil kode link gambarnya dan letakkan pada link gambar yang mau di ubah.
Mengubah background atas tampilan blog
Kode yang harus sahabat cari
/* header */
#header {
width:1000px;
background-image:url(http://www.opendrive.com/files/6869275_ADSCD/pagebg.gif);
background-repeat:no-repeat;
height:200px;
position:relative;
}
Bagi sahabat Gaptek yang mau menerjuni dunia ngeblog, Insya Allah dengan mengikuti langkah pengolahan template mentah dari tahap 1 s/d 5 ini, sahabat bisa mengaplikasikannya untuk jenis-jenis template lainnya. Memang, setiap template itu berbeda kode HTML-nya, tapi memiliki kemiripan letak dan mode pengeditan.
Bagi yang mau mengembangkan pembahasan pengeditan kode template yang kita bahas, ada bebera hal yang mungkin bias membantu
seluruh kode gambar yang bisa kita akses bias kita ganti. Buatlah renovasi gambarnya dengan menggunakan photoshop dan upload gambarnya di photobucket. Setelah itu ambil kode link gambarnya dan letakkan pada link gambar yang mau di ubah.
Mengubah background atas tampilan blog
Kode yang harus sahabat cari
/* header */
#header {
width:1000px;
background-image:url(http://www.opendrive.com/files/6869275_ADSCD/pagebg.gif);
background-repeat:no-repeat;
height:200px;
position:relative;
}
Link gambar yang berwarna kuning sahabat ganti dengan gambar pilihan sahabat atau mau di tambah gambar dan tulisan. Edit di photoshop dan upload di photobucket. Ukuran gambar jangan berubah yaitu 1000 x 249 px dengan jenis gambar gif. Kalau mau mengedit dengan gambar yang sama, ubah gambarnya jadi jpg dulu dengan menggunakan Paint yang sudah tersedia di windows. Setelah di edit, biar sama save as dalam bentuk gif.
Untuk mengubah tampilan search atau kotak pencarian pada tampilan blog silahkan cari kode seperti ini
.topsearchbg {
position:absolute;
top:0px;
left:0;
width:306px;
height:37px;
background-image:url(http://www.opendrive.com/files/6869296_wnzc8/searchbg.gif);
}
Silahkan copy link dan paste pada jendela browser amak sahabat akan melihat tampilan gambarnya. Lakukan langkah yang sama dengan yang sebelumnya.
Untuk melakukan perubahan-perubahan lain pada template, silahkan cari kode-kode seperti di atas dan lakukanlah pengeditan dengan langkah yang sama.
Untuk mengubah tampilan search atau kotak pencarian pada tampilan blog silahkan cari kode seperti ini
.topsearchbg {
position:absolute;
top:0px;
left:0;
width:306px;
height:37px;
background-image:url(http://www.opendrive.com/files/6869296_wnzc8/searchbg.gif);
}
Silahkan copy link dan paste pada jendela browser amak sahabat akan melihat tampilan gambarnya. Lakukan langkah yang sama dengan yang sebelumnya.
Untuk melakukan perubahan-perubahan lain pada template, silahkan cari kode-kode seperti di atas dan lakukanlah pengeditan dengan langkah yang sama.
[__Belajar Word 2003
[1]
Currently have 0 komentar: