MEMBUAT TEMPLATE JOOMLA DENGAN ARTISTEER
0
Sumber :http://www.widodoonline.com/2011/11/membuat-template-joomla-dengan.html
Dengan Artisteer Anda langsung dapat merancang sendiri template Joomla yang unik tanpa keterampilan teknis atau belajar Dreamweaver, Photoshop, HTML atau CSS. Artisteer itu "Ide" fitur otomatis memproduksi dan mengusulkan desain template baru dan unik untuk Anda, yang Anda kemudian dapat menyesuaikan dan menyelesaikan sesuai dengan keinginan Anda.
Berikut adalah cara untuk membuat dan menerapkan pembuaan template joomla yang tampak hebat hanya dalam beberapa menit !
Berikut adalah cara untuk membuat dan menerapkan pembuaan template joomla yang tampak hebat hanya dalam beberapa menit !
- Buka Artisteer 3 dan klik "Suggest Design" beberapa kali tombol, sampai Anda melihat Joomla Template ™ide yang Anda sukai!
- Mengatur elemen desain seperti tata letak, latar header,, font, dll
- Ekspor template Anda ke folder di komputer Anda dalam bentuk zip file.
- Upload Joomla template yang baru dibuat ™ ke Website Anda melalui Joomla ™ Administrasi -> Extensions -> Install / Uninstall.
Sumber :http://www.widodoonline.com/2011/11/membuat-template-joomla-dengan.html
Cara Membuat Kalkulator Sederhana dengan JavaScript
0
Cara Membuat Kalkulator Sederhana dengan JavaScript – Sebenarnya postingan kali ini ada hubungannya dengan tugas kuliah yang saya miliki yakni dalam kuliah pemrograman web. Berhubung ada kesempatan saya pengen share ke sobat tentang bagaimana sih cara membuat sebuah kalkulator sederhana dengan menggunakan JavaScript.
Berikut ini adalah source code programnya:
<html>
</head>
</head>
<body>
<form name="Calc">
<table border=4>
<tr>
<td>
<input type="text" name="Input" size="29">
<br>
</td>
</tr>
<tr>
<td>
<input type="button" name="one" value=" 1 " OnClick="Calc.Input.value = '1'">
<input type="button" name="one" value=" 2 " OnClick="Calc.Input.value += '2'">
<input type="button" name="one" value=" 3 " OnClick="Calc.Input.value += '3'">
<input type="button" name="one" value=" + " OnClick="Calc.Input.value += '+'">
<br>
<input type="button" name="four" value=" 4 " OnClick="Calc.Input.value += '4'">
<input type="button" name="five" value=" 5 " OnClick="Calc.Input.value += '5'">
<input type="button" name="six" value=" 6 " OnClick="Calc.Input.value += '6'">
<input type="button" name="minus" value=" - " OnClick="Calc.Input.value += ' - '">
<br>
<input type="button" name="seven" value=" 7 " OnClick="Calc.Input.value += '7'">
<input type="button" name="eight" value=" 8 " OnClick="Calc.Input.value += '8'">
<input type="button" name="nine" value=" 9 " OnClick="Calc.Input.value += '9'">
<input type="button" name="div" value=" / " OnClick="Calc.Input.value += ' / '">
<br>
<input type="button" name="zero" value=" 0 " OnClick="Calc.Input.value += '0'">
<input type="button" name="DoIt" value=" = " OnClick="Calc.Input.value =eval(Calc.Input.value)">
<input type="button" name="clear" value="Clear" OnClick="Calc.Input.value = ''">
<input type="button" name="times" value=" * " OnClick="Calc.Input.value += ' * '">
<br>
</td>
</tr>
</table>
</form>
</body>
</html>
Catatan:
- Pada source code untuk fungsi eval akan dijelaskan pada postingan selanjutnya.
Selamat mencoba, dan selamat belajar…!!!
sumber:http://junedalbughisy.blogspot.com/2013/04/cara-membuat-kalkulator-sederhana.html
Tutorial membuat template website
0
Langsung saja, silahkan buka code editor yang sering anda gunakan misalnya notepad++, sublime dkk. Buat sebuah file misalnya diberi nama index, jangan lupa format dari file ini ada html. Berikut code yang digunakan untuk index.html:
Klik save, kemudian kita tambahkan style untuk index.html . Kemudian buat file bernama style dengan format .css , simpan satu folder dengan file index.html tadi.
Berikut code untuk style.css:
Kemudian buka lagi index.html di browser anda. Jika tampilannya sama dengan goal diatas maka anda sukses dalam tutorial ini. Sekian tulisan pengalaman ngajarcss tentang Tutorial membuat template website ini, semoga bermanfaat.
Sumber :http://ngajarcss.blogspot.com/2013/12/tutorial-membuat-template-website.html
Sebuah template website memang berbeda-beda, namun dibalik perbedaan itu ada satu hal persamaan pada setiap website. Ya, mereka selalu mempunyai struktur yang sama, yaitu header, content dan footer. Apakah membuat template website itu susah? Dibilang susah ngga, dibilang gampang juga tidak! Ini tergantung dari kreatifitas orang yang membuatnya. Kali ini saya akan berbagi tutorial membuat dasar sebuah template website.
Goal dari tutorial ini adalah sebagai berikut:
 |
| Dasar membuat layout website |
<html>
<head>
<title>Membuat Layout sederhana</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<span class="title">Dipakai untuk Header</span>
</div>
<div class="content">
<div class="entry-content">
<span class="title">Isi dari konten</span>
</div>
<div class="sidebar">
<span class="title">Isi dari sidebar</span>
</div>
</div>
<div class="footer">
<span class="title">Isi untuk footer</span>
</div>
</div>
</body>
</html>
<head>
<title>Membuat Layout sederhana</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header">
<span class="title">Dipakai untuk Header</span>
</div>
<div class="content">
<div class="entry-content">
<span class="title">Isi dari konten</span>
</div>
<div class="sidebar">
<span class="title">Isi dari sidebar</span>
</div>
</div>
<div class="footer">
<span class="title">Isi untuk footer</span>
</div>
</div>
</body>
</html>
Klik save, kemudian kita tambahkan style untuk index.html . Kemudian buat file bernama style dengan format .css , simpan satu folder dengan file index.html tadi.
Berikut code untuk style.css:
.container{
margin:0 auto;
max-width:978px;
}
.header{
background:red;
height:200px;
}
.content{
overflow:hidden
}
.entry-content{
background:#eee;
width:642px;
float:left;
display:inline;
height:500px;
}
.title{
font-size:40px;
font-weight:bold;
}
.sidebar{
background:#21E28D;
width:336px;
display:inline;
float:left;
height:500px;
}
.footer{
background:#333;
height:200px;
}
margin:0 auto;
max-width:978px;
}
.header{
background:red;
height:200px;
}
.content{
overflow:hidden
}
.entry-content{
background:#eee;
width:642px;
float:left;
display:inline;
height:500px;
}
.title{
font-size:40px;
font-weight:bold;
}
.sidebar{
background:#21E28D;
width:336px;
display:inline;
float:left;
height:500px;
}
.footer{
background:#333;
height:200px;
}
Kemudian buka lagi index.html di browser anda. Jika tampilannya sama dengan goal diatas maka anda sukses dalam tutorial ini. Sekian tulisan pengalaman ngajarcss tentang Tutorial membuat template website ini, semoga bermanfaat.
Sumber :http://ngajarcss.blogspot.com/2013/12/tutorial-membuat-template-website.html
DEFINISI PENGERTIAN DAN FUNGSI XAMPP LENGKAP
0
Pengertian XAMPP adalah perangkat lunak ( free software) bebas, yang mendukung untuk banyak sistem operasi, yang merupakan kompilasi dari beberapa program.
Fungsi XAMPP sendiri adalah sebagai server yang berdiri sendiri (localhost), yang terdiri beberapa program antara lain : Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP sendiri merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah untuk digunakan yang dapat menampilkan halaman web yang dinamis. Untuk mendapatkanya XAMPP anda dapat mendownload langsung dari web resminya. Dan berikut beberapa definisi program lainnya yang terdapat dalam XAMPP.
Server HTTP Apache atau Server Web/WWW Apache adalah server web yang dapat dijalankan di banyak sistem operasi seperti (Unix, BSD, Linux, Microsoft Windows dan Novell Netware serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web. Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.
MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database management system) atau DBMS yang multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.
PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
phpMyAdmin adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar (World Wide Web). phpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain).Pada dasarnya, mengelola basis data dengan MySQL harus dilakukan dengan cara mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud tertentu. Jika seseorang ingin membuat basis data (database), ketikkan baris perintah yang sesuai untuk membuat basis data. Jika seseorang menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel. Hal tersebut tentu saja sangat menyulitkan karena seseorang harus hafal dan mengetikkan perintahnya satu per satu.
Saat ini banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola basis data dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin, seseorang dapat membuat database, membuat tabel, mengisi data, dan lain-lain dengan mudah, tanpa harus menghafal baris perintahnya.
phpMyAdmin merupakan bagian untuk mengelola basis data MySQL yang ada di komputer. Untuk membukanya, buka browser lalu ketikkan alamat http://localhost/phpmyadmin, maka akan muncul halaman phpMyAdmin. Di situ nantinya seseorang bisa membuat (create) basis data baru, dan mengelolanya.
Sekian artikel tentang Definisi, pengertian, dan fungsi xampp.
Semoga membantu
Sumber :http://opraywinter.blogspot.com/2014/11/definisi-pengertian-dan-fungsi-xampp.html
Fungsi XAMPP sendiri adalah sebagai server yang berdiri sendiri (localhost), yang terdiri beberapa program antara lain : Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP sendiri merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah untuk digunakan yang dapat menampilkan halaman web yang dinamis. Untuk mendapatkanya XAMPP anda dapat mendownload langsung dari web resminya. Dan berikut beberapa definisi program lainnya yang terdapat dalam XAMPP.
Server HTTP Apache atau Server Web/WWW Apache adalah server web yang dapat dijalankan di banyak sistem operasi seperti (Unix, BSD, Linux, Microsoft Windows dan Novell Netware serta platform lainnya) yang berguna untuk melayani dan memfungsikan situs web. Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP.
MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database management system) atau DBMS yang multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.
PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
phpMyAdmin adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar (World Wide Web). phpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, tabel-tabel, bidang (fields), relasi (relations), indeks, pengguna (users), perijinan (permissions), dan lain-lain).Pada dasarnya, mengelola basis data dengan MySQL harus dilakukan dengan cara mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud tertentu. Jika seseorang ingin membuat basis data (database), ketikkan baris perintah yang sesuai untuk membuat basis data. Jika seseorang menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel. Hal tersebut tentu saja sangat menyulitkan karena seseorang harus hafal dan mengetikkan perintahnya satu per satu.
Saat ini banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola basis data dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin, seseorang dapat membuat database, membuat tabel, mengisi data, dan lain-lain dengan mudah, tanpa harus menghafal baris perintahnya.
phpMyAdmin merupakan bagian untuk mengelola basis data MySQL yang ada di komputer. Untuk membukanya, buka browser lalu ketikkan alamat http://localhost/phpmyadmin, maka akan muncul halaman phpMyAdmin. Di situ nantinya seseorang bisa membuat (create) basis data baru, dan mengelolanya.
Sekian artikel tentang Definisi, pengertian, dan fungsi xampp.
Semoga membantu
Sumber :http://opraywinter.blogspot.com/2014/11/definisi-pengertian-dan-fungsi-xampp.html
Cara Membuat Template Website dengan Notepad++
0
Belajar hal-hal baru memang menyenangkan sekaligus mengasyikkan apalagi hal yang kita pelajari itu erat kaitannya dengan hoby kita atau pun pekerjaan kita. Dalam hal ini admin tengah belajar pemrograman web yang mana sekiranya ilmu yang saya dapatkan dapat saya share ke teman-teman.
Suatu desain akan bernilai indah atau tidak maka semua itu tidak akan pernah lepas dari kreativitas dan imajinitas pembuat desain itu sendiri. Akan tetapi desain yang akan kita bahas kali ini ialah sebuah desain Halaman Website.
Sebuah Halaman Website memiliki desain dasar yang mana dengan desain dasar tersebut anda dapat memodifikasi agar menjadi lebih indah dan sedap dipandang mata akan tetapi tetap menyertakan komponen-komponen penting dari halaman website tersebut.
Berikut tampilan dasar sebuah halaman website.
Setelah mengetahui bagian-bagian dari halaman website maka selanjutnya kita perlu mempelajari pemrograman web yang mana akan kita bahas satu persatu di bawah ini.
1. Langkah Awal
Buatlah sebuah kode HTML sederhana yang dibuat melalui Notepad dan Save dengan nama belakang "html". Jika anda keberatan, bisa kita pakai dengan Element sederhana dibawah ini:
<html>
<!-- bagian kepala -->
<head><style>
/* CSS di tag ini */
</style></head><!-- bagian badan -->
<body><div id='wrapper'><!-- Nantinya akan dijadikan Judul blog -->
<div class='bagian-kepala'>
<h1>Judul BLOG</h1>
</div><!-- Tempat dimana posting anda akan muncul -->
<div class='bagian-post'>
<h3>Ini adalah Judul Posting anda </h3>
</div>Tulis artikel disini atau sebuah kalimat<!-- Tempat dimana Widget anda berada -->
<div class='bagian-widget'>
<h2> Judul Widget </h2>Tulis kalimat disini atau kata-kata yang anda inginkan</div>
</div><div style='clear:both'>
<!-- BAGIAN BAWAH DARI INTI POST DAN WIDGET -->
<!-- tambahkan elemen footer disini -->
<!-- anda juga harus membuat element DIV terlebih dahulu –></body><!-- end of Bagian badan –></html>
Save kode diatas dengan nama Project.html
2. Berikan CSS pembentuk Tata Letak Sederhana.
Coba anda preview dengan membuka melalui Browser, pasti tidak terbentuk bukan? untuk itu, anda diharuskan memberikan Properties Sederhana terlebih dahulu guna memberikan letak yang anda inginkan.
Tata letak didasarkan pada css "float" dan juga "width" , serta dibatasi dengan "clear: both" didasar kedua element tersebut untuk meratakan bahwa element telah disamakan.
Misalkan kita akan membuat tata letak seperti ini :
KepalaBadanWidget
Tata letak didasarkan pada css "float" dan juga "width" , serta dibatasi dengan "clear: both" didasar kedua element tersebut untuk meratakan bahwa element telah disamakan.
Misalkan kita akan membuat tata letak seperti ini :
KepalaBadanWidget
Maka CSS yang akan kita gunakan adalah seperti ini:
#wrapper{width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}
3. Preview, lalu EDIT!
Lihatlah dahulu jadinya, kemudian Edit beberapa item, tambahkan beberapa tag sesuka kalian ;)
Maksudnya apa? Anda diharapkan untuk menggandakan Project.html sebelum proses ke-4 untuk menghindari kesalahan template pada blog. Periksalah kembali sebelum melanjutkan langkah berikutnya!
Maksudnya apa? Anda diharapkan untuk menggandakan Project.html sebelum proses ke-4 untuk menghindari kesalahan template pada blog. Periksalah kembali sebelum melanjutkan langkah berikutnya!
4. Berikan beberapa tag XML template Blog
Karena blog menggunakan XML untuk template, kita harus merubah Tag HTML tersebut menjadi tag HTML.
Perhatikan kode template berikut :
Perhatikan kode template berikut :
<html>
<!-- bagian kepala -->
<head>
<style>
/* CSS HERE */</style>
</head>
<!-- bagian badan -->
<body>
<div id='wrapper'>.....
Ganti kode bercetak miring dan tebal diatas dengan kode seperti ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Insert CSS Here */
]]></b:skin>
</head>
Jangan lupa untuk memberikan CSS yang tadi kita tulis, sehingga menjadi seperti ini:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Start CSS HERE */
#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}
/* End CSS HERE */
]]></b:skin>
</head>
<!-- bagian badan -->
<body>
<div id='wrapper'>.....
5. Memberi Blogger Tag
Anda diharuskan untuk merubah Static Content dengan Dinamic Content yang telah disediakan oleh Blogger.
Untuk lebih lengkapnya, silahkan pergi ke Link http://support.google.com/blogger/bin/answer.py?hl=en&answer=46888 Cara ini dilakukan agar anda dapat lebih leluasa dalam mengedit dan mengatur dalam "Tata Letak". Selain itu, Dynamic Content juga berfungsi agar Post yang anda publikasi bisa Muncul pada Blog anda. Jika template tidak diberikan Blogger Tag, maka template akan Static, maksudnya ketika anda melakukan pengeditan pada template, post, ataupun widget anda, maka semua tidak akan berubah.
a. Tambahkan element Judul Blog.
Ganti kode yang berwarna biru dengan kode berikut :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
b. Tambahkan element Post.
Ganti kode yang berwarna hijau diatas dengan kode berikut :
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
c. Tambahkan element Widget.
Ganti kode yang berwarna merah dengan kode dibawah ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
Sehingga akan terlihat seperti ini :
<body>
<div id='wrapper'>
<!-- Nantinya akan dijadikan Judul blog -->
<div class='bagian-kepala'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section></div>
<!-- Tempat dimana posting anda akan muncul -->
<div class='bagian-post'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section></div>
<!-- Tempat dimana Widget anda berada -->
<div class='bagian-widget'><b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section></div>
</div>
<div style='clear:both'>
</body>
6. Save dan Upload
Simpanlah proyek anda, dan kemudian anda coba penerapannya pada Blog anda. Sehingga anda dapat melihat hasilnya! hmmm, untuk refreshing coba anda minum teh anda dahulu, kemudian lanjut lagi ;)
Anda harus backup template terlebih dahulu. Atau anda bisa membuat blog baru untuk bereksperiment.
7. Sedikit Mengedit Kode CSS Kembali
CSS itu sangatlah penting, kenapa ? karena css adalah bagian terpenting dalam suatu situs web. CSS ini sendiri yang mengatur tata-letak dari suatu Element yang berantakan menjadi elemen yang teratur dan nyaman untuk dilihat. Tidak hanya mengatur sebuah Elemen, CSS juga dapat mengatur Warna, Dekorasi, Bingkai(Border), hingga Gambar latar. Untuk kali ini, mari kita mulai mengedit sebagian CSS pada blog agar terlihat menarik ;)
Mulailah mengedit text dan link yang terdapat di template tersebut:
/* Body atau background tag */
body{
background: #888;
color: #eee;
font: 12px calibri;
}
/* Link atau tautan */
a{ color: orange; }
a:hover{ color: red; }
a:visited{ color: gray; }
a:active{ color:transparent; }
/* Penanggalan pada Posting */
.date-header{ color: orange; }
/* Element Posting */
.date-outer{ border: 1px solid gray; margin: 10px 5px; } /* pembungkus posting */
.post-title{ font: 17px calibri; } /* judul entri */
/* Komentar */
#comments { background : #454545; color : white; } /* Pembungkus kotak Komentar */
Dan selebihnya anda kerjakan sendiri ya ;)
Final Kode :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/* Inti dari Element */
#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */
}
.bagian-kepala{
height: 200px;
}
.bagian-post{
float: left; /* Gunakan untuk memposisikan Widget di kiri */
width: 500px;
}
.bagian-widget{
float: right; /* Gunakan untuk memposisikan Widget di Kanan */
width: 200px;
}
/* Body atau background tag */
body{
background: #888;
color: #eee;
font: 12px calibri;
}
/* Link atau tautan */a{ color: orange; }
a:hover{ color: red; }
a:visited{ color: gray; }
a:active{ color:transparent; }
/* Penanggalan pada Posting */
.date-header{ color: orange; }
/* Element Posting */
.date-outer{ border: 1px solid gray; margin: 10px 5px; } /* pembungkus posting */
.post-title{ font: 17px calibri; } /* judul entri */
/* Komentar */
#comments { background : #454545; color : white; } /* Pembungkus kotak Komentar */
]]></b:skin>
</head>
<body>
<div id='wrapper'>
<!-- Nantinya akan dijadikan Judul blog -->
<div class='bagian-kepala'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
</div>
<!-- Tempat dimana posting anda akan muncul -->
<div class='bagian-post'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<!-- Tempat dimana Widget anda berada -->
<div class='bagian-widget'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>
</div>
<div style='clear:both'>
<!-- BAGIAN BAWAH DARI INTI POST DAN WIDGET -->
<!-- tambahkan elemen footer disini -->
<!-- anda juga harus membuat element DIV terlebih dahulu -->
</body>
<!-- end of Bagian badan -->
</html>
Dan jika sobat pusing dengan pembahasan saya yang panjang dan berbelit-belit di atas sobat dapat mempelajari template dasar yang sudah saya buat di bawah ini.
<html>
<!-- bagian kepala -->
<head><title>Desain Website</title>
<style>
/* CSS */
#wrapper{
width: 800px; /* lebar blog secara keseluruhan */
margin: auto; /* untuk membuat "CENTER" blog pada Browser */}
.header{
height: 100px;
background-color:#ff0000;
margin: 10px 10px 1px 10px;
padding: 10px;
border: 2px solid #000000;
}.bagian-post{
float: right; /* Gunakan untuk memposisikan Widget di kiri */
width: 525px;
height:400px;
margin: 0 10px 1px 0;
padding: 10px;
background-color: #ffffff;
border: 2px solid #000000;
}.bagian-widget{
float: left; /* Gunakan untuk memposisikan Widget di Kanan */
width: 205px;
height:400px;
margin: 0 1px 1px 10px;
padding: 10px;
background-color:#FFFF33;
border: solid 2px #000000;
}.footer{
width: 800x;
background-color: #00FF00;
margin: 0 10px 10px 10px;
padding: 10px;
text-align: center;
border: 2px solid #000000;
}
</style>
</head><!-- bagian badan -->
<body bgcolor="#777">
<div id='wrapper'><!-- bagian kepala -->
<div class='header'>
<h1>Pemrograman Website</h1>
</div><!--Bagian Postingan-->
<div class='bagian-post'>
<h3>Inilah Template Buatan Pertaman Saya</h3>
<p>Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!! Ayo belajar pemrograman Web....!!!</p>
</div><!-- Bagian Widget-->
<div class='bagian-widget'>
<h2>Menu Navigasi</h2>
<ul type="square">
<li><a href="tugas lab.html">Beranda</a></li>
<li><a href="Halaman about me.html">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Daftar isi</a></li>
<li><a href="#">Buku Tamu</a></li>
</ul>
</div><div style='clear:both'>
<!-- bagian footer-->
<div class='footer'>
<p>Copyright 2013. Desain template by Juned al~Bughisy</p>
</div></body></html>
Hasilnya kurang lebih seperti gambar di bawah ini.
Demikian pembahasan kali ini mengenai desain website, dan jika anda merasa artikel ini bermanfaat silahkan di share akan tetapi jangan lupan untuk mencantumkan link sebagai sumbernya.
Terimakasih…!!!
Sumber:http://junedalbughisy.blogspot.com/2013/03/cara-membuat-template-website-dengan.html
Music MP3