Discussion Board : mengubah alamat situs WordPress.com, sebagai contoh dari www.alamatlama.wordpress.com menjadi www.alamatbaru.wordpress.com
Requirement : just your WordPress.com Account
Tidak suka atau bosan dengan alamat WordPress anda, namun terlanjur memiliki banyak postingan dialamat wordpress yang lama tersebut?
Mungkin anda pernah-atau mungkin akan sering mengalami hal ini. Saya sendiri sering mengalaminya, heheheh.
Nah ternyata WordPress baik sekali dengan memberikan kita layanan dimana kita dapat mengubah alamat dari wordpress.com kita. Misal alamat wordpress kita adalah –> www.littleflow3r.wordpress.com
Dan kita ingin mengganti bagian littleflow3r tersebut. Misal, menjadi www.kembangkecil.wordpress.comHere we go, then.
1. Login ke halaman wordpress anda. Pada menu dashboard, pilih My Blog.
2.
Sorot ke alamat wordpress yang ingin anda ganti (simply letakkan cursor mouse di dekat alamat wordpress anda dalam daftar), menu Change Your Address akan muncul. Klik pada menu tersebut.
3. Anda akan langsung diarahkan menuju halaman WordPress.com Blog / Site Change Address.
4. Baca terlebih dahulu petunjuk yang ada dihalaman ini, karena merupakan ketentuan yang diberikan WordPress ketika anda memutuskan untuk mengubah alamat WordPress.
5. Isikan alamat baru anda di field New Blog/ Site Address, kemudian tuliskan sekali lagi di field Confirm.
6. Pada option Matching username, pilih Option no jika anda tidak ingin mengganti username anda (tetap menggunakan username yang lama — i recommend this one), dan pilih option pertama atau kedua (sesuaikan keinginan) apabila menginginkan username baru untuk disesuaikan dengan alamat wordpress anda yang baru.
7. Pada field Discard Current Address, centang jika anda ingin men-disable alamat lama wordpress anda secara permanen. Jika anda berkemungkinan ingin menggunakan lagi alamat WordPress anda yang lama suatu saat nanti, jangan centang checkbox nya.
Tuesday, May 24, 2011
Monday, May 23, 2011
Read More di Blog
"Buat yang suka utak – atik blogger yang pake’ blogspot, mungkin kalian agak kesusahan untuk membuat sebuah tampilan artikel yang panjang secara efisien. Masalah utamanya secara umum, blogger akan menampilkan seluruh teks artikel yang diposting. Bayangin aja deh kalo kita posting 5 artikel aja yang cukup panjang, truz kita mau melihat artikel yang terakhir ato yang paling bawah, wadowh... mesti bersusah payah men-scroll layar nya berkali – kali neh. .....
Huff…malah-malah pengunjung jadi mlaz liat blog kita…bnr g?
Gimana cara menampilkan sebagian kecil artikel (beberapa baris teratas) kemudian disusul dengan teks "Read More" atao "lanjut" atao “selengkapnya”. Baru setelah pengunjung tertarik peingin baca berita lebih lanjut, dia tinggal klik aja tuh teks "Read More" or "Lanjut" or “Selengkapnya” tadi.
A. MEMASANG KODE PADA TEMPLATE
"Cara menambahkan Read More" dalam artikel berbasis Blogspot :
1. Buka template klik link: Layout-> Edit HTML -> Kasih tanda cek pada CheckBox "expand widget tempate"
2. Letakkan kode berikut PERSIS di atasnya nya kode (Pengin cepat, gunakan fasilitas Find pada browser kamu).
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
3. Klo sudah, cari kode berikut:
<p><data:post.body/></p>
(kalo g’ ada, cari aja kode: <data:post.body/>- tanpa embel-embel: <p> maupun </p>
Letakan kode berikut persis di bawahnya:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
4. Klik Simpan. Selesai.
5. Pergilah ke halaman SETTING, dengan klik link SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Tengoklah apakah sudah ada isi kode berikut. Jika belum isi saja kodenya secara manual. Kode dimaksud adalah ini nih....:
<span class="fullpost">
</span>
Trus, jangan lupa simpan hasil SETTING atao PENGATURAN-mu.
Nah... sekarang gimana cara menggunakannya??
Klo yang ini musti kamu lakukan setiap kali kamu posting berita. Tapi kodenya cuma dikit kok, dan kamu bisa lakukan dengan teknik copy-paste.
B. PENERAPAN / PENGGUNAAN
Misal artikel posting kamu yang ASLI nya begini: (tanpa tanda kutip)
"Pagi ini udara kembali sejuk seperti semula. Pepohonan mau kembali menggoyangkan daunnya. Jalanan kembali ramai seperti dahulu. Awanpun kembali cerah seperti 2 tahun yang lalu. Mungkin suasana seperti inilah yang didambakan seseorang. Tapi tidak buatku, hatiku menyangkal semua itu. Walaupun awan menampakkan kecerahannya, tetapi awan dalam hatiku terasa gelap. Aku tak ingin suasana ini terulang lagi. Aku juga tak mau kejadian itu terulang kembali."
Trus kalo kamu tambahi SEDIKIT KODE -lihat yang diberi warna kuning- dalam Modus Edit Html BUKAN Compose menjadi begini: (tanpa tanda kutip)
"Pagi ini udara kembali sejuk seperti semula. Pepohonan mau kembali menggoyangkan daunnya. Jalanan kembali ramai seperti dahulu. Awanpun kembali cerah seperti 2 tahun yang lalu. Mungkin suasana seperti inilah yang didambakan seseorang. Tapi tidak buatku, hatiku menyangkal semua itu. <span class="fullpost"> Walaupun awan menampakkan kecerahannya, tetapi awan dalam hatiku terasa gelap. Aku tak ingin suasana ini terulang lagi. Aku juga tak mau kejadian itu terulang kembali.</span>
"Pagi ini udara kembali sejuk seperti semula. Pepohonan mau kembali menggoyangkan daunnya. Jalanan kembali ramai seperti dahulu. Awanpun kembali cerah seperti 2 tahun yang lalu. Mungkin suasana seperti inilah yang didambakan seseorang. Tapi tidak buatku, hatiku menyangkal semua itu......... Read more"
Lalu teks:
" Walaupun awan menampakkan kecerahannya...."
akan disembunyikan......
Nah... keren dan ringkas kan...
Met Mencoba...!!!^_^
Huff…malah-malah pengunjung jadi mlaz liat blog kita…bnr g?
Gimana cara menampilkan sebagian kecil artikel (beberapa baris teratas) kemudian disusul dengan teks "Read More" atao "lanjut" atao “selengkapnya”. Baru setelah pengunjung tertarik peingin baca berita lebih lanjut, dia tinggal klik aja tuh teks "Read More" or "Lanjut" or “Selengkapnya” tadi.
A. MEMASANG KODE PADA TEMPLATE
"Cara menambahkan Read More" dalam artikel berbasis Blogspot :
1. Buka template klik link: Layout-> Edit HTML -> Kasih tanda cek pada CheckBox "expand widget tempate"
2. Letakkan kode berikut PERSIS di atasnya nya kode (Pengin cepat, gunakan fasilitas Find pada browser kamu).
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
3. Klo sudah, cari kode berikut:
<p><data:post.body/></p>
(kalo g’ ada, cari aja kode: <data:post.body/>- tanpa embel-embel: <p> maupun </p>
Letakan kode berikut persis di bawahnya:
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>
4. Klik Simpan. Selesai.
5. Pergilah ke halaman SETTING, dengan klik link SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Tengoklah apakah sudah ada isi kode berikut. Jika belum isi saja kodenya secara manual. Kode dimaksud adalah ini nih....:
<span class="fullpost">
</span>
Trus, jangan lupa simpan hasil SETTING atao PENGATURAN-mu.
Nah... sekarang gimana cara menggunakannya??
Klo yang ini musti kamu lakukan setiap kali kamu posting berita. Tapi kodenya cuma dikit kok, dan kamu bisa lakukan dengan teknik copy-paste.
B. PENERAPAN / PENGGUNAAN
Misal artikel posting kamu yang ASLI nya begini: (tanpa tanda kutip)
"Pagi ini udara kembali sejuk seperti semula. Pepohonan mau kembali menggoyangkan daunnya. Jalanan kembali ramai seperti dahulu. Awanpun kembali cerah seperti 2 tahun yang lalu. Mungkin suasana seperti inilah yang didambakan seseorang. Tapi tidak buatku, hatiku menyangkal semua itu. Walaupun awan menampakkan kecerahannya, tetapi awan dalam hatiku terasa gelap. Aku tak ingin suasana ini terulang lagi. Aku juga tak mau kejadian itu terulang kembali."
Trus kalo kamu tambahi SEDIKIT KODE -lihat yang diberi warna kuning- dalam Modus Edit Html BUKAN Compose menjadi begini: (tanpa tanda kutip)
"Pagi ini udara kembali sejuk seperti semula. Pepohonan mau kembali menggoyangkan daunnya. Jalanan kembali ramai seperti dahulu. Awanpun kembali cerah seperti 2 tahun yang lalu. Mungkin suasana seperti inilah yang didambakan seseorang. Tapi tidak buatku, hatiku menyangkal semua itu. <span class="fullpost"> Walaupun awan menampakkan kecerahannya, tetapi awan dalam hatiku terasa gelap. Aku tak ingin suasana ini terulang lagi. Aku juga tak mau kejadian itu terulang kembali.</span>
"Pagi ini udara kembali sejuk seperti semula. Pepohonan mau kembali menggoyangkan daunnya. Jalanan kembali ramai seperti dahulu. Awanpun kembali cerah seperti 2 tahun yang lalu. Mungkin suasana seperti inilah yang didambakan seseorang. Tapi tidak buatku, hatiku menyangkal semua itu......... Read more"
Lalu teks:
" Walaupun awan menampakkan kecerahannya...."
akan disembunyikan......
Nah... keren dan ringkas kan...
Met Mencoba...!!!^_^
Belajar CSS
Wah…akhirnya kita bisa melanjutkan belajar membuat website lanjutan. Dalam hal ini, kita akan mulai menggunakan CSS. Sebelum kita ke aplikasi CSS-nya, ikut penjelasan CSS berikut ini dulu ya…!!!
A. Cascading Style Sheet
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga jenis style:
1. Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Untuk lebih menspesifikasikan pemberian style, kita bisa menggunakan atribut class atau id. Tekniknya, class dinotasikan dengan titik (.); id dinotasikan dengan pagar (#).
2. Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Pendekatan ini mirip dengan embedded, kecuali style-nya diletakkan di file terpisah dan berekstensi css. Pemisahan style ini juga menjadikan pendekatan ini sangat efektif dan efisien, khususnya ketika akan digunakan oleh lebih dari satu dokumen.
3. Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
B. Tipografi
Berkaitan dengan visualisasi teks, ada beragam style yang bisa kita berikan untuk menghasilkan bentuk sesuai keinginan.
1. Style Font
Ada beragam style yang bisa diterapkan pada teks, misalnya bentuk, ukuran, dan warna.
2. Mengatur Spasi
Properti style line-height memungkinkan kita untuk mengubah spasi standar dari suatu teks.
3. Initial Cap
Jika diperlukan, kita bisa mengatur huruf pertama dari paragraph merepresentasikan huruf besar (initial cap) seperti layaknya di majalah
C. Elemen-Elemen Halaman
CSS dapat digunakan untuk memformat elemen-elemen HTML apa pun, misalnya border dan padding.
1. Border
Properti border merepresentasikan batas dari suatu bidang area, misalnya paragraf. Properti ini menyediakan beberapa style yang bisa dimanfaatkan untuk membuat variasi border.
2. Padding
Seperti halnya di tabel, padding berfungsi untuk menetapkan jarak antara border dengan konten.
D. Link
CSS juga memungkinkan kita untuk mengatur style maupun perilaku dari suatu link. Sebagai contoh, kita bisa menghilangkan garis bawah yang normalnya ada di setiap link.
E. List
Kemampuan menarik lainnya dari CSS adalah memformat list menjadi struktur menu yang elegan.
F. Menggunakan Division
Pendekatan yang efektif untuk memformat elemen-elemen HTML—termasuk juga division—adalah dengan menggunakan CSS.
1. Ukuran Area
Seperti di kebanyakan elemen, kita bisa memanfaatkan atribut width dan height untuk menspesifikasikan ukuran area. Selain itu, atribut-atribut seperti padding dan margin juga bisa dimanfaatkan di sini.
2. Format Font
Di dalam suatu area, kita juga bisa menerapkan style spesifik yang tentunya akan terisolasi (unik) dengan keseluruhan area.
3. Posisi Area
Seperti halnya paragraf, elemen-elemen div akan menghasilkan area secara berurutan dari atas ke bawah. Adapun jika dikehendaki, kita bisa mengatur posisi area secara fleksibel dengan memanfaatkan atribut float CSS.
G. Membuat Kerangka
Kerangka dasar merupakan kulit luar atau pembungkus (wrapper) yang umumnya digunakan untuk menampung keseluruhan desain. Sederhananya, karakteristik utama dari kerangka ini adalah terletak di tengah web browser. Untuk menempatkan area kerangka berada di tengah—se cara horizontal—browser, kita dapat memanfaatkan atribut margin. Tekniknya, tetapkan nilai auto pada margin, di mana akan mengakibatkan posisi secara otomatis diatur di tengah.
H. Desain Layout
Setelah mempersiapkan wrapper, langkah selanjutnya adalah membuat desain layout. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style terpisah.
Huff…akhirnya selesai juga ya teorinya…!!! Hehehe….
Ok…sekarang kita coba buat aplikasinya y…!!
sekarang kita akan membuat website dengan CSS secara sederhana dulu y…!!!
Sebelum kita menuliskan kode HTML-nya, kita tulis dulu CSS-nya….
Coba tuliskan source code berikut ini ya…:
#wrapper
{ margin:auto;
width:980px;
border:2px solid white;
}
#header
{ height:80px;
border:1px solid orange;
}
#inner
{ float:left;
margin:5px 0;
border:1px solid white;
}
#footer
{ clear:both;
height:50px;
border:1px solid purple;
}
#sidebar
{ float:left;
margin-right:10px;
width:200px;
height:400px;
border:1px solid blue;
}
#content
{ float:left;
width:760px;
height:400px;
border:1px solid white;
}
#content-top
{ clear:both;
margin:auto;
width:760px;
height:120px;
border:1px solid red;
}
#content-main
{ float:left;
margin:auto;
width:480px;
height:260px;
border:1px solid green;
}
#content-right
{ float:right;
margin:auto;
width:260px;
height:270px;
border: 1px solid yellow;
}
Kemudian simpan dengan nama “style.css”
Setelah kita menuliskan css tersebut, sekarang coba tuliskan kode HTML berikut ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
<div id="content-top">
Top Content
</div>
<div id="content-main">
Main Content
</div>
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
Maka tampilannya akan seperti ini :
Itu masih sederhana lho…
Sekarang kita coba yang agak rumit ya…!!!
seperti biasa, sebelum membuat kode html-nya, kita buat dulu css-nya, seperti berikut ini :
* { margin: 0; }
body { margin:5px auto; padding:0; font:0.72em/150% arial; }
#wrapper
{ margin:auto;
width:980px;}
#header
{ height:80px;
margin:0px auto;
background:#000;}
#header-content
{height:70px;
margin:auto;
background:#fff url(w90.jpg);}
#menu-top
{ font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;}
#logo
{ float:left;
margin:10px 10px 10px 50px;
height:50px;}
#site-title h2
{ float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'Verdana';
font-weight:
bold;}
#search
{ clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;}
#inner
{ float:left;
margin:0px;}
#footer
{ clear:both;
height:60px;
background:#99FF33;}
#footer p { text-align:center;}
#sidebar
{ float:left;
width:200px;
height:400px;
background-color:#FFCC66}
#content
{ float:right;
width:780px;
height:400px;
background:#FFF}
#content-top
{ clear:both;
margin:auto;
width:780px;
height:170px;
background-image:url(paper.jpg)}
#content-main
{ float:left;
margin:auto;
width:480px;
height:240px;}
#content-main p, h3
{ padding: 10px 20px 0px 20px;
text-align:justify;}
.style1 {font-size:x-small}
#content-main hr{ width:440px;
color:#FF9900;
margin: 10px 20px 0px 20px;}
#content-right
{ float:right; margin:10px auto; width:260px;
border: 2px solid green; background:#99FF33}
#content-right h3{ padding: 10px 20px 0px 20px;
text-align:justify;}
#content-right ul{ padding: 10px 20px 20px 40px;
list-style:square;}
#leftmenu ul { width:200px; list-style-type:none;
padding:0; margin:0;}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px;
text-decoration:none;}
#leftmenu a { padding: 5px 0px 5px 15px; display:block;
background:#6cae15 no-repeat left center; margin: 0px 0px 1px; color:#000 }
#leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}
Simpan dengan nama “layout.css”
Penamaan sangat berpengaruh dengan kode html yang akan kita tulis berikutnya. Tulis kode html berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="images[2].jpg" width="50" alt ="0"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Presentasi dari TecQuipment Ltd, UK</h3>
<hr />
<p class="style1">
Selasa, 02 Maret 2010
</p>
<p>
Hari Selasa kemarin (16/02/2010) Universitas Negeri Malang kedatangan tamu dari TecQuipment Ltd, United Kingdom. Tamu dari perusahaan produsen peralatan pendukung pembelajaran keteknikan ini bermaksud menjalin hubungan kerjasama sekaligus mempresentasikan produk-produknya. Secara kebetulan, lokasi kegiatan dipusatkan di Jurusan Teknik Elektro, tepatnya di Lab. Multimedia.Kegiatan presentasi selain dihadiri bapak ibu dosen Jurusan Teknik Elektro juga dihadiri oleh beberapa undangan dari jurusan-jurusan lain. [...]
</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Lomba Fotografi</a></li>
<li><a href="#">Pelantikan KORPS ASISTEN</a></li>
<li><a href="#">Lomba Desain Grafis</a></li>
<li><a href="#">Seminar Nasional</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>© sushi_hana2@yahoo.com</b></p>
</div>
</div>
</body>
</html>
Maka akan muncul seperti ini :
A. Cascading Style Sheet
Cascading style sheet (CSS) merupakan sekumpulan aturan yang menyatakan bagaimana style diaplikasikan ke tag-tag HTML di dalam dokumen. Rekomendasi CSS menguraikan tiga jenis style:
1. Embedded: properti style diletakkan di dalam satu blok di dokumen HTML.
Untuk lebih menspesifikasikan pemberian style, kita bisa menggunakan atribut class atau id. Tekniknya, class dinotasikan dengan titik (.); id dinotasikan dengan pagar (#).
2. Inline: properti style diterapkan secara langsung per baris atau per elemen HTML.
Pendekatan ini mirip dengan embedded, kecuali style-nya diletakkan di file terpisah dan berekstensi css. Pemisahan style ini juga menjadikan pendekatan ini sangat efektif dan efisien, khususnya ketika akan digunakan oleh lebih dari satu dokumen.
3. Linked: properti style diletakkan di file berekstensi css dan dikaitkan dengan dokumen HTML.
B. Tipografi
Berkaitan dengan visualisasi teks, ada beragam style yang bisa kita berikan untuk menghasilkan bentuk sesuai keinginan.
1. Style Font
Ada beragam style yang bisa diterapkan pada teks, misalnya bentuk, ukuran, dan warna.
2. Mengatur Spasi
Properti style line-height memungkinkan kita untuk mengubah spasi standar dari suatu teks.
3. Initial Cap
Jika diperlukan, kita bisa mengatur huruf pertama dari paragraph merepresentasikan huruf besar (initial cap) seperti layaknya di majalah
C. Elemen-Elemen Halaman
CSS dapat digunakan untuk memformat elemen-elemen HTML apa pun, misalnya border dan padding.
1. Border
Properti border merepresentasikan batas dari suatu bidang area, misalnya paragraf. Properti ini menyediakan beberapa style yang bisa dimanfaatkan untuk membuat variasi border.
2. Padding
Seperti halnya di tabel, padding berfungsi untuk menetapkan jarak antara border dengan konten.
D. Link
CSS juga memungkinkan kita untuk mengatur style maupun perilaku dari suatu link. Sebagai contoh, kita bisa menghilangkan garis bawah yang normalnya ada di setiap link.
E. List
Kemampuan menarik lainnya dari CSS adalah memformat list menjadi struktur menu yang elegan.
F. Menggunakan Division
Pendekatan yang efektif untuk memformat elemen-elemen HTML—termasuk juga division—adalah dengan menggunakan CSS.
1. Ukuran Area
Seperti di kebanyakan elemen, kita bisa memanfaatkan atribut width dan height untuk menspesifikasikan ukuran area. Selain itu, atribut-atribut seperti padding dan margin juga bisa dimanfaatkan di sini.
2. Format Font
Di dalam suatu area, kita juga bisa menerapkan style spesifik yang tentunya akan terisolasi (unik) dengan keseluruhan area.
3. Posisi Area
Seperti halnya paragraf, elemen-elemen div akan menghasilkan area secara berurutan dari atas ke bawah. Adapun jika dikehendaki, kita bisa mengatur posisi area secara fleksibel dengan memanfaatkan atribut float CSS.
G. Membuat Kerangka
Kerangka dasar merupakan kulit luar atau pembungkus (wrapper) yang umumnya digunakan untuk menampung keseluruhan desain. Sederhananya, karakteristik utama dari kerangka ini adalah terletak di tengah web browser. Untuk menempatkan area kerangka berada di tengah—se cara horizontal—browser, kita dapat memanfaatkan atribut margin. Tekniknya, tetapkan nilai auto pada margin, di mana akan mengakibatkan posisi secara otomatis diatur di tengah.
H. Desain Layout
Setelah mempersiapkan wrapper, langkah selanjutnya adalah membuat desain layout. Sebagai contoh, kita akan membuat layout standar (header, menu, content, dan footer) dengan style terpisah.
Huff…akhirnya selesai juga ya teorinya…!!! Hehehe….
Ok…sekarang kita coba buat aplikasinya y…!!
sekarang kita akan membuat website dengan CSS secara sederhana dulu y…!!!
Sebelum kita menuliskan kode HTML-nya, kita tulis dulu CSS-nya….
Coba tuliskan source code berikut ini ya…:
#wrapper
{ margin:auto;
width:980px;
border:2px solid white;
}
#header
{ height:80px;
border:1px solid orange;
}
#inner
{ float:left;
margin:5px 0;
border:1px solid white;
}
#footer
{ clear:both;
height:50px;
border:1px solid purple;
}
#sidebar
{ float:left;
margin-right:10px;
width:200px;
height:400px;
border:1px solid blue;
}
#content
{ float:left;
width:760px;
height:400px;
border:1px solid white;
}
#content-top
{ clear:both;
margin:auto;
width:760px;
height:120px;
border:1px solid red;
}
#content-main
{ float:left;
margin:auto;
width:480px;
height:260px;
border:1px solid green;
}
#content-right
{ float:right;
margin:auto;
width:260px;
height:270px;
border: 1px solid yellow;
}
Kemudian simpan dengan nama “style.css”
Setelah kita menuliskan css tersebut, sekarang coba tuliskan kode HTML berikut ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
sidebar
</div>
<div id="content">
<div id="content-top">
Top Content
</div>
<div id="content-main">
Main Content
</div>
<div id="content-right">
Right Content
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
Maka tampilannya akan seperti ini :
Itu masih sederhana lho…
Sekarang kita coba yang agak rumit ya…!!!
seperti biasa, sebelum membuat kode html-nya, kita buat dulu css-nya, seperti berikut ini :
* { margin: 0; }
body { margin:5px auto; padding:0; font:0.72em/150% arial; }
#wrapper
{ margin:auto;
width:980px;}
#header
{ height:80px;
margin:0px auto;
background:#000;}
#header-content
{height:70px;
margin:auto;
background:#fff url(w90.jpg);}
#menu-top
{ font-size:small;
height:20px;
float:right;
padding:0px 50px;
font-weight:bold;}
#logo
{ float:left;
margin:10px 10px 10px 50px;
height:50px;}
#site-title h2
{ float:left;
padding:0px 10px;
height:30px;
margin:20px 0px;
font:2.1em/100% 'Verdana';
font-weight:
bold;}
#search
{ clear:right;
float:right;
margin:20px 50px 0px auto;
height:30px;
font-weight:bold;}
#inner
{ float:left;
margin:0px;}
#footer
{ clear:both;
height:60px;
background:#99FF33;}
#footer p { text-align:center;}
#sidebar
{ float:left;
width:200px;
height:400px;
background-color:#FFCC66}
#content
{ float:right;
width:780px;
height:400px;
background:#FFF}
#content-top
{ clear:both;
margin:auto;
width:780px;
height:170px;
background-image:url(paper.jpg)}
#content-main
{ float:left;
margin:auto;
width:480px;
height:240px;}
#content-main p, h3
{ padding: 10px 20px 0px 20px;
text-align:justify;}
.style1 {font-size:x-small}
#content-main hr{ width:440px;
color:#FF9900;
margin: 10px 20px 0px 20px;}
#content-right
{ float:right; margin:10px auto; width:260px;
border: 2px solid green; background:#99FF33}
#content-right h3{ padding: 10px 20px 0px 20px;
text-align:justify;}
#content-right ul{ padding: 10px 20px 20px 40px;
list-style:square;}
#leftmenu ul { width:200px; list-style-type:none;
padding:0; margin:0;}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active { padding-left:15px;
text-decoration:none;}
#leftmenu a { padding: 5px 0px 5px 15px; display:block;
background:#6cae15 no-repeat left center; margin: 0px 0px 1px; color:#000 }
#leftmenu a:hover { background:#5e9711 no-repeat left center; color:#fff}
Simpan dengan nama “layout.css”
Penamaan sangat berpengaruh dengan kode html yang akan kita tulis berikutnya. Tulis kode html berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="header-content">
<div id="menu-top">
Home | Sitemap | RSS | Contact | About Us
</div>
<div id="logo">
<img src="images[2].jpg" width="50" alt ="0"/>
</div>
<div id="site-title">
<h2>TEKNIK ELEKTRO</h2>
</div>
<div id="search">
Search : <input name="q" size="20" type="text"/>
</div>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
<li><a href="#">Download</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="content-top">
</div>
<div id="content-main">
<h3>Presentasi dari TecQuipment Ltd, UK</h3>
<hr />
<p class="style1">
Selasa, 02 Maret 2010
</p>
<p>
Hari Selasa kemarin (16/02/2010) Universitas Negeri Malang kedatangan tamu dari TecQuipment Ltd, United Kingdom. Tamu dari perusahaan produsen peralatan pendukung pembelajaran keteknikan ini bermaksud menjalin hubungan kerjasama sekaligus mempresentasikan produk-produknya. Secara kebetulan, lokasi kegiatan dipusatkan di Jurusan Teknik Elektro, tepatnya di Lab. Multimedia.Kegiatan presentasi selain dihadiri bapak ibu dosen Jurusan Teknik Elektro juga dihadiri oleh beberapa undangan dari jurusan-jurusan lain. [...]
</p>
</div>
<div id="content-right">
<h3>Events</h3>
<ul>
<li><a href="#">Lomba Fotografi</a></li>
<li><a href="#">Pelantikan KORPS ASISTEN</a></li>
<li><a href="#">Lomba Desain Grafis</a></li>
<li><a href="#">Seminar Nasional</a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<br />
<p><b>© sushi_hana2@yahoo.com</b></p>
</div>
</div>
</body>
</html>
Maka akan muncul seperti ini :
Friday, May 20, 2011
Jaga Kesehatan Anda Saat Bekerja Di Depan Komputer
Menjaga kesehatan selama anda bekerja di depan komputer sangatlah penting, jangan sampai gara-gara anda bekerja di depan komputer malah mengganggu kesehatan anda.
Berbagai macam penyakit yang bisa di timbulkan jika anda mengabaikan pentingnya hal ini :
1. Sakit punggung
Hampir semua orang yang menggunakan komputer setiap hari selama berjam-jam pernah mengalami sakit punggung. Posisi duduk membuat beban yang cukup besar pada tulang pungggung Anda. Jadi, jika Anda duduk berjam-jam dan jarang berjalan atau berdiri risiko sakit mengalami sakit punggung sangat besar. Postur tubuh yang benar adalah salah satu kunci untuk mencegah sakit punggung. Idealnya bahu mengarah ke belakang dan kepala lurus ke depan. Jangan duduk membungkuk dan berjalanlah setiap dua jam untuk menghindari sakit punggung.
2. Gangguan mata
Berjam-jam di depan komputer bisa membuat mata kering, stres dan iritasi. Radiasi dari monitor juga bisa membuat penglihatan mengalami gangguan. Untuk itu, pastikan monitor komputer Anda dilengkapi dengan pelindung radiasi. Atur juga warna monitor agar tidak membuat mata tegang. Pastikan pencahayaan baik, sehingga mata merasa nyaman. Kedipkan mata sesering mungkin agar bola mata terlubrikasi dan terhindar dari mata kering.
3. Nyeri tangan
Banyak yang mengkhawatirkan komputer bisa memicu carpal tunnel syndrome, tetapi peneliti dari Harvard Medical School membantahnya beberapa tahun lalu. Walaupun begitu, penggunaan keyboard dan mouse dalam waktu lama bisa menyebabkan kesemutan, nyeri hingga mati rasa. Untuk menghindarinya, pastikan posisi keyboard dan mouse benar.
Dan masih ada lagi ...
==> Berikut adalah beberapa tips sehat untuk anda yang bekerja menggunakan banyak waktu di depan komputer :
1. Setting meja dan kursi kerja anda agar lebih ergonomis. Pastikan Anda memiliki kursi yang nyaman dan mendukung bahwa anda diposisikan dengan baik untuk mengetik. Jangan meletakkan printer atau perangkat keras yang sering anda gunakan terlalu jauh. Perhatikan juga jarak monitor anda.
2. Perhatikan sirkulasi udara ruangan kerja anda. Buatlah senyaman mungkin. Dengan sirkulasi udara yang baik anda akan di buat jauh lebih konsentrasi.
3. Jangan sekali kali makan atau minum diatas meja kerja anda. Ini dapat membahayakan komputer atau laptop anda. Bila terdapat makanan yang tumpah akan menyebabkan tumbuhnya bakteri di atas meja kerja anda. Jelas mengganggu bukan?
4. Bersihkan mouse, keyboard dan perangkat lainnya secara berkala. Bersihkan perangkat tersebut agar jauh dari debu dan bakteri.
5. Istirahatlah sejenak. Jika anda merasa cukup lelah ada baiknya istirhatlah sejenak. Dengan istirahat diharapkan tenaga akan pulih kembali dan lakukan gerakan–gerakan ringan untuk merenggangkan kepenatan.
6. Rileks sejenak. Bila komputer anda tersambung dengan internet cobalah buka website favorit anda pada saat istirahat. Atau sekedar mencari tips-tips sehat, bisa juga mencari resep makanan favorit anda.
7. Buat sebaik mungkin rencana kerja anda pada hari yang bersangkutan. Bisa juga untuk beberapa hari selanjutnya.
8. Bila sudah terlalu penat sebaiknya tunda pekerjaan anda dan istirahatlah. Bila di teruskan akan menggangu konsentrasi pekerjaan anda.
9. Bekerjalah Dalam Ruangan Yang Cukup Cahaya.
Perhatikan pencahayaan dalam ruang kerja anda, Jangan bekerja dalam ruangan yang terlalu terang dan menyilaukan mata. Gunakan kerai untuk mengatur cahaya dari jendela. Letakkan lampu di atas kepala. Hindari anda menatap cahayanya secara langsung. Sebaliknya, jangan pula bekerja dalam ruangan yang terlalu gelap atau redup. Usahakan agar ruangan anda cukup terang agar mata anda tidak bekerja terlalu keras.
Sekedar berbagi tips ringan. Bila anda merasa tips ini bermanfaat silahkanberkomentar ya :-)
Sekedar berbagi tips ringan. Bila anda merasa tips ini bermanfaat silahkanberkomentar ya :-)
Tentukan Target Bisnis Anda Sekarang Juga !!!
Banyak orang yang bingung saat memulai bisnis internet, apa yang bisa dan harus saya lakuakan pada bisnis internet saya. Ketika banyak sekali tawaran dari iklan2 PPC atau iklan di facebook mengenai bisnis internet, such as : “Make Money FAST, duduk diam datang duit and another tukang kecap.”
Well, sebelum anda mulai terombang ambing..Saya coba jawab pertanyaan itu kali ini. Darimana saya harus mulai? jawabannya : dari diri anda sendiri. Tentukan Target Bisnis Anda Sekarang! Apa sih yang mau anda capai? 3 tahun kedepan ingin sesukses apa anda? Target yang telah anda capai harus dibuat se-spesifik mungkin. Lebih baik hindari target yang seperti ini : “saya target 10.000.000 perbulan secara stabil mulai tahun depan!”
Well, sebelum anda mulai terombang ambing..Saya coba jawab pertanyaan itu kali ini. Darimana saya harus mulai? jawabannya : dari diri anda sendiri. Tentukan Target Bisnis Anda Sekarang! Apa sih yang mau anda capai? 3 tahun kedepan ingin sesukses apa anda? Target yang telah anda capai harus dibuat se-spesifik mungkin. Lebih baik hindari target yang seperti ini : “saya target 10.000.000 perbulan secara stabil mulai tahun depan!”
Tahun depan itu kapan? ada 12 bulan di tahun depan, bulan mana yang anda pilih? Tentukan sekarang. Misalkan sekarang anda bikin target sperti ini : “Bulan Januari Saya akan mencapai target minimal 10.000.000 perbulan” Setelah itu apa yang anda perbuat? Capai target itu dengan sebaik-baik anda bisa mengusahakannya. 10.000.000 perbulan atau dipersingkat 400.000 perhari.
"Apakah saya bisa?"
Ya! Anda harus bisa! Bisnis apa yang harus saya kerjakan?
Apa saja yang menjadi pilihan anda, fokuslah! Lebih baik anda menjadi ahli dalam 1 hal daripada belajar setengah-setengah pada banyak hal. Mahir pada 1 hal, baru pindah ke hal yang lain. That’s it!
Berusaha lah mencapai target anda, itu menjadi kunci kesuksesan anda. Sekian post singkat saya kali ini.
Berusaha lah mencapai target anda, itu menjadi kunci kesuksesan anda. Sekian post singkat saya kali ini.
Langkah Cerdas Membangun Bisnis sendiri
Membangun kerajaan bisnis sendiri mungkin jadi dambaan bagi banyak orang. Namun memulai sebuah usaha tidaklah semudah membalikan tangan. Ada hal-hal yang harus dipersiapkan, direncanakan dan dilaksanakan dengan ketekunan. Simak beberapa tips tentang bagaimana mempersiapkan membuka usaha sendiri berikut ini.
1. Melakukan Penelitian Pasar
1. Melakukan Penelitian Pasar
Penelitian merupakan hal integral dalam membangun bisnis. Lakukan penelitian di pasar dan tentukan siapa konsumen Anda. Tentukan mana yang akan jadi sasaran utama Anda atau konsumen Anda jadi lebih kecil. Pahami perbedaan antara pasar dan dimana Anda dapat meraih pelanggan.
2. Pilih Patner Yang Tepat
Jika Anda akan mencari rekan kerja, pastikan Anda sudah memilih yang tepat. Anda ingin seorang rekan kerja yang memiliki latar belakang bisnis atau pengarah bisnis. Beberapa pengalaman manajemen juga lebih disukai. Jika Anda ingin rekan kerja yang memenuhi latar belakang financial, mereka perlu memiliki kredit yang bagus atau kemampuan untuk menawarkan dukungan financial.
3. Jaminan Keuangan
Keuangan dapat jadi tantangan terbesar, tapi ada beberapa jenis pilihan yang tersedia untuk mendapatkan modal usaha. Ada dapat memilih ikut program pemerintah dalam membangun usaha kecil. Anda bisa mulai mengajukan pinjaman pada bank yang menangani usaha kecil dan mendapatkan pinjaman berjumlah kecil. Atau Anda bisa mengambil pinjaman pribadi di bank. Pilihan lain adalah mencari rekanan yang mau berinvestasi untuk memulai usaha bersama.
4. Ciptakan Image Atau Posisi Penjualan Yang Unik
Mulai dengan membangun keberadaan Anda, branding image Anda di public dan para pelanggan Ikatan ini masuk dalam posisi penjualan. Kembangkan tagline Anda dan temukan angel yang tepat yang mengena pada produk atau pelayanan tertuju pada pelanggan. Ciptakan sebuah image yang membuat Anda terpercaya di mata pelanggan Anda.
5. Berhenti Berpikir Mendapat Laba Secepat Kilat
Sangat, sangat jarang ada bisnis yang sukses dalam semalam. Kebanyakan bisnis membutuhkan waktu dan usaha, bahkan untuk mulai melihat hasilnya. Saat Anda memahami ini dan Anda tak seharusnya menaruh pengharapan secara berlebihan atau yang tak realistis. Persiapkan usaha, pengorbanan dan bahkan kemungkinan mengalami kerugian. Anda tak akan jadi kaya raya hanya dalam semalam, tapi Anda dapat membangun sebuah usaha yang menguntungkan secara bertahap.
3. Jaminan Keuangan
Keuangan dapat jadi tantangan terbesar, tapi ada beberapa jenis pilihan yang tersedia untuk mendapatkan modal usaha. Ada dapat memilih ikut program pemerintah dalam membangun usaha kecil. Anda bisa mulai mengajukan pinjaman pada bank yang menangani usaha kecil dan mendapatkan pinjaman berjumlah kecil. Atau Anda bisa mengambil pinjaman pribadi di bank. Pilihan lain adalah mencari rekanan yang mau berinvestasi untuk memulai usaha bersama.
4. Ciptakan Image Atau Posisi Penjualan Yang Unik
Mulai dengan membangun keberadaan Anda, branding image Anda di public dan para pelanggan Ikatan ini masuk dalam posisi penjualan. Kembangkan tagline Anda dan temukan angel yang tepat yang mengena pada produk atau pelayanan tertuju pada pelanggan. Ciptakan sebuah image yang membuat Anda terpercaya di mata pelanggan Anda.
5. Berhenti Berpikir Mendapat Laba Secepat Kilat
Sangat, sangat jarang ada bisnis yang sukses dalam semalam. Kebanyakan bisnis membutuhkan waktu dan usaha, bahkan untuk mulai melihat hasilnya. Saat Anda memahami ini dan Anda tak seharusnya menaruh pengharapan secara berlebihan atau yang tak realistis. Persiapkan usaha, pengorbanan dan bahkan kemungkinan mengalami kerugian. Anda tak akan jadi kaya raya hanya dalam semalam, tapi Anda dapat membangun sebuah usaha yang menguntungkan secara bertahap.
Langkah Mencapai Kesuksesan ...
· Ikuti perkembangan jaman. Bergabunglah dalam organisasi yang berkaitan dengan bisnis Anda. Banyak membaca dan gali informasi sebanyak mungkin. Internet akan banyak membantu Anda.
· Buat rencana keuangan. Catat semua pemasukan dan pengeluaran setiap harinya. Buat target jangka pendek dan jangka panjang. Jangan pernah menyerahkan kondisi keuangan pada nasib. Perhitungkan dengan matang.
· Perkirakan aliran uang tunai. Anda harus bisa memperkirakan aliran uang tunai, paling tidak tiga bulan ke depan. Jangan membuat anggarkan pengeluaran yang lebih besar dari itu.
· Bentuk dewan penasehat atau cari tenaga ahli, untuk memberi ide, saran atau kritik terhadap Anda dan produk yang ditawarkan. Mereka bisa berupa teman-teman atau anggota keluarga yang dipercaya.
· Jaga keseimbangan antara kerja, santai, dan keluarga. Tak perlu ngoyo, karena sesuatu yang dikerjakan dengan ngoyo, hasilnya tak akan maksimal. Lagi pula, badan dan otak butuh istirahat.
· Kembangkan jaringan (network). Tak ada salahnya berkenalan dan bergaul dengan orang-orang yang berhubungan atau bisa mendukung bisnis Anda. Siapa tahu ada ide yang bisa digali.
· Disiplin/motivasi. Aspek terberat dalam menjalankan usaha sendiri adalah disiplin atau motivasi untuk bekerja secara teratur. Untuk mengatasinya, buatlah daftar apa saja yang harus dikerjakan hari ini dan esok. Tentukan target yang harus dicapai dalam minggu ini.
· Selalu waspada dan siap. Rajin-rajin melakukan evaluasi terhadap pasar, produk dan sistem pemasaran. Kalau perlu, ubah cara kerja agar lebih efisien. Perbaiki cara pemasaran atau kualitas produk.
· Cintai pekerjaan Anda. Bagaimana akan sukses, jika Anda tak punya sense of belongin pada pekerjaan dan produk yang dihasilkan. Cintai pekerjaan dan produksi sendiri, dan uang akan mengikuti Anda.
· Jangan mudah menyerah. Para pengusaha sukses pun pernah mengalami kegagalan. Jika ingin cepat berhasil, segeralah bangkit dan belajar dari kegagalan. Jangan bersedih terlalu lama, apalagi menyerah.
Subscribe to:
Posts (Atom)