Halo sahabat Blog Kumpulan Tutorial Website.Blogspot.com sekalian , sebelumnya saya mengucapkan terimakasih atas ketersediaan saudara untuk mengunjungi blog saya ini. Kali ini saya akan membagikan Tutorial SEO yang sangat mendasar dan harus anda pelajari jika ingin mendapatkan Page Rank yang bagus. Oke langsung saja ke TKP !
Berikut saya Bagikan Cara Pembuatan Meta Tag yang SEO Friendly
Meta Tag Deskriptions
Merupakan digunakan untuk memberikan Gambaran umum mengenai isi dari halaman web/Blog.
Contoh:
<meta content='Membongkar Tips dan Trik SEO' name='Description'/>
"Ukurannya disarankan tidak lebih dari 200 karakter"
Meta Tag Keywords ( Hal yang paling penting )
Meta Tag Keyword adalah Menentukan kata kunci apa yang bisa menemukan halaman web tersebut pada search engine
Contoh :
<meta content='Tutorial Website,Tutorial PHP,Trik SEO,Javascript,Belajar SEO,Blog Trick' name='keywords'/>
Catatan :
Jangan mengulang sebuah kata lebih dari 2 kali, karena akan dianggap spamming
Jangan membuat keyword yang tidak ada hubungannya dengan isi halaman web Anda.
Buatlah Keyword yang sangat berhubungan denga isi postingan blog anda.
Meta Tag Robots
Merupakan Untuk menentukan halaman web yang mana bisa di-index oleh spider dan halaman web mana yang tidak.
Format dasar pada Blogger adalah :
<meta name="robots" content="index | noindex | follow | nofollow">
Nah, anda harus mengubahnya menjadi :
<meta name="robots" content="index follow">
Spider akan meng-index main page Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink.
READ MORE
Untuk Memulai Proses SEO adalah sebagai berikut :
- Ada baiknya jika memungkinkan bagi anda, mulailah dengan website baru yang belum pernah dipublikasikan atau didaftarkan ke search engine. !! ( Alasannya adalah untuk mencegah terjadinya kesalahan atau pencampuran kode-kode yang dapat mengakibatkan dampak negatif pada blog atau website kita).
- Kuasai atau minimal mengerti dasar-dasar HTML. Karena dalam belajar teknik-teknik SEO kita dituntut untuk mampu melakukan editing langsung pada kode HTML.
- Pilih 4 atau 5 kata kunci ( KeyWord ) yang menurut anda paling tepat untuk mewakili isi (content) dari website atau blog anda.
- Buatlah postingan atau tulisan teks untuk website Anda berdasarkan kata kunci yang telah Anda pilih. Untuk halaman depan, usahakan membuat teks dengan panjang minimal 300 kata. Gunakan kombinasi dari keyword-keyword utama pada 300 kata tersebut.
- Rancanglah sebuah title tag yang baik - Title tag harus benar-benar mencerminkan apa isi dari website atau blog Anda .
- Buatlah Meta Tag Secara Optimal ( <meta content='Deskripsi Blog ' name='description'/> | <meta content='Kata Kunci Blog atau website disini' name='keywords'/> | <meta content='Nama Anda' name='author'/> )
- Mulailah melakukan pendaftaran di Search Engine dan Directory, hal ini bisa anda daftarkan pada fasilitas google sitemap.
- Mulailah membangun Link Popularity [link popularity adalah jumlah halaman web lain yang memasang link ke web site Anda. Jika Anda menulis content dengan baik, dan isinya bermanfaat untuk banyak orang, maka secara alami akan banyak orang yang mereferensikan situs Anda ]
- Hal terakhir yang sangat perlu Anda perhatikan adalah berusaha bermain jujur - Saya lebih menyarankan agar Anda berkonsentrasi mengembangkan content, dan membuat website Anda lebih baik dari hari ke hari.
Berikut saya Bagikan Cara Pembuatan Meta Tag yang SEO Friendly
Meta Tag Deskriptions
Merupakan digunakan untuk memberikan Gambaran umum mengenai isi dari halaman web/Blog.
Contoh:
<meta content='Membongkar Tips dan Trik SEO' name='Description'/>
"Ukurannya disarankan tidak lebih dari 200 karakter"
Meta Tag Keywords ( Hal yang paling penting )
Meta Tag Keyword adalah Menentukan kata kunci apa yang bisa menemukan halaman web tersebut pada search engine
Contoh :
<meta content='Tutorial Website,Tutorial PHP,Trik SEO,Javascript,Belajar SEO,Blog Trick' name='keywords'/>
Catatan :
Jangan mengulang sebuah kata lebih dari 2 kali, karena akan dianggap spamming
Jangan membuat keyword yang tidak ada hubungannya dengan isi halaman web Anda.
Buatlah Keyword yang sangat berhubungan denga isi postingan blog anda.
Meta Tag Robots
Merupakan Untuk menentukan halaman web yang mana bisa di-index oleh spider dan halaman web mana yang tidak.
Format dasar pada Blogger adalah :
<meta name="robots" content="index | noindex | follow | nofollow">
Nah, anda harus mengubahnya menjadi :
<meta name="robots" content="index follow">
Spider akan meng-index main page Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink.
Oke, cukup sekian tutorial SEO -nya untuk kali ini, saya harap tutorial ini dapat membantu buat anda semua pengunjung blog ini. jangan lupa share dan komentnya ya .
Halo semua sahabat setia Blog Kumpulan Tutorial Website.Blogspot.com , Kali ini saya akan membagikan sebuah Tutorial trik SEO yang sangat dan amat penting dalam pembuatan blog maupun website. Disini kita akan membahas bagaimana cara menaikkan page rank blog atau website. Perlu anda ketahui bahwa dalam menaikkan PAGE RANK ada susahnya dan ada juga mudahnya. Terkadang sewaktu kita CEK PR di beberapa penyedia layanan tersebut ada suka dan dukanya juga sebab kalau kita sudah melihat hasil Page Rank kita tinggi ada rasa senangnya namun apabila Page Rank kita bertuliskan N/A atau 0 rasa kesal dan lemas pun datang. Namun setelah saya cari terus di google, akhirnya saya dapat beberapa kesimpulan bagaimana cara cepat menaikkan page rank blog atau website kita, adapun diantaranya adalah :
Thanks.
READ MORE
- Faktor Keberuntungan
- Konten atau artikel yang kebetulan disukai Google serta bermanfaat bagi orang lain atau sangat seo friendly.
- Artikel yang bukan hasil jiplak dari blog atau website orang lain.
- Berita-berita yang lagi ramai dan disukai orang,walupun kita copaz beritanya namun kita beri sentuhan sedikit bumbu dapur dan tidak lupa memberikan link sumbernya.
- Gabung di forum-forum baik itu di forum Google,Bing,Yahoo,atau forum-forum yang ber PR bagus.
- Submit artikel kebeberapa penyedia layanan submit seperti Google, Bing dan Yahoo.
- Selalu Blogwalking dan komentar di site tetangga.
- Link exchange dengan blog atau website lain yang memiliki reputasi yang bagus.
Berikut link-link yang bisa anda gunakan untuk mendaftarkan link RSS saudara sekalian :
- www.goldenfeed.com
- www.readablog.com
- www.5z5.com
- www.2rss.com
- www.feedbase.net
- www.aspin.com
- www.blogbunch.com
- www.daytimenews.com
- www.rsshugger.com
- www.rssbuffet.com
- www.feedage.com
- www.1800rssfeeds.com
- www.rssmad.com
- www.feednuts.com
- feedfury.com rss2.com
- www.feedbees.com
- rssmountain.com
- www.indofeed.com
- www.weblogalot.com
- www.solarwarp.net
- www.scienceport.org
- www.rssmotron.com
- www.rssmicro.com
- www.rssfeeds4you.com
- www.rss-network.com
- rss-feeds-submission.com
- www.pressradar.com
- www.rssfeeds.com
- www.plazoo.com
- www.octora.com
- www.millionrss.com
- www.jordomedia.com
- www.feedsee.com
- www.feedplex.com
- www.feedest.com
- www.feedboy.com
Thanks.
Selamat Malam buat sahabat setia Kumpulan Tutorial Website sekalian, saya ingin membagikan kepada anda sebuah tutorial HTML\CSS yang tidak kalah menariknya dari postingan saya yang lain . Tutorial kali ini adalah Cara Membuat Menu Navigasi Lengkap dengan Drop Down murni dengan CSS.
Baiklah sebelumnya, saya sebagai admin mengasumsikan bahwa Anda sudah paham HTML dan CSS, dan tentu saja sudah paham menghubungkan antara HTML file dengan CSS, kalau belum saya sarankan lihat postingan saya sebelum postingan ini.
Sebelum anda meneruskan membaca tutorial ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu.
1. Membuat kode HTML
Baik , mari kita mulai dengan kode HTML nya, serhubung sekarang jamannya HTML5 maka kita akan pakai HTML5, tenang aja masih saya campur-campur dengan XHTML, nanti mengenai HTML5 akan saya bahas sendiri dilain waktu. Oke untuk strukturnya masih sama kita menggunakan tag <ul> dan <li>.
Berikut kodenya HTML nya .
Sekarang buat sebuah halaman dengan nama "Header.HTML" , lalu copy-kan seluruh code HTML ini kedalamnya .
Nah sekarang langkah selanjutnya, kita ubah list yang biasa itu menjadi menu yang menarik dengan CSS. Seperti ini kode CSS nya, langsung saya tulis semua nanti baru saya terangin:
Buat sebuah halaman dengan nama "Style.CSS" , lalu copy-kan seluruh kode CSS dibawah ini kedalamnya. .
Jika sudah , sekarang coba anda jalankan pada browser file Header.HTML tadi , lalu lihat hasilnya.
So, sekarang saya akan terangkan bagian-bagian yang terpenting, pertama adalah #nav li disini kita kasih position:relative;, kenapa? karena drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya agar posisinya pas dibawah tiap menu <li>. Jika kita tidak memberi position:relative; maka browser akan menganggap kontainer nya adalah <body> sehingga drop downnya akan muncul dipojok kiri atas browser.
Berikutnya adalah #nav li:hover a loh kok bukan #nav a:hover li kenapa <li> nya yang dihover? Yap, karena drop down kita berada didalam <li> dan bukan didalam <a> maka apabila kita ingin jejaknya tetap ada ya kita hover di <li> nya. Saya tambahkan z-index:1000 buat jaga-jaga karena biasanya dibawah menu itu biasanya terdapat slideshow javascript dan kebanyakan kasus terutama IE7 posisi dropdown dibawah slideshow, karena itu saya kasih z-index yang agak tinggi biar posisi diatasnya.
Dan karena IE6 hanya kenal hover untuk tag <a> maka kalau anda masih cinta IE6 dan masih ingin mendukungnya mending ke laut aja maka gunakan csshover.htc Peter Nederlof agar bisa jalan di IE6/ .
Oke berikutnya #place-nav ul ul nah ini merupakan drop downnya, karena itu kita beri position:absolute; agar muncul tepat dibawah tiap #nav a:hover li. Jangan lupa untuk kita hilangkan dulu, karena drop downnya baru muncul kalau kita hover jadi awalnya disembunyiin dulu dengan display:none;. Kita atur posisinya agar tepat dibawah menu dengan top:35px; dan left:0;. Pastikan untuk jarak atasnya tidak ada ruang kosong 1 pixel pun karena jika ada ketika mouse kita melewati ruang kosong tersebut maka mouse kita sudah diluar <li> sehingga dropdown akan langsung hilang. Jadi pastikan nilai top lebih kecil atau sama dengan nilai height <li> diatasnya.
Berikutnya #place-nav ul ul ul ini merupakan drop down level ke 2 jadi ya sama kayak sebelumnya, tapi karena dorp down level kedua posisinya agak kekanan dari drop down level 1, maka nilai left kita perbesar tapi juga jangan ada jarak 1 pixel pun.
Ini merupakan kode css untuk memunculkan drop down dan menghilangkannya. Seperti yang Anda lihat div#place-nav li:hover ul, div#place-nav li li:hover ul ini berarti jika kita menghover <li> maka <ul> berikutnya akan muncul display:block dan <ul> dalamnya (level ke 2) tidak muncul display:none; baru ketika kita hover <li> level ke dua maka drop down level ke dua akan muncul.
Selamat mencoba, dan jangan lupa share dan komentnya yah.
Terimakasih.
Baiklah sebelumnya, saya sebagai admin mengasumsikan bahwa Anda sudah paham HTML dan CSS, dan tentu saja sudah paham menghubungkan antara HTML file dengan CSS, kalau belum saya sarankan lihat postingan saya sebelum postingan ini.
Sebelum anda meneruskan membaca tutorial ini, saya sarankan anda paham mengenai dasar-dasar HTML dan dasar-dasar CSS terlebih dahulu.
1. Membuat kode HTML
Baik , mari kita mulai dengan kode HTML nya, serhubung sekarang jamannya HTML5 maka kita akan pakai HTML5, tenang aja masih saya campur-campur dengan XHTML, nanti mengenai HTML5 akan saya bahas sendiri dilain waktu. Oke untuk strukturnya masih sama kita menggunakan tag <ul> dan <li>.
Berikut kodenya HTML nya .
Sekarang buat sebuah halaman dengan nama "Header.HTML" , lalu copy-kan seluruh code HTML ini kedalamnya .
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Drop Down Menu ala Kumpulan Tutorial Website </title>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
<head>
<body>
<div id="place-nav">
<ul id="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Artikel</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Social</a>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google</a>
<ul>
<li><a href="#">Google Wave</a></li>
<li><a href="#">Google Buzz</a></li>
<li><a href="#">Google Plus</a></li>
</ul>
</li>
<li><a href="#">Twitter</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
</ul>
</div>
</body>
</html>
Berikut sedikit penjelasan tentang kode diatas :
Jika kita perhatikan didalam <li> Social ada menu lagi dan didalamnya lagi tepatnya didalam <li> Google ada menu lagi. Ini kita nanti akan membuat drop down menu dengan 2 level kedalaman.Nah sekarang langkah selanjutnya, kita ubah list yang biasa itu menjadi menu yang menarik dengan CSS. Seperti ini kode CSS nya, langsung saya tulis semua nanti baru saya terangin:
Buat sebuah halaman dengan nama "Style.CSS" , lalu copy-kan seluruh kode CSS dibawah ini kedalamnya. .
#place-nav {
width:960px;
height:35px;
margin:63px 0 0 0;
}
#nav {
height:35px;
}
#nav li {
height:35px;
float:left;
display:inline;
margin:0 5px;
position:relative;
font-family: Arial, verdana, serif;
z-index:1000;
}
#nav li a {
float:left;
display:inline;
height:25px;
padding:10px 8px 0 8px;
font-size:12px;
color:#9e9e9e;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {
text-decoration:none;
color:#505050;
}
#place-nav ul ul {
position:absolute;
z-index:1200;
display:none;
width:186px;
margin: 0;
top: 35px;
left:0;
background:#1d87ca;
padding:0 0 2px 0;
}
#place-nav ul li ul li {
display: inline;
float: left;
width:186px;
height:auto;
border-bottom:1px solid #085d93;
float: left;
padding: 0;
position:relative;
margin:0;
}
#place-nav ul ul ul {
position:absolute;
z-index:1300;
display:none;
width:186px;
margin: 0;
top: 0;
left:183px;
background:#1c83ce;
border-left:1px solid #1479c3;
padding:0;
}
#place-nav ul li ul li ul li {
display: inline;
float: left;
padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited {
color:#fff;
font-size:12px;
width:170px;
height:auto;
text-transform:none;
border:none;
background: none;
padding:9px 8px;
text-shadow:none;
margin:0;
font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {
text-decoration:none;
color:#fff;
background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;} div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
width:960px;
height:35px;
margin:63px 0 0 0;
}
#nav {
height:35px;
}
#nav li {
height:35px;
float:left;
display:inline;
margin:0 5px;
position:relative;
font-family: Arial, verdana, serif;
z-index:1000;
}
#nav li a {
float:left;
display:inline;
height:25px;
padding:10px 8px 0 8px;
font-size:12px;
color:#9e9e9e;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 0 3px #c7c7c7;
}
#nav li:hover a {
text-decoration:none;
color:#505050;
}
#place-nav ul ul {
position:absolute;
z-index:1200;
display:none;
width:186px;
margin: 0;
top: 35px;
left:0;
background:#1d87ca;
padding:0 0 2px 0;
}
#place-nav ul li ul li {
display: inline;
float: left;
width:186px;
height:auto;
border-bottom:1px solid #085d93;
float: left;
padding: 0;
position:relative;
margin:0;
}
#place-nav ul ul ul {
position:absolute;
z-index:1300;
display:none;
width:186px;
margin: 0;
top: 0;
left:183px;
background:#1c83ce;
border-left:1px solid #1479c3;
padding:0;
}
#place-nav ul li ul li ul li {
display: inline;
float: left;
padding: 0;
}
#place-nav #nav li:hover ul li a, #place-nav #nav li:hover ul li a:link, #place-nav #nav li:hover ul li a:visited {
color:#fff;
font-size:12px;
width:170px;
height:auto;
text-transform:none;
border:none;
background: none;
padding:9px 8px;
text-shadow:none;
margin:0;
font-weight:lighter;
}
#place-nav #nav li:hover ul li a:hover, #place-nav #nav li ul li a:hover {
text-decoration:none;
color:#fff;
background:#0f74bd;
}
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;} div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
Jika sudah , sekarang coba anda jalankan pada browser file Header.HTML tadi , lalu lihat hasilnya.
So, sekarang saya akan terangkan bagian-bagian yang terpenting, pertama adalah #nav li disini kita kasih position:relative;, kenapa? karena drop down kita #place-nav ul ul memilki position:absolute;. Sehingga kita harus mendeklarasikan kontainernya agar posisinya pas dibawah tiap menu <li>. Jika kita tidak memberi position:relative; maka browser akan menganggap kontainer nya adalah <body> sehingga drop downnya akan muncul dipojok kiri atas browser.
Berikutnya adalah #nav li:hover a loh kok bukan #nav a:hover li kenapa <li> nya yang dihover? Yap, karena drop down kita berada didalam <li> dan bukan didalam <a> maka apabila kita ingin jejaknya tetap ada ya kita hover di <li> nya. Saya tambahkan z-index:1000 buat jaga-jaga karena biasanya dibawah menu itu biasanya terdapat slideshow javascript dan kebanyakan kasus terutama IE7 posisi dropdown dibawah slideshow, karena itu saya kasih z-index yang agak tinggi biar posisi diatasnya.
Dan karena IE6 hanya kenal hover untuk tag <a> maka kalau anda masih cinta IE6 dan masih ingin mendukungnya mending ke laut aja maka gunakan csshover.htc Peter Nederlof agar bisa jalan di IE6/ .
Oke berikutnya #place-nav ul ul nah ini merupakan drop downnya, karena itu kita beri position:absolute; agar muncul tepat dibawah tiap #nav a:hover li. Jangan lupa untuk kita hilangkan dulu, karena drop downnya baru muncul kalau kita hover jadi awalnya disembunyiin dulu dengan display:none;. Kita atur posisinya agar tepat dibawah menu dengan top:35px; dan left:0;. Pastikan untuk jarak atasnya tidak ada ruang kosong 1 pixel pun karena jika ada ketika mouse kita melewati ruang kosong tersebut maka mouse kita sudah diluar <li> sehingga dropdown akan langsung hilang. Jadi pastikan nilai top lebih kecil atau sama dengan nilai height <li> diatasnya.
Berikutnya #place-nav ul ul ul ini merupakan drop down level ke 2 jadi ya sama kayak sebelumnya, tapi karena dorp down level kedua posisinya agak kekanan dari drop down level 1, maka nilai left kita perbesar tapi juga jangan ada jarak 1 pixel pun.
Nah yang terakhir dan terpenting adalah :
div#place-nav li:hover ul ul,
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
div#place-nav li li:hover ul ul
{display:none;}
div#place-nav li:hover ul,
div#place-nav li li:hover ul
{display:block;}
Ini merupakan kode css untuk memunculkan drop down dan menghilangkannya. Seperti yang Anda lihat div#place-nav li:hover ul, div#place-nav li li:hover ul ini berarti jika kita menghover <li> maka <ul> berikutnya akan muncul display:block dan <ul> dalamnya (level ke 2) tidak muncul display:none; baru ketika kita hover <li> level ke dua maka drop down level ke dua akan muncul.
Selamat mencoba, dan jangan lupa share dan komentnya yah.
Terimakasih.
Halo semua sahabat setia Kumpulan Tutorial Website , saya ingin membagikan kepada anda sebuah tutorial CSS yang sangat penting anda kuasai dalam pembuatan website yang dinamis dan cantik untuk dilihat. Seperti yang kita tahu, dalam mendesign website, kita amatlah membutuhkan Code CSS , tanpa CSS , Website yang kita buat seakan-akan tidak berwarna atau tidak berseni sama sekali. Jadi dapat kita simpulkan bahwa tutorial CSS kali ini sangatlah berguna bagi kita semua terutama bagi para pemula . Oke langsung saja .
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value .
Adapun format penulisan kalimat CSS :
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
Dari contoh di atas dapat kita simpulkan atau kita lihat bahwa :
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Hal ini bertujuan agar terlihat rapi.
Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.
Kenapa kita perluh belajar membuat comment dalam CSS ? alasannya karena kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
1. Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.
2. Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat.
Contoh:
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat menggunakan font berwarna biru.
3. External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
4. Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";
atau
@import url("style.css");
Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sebagai berikut:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sebagai berikut :
CLASS dan ID SELECTOR
Masih ingat kan pada pelajaran syntax CSS pada bagian atas posting ini , yang di tulis adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
Cara penulisan Class Selector:
Untuk menempelkan class ke dalam tag HTML:
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasilnya jika di jalankan pada browser adalah :
Cara penulisan ID Selector:
Untuk menempelkan ID selector ke dalam tag HTML:
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
Cara penulisan:
property -> font-family
value -> nama-nama font, disarankan menggunakan hanya nama-nama font default
Contoh penulisan:
Hasilnya jika dijalankan di browser :
Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:
Hasilnya jika dijalankan pada browser :
Sekian dulu ya tutorial CSS dari saya ,, dah pegal tangan ini ngetiknya , hehehe . Jangan lupa share atau komentarnya ya . Salam sukses bagi para programer.
READ MORE
Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value .
Adapun format penulisan kalimat CSS :
selector { property: value }
Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.
Contoh Syntax:
h1 { color: red }
Dari contoh di atas dapat kita simpulkan atau kita lihat bahwa :
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).
Pengelompokan Selectors
Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:
h1,h2,h3 { color: red }
Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.
Penggunaan Banyak Properties
Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:
h1,h2,h3 {color:red; font-family:arial; font-size:150%;}
Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.
Cara Penulisan Yang Baik
Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Hal ini bertujuan agar terlihat rapi.
h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}
color:red;
font-family:arial;
font-size:150%;
}
Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.
CSS Comment
Kenapa kita perluh belajar membuat comment dalam CSS ? alasannya karena kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.
/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}
INPLEMNTASI CSS
Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:- Inline CSS
- Embed atau memasang kode css ke dalam bagian <head>
- Pada link ke external CSS
- Import CSS file
1. Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:
<P style=”color:blue”>
Isi paragraf.
</p>
Isi paragraf.
</p>
Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style: lalu di ikuti dengan syntax property: value.
2. Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag <head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat.
Contoh:
<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>
Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat menggunakan font berwarna biru.
3. External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:
- Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.
p {font-family: arial; font-size: small;}
h1 {color: red; }
- Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>
4. Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:
@import "style.css";
atau
@import url("style.css");
Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sebagai berikut:
h1 {
color: red;
text-align: left;
font-size: 8pt
}
Sementara di halaman web yang sama, di antara tag <head> ada kode CSS sbb:
h1 {
text-align: right;
font-size: 20pt
}
text-align: right;
font-size: 20pt
}
Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sebagai berikut :
color: red;
text-align: right;
font-size: 20pt
text-align: right;
font-size: 20pt
CLASS dan ID SELECTOR
Masih ingat kan pada pelajaran syntax CSS pada bagian atas posting ini , yang di tulis adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.
Class Selector
Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.Cara penulisan Class Selector:
.nama-class {property:value;}
Untuk menempelkan class ke dalam tag HTML:
taghtml.nama-class {Property:value;}
Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:
.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}
Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>
Hasilnya jika di jalankan pada browser adalah :
Teks tengah akan berwarna merah.
Tag H1 tengah akan berwarna hitam
Tag H1 kiri akan berwarna biru
ID Selector
ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.Cara penulisan ID Selector:
#nama-ID {property:value;}
Untuk menempelkan ID selector ke dalam tag HTML:
taghtml#nama-ID {Property:value;}
Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.
CSS Font Family
CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya.1. CSS Font Family
Kalau anda biasa menggunakan ms word atau aplikasi lainnya dimana anda bisa merubah jenis / tipe font, pasti anda sudah mengenal nama-nama font seperti: arial, verdana, times new roman dll. Nah kalau di CSS kita sebut tipe font ini Font Family.Cara penulisan:
property -> font-family
value -> nama-nama font, disarankan menggunakan hanya nama-nama font default
Contoh penulisan:
h1 {
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}
Hasilnya jika dijalankan di browser :
Ini adalah Heading 1 (H1) menggunakan font Verdana
Ini adalah Heading 2 (H2) menggunakan font Times New Roman
2. CSS Font Variant
Properti font variant digunakan untuk menampilkan font dalam huruf kapital kecil. Jadi semua huruf non kapital akan berubah menjadi huruf kapital, tetapi ukuran nya tetap sama. Perlu diketahui, tidak semua jenis font dapat menggunakan properti ini.Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:
h1 {
font-size: 14px;
font-variant: small-caps;
}
font-size: 14px;
font-variant: small-caps;
}
Hasilnya jika dijalankan pada browser :
Ini adalah Heading 1 (H1) menggunakan properti font variant
Sekian dulu ya tutorial CSS dari saya ,, dah pegal tangan ini ngetiknya , hehehe . Jangan lupa share atau komentarnya ya . Salam sukses bagi para programer.
Buat sahabat-sahabat blog kumpulan tutorial website yang Ingin Membuat Website Dengan Dream Weaver Di tambah Lagi Panduan Pembuatan Website Berdasarkan PHP, MySQL, CSS dan Html, Anda Sudah Tepat Berkunjung Ke blog ini karena blog ini membahas tuntus segala permasalahan mengenai pelajaran website.
Blog saya ini masih tergolong baru dan ini baru postingan saya yang pertama mengenai Ebook belajar website. dan saya harap anda dapat menggunakannya dengan tepat dan bijak. Ebook ini tidak berbayar alias gratis.
Daftar Ebook Dibawah Ini Adalah :
- Tutorial HTML + MySQL + PHP.pdf
- Desain Web menggunakan Dreamweaver.pdf
- Web Design Macromedia Dreamwaever MX 2004.pdf
- Ebook PHP – Menyelam dan Menaklukan Samudra PHP
Jika ada kerusakan link , saya harap anda dapat memberitahu saya melalui kotak komentar dibawah ini, dan jangan lupa share kepada teman-teman anda.
Sahabat Blog Kumpulan Tutorial Website yang budiman, Pernahkah anda mendengar kata ajax dalam dunia pemrograman website ? saya harap anda semua sudah mengetahuinya, tapi buat yang belum tahu , jangan berkecil hati , karena disini saya akan mengulas mengenai apa sebenarnya ajax itu. Oke sudah siap ??? Let's Go to the TKP ...!!!
READ MORE
AJAX adalah singkatan dari Asynchronous JavaScript and XML. AJAX, terdiri dari HTML, Javascript, DHTML dan DOM yang kemudian digabungkan dengan bahasa pemograman web di sisi server seperti PHP dan ASP, sehingga membentuk suatu aplikasi berbasis web yang interaktif.
AJAX bukanlah bahasa pemograman baru, tetapi adalah teknik baru untuk membuat aplikasi web lebih baik, lebih cepat dan lebih interaktif.
Dengan AJAX, Javascript dapat langsung berkomunikasi dengan server dengan menggunakan objek XMLHttpRequest. Dengan objek ini, javascript dapat melakukan transaksi data denga server web, tanpa harus me-reloading halaman web tersebut secara keseluruhan.
Contoh nyata Penggunaan ajax dapat kita lihat pada salah-satu situs jejariangan sosial yang cukup terkenal yaitu Twitter. Tentu anda semua tahu atau pernah menggunakannya kan ? , jika belum ,, segera bertobat ,, hehehe,. Pernahkah anda perhatikan twitt dari semua orang atau perusahaan yang kita follow otomatis tampil bertambah dan bergantian pada walk twitter kita ? sementara kita belum ada me-reload halaman browser kita, itu semua adalah kerjaan ajax ini. Dengan ajax , kita tidak perlu lagi mereload halaman browser kita jika dalam website kita ada data yang bertambah atau berubah.
Untuk lebih jelasnya, anda dapat mengunduh tutorialnya pada link download dibawah ini. Tutorial ini dirangkum dalam sebuah file halaman PDF. Terimkasih
JQuery adalah suatu framework (library) Javascript yang menggambarkan bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan keunggulan yang cukup banyak. Hal tersebut banyak menyebabkan para developer web menggunakannya dalam pembuatan sebuah website. JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak. Degan istilah kata lain bisa disebutkan, kecil-kecil cabe rawit.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
JQuery merupakan library open source dengan lisensi GNU General Public License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas dalam bentuk plugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara gratis di internet.
Apa yang bisa Anda Lakukan dengan JQuery?
1. Mengakses bagian halaman tertentu dengan mudah.
Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.
2. Mengubah tampilan bagian halaman tertentu.
CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web. Namun terkadang CSS punya kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua browser. Cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus. Sekali lagi JQuery menawarkan solusi untuk mengatasi hal tersebut. Dengan JQuery, “kesenjangan” yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik.
3. Mengubah isi dari halaman.
Jaman dulu (baca:sebelum JQuery lahir) cukup sulit jika kita akan mengubah sebagian isi dari halaman. Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris perintah.
4. Merespond interaksi user dalam halaman.
Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.
5. Menambahkan animasi ke halaman.
Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.
6. Mengambil informasi dari server tanpa me-refresh seluruh halaman.
Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya.
7. Menyederhanakan penulisan Javascript biasa.
Semboyan JQuery adalah “Write less, do more” atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery.
Download JQuery
Situs resmi JQuery dapat diakses di http://jquery.com/. Dan library JQuery dapat didownload di alamat http://docs.jquery.com/Downloading_jQuery. Tersedia library jQuery dalam 2 (dua) jenis yaitu minifieddan uncompressed. Minified jika kita ingin menggunakannya saja dalam website kita (ukuran 18 KB), sedangkan uncompressed jika kita berkeinginan turut serta mengembangkan code jQuery.
Contoh Sederhana JQuery
Contoh sederhana penggunaan JQuery
Penjelasan Program
1. Pertama, kita harus menyertakan (include) file library JQuery. Pastikan letak dari file library sudah benar.
2. Perintah-perintah JQuery.
2. Perintah-perintah JQuery.
- Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap ditampilkan maka jalankan juga perintah yang ada di dalamnya. Hal ini mirip dengan event onLoad yang biasanya diletakkan di tag <body>.
- Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link dengan class=show ( $(‘a.show’) ) diklik (lihat link baris ke-22). Jadi jika link di-klik maka paragraf dengan nama class=jquery ( $(‘p.jquery’) ) akan tampil dengan durasi tampil “slow”. Paragraf yang akan ditampilkan adalah paragraf baris ke-24 sampai 27.
- Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang mengandung nama class=jquery.
3. Isi dari halaman. Perhatikan nama class dari masing-masing object.
Sekian Tutorial Dasar Jquery nya, saya harap dapat berguna bagi setiap yang membacanya.
