Subscribe: Creativehubwebdesign
http://www.creativehubwebdesign.com/feeds/posts/default
Preview: Creativehubwebdesign

Creativehubwebdesign



Informasi Seputar Tutorial Blogging dan Web Design



Updated: 2017-03-30T20:41:22.616+07:00

 



Tips Mencari/Memasang Backlink yang Baik dan Benar

2015-08-30T14:49:04.359+07:00

Backlink merupakan salah satu kebutuhan pokok dari sebuah website/blog, agar artikel blog tetap kokoh posisinya pada search engine, dan juga sangat berguna untuk menaikkan posisi konten blog yang tadinya tidak terlihat di halaman depan serp menjadi nangkring di depan. Intinya backlink dapat menambah popularitas dari web yang kita miliki.Jangan Terpaku Pada Backlink PR TinggiBanyak blogger yang mengatakan backlink yang bagus adalah yang ber-PR(Page Rank) tinggi. Memang benar asumsi tersebut, tapi kebanyakan backlink yang ber-PR tinggi memiliki outbound sangat banyak atau sudah banyak orang yang memasang backlink di sana. Hal ini berarti PR halaman yang tadinya tinggi menjadi terbagi-bagi untuk semua link yang ada di dalamnya, artinya jika kita ikut serta menanam backlink di sana kualitas backlink tersebut sudahlah rendah.Menghindari Menanam Backlink pada Halaman yang Memiliki Banyak Link keluarOutbound link (Link keluar) yang terlalu banyak membuat halaman website ber-PR tadi memiliki spam score, yang mungkin hal ini justru tidak baik untuk SEO. Maka dari itu lebih baik kita mencari backlink tidak terpaku pada PR nya tetapi melihat dari kualitas website tersebut.Menggunakan Keyword Bervariasi dan Link Target yang Berbeda-bedaMenanam backlink sebaiknya menggunakan anchortext yang bervariasi atau target keyword yang kita gunakan harus berwarna agar terlihat lebih natural, contohnya kita menargetkan keyword "berita bola" , kita bisa memvariasikan keyword ini menjadi "berita bola dunia", "berita olahraga sepakbola", "info bola terbaru", dan lain lain sebagainya. Popularitas suatu website kebanyakan di ukur dari backlink yang mengarah ke homepage/halaman utama tetapi menargetkan backlink ke artikel langsung juga perlu, agar backlink lebih natural, disarankan sobat mengarahkan ke konten-konten yang diunggulkan pada blog. Backlink yang Berpengaruh Terhadap SEO Adalah Backlink DofollowMengapa hanya dofollow yang berpengaruh terhadap SEO? ini jawaban dari google, Saya simpulkan karena backlink nofollow tidak diikuti oleh google, dan tidak memberikan point PR apapun terhadap link atau tautan. Nah jadi sebelum memasang backlink periksa terlebih dahulu, pendahulu yang telah memasang backlink. Caranya klik kanan pada link, kemudian cek di antara tag apakah ada tulisan rel="nofollow" , jika ada maka sudah jelas itu nofollow, dan tidak berpengaruh terhadap SEO.Backlink nofollow memang tidak mempengaruhi SEO tapi tetap berguna untuk blog, gunanya bisa untuk menambah traffic/pengunjung blog kita, dan juga agar optimasi blog menjadi lebih natural jika divariasikan dengan backlink nofollow. Tapi sobat tidak perlu terlalu banyak memasang backlink ini karena lebih bermanfaat jika waktunya digunakan untuk mencari backlink dofollow. Contoh backlink nofollow adalah link pada facebook, googleplus, twitter, academia.edu, youtube dan situs-situs besar lainnya.Jenis-jenis Backlink yang Bisa DigunakanBlog CommentBacklink yang paling lumrah kita lihat adalah blog comment, tetapi kebanyakan blog comment itu nofollow, contohnya saja blogspot dan wordpress. GuestbookBacklink guestbook bisa juga tetapi kebanyakan guestbook tempatnya spamming, terlalu banyak outbound linknya.Web 2.0Backlink Web 2.0, contohnya backlink pada postingan blog, bisa blogspot, wordpress, tumblr, blog detik, dll. Jenis backlink ini menurut para ahli sangat bagus untuk SEO.ForumSaya pribadi lebih sering dan suka mencari backlink jenis ini karena kemungkinan spammingnya kecil dan mudah karena hanya membuat signature kemudian berkomentar di thread-thread backlink akan otomatis tertinggal di setiap thread yang kita beri komentar.Dan masih banyak lagi, tapi yang paling populer setahu Saya keempat yang sudah disebutkan di atas saja.Hindari Mencari Backlink dengan Cara Blackhat SEOSaya tidak melarang cuma menyarankan untuk menghindari mencari backlink dengan metode blackhat karena, blackhat seo sudah pasti apa yang kita lakukan menyampah/spamming, spamming=crime=kriminalitas, jadi sebaiknya dihindari ya sob. Lagi pula berkah dari keberhasilan suat[...]



Cara Membuat Auto Post Wordpress dengan PHP CURL

2015-08-30T15:32:02.308+07:00

Selamat datang Sobat Blogger. Dikesempatan ini Saya membuat tutorial tentang Cara Membuat Postingan Otomatis Wordpress dengan PHP CURL dengan mudah tanpa perlu login ke wordpress dan hanya menggunakan address bar saja untuk membuat artikel. Baiklah tanpa perlu panjang lebar simak saja perlahan tutorial berikut ini.Auto Post Wordpress menggunakan PHP CURLPertama sediakan local webserver seperti XAMPP di komputer Sobat, jika belum ada baca selengkapnya pada artikel Cara Instalasi XAMPP untuk bisa menjalankan script PHP auto post nanti.Setelah itu buatlah file berekstensi .php contohnya autopost.php dengan notepad atau sejenisnya. Baca : Membuat File Ekstensi Berbeda dengan NotepadSekarang login ke wordpress Sobat terlebih dahulu, kita akan menginstal satu plugin yang membantu untuk membuat auto post ini, pada menu kiri Plugins, pilih Add New. Setelah itu cari plugin dengan nama "guest posts" berikut tampilan plugin tersebut.Install plugin guest posts tersebut, lalu aktifkan. Nantinya guest post ini yang akan kita gunakan untuk melakukan postingan otomatis, karena jika langsung ke halaman New Post Saya belum menemukan caranya, maka inilah solusi yang Saya temukan.Setelah itu salin kode berikut ini di file php yang telah dibuat tadi.Setelah disalin, ganti pada kode WEBSITEKAMU dengan alamat website, USERNAMELOGINKAMU dengan username login wordpress, dan PASSWORDLOGINKAMU dengan password login wordpress Sobat.Seusai itu, pindahkan atau kopi file php yang kita buat tadi ke folder C>XAMPP>htdocs.Sekarang kita tinggal menjalankan script tadi di webbrowser, buka webbrowser Sobat ketikkan pada address bar localhost/autopost.php?judul=JUDUL KONTEN&konten=ISI KONTEN&tag=TAG KONTEN.Selesai, dan seperti inilah hasilnya jika tutorial ini berhasil. Semoga berhasil dan teruslah mencoba Sobat. Lihat tampilanBaca juga postingan sebelumnya Cara Login Wordpress OtomatisDemikianlah artikel ini Saya buat, semoga bermanfaat, Terima Kasih.[...]



Cara Login Wordpress Otomatis Menggunakan PHP CURL

2015-07-11T11:37:33.706+07:00

Halo Sobat Blogger, di artikel ini Saya akan memberikan Script Login Wordpress dengan PHP CURL dan cara mengaplikasikannya dengan mudah, yang bisa Sobat sekalian kembangkan atau bisa Sobat gunakan untuk memposting artikel tanpa harus login ke wordpress. Baiklah langsung saja berikut ini langkah-langkah tutorial yang akan kita lakukan.

Cara Menggunakan Script Login Wordpress

  • Hal pertama yang harus di lakukan adalah sudah menginstal Local Webserver pada PC/Komputer Sobat, jika belum baca artikel ini Cara Install XAMPP, kenapa harus menginstal webserver? karena PHP adalah script yang bekerja di webserver, jadi hukumnya wajib untuk di instal. 
  • Jika sudah di instal lanjut buka program XAMPP nya kemudian start Apache.
  • Kemudian buatlah sebuah file dengan extensi .php contoh loginwp.php menggunakan notepad, dreamweaver dll, jika belum tahu baca artikel Membuat File Esktensi Berbeda
  • Jika sudah salin script PHP berikut ini di dalamnya, kemudian Save, dan kopi file php tadi di folder C > XAMPP > htdocs.

$url = "http://GANTIDOMAINKAMU.com/wp-login.php"; #GANTI DENGAN URL LOGIN WORDPRESS
$user = "GANTIUSERNAME"; #GANTI DENGAN USERNAME WORDPRESS
$pass = "GANTIPASSWORD"; #GANTI DENGAN PASSWORD WORDPRESS
$redirect = "http://GANTIDOMAINKAMU.com/wp-admin/post-new.php"; #GANTI DENGAN PAGE YANG AKAN DIREDIRECT/DIBUKA SETELAH LOGIN, CONTOH PAGE NEW POST
$data = "log={$user}&pwd={$pass}&wp-submit=Log+In&redirect_to={$redirect}&testcookie=1";

$login=curl_init();
curl_setopt($login,CURLOPT_COOKIEJAR,"cookie.txt");
curl_setopt($login,CURLOPT_COOKIEFILE,"cookie.txt");
curl_setopt($login,CURLOPT_TIMEOUT,80000);
curl_setopt($login,CURLOPT_RETURNTRANSFER,TRUE);
curl_setopt($login,CURLOPT_URL,$url);
curl_setopt($login,CURLOPT_USERAGENT,$_SERVER['HTTP_USER_AGENT']);
curl_setopt($login,CURLOPT_FOLLOWLOCATION,TRUE);
curl_setopt($login,CURLOPT_POST,TRUE);
curl_setopt($login,CURLOPT_POSTFIELDS,$data);

$te = curl_exec($login);
echo $te;
curl_close($login);

?>



  • Setelah itu bukalah web browser sobat kemudian ketikkan di address bar localhost/loginwp.php kemudian enter.
  • Jika berhasil maka tampilannya akan seperti ini.

Demikianlah sedikit script untuk Login Wordpress Otomatis dengan Menggunakan PHP Curl. Semoga dapat bermanfaat, Terima Kasih.



Cara Mendapatkan Email Gratis Tanpa Daftar

2015-06-09T11:15:04.061+07:00



Sesuai dengan judul postingan di atas, pada artikel kali ini Saya akan membahas caranya mendapatkan e-mail gratis tanpa registrasi atau pendaftaran. Mungkin diantara sobat pembaca sekalian ada yang ingin mendaftar di sebuah website, tetapi tidak memiliki email dan belum mengerti untuk mendaftarkan email baru, atau ingin daftar di website yang kurang dipercaya dan takut akan menjadi spam di email pribadi kita. 

Di bawah ini Saya menuliskan beberapa website yang menyediakan fasilitas email tanpa harus mendaftar yang mungkin bisa mempercepat kita dalam proses pendaftaran suatu website atau menerima pesan.

Situs Penyedia Email Gratis Tanpa Registrasi

1. Yopmail[.]com

Buka situs yopmail.com kemudian tuliskan nama email apa saja yang sobat inginkan kemudian klik tombol check inbox, lalu tunggu beberapa saat hingga muncul daftar inbox/kotak masuk pesan pada email tersebut.


2. Discard[.]email

Tulis pada web browser address discard.email, setelah situs terbuka input saja nama email yang diinginkan pada kolom alias, pada kolom domain bisa memilih banyak macam domain untuk email kita, lihat saja dan pilih yang diinginkan. Kemudian tekan enter saja atau tekan tombol dengan bahasa aneh itu. Kemudian akan terbuka daftar inbox dari email sobat.

3. Fakemailgenerator[.]com

Situs ini juga bisa dijadikan alternatif email gratis, domain email yang disediakan pada website ini cukup banyak juga. Cara mendapatkan emailnya hampir sama dengan yang sudah saya sebutkan di atas, input nama email pilih domain lalu sobat tinggal menunggu saja inbox yang masuk di bawah opsi tersebut.


Cukup tiga situs yang dapat Saya sampaikan disini, karena biasanya itu yang Saya gunakan. Untuk Sobat disarankan jangan menggunakan email di atas untuk email pribadi atau untuk menerima pesan-pesan yang penting, lebih baik gunakanlah email gratis dengan keamanan baik seperti gmail, yahoo mail, dan outlook mail. Website email gratis yang sudah Saya sebutkan itu juga tidak bisa di gunakan untuk mendaftar di situs social media seperti facebook, twitter, dll, karena situs email ini dianggap sebagai email spam, ya tentu saja karena situs ini kebanyakan digunakan untuk aktivitas yang kurang baik.




Cara Memperbesar atau Mengecilkan Halaman Website pada Browser

2015-06-05T15:04:33.910+07:00



Halo blogger, pada pertemuan kali ini Saya menuliskan artikel mengenai cara memberpesar atau mengecilkan halaman website pada browser, mungkin diantara Sobat sekalian ada yang belum tahu cara memperbesar atau mengecilkan halaman web, atau barangkali kita masuk ke sebuah website dengan halaman terlalu besar atau kecil dan kita ingin mengubahnya agar lebih mudah dilihat.

Cara mengubah halaman web pada browser cukup mudah hanya menekan tombol CTRL + (+) (Tombol control di sudut kiri bawah atau kanan bawah keyboard ditekan bersamaan dengan tombol tambah) untuk memberpesar ukuran sedangkan CTRL + (-) untuk mengurangi ukuran window, atau untuk lebih simpelnya sobat bisa menggunakan CTRL + Scroll Up/Down Mouse (CTRL ditahan dan scroll pada mouse di naik turunkan).

Bagaimana cukup simpel bukan, cara ini sudah Saya coba pada web browser Mozilla Firefox, Google Chrome, dan Internet Explorer kemungkinan besar cara ini juga bekerja pada web browser lainnya. Cara yang menggunakan scroll tadi juga bisa diterapkan pada Microsoft Office Word maupun Excel.

Demikianlah tutorial singkat ini Saya sampaikan, semoga bisa bermanfaat bagi sobat sekalian yang membutuhkan, bila ada kesalahan dalam penulisan atau penjelasan Saya mohon maaf. Terima kasih telah berkunjung.



Cara Memaksimalkan Pencarian Google

2015-05-27T07:51:32.607+07:00

Mungkin banyak diantara kita yang mencari artikel di Google tetapi tidak menemukan yang kita cari, hal ini bisa saja disebabkan karena memang tidak adanya postingan yang kita cari tetapi bisa juga artikel tersebut tidak berada di posisi halaman-halaman terdepan Google. Beberapa cara di bawah ini mungkin dapat memudahkan kita untuk memaksimalkan dan mengakuratkan penelusuran di Google. Baiklah simak caranya berikut ini.1. Mencari Berdasarkan Tipe FileMencari jurnal, modul, atau makalah terkadang kita lebih membutuhkan file tertentu, seperti Microsoft Word, Excel, Power Point, atau PDF. Untuk mencari file-file tersebut kita bisa menggunakan cara seperti ini pada kolom penelusuran Google :Matematika filetype:xlsx  >> Mencari file Microsoft Excel Cara 1Matematika filetype:xls  >> Mencari file Microsoft Excel Cara 2Tutorial Blog filetype:pdf >> Mencari file PDFResep masakan filetype:docx >> Mencari file Microsoft Word Cara 1Resep masakan filetype:doc >> Mencari file Microsoft Word Cara 2seminar proposal filetype:pptx >> Mencari file Microsoft Power Point Cara 1seminar proposal filetype:ppt >> Mencari file Microsoft Power Point Cara 2   2. Mencari Pada Url / Alamat WebsiteCara ini digunakan untuk mencari konten berdasarkan alamat suatu website, contohnya penggunaannya seperti ini inurl:"terbaru 2015" , keyword ini akan menampilkan artikel yang memiliki url dengan kata terbaru 2015. Jika menggunakan satu kata tidak perlu menggunakan tanda kutip.3. Mencari Pada Domain TertentuAda saatnya kita ingin mencari artikel blog kita, atau artikel blog/website tertentu saja yang terkadang jika menuliskan secara biasa konten yang kita cari tidak ditemukan. Gunakanlah cara berikut ini contoh penggunaannya site:detik.com, kata kunci ini akan menampilkan hasil penelusuran pada website detik.com saja, jika kita ingin mencari yang lebih terperinci lagi misalnya mencari berita pada detik.com, tambahkan kata kunci dibelakang domain yang kita cari tadi, contoh site:detik.com berita. Cara ini bisa juga mencari ekstensi domain tertentu seperti ini site:edu, keyword ini akan menampilkan website .edu saja kita bisa juga mencari domain dengan ekstensi .com, .net, dan lain sebagainya.4. Mencari Kalimat atau Pasangan Kata TertentuTidak jarang seperti saya, yang tidak menemukan apa yang dicari pada Google, karena Google mungkin meletakkan artikel yang kita cari pada halaman-halaman terbelakang. Gunakan cara berikut ini contoh penggunaannya "Download Lagu Indonesia Terbaru", kata kunci seperti ini akan menampilkan hasil penelusuran yang pada artikel tersebut mengandung kalimat atau pasangan kata "Download Lagu Indonesia Terbaru".5. Mencari dengan Pengecualian Kata TertentuBarangkali ada diantara sobat sekalian yang ingin mencari di Google tetapi dengan pengecualian kata tertentu, gunakan cara berikut contohnya download software -"trial" kata kunci seperti ini akan menampilkan hasil penelusuran yang mengandung kata download software tetapi juga menghindari yang mengandung kata trial. Pengecualian kata dituliskan seperti ini  -"kata yang dihindari".6. Gunakan Advanced Search atau Penelusuran LanjutanGoogle Advanced Search memudahkan dan memaksimalkan penelusuran kita juga, hampir sama dengan cara yang disebutkan sebelumnya tetapi yang ini menurut saya lebih mudah digunakan dibandingkan harus menulis dan mengingat query tertentu seperti tadi. Untuk mencobanya langsung saja ke Advanced SearchDemikianlah yang dapat Saya sampaikan pada artikel ini, semoga dapat membantu dan bermanfaat. Terima Kasih. [...]



Koleksi 7 Background Bermotif dengan Pure CSS Repeating Gradient

2015-08-30T09:33:04.453+07:00

Iseng-iseng kali ini Saya membagikan 7 background bermotif yang barang kali bisa Sobat gunakan sebagai referensi atau latar belakang (Background) dari elemen atau halaman website Sobat. Background bermotif dibawah ini menggunakan pure / murni CSS, dan bisa Sobat kreasikan.Berikut ini tampilan dari background-background murni CSS tersebut :1.background:repeating-radial-gradient(#6cf,#6cf 3px,transparent 3px,transparent 6px,#6cf 6px,#6cf 10px,white 10px,white 14px,#6cf 14px,#6cf 17px,transparent 17px,transparent 25px),repeating-radial-gradient(#6cf,#6cf 3px,transparent 3px,transparent 6px,#fff 6px,#fff 17px,transparent 17px,transparent 25px);background-blend-mode: multiply;background-size: 50px 50px,100px 100px;2.background:repeating-radial-gradient(#d65,#d65 3px,transparent 3px,transparent 6px,#b65 6px,#b65 10px,white 10px,white 14px,#f65 14px,#f65 17px,transparent 17px,transparent 45px), repeating-linear-gradient(45deg,#b65,#b65 3px,transparent 3px,transparent 50px);background-blend-mode: multiply;background-size: 70px 70px;background-position: 0,10px 43px;3.background:repeating-radial-gradient(circle at left top,transparent, transparent 40.5px,#292 40.5px,#292 43.5px,transparent 43.5px,transparent 46.5px,#999 46.5px,#999 49.5px,transparent 49.5px,transparent 83px),repeating-radial-gradient(circle at right bottom,transparent, transparent 31px,#999 31px,#999 34px,transparent 34px,transparent 37px,#292 37px,#292 40px,transparent 40px,transparent 83px),repeating-radial-gradient(circle at left bottom,transparent, transparent 40.5px,#55b 40.5px,#55b 43.5px,transparent 43.5px,transparent 46.5px,#fcb 46.5px,#fcb 49.5px,transparent 49.5px,transparent 83px),repeating-radial-gradient(circle at right top,transparent, transparent 31px,#fcb 31px,#fcb 34px,transparent 34px,transparent 37px,#55b 37px,#55b 40px,transparent 40px,transparent 83px);background-blend-mode: multiply;background-size: 80px 80px;4.background:repeating-radial-gradient(#999,#fff,#bbb 7px, #bbb 10px,transparent 10px, transparent 30px),repeating-linear-gradient(-45deg,#555, #555 5px, transparent 5px, transparent 50px),repeating-linear-gradient(45deg, #944, #944 5px, transparent 5px, transparent 50px),repeating-linear-gradient(-135deg,#222, #222 5px, transparent 5px, transparent 50px),repeating-linear-gradient(135deg, #9df, #9df 5px, transparent 5px, transparent 50px);background-blend-mode: multiply;background-size: 50px 50px;5.background:repeating-radial-gradient(#999,#fff 5px,#bbb 7px, #bbb 10px,transparent 10px, transparent 66px),repeating-radial-gradient(circle at left top, #ddd, #ddd 6px, transparent),repeating-radial-gradient(circle at right top, #6cf, #6cf 6px, transparent 6px, transparent 67px),repeating-radial-gradient(circle at right bottom, #6cf, #6cf 6px, transparent 6px, transparent 67px),repeating-radial-gradient(circle at left top, #8cb, #8cb 6px, transparent 6px, transparent 67px),repeating-radial-gradient(circle at left bottom, #8cb, #8cb 6px, transparent 6px, transparent 67px);background-blend-mode: multiply;background-size: 100px 100px;6.background:repeating-radial-gradient(circle at right top, #922, #922 6px, transparent 6px, rgba(0,0,105,0.1) 67px),repeating-radial-gradient(circle at right bottom, #fd8, #fd8 6px, transparent 6px, rgba(0,0,105,0.1) 67px),repeating-radial-gradient(circle at left top, #da8, #da8 6px, transparent 6px, rgba(0,0,105,0.1) 67px),repeating-radial-gradient(circle at left bottom, #fbb, #fbb 6px, transparent 6px, rgba(0,0,105,0.1) 67px);background-blend-mode: multipy;background-size: 60px 130px;7.background:repeating-linear-gradient(90deg,white, white 35px,transparent 50px, transparent 100px),repeating-linear-gradient(70deg,transparent, transparent 30px,#fff 10px, #052 40px),repeating-linear-gradient(90deg,transparent, transparent 50px,#555 50px, #222 100px);Untuk mengganti warna dari contoh-contoh background diatas gunakan Color Generator. Untuk mempelajari atau [...]



Widget Label / Kategori Hitam Keren Dengan Jumlah Postingan Per Label dan Hover Effect

2015-08-30T09:35:36.668+07:00

Dikesempatan kali ini Saya membagikan CSS dari widget label blogger, yang barangkali diantara Sobat sekalian ingin mengganti atau memberi gaya dari widget Kategori (Label) blognya. Kira-kira tampilan dari widget tersebut seperti dibawah ini


Caranya cukup mudah, simak tuturial berikut.
  • Login ke akun Blogger, pilih blog, kemudian pilih Tata Letak pada menu sebelah kiri Blogger.
  • Tambahkan gadget di tempat yang Sobat inginkan, bisa difooter atau disidebar,  pilih Label.
  • Selelah itu atur widget, pilih Tampilkan Daftar, dan centang Tampilkan jumlah entri per label. Lalu simpan.
  • Kemudian pilih menu Template pada menu sebelah kiri Blogger, kemudian klik Edit HTML.
  • Lalu copy kode CSS tersebut diatas , gunakan CTRL+F untuk mempercepat pencarian.



  • Untuk lebih memvariasi kan warna pada widget sesuai keinginan Sobat, gantilah value kode CSS color dan background, contoh : color: #fff diganti menjadi color: #000. Gunakan tool Color Generator untuk mengetahui kode warna.
Sekian pada tutorial kali ini, semoga ini dapat bermanfaat. Terima Kasih.



Perbedaan Margin Dengan Padding Pada CSS

2015-03-05T04:02:54.837+07:00


Apa itu Margin?

Margin adalah suatu jarak atau space antara suatu elemen dengan elemen yang ada diluar atau lainnya, jarak yang dibuat dimulai setelah border.


Lalu apa itu Padding?

Padding adalah suatu jarak atau space antara inti elemen / konten terhadap border elemen.

Untuk lebih jelas memahami perbedaan keduanya. Silahkan buka browser Google Chrome, kemudian klik kanan > Inspect Element / Periksa Elemen di random tempat pada blog atau website, lihat bagian CSS di sebelah kanan, jika tidak terlihat coba scroll kebawah. Maka akan muncul hal seperti contoh dibawah ini.



  • Pada gambar diatas, warna biru menunjukkan ukuran konten dari elemen (Text, gambar, dll).
  • Warna hijau menunjukkan ukuran padding.
  • Warna kuning ukuran border.
  • Dan warna cream atau orange untuk ukuran margin
Nah, Saya kira cukup sekian pada artikel kali ini, Terima Kasih.



Beberapa Tag / Kode HTML Yang Paling Sering Digunakan Berikut Penjelasan atau Fungsinya

2015-03-04T16:31:00.974+07:00

Halo Sobat!, pada kesempatan ini kembali Saya akan membahas dasar HTML lagi, dengan artikel yang berisi beberapa script / tag HTML yang paling sering digunakan berikut penjelasan dan fungsinya. Sebenarnya penjelasan mengenai kode HTML dasar ini sudah banyak tersedia di google, namun demi melengkapi artikel tutorial blog ini dan juga barangkali dapat memudahkan Sobat yang berminat belajar webdesign.Setelah membahas Cara mudah memahami perintah HTML dan CSS pada artikel sebelumnya, kali ini kita akan berfokus kepada kode / perintah HTML saja. Baiklah berikut ini beberapa kode HTML tersebut : = Tempatnya seluruh elemen HTML atau mendefinisikan dokumen HTML. = Tempat diletakkannya sumber daya website seperti CSS, Javacript, Title. = Elemen text dari judul halaman HTML, yang akan ditampilkan pada tab browser.<style> = Tempat diletakkannya gaya atau style (CSS) untuk memperindah tampilan halaman HTML / website.<script> = Tempat diletakkanya Javascript.<body> = Tempat seluruh elemen HTML yang akan ditampilkan pada browser.<!-- --> = Sebagai elemen pembungkus keterangan yang ada pada dokumen HTML, elemen ini tidak berpengaruh pada tampilan website. Contoh : "<!-- Keterangan -->".<p> = Elemen yang mendefenisikan suatu paragraf/ alinea.<div> = Suatu elemen pembungkus elemen HTML yang lain, yang tidak memiliki arti khusus, namun sering digunakan sebagai elemen yang berdiri sendiri, karena elemen tersebut akan membuat garis baru dari elemen sebelumnya, dan sesudahnya yang didapatkan dari style bawaan <div> yakni "display:block". Sama halnya dengan <p> , namun pada <p> terdapat margin, sedangkan pada <div> tidak.<span> = Suatu elemen pembungkus elemen HTML yang lain, sama fungsinya dengan <div> namun tidak memberikan pengaruh apapun pada elemen yang ada didalamnya, karena tidak memiliki style bawaan. <img> = Elemen pemanggil atau penampil gambar. Contoh : "(image) " . Elemen <img> tidak memerlukan tag penutup, melainkan langsung ditutup pada akhir tag pembukanya saja />. src=" " disini mendefinisikan source atau sumber gambar (Alamat Gambar).<input> = Mendefinisikan elemen input<i> atau <em> = Membuat text / huruf miring (Italic)<b> = Membuat text / huruf tebal (Bold)<u> = Membuat text / huruf bergaris bawah (Underline)<h1> s/d <h6> = Header text atau text kepala untuk judul ataupun sub judul.<br /> = Sebagai baris baru/ enter.<ul> = Untuk membuat list tidak berurutan atau list dengan bullet hitam (Unordered List). Penggunaan <ul> diperuntukkan sebagai parent (Induk elemen) dari elemen <li>. Contoh : "<ul><li>List ke-1</li></ul>"<ol> = Untuk membuat list berurutan dengan angka (Ordered List). Sama fungsinya dengan <ul><li> = Elemen list atau daftar.<a> = Elemen untuk diletakkannya suatu link/ alamat website diluar dari halaman HTML itu sendiri. Contoh : "<a href="https://www.google.co.id/" > Google </a>". Contoh tersebut akan menampilkan text "Google" saja namun terdapat link/ alamat yang dapat di klik pada text tersebut, yakni yang ada pada property <a href="Tempatlink">.<table> = Elemen tabel.<th> = Table header, baris kepala tabel.<tr> = Table row atau baris tabel.<td> = Table data atau kolom tabel.<marquee> = Membuat text / huruf berjalan.Saya pikir beberapa Tag HTML diatas adalah yang sering digunakan pada umumnya. Semoga artikel ini dapat bermanfaat. Lebih dan kurang Saya mohon maaf, Terima Kasih.[...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/03/memahami-satuan-ukuran-pada-css-px-em.html" rel="nofollow">Memahami Satuan Ukuran Pada CSS (Px, Em, % (Persen))</a><br /> <p>2015-03-04T14:49:45.734+07:00</p> Pada artikel ini, Kita membahas satuan ukuran pada CSS, yang diantaranya adalah Px, Em, & % (Persen). Satuan - satuan tersebut berguna untuk mengatur besar font, lebar, tinggi, margin, dan padding dari suatu elemen yang ada pada halaman website.PX (Pixel)Piksel adalah unsur gambar atau representasi sebuah titik terkecil dalam sebuah gambar grafis yang dihitung per inci (Wikipedia). Pada web design / CSS merupakan satuan ukuran utama dan paling umum digunakan. 1Px = 0.01 Inch.Contoh :"body{font-size: 16px; width: 1000px;}"EMApa itu EM pada CSS? Em juga merupakan satuan ukuran, yang tujuan penggunaannya untuk mempermudah responsive font ataupun elemen, atau bisa juga menyingkat ukuran satuan px. Nilai 1em = font-size dalam ukuran Px elemen yang membungkusnya, misalnya pada elemen Konten font-size: 20px, maka 1em pada elemen tersebut adalah 20px, begitu pula kelipatan em selanjutnya. Contoh :HTMLFont Size: 20px; Lebar & Tinggi Dengan EMFont Size: 16px; Lebar & Tinggi Dengan EMFont Size: 12px; Lebar & Tinggi Dengan EMFont Size: 20px; Lebar & Tinggi Dengan PXFont Size: 16px; Lebar & Tinggi Dengan PXFont Size: 12px; Lebar & Tinggi Dengan PXCSS.el{margin: 3px;text-align: center;float: left} .em1{font-size: 20px; width: 10em; height: 5em; background: #fcb;} .em2{font-size: 16px; width: 10em; height: 5em; background: #fcb;} .em3{font-size: 13px; width: 10em; height: 5em; background: #fcb;} .px1{font-size: 20px; width: 200px; height: 5em; background: #6cf;} .px2{font-size: 16px; width: 160px; height: 80px; background: #6cf;} .px3{font-size: 12px; width: 120px; height: 60px; background: #6cf;}TAMPILANPada contoh diatas, perhatikan CSS nya, elemen dengan Class em1 menggunakan font-size: 20px, width:10em, dan height: 5em, yang artinya width dari elemen tersebut sebesar 200px, didapat dari (1em = 20px , 10em = 200px).Perhatikan pula pada elemen Class px1 tetapi ukuran lebar dan tingginya menggunakan satuan px, bukankah kedua elemen tersebut (em1 dan px1) memiliki ukuran lebar dan tinggi yang sama?. Percentage / Persen / %Persen (%) juga merupakan salah satu satuan ukuran pada CSS, yang sangat berguna untuk meresposive kan suatu elemen atau halaman website. Nilai dari 100% = maksimal ukuran suatu elemen atau besar font pada elemen induk atau elemen pembungkus. Contoh :Width / lebar suatu elemen outer-wrapper 1000px, maka lebar 100% dari elemen-elemen yang ada didalam outer-wrapper tersebut adalah 1000px, 80% = 800px, begitu pula selanjutnya.Pada font juga hampir sama, jika misalnya font size body diatur sebesar 16px, dan kita menerapkan font size pada content-wrapper 80% maka font tersebut sama halnya berukuran 12.8px.Nah, demikianlah artikel ini Saya buat. Mohon maaf jika ada kesalahan penulisan atau penjelasan. Semoga dapat bermanfaat, Terima Kasih.[...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/03/cara-mudah-merombak-mengedit.html" rel="nofollow">Cara Mudah Merombak / Mengedit / Memodifikasi Template Blog / Website</a><br /> <p>2016-07-13T13:54:27.203+07:00</p> Mengedit atau memodifikasi tampilan blog itu menyenangkan dan sebenarnya tidak sulit jika kita mengetahui sedikit banyak tentang script CSS (Cascading Style Sheets), HTML, dan Javascript. Hal tersebut ingin kita lakukan biasanya karena ingin membuat tampilan blog agar lebih keren, memberi warna dan suasana baru, atau mungkin kita bosan dengan tampilan blog yang itu-itu saja.Membaca script / kode tentu adalah hal yang menyebalkan terkhusus untuk blogger pemula termasuk Saya dulunya. Namun bila kita mengerti sedikit banyak tentang kode itu, hal yang tadinya menyebalkan bisa menjadi menyenangkan loh. Langsung saja simak cara / tutorialnya berikut ini.Pertama-tama login ke akun blogger.com > Buka blog yang akan diedit > Pada menu bar blogger sebelah kiri, klik Template > Pada menu Template klik Edit HTMLJika sudah membuka Edit HTML biarkan dahulu, sekarang buka blog Sobat, kita akan melakukan pengeditan tampilan blog dari Inspect Elemen terlebih dahulu.Inspect Elemen/ Periksa Elemen yang akan kita edit gaya, warna, ukuran dan lain sebagainya. Klik kanan pada bagian yang akan di edit, pilih Periksa Elemen / Inspect Element. Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ideUntuk pengeditan Saya sarankan menggunakan browser Mozilla Firefox, download disini, karena untuk memodifikasi CSS lebih mudah dan leluasa, atau Chrome juga tidak masalah.Kode HTML yang sebelah kiri, dan kode CSS yang disebelah kanan Inspect Element.Mengedit kode HTML dengan klik kanan kode HTML yang diinginkan,  kemudian Edit As HTML, atau tekan F2 saja pada kode tersebut. Maka tampilannya seperti pada Gambar 1 (Lihat di bawah postingan).Mengedit kode CSS yaitu klik Property / Value CSS yang ada disebelah kanan Inspect Elemen, kemudian ganti atau modifikasi sesuai keinginan. Pada contoh dibawah ini, Saya mengganti value / nilai dari warna background elemen .menu. Contoh pada Gambar 2 (Lihat di bawah postingan).Pengguna Firefox, pada bagian inspect element, pilih Style Editor/ Editor Gaya, untuk fokus ke pengeditan CSS. Editing HTML nya pada Inspector / Inspektur tab Inspect Element. Contoh pada Gambar 3 (Lihat di bawah postingan).Pilih style utama blog Sobat yang hendak diedit, atau periksa satu persatu kumpulan CSS yang ada disebelah kiri gambar berikut. Silahkan Sobat, mengotak atik CSS yang ada pada kolom tengah. Contoh pada Gambar 4 (Lihat di bawah postingan).Jangan sungkan untuk menghapus atau menambahkan kode pada CSS maupun HTML, karena pengeditan ini sifatnya sementara saja, dan hanya terjadi pada komputer Sobat.Tetap lanjutkan saja pengeditan, jika sudah menemukan atau menyelesaikan desain yang diinginkan, save atau salin kode HTML dan CSS yang baru tersebut, ke Edit HTML yang ada pada Blog sobat, search saja di blog dengan CTRL+F agar memudahkan menemukan kode yang akan diganti.Dan lagi lagi, jangan berhenti berusaha mencoba terus menerus, jika belum berhasil coba dan coba lagi, karena semakin sering kita menemukan masalah dan memecahkannya, semakin banyak pula pengalaman kita dalam mendesain web.Gunakan juga tool color generator dan editor HTML CSS blog ini, yang mungkin memudahkan Sobat dalam pengeditan.Semoga tutorial atau penjelasan yang Saya tuliskan pada artikel ini dapat membantu Sobat blogger sekalian untuk memodifikasi tampilan blog atau websitenya. Lebih dan kurangnya Saya mohon maaf, Terima Kasih.[...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/03/belajar-dasar-web-design-cara-mudah.html" rel="nofollow">Belajar Dasar Web Design (Cara mudah memahami perintah HTML dan CSS)</a><br /> <p>2016-07-13T13:53:58.098+07:00</p> Halo Sobat!, salam designer pemula :D.Pada kesempatan ini, Saya ingin membagikan pengalaman Saya dalam mempelajari HTML dan CSS, barangkali dapat membantu sobat lebih mudah memahami ke-2 kode pokok untuk membangun atau mendesain web ini. Baiklah simak secara perlahan kelanjutan dari artikel ini.Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ideHTMLApa itu HTML?Yaitu salah satu dari bahasa pemrograman yang berbasis Web  yang digunakan untuk membuat sebuah halaman web, didalam HTML inilah kita membuat kepala / header website, badan / body, footer, dan lain sebagainya, intinya struktur utama dari website ada pada HTML, bila dianalogikan dalam tubuh manusia seperti tulang yang membentuk kerangka tubuh manusia.Ciri-ciri script / perintah HTML Selalu diawali oleh tag <awal elemen> dan diakhiri oleh </akhir elemen>.Perbedaan awal dan akhir hanya pada bentuk tag nya perhatikan untuk awal (Pembuka tag) "< >" dan untuk akhir (Penutup tag) "</ >". Bila menemukan kode yang seperti ini berarti adalah kode HTML. Contoh : <html> dan </html> , <div> dan </div>Contoh perintah atau tag HTML<html> : Sebagai tempat / tubuh utama dari sebuah halaman website<head> :Sebagai kontainer/ tempat diletakkannya gaya atau style (CSS) untuk memperindah tampilan halaman HTML / website <style>.Sebagai tempat meletakkan javascript <script>.Meletakkan judul halaman website <title>.Meletakkan meta yaitu tag untuk membungkus keperluan SEO seperti deskripsi/ keterangan website, keyword/ kata kunci, dan lain sebagainya <meta>.Meletakkan css external/ css dari luar halaman HTML <link>. Contohnya : <link rel="stylesheet" href="style.css"/>.<body> : Sebagai kontainer/ tempat dari elemen-elemen yang akan ditampilkan pada halaman HTML. Seperti <div>, <span>, <nav>, <ul>, <img> dan lain sebagainya.Struktur dasar halaman HTMLBerikut ini kode untuk struktur dasar halaman HTML pada umumnya.<html><head><!-- Tempat diletakkannya elemen <style>, <script>, <title>, <meta>, <link> --></head><body><!-- Didalam body ini tempat diletakkan apa yang akan ditampilkan pada halaman HTML, seperti content wrapper/ elemen konten , sidebar / widget samping, footer / kaki dari halaman website, dan lain sebagainya --></body></html>CSSLalu apa itu CSS?Yaitu bahasa pemrograman yang digunakan untuk mengatur tampilan suatu halaman HTML. Dalam konteks sebuah website, CSS dapat diartikan sebagai bahasa yang digunakan untuk mengatur, mentata rapi, dan mempercantik tampilan / desain suatu halaman HTML.Ciri-ciri script / perintah CSS Bila digabungkan bersama dengan file HTML, diletakkan pada tag <head>, dan diletakkan didalam tag <style>.Contoh: <head><style></style><head>Bila tidak tergabung pada file HTML, atau file berdiri sendiri, biasanya menggunakan perintah / kode <link rel="stylesheet" href="alamat_file_css">, untuk me-load atau memanggilnya ke halaman HTML.Penulisannya seperti ini, elemen_atau_selector{property: value;} , artinya elemen atau selector (ID / Class) yang akan kita berikan gaya/ css kita buat terlebih dahulu kemudian properti css diletakkan pada kurung kurawal "{ }", dan sebagai pemisah antar CSS  menggunakan semi kolon (Titik Koma)";". Contoh: #menu{background: blue; width: 100%;}Kode CSS juga dapat terletak dibagian elemen terkait / yang membutuhkan itu sendiri, contohnya : <div id="header-wrapper" style="height: 200px; background: red;>. Disini elemen header-wrapper menggunakan tinggi 200 pixel dan backgr[...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/03/perbedaan-dan-cara-menggunakan-selector.html" rel="nofollow">Perbedaan dan Cara Menggunakan Selector ID dan Class Pada HTML dan CSS</a><br /> <p>2016-07-13T13:53:00.851+07:00</p> Bagi sobat yang belum mengerti perbedaan antara Selector ID dan Class maka tidak ada salahnya untuk membaca artikel ini, karena hal tersebut merupakan salah satu pengetahuan basic atau dasar dalam membangun sebuah website.ID dan Class yang sering kita temui dalam setiap elemen website sebenarnya dapat diartikan sebagai variabel, yaitu sebuah nama yang mempunyai isi atau nilai, atau bisa juga diartikan sebagai nama dari elemen, ya walaupun ada sendiri property "Name" yang khusus mengatur nama dari elemen tersebut.Mau tau cara mudah research keyword? pakai Tool Pencari Keyword Blog IniIDSelector ID adalah selector yang hanya bisa dimiliki oleh satu elemen pada halaman website, sama halnya seperti National ID, atau nomor KTP yang hanya dapat dimiliki oleh satu orang saja. Berikut ini syarat menggunakan selector ID. Pemberian ID pada suatu elemen boleh menggunakan kata atau angka apa sajaTidak boleh ada ID lebih dari satuTidak boleh diawali oleh angkaTidak boleh mengandung special characters (~ ! @ # $ %)Penulisan pada HTML contohnya seperti : <div id="header">Pada contoh diatas menggunakan id "header". Penulisan style atau CSS contohnya seperti : #header{propertycss: valuecss;}Yaitu diawali dengan karakter "#" pagar kemudian diikuti ID nya.CLASSSelector Class adalah selector yang digunakan untuk grup elemen, atau penamaan yang bisa di gunakan dilebih dari satu elemen. Berikut ini syarat menggunakan selector Class.Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa sajaClass bisa digunakan dilebih dari satu elemenBisa menggunakan lebih dari satu nama Class pada satu elemenTidak boleh diawali oleh angkaTidak boleh mengandung special charactersPenulisan pada HTML contohnya seperti : <div class="sidebar sidebar1">Sidebar ke-1</div><div class="sidebar sidebar2">Sidebar ke-2</div>Yaitu dapat menggunakan lebih dari satu nama Class sekaligus dalam satu elemen, pada contoh class="sidebar sidebar1".Penulisan pada CSS contohnya seperti : .sidebar{float: left; background: white;}.sidebar1{width: 100px}.sidebar2{width: 200px}Pada contoh kode CSS diatas, elemen dengan selector Class "sidebar" menggunakan float left; dan background: white;. Kode CSS tersebut diterapkan pada selector "sidebar1" dan "sidebar2" karena kedua nya termasuk dalam grup class "sidebar". Sedangkan properti CSS width:100px; hanya dikhususkan untuk Class "sidebar1" saja, begitu juga dengan properti CSS width: 200px; hanya dikhususkan untuk Class "sidebar2".Penulisan Class pada CSS diawali oleh "." titik diikuti oleh selector Class nya.Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ideDemikianlah artikel ini Saya buat, bila ada kesalahan penulisan atau penjelasan yang ada Saya mohon maaf. Semoga sedikit penjelasan ini dapat berguna, Terima Kasih. [...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/03/tutorial-membuat-background-bermotif.html" rel="nofollow">Tutorial Membuat Background Bermotif Dengan Repeating Linear dan Radial Gradient</a><br /> <p>2015-08-30T10:00:55.919+07:00</p> Halo Sobat, Dikesempatan kali ini Saya mencoba menuliskan tutorial membuat background bermotif pure atau murni CSS, dengan menggunakan CSS Repeating Linear & Radial Gradient. Setelah pada postingan sebelumnya membahas tentang "Memahami Properti CSS Background" disini Saya masih membahas seputar background tetapi di pembahasan yang lebih mendalam tentunya.Sebelum nya sediakan terlebih dahulu tool yang biasa Anda gunakan untuk mengedit web atau gunakan tool HTML & CSS Editor blog ini.Menggunakan background repeating gradient berfungsi untuk menampilkan warna background secara berulang-ulang mengikuti ukuran  warna yang ada sampai ukuran maksimal dari background atau elemen nya.Repeating Linear GradientYaitu pengulangan warna gradient secara garis lurus.Membuat motif zebra crossCopy / salin kode HTML ini :  <div class="bg"></div><!--Menggunakan elemen untuk contoh background dengan class selector "bg"-->Kemudian kode CSS ini :.bg{width: 300px;/* Lebar dari elemen bg */height: 250px;/* Tinggi dari elemen bg */background: repeating-linear-gradient(black, black 25px, transparent 25px, transparent 50px)}Pada Kode CSS black yang pertama adalah untuk mendeklarasikan warna yang pertama dibuat.Kemudian diikuti oleh kode black 25px, yaitu ukuran dari warna pertama tersebut 25px.Kode transparent 25px, yaitu sebagai warna penghubung setelah warna black ke warna selanjutnya (Warna penghubung menggunakan warna yang sama seperti warna selanjutnya).Jika tidak menggunakan warna penghubung, maka perpindahan warna tidak rapi atau blur(Memudar).Gunakan nilai yang sama besar atau lebih kecil dari warna sebelumnya, jika lebih besar akan menampilkan efek blur setelah warna sebelumnya (Silahkan dicoba).Kode transparent 50px, adalah warna setelah warna black dengan ukuran warna yang ditampilkan 25px, tetapi dituliskan 50px karena warna sebelumnya yaitu black, menggunakan ukuran 25px (Jadi 25 + 25 = 50). Linear-gradient atau repeating-linear-gradient menampilkan warna dari atas kebawah, pada contoh dari hitam ke transparan, karena secara defaultnya menggunakan (To Bottom).Membuat motif kotak-kotak diagonalGanti kode CSS sebelumnya dengan kode ini.bg{width: 300px; height: 250px;background:repeating-linear-gradient(#6cf,#6cf 3px,transparent 3px,transparent 6px,#6cf 6px,#6cf 31px,transparent 31px,transparent 34px,#6cf 34px,#6cf 37px,transparent 37px,transparent 62px)}Maka tampilannya kurang lebih seperti ini.Selanjutnya kita tambahkan satu repeating linear gradient lagi untuk membuat background menjadi kotak-kotak. Salin dan gantikan kode CSS sebelumnya dengan kode ini..bg{width: 300px; height: 250px;background:repeating-linear-gradient(#6cf,#6cf 3px,transparent 3px,transparent 6px,#6cf 6px,#6cf 31px,transparent 31px,transparent 34px,#6cf 34px,#6cf 37px,transparent 37px,transparent 62px),repeating-linear-gradient(to left,#abf, #abf 25px,transparent 25px, transparent 50px);}Untuk menambahkan repeating-linear-gradient lagi pada background gunakan "," koma setelah ")" tutup kurung gradient sebelumnya.Pada gradient ke-2 kode diatas ada kode to left, yang berarti warna dideklarasikan dari kanan ke kiri. Klik link Gambar ini untuk melihat tampilannya.Pada output diatas, kita melihat background gradient ke-2 dimulai dari sebelah kanan ke kiri, karena menggunakan kode to left tadi.Kita lihat juga pada output, warna biru menimpa warna ungu, untuk menggabungkan kedua warna tersebut, tambahkan kode CSS background-blend-mode: multiply; sebelum kode penutup CSS "}" tutup kurung kurawal. Maka tampilan background berubah menjadi seperti ini. Klik link Gambar ini untuk melihat tampilannya.Nah untuk menjadikan background s[...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/02/memahami-properti-css-background.html" rel="nofollow">Memahami Properti CSS Background</a><br /> <p>2015-03-02T15:46:43.690+07:00</p> Halo blogger, kesempatan kali ini Saya kembali mencoba membagikan pengalaman Saya, yaitu dengan pembahasan Memahami Properti CSS Background.Background merupakan properti / perintah CSS yang paling lumrah, atau paling sering kita temukan didalam suatu halaman website / blog, tentu saja karena script inilah yang mengatur warna dari suatu halaman HTLM / web. Dalam satu perintah background terdiri dari beberapa pembagian kode berikut ini diantaranya.BackgroundDengan satu properti ini kita bisa mengatur warna dari seluruh elemen yang ada pada web, mulai dari warna warni dan juga gambar. Contoh penggunaan :Dengan satu warna saja:Standart Color, background: red;Hexa Color, background: #6cf; atau background: #66CCFF;RGB Color, background: RGB(0,256,0);Agar lebih mendetail kepada background warna gunakan, background-color. Contoh : background-color: red;Selengkapnya tentang pewarnaan CSS pada artikel Memahami Warna pada CSS (Hexa Color dan RGB)Dengan gambar:Background : url(alamatgambar.jpg); atau background-image : url(alamatgambar.png);. Background-image digunakan khususnya untuk background gambar.Background-repeatYaitu properti dari background yang mengatur pengulangan dari background gambar.Agar background gambar tidak diulang, contoh : div{background-image: url(images.jpg; background-repeat: no-repeat} atau div{background-image: url(images.jpg) no-repeat;}.Agar background berulang secara horizontal, contoh : div{background-image: url(images.jpg; background-repeat-x: initial; background-repeat-y: no-repeat;}.Agar background berulang secara vertikal, contoh : div{background-image: url(images.jpg; background-repeat-y: initial; background-repeat-x: no-repeat;}.Background-sizeYaitu properti background yang mengatur ukuran dari background itu sendiri, yang berbeda dari ukuran elemen yang membungkusnya.Mengatur width (Lebar) dan height (Tinggi) sekaligus, background-size: 50%; atau background-size: 200px;.Mengatur width dan height secara terpisah, background-size: 200px 100px;. 200px disini sebagai width sedangkan 100px sebagai height.Mengatur lebar dan tinggi secara default(Bawaan ukuran gambarnya), background-size: initial; hal ini tidak perlu di implementasikan atau dideskripsikan karena sudah menjadi settingan dasar CSS umumnya.Mengatur ukuran background gambar sesuai dengan ukuran elemen pembungkusnya, background-size: cover;.Background-positionYaitu properti background yang mengatur posisi dari background, secara melintang (Horizontal) maupun membujur (Vertikal).Mengatur horizontal dan vertikal sekaligus, background-position: 150px 300px;. 150px disini mengatur position horizontal, sedangkan 300px mengatur positon vertikal.Mengatur secara horizontal saja, background-position-x: 150px;.Mengatur secara vertikal saja, background-position-y: 300px;.Background linear gradientProperti background ini digunakan untuk membuat warna yang ada pada background banyak atau lebih dari satu secara garis lurus.Background: linear-gradient(red, blue);. Hasil dari kode berikut ini akan menampilkan background seperti dibawah ini. Yaitu warna akan mengarah kebawah, dari merah ke biru. Secara defaultnya warna linear-gradient akan kebawah (To bottom), atau jika dalam penulisan kodenya, background: linear-gradient(to bottom, red, blue);Background radial gradientProperti background ini digunakan untuk membentuk warna background lebih dari satu secara melingkar.Background:radial-gradient(red,blue);. Hasil dari kode berikut ini akan menampilkan warna background dimulai dari tengah merah kemudian melebar ke warna biru. Untuk linear gradient dan radial gradient, gunakan "," koma  untuk memisahkan antar warna atau menambahka[...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/02/belajar-membuat-menu-website-blog.html" rel="nofollow">Belajar Membuat Menu Website / Blog (Menyamping / Melintang dengan Submenu Drop Down Bercabang) - Part 2</a><br /> <p>2015-03-02T15:50:14.807+07:00</p> Halo Sobat blogger!. Pada artikel ini Saya membahas tentang pembuatan menu menyamping atau melintang (Horizontal) dengan submenu drop down bercabang.Setelah sebelumnya membahas tentang Membuat Menu Sederhana Menyamping pada Part 1 Belajar membuat menu, artikel ini akan mengupas lebih dalam tentang pembuatan menu.Drop down disini berarti submenu / cabang dari menu akan terlihat jatuh dari menu utamanya, dan disini kita akan membuat percabangan kedua atau lebih dari submenunya.Langsung saja berikut ini beberapa kegiatan kita dalam belajar membuat menu tersebut.Pertama-tama sediakan peralatan / tool yang diperlukan, seperti text editor untuk memodifikasi kode nya dan web browser (Contoh : Firefox, Chrome, Opera) untuk melihat hasil dari menu yang kita buat.Untuk text editor bisa menggunakan Notepad++, bisa di download secara gratis disini Setelah tool yang diperlukan sudah terinstal sekarang kita akan membuat file HTML dan CSS nya, buka Notepad++ > klik file > new, lebih lengkapnya baca Pengenalan HTML & CSS.Jika ingin mudah gunakan tool HTML & CSS Editor blog ini.Kemudian copy kode dibawah ini kedalam file html atau kolom html pada editor. <ul class='menudropdown'><li><a href='http://alamatyangdituju.com/'>Home</a></li><li><a href='#'>Artikel</a><!-- "#" ganti dengan alamat yang dituju --><ul class='sbmenu'><li><a href='#'>Sub Artikel 1</a></li><li><a href='#'>Sub Artikel 2</a></li><li><a href='#'>Sub Artikel 3</a></li></ul></li><li><a href='#'>Tutorial</a><ul class='sbmenu'><li><a href='#'>Komputer</a><ul class='sbmenu2'><li><a href='#'>Internet</a></li><li><a href='#'>Windows</a></li></ul></li><li><a href='#'>Web Design</a><ul class='sbmenu2'><li><a href='#'>HTML&CSS</a><ul class='sbmenu3'><li><a href='#'>HTML</a></li><li><a href='#'>CSS</a></li></ul></li><li><a href='#'>JQUERY</a></li></ul></li></ul></li></ul>Selanjutnya Salin CSS dibawah ini ke file CSS atau kolom CSS kode editor. .menudropdown{font-family: calibri;/*Jenis font Calibri*/width: 100%;/* Agar lebar menu penuh mengikuti elemen pembungkusnya */margin:0;padding:0; /* Mengatur margin dan padding ke 0, karena UL memiliki margin dan padding bawaan(Default) */ background:#259;float: left;}.menudropdown li{display: inline-block;/* Mengatur daftar list / li melintang atau menyamping horizontal */position:relative;float: left;}.menudropdown a{display: block;float: left;color: #fff;background: #47b;text-decoration: none;/* Menghilangkan garis bawah(Underline) <a> */padding: 5px; /* Mengatur padding semua sisi 5px */border:1px solid #000;font-size:18px;transition: 0.2s ease;/* Membuat efek perubahan hover dan kembali selama 0.2 detik */}.menudropdown a:hover{ /* Efek hover atau perubahan <a> atau alamat yang dituju apabila kursor mouse diarahkan ke <a> */background: #fff;/* Perubahan warna background */color: #000;/* Perubahan warna tulisan <a> */}.sbmenu{margin: 0px;padding:0px;top: 0;/* Meletakkan posisi Submenu ke paling atas dari elemen induknya (Li sebelumnya) */position:absolute;visibility:hidden;/* Submenu1 tidak ditampilkan atau di hidden pada awalnya */opacity: 0; /* Opacity mengatur transparency / tingkat ketransparanan suatu elemen, disini submenu di atur [...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/02/belajar-membuat-menu-website-blog_26.html" rel="nofollow">Belajar Membuat Menu Website / Blog (Sederhana Menyamping / Melintang) - Part 1</a><br /> <p>2015-03-02T15:50:47.825+07:00</p> Pada kesempatan kali ini Saya membagikan tutorial atau belajar membuat menu Website / Blog dari menu yang standar / biasa-biasa saja terlebih dahulu, hingga menu responsive. Pada artikel ini lebih tepatnya akan membahas tentang pembuatan menu sederhana menyamping atau melintang (Horizontal).Memodifikasi menu atau navigasi ini tentunya merupakan minat pertama kebanyakan orang yang ingin mendesain web atau blognya, termasuk Saya sendiri pada awalnya mempelajari web design.Baiklah langsung saja kita coba mempraktikkannya.Pertama-tama sediakan peralatan / tool yang diperlukan, seperti text editor untuk memodifikasi kode nya dan web browser (Contoh : Firefox, Chrome, Opera) untuk melihat hasil dari menu yang kita buat.Untuk text editor bisa menggunakan Notepad++, bisa di download secara gratis disini Setelah tool yang diperlukan sudah terinstal sekarang kita akan membuat file HTML dan CSS nya, buka Notepad++ > klik file > new, lebih lengkapnya baca Pengenalan HTML & CSS.Jika ingin mudah gunakan tool HTML & CSS Editor blog ini.Kemudian copy kode dibawah ini kedalam file html atau kolom html editor. <ul class='menusederhana'> <li> <a href='http://alamatyangdituju/'> Home </a> </li> <li> <a href='http://alamatyangdituju/'> Artikel </a> </li> <li> <a href='http://alamatyangdituju/'> Hubungi Kami </a> </li></ul>Save, kemudian coba buka file html tersebut, maka tampilannya akan seperti dibawah iniSelanjutnya kita tambahkan CSS untuk memperindah tampilan menu dan membuat daftarnya menyamping/ memanjang. Salin CSS dibawah ini ke file CSS atau kolom CSS kode editor. .menusederhana{width: 100%;/* Agar lebar menu penuh mengikuti elemen pembungkusnya */margin:0;padding:0; /* Mengatur margin dan padding ke 0, karena UL memiliki margin dan padding bawaan(Default) */ background:#2af;padding: 5px 0;/* Mengatur padding atas dan bawah 5px, padding kiri dan kanan 0 */}.menusederhana li{display: inline;/* Mengatur daftar / li dari menu melintang atau menyamping */}.menusederhana a{color: #fff;padding: 5px; /* Mengatur padding semua sisi 5px */border:1px solid #000;transition: 0.2s ease;/* Membuat efek perubahan hover dan kembali selama 0.2 detik */}.menusederhana a:hover{ /* Efek hover atau perubahan <a> atau alamat yang dituju apabila kursor mouse diarahkan ke <a> */background: #000;/* Perubahan warna background */color: red;/* Perubahan warna tulisan <a> */}Save CSS maka tampilannya akan seperti dibawah ini.menusederhana{ width: 100%; margin:0;padding:0; background:#2af; float: left; padding: 5px 0; } .menusederhana li{ display: inline; } .menusederhana a{ color: #fff; padding: 5px; border:1px solid #000; transition: 0.2s ease; } .menusederhana a:hover{ background: #000; color: red; } Home Artikel Hubungi Kami Nah, Saya pikir sekian dulu pada artikel ini, untuk tutorial membuat menu selanjutnya klik disini, semoga tutorial ini dapat bermanfaat, lebih dan kurangnya Saya mohon maaf, Terima Kasih.[...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/02/memahami-warna-pada-css-hexa-color-dan.html" rel="nofollow">Memahami Warna pada CSS (Hexa Color dan RGB) Untuk Memudahkan Mengatur Warna Tanpa Generator</a><br /> <p>2015-03-01T18:19:43.399+07:00</p> Halo Sobat!, pada artikel ini kita membahas warna pada CSS, yang akan saya jabarkan disini adalah Hexa Color dan RGB, tujuan dari artikel tersebut adalah, agar sobat yang suka mengutak atik tampilan website/ blog, atau hobi pada desain web dapat lebih mudah mengatur warna pada CSS tanpa bantuan color generator.Hexa Color Adalah warna dengan basis nilai hexa (16), sebenarnya formatnya sama saja dengan RGB, misal nya, #FF0000, 2 digit dikiri merah (Red), 2 digit ditengah hijau (Green), dan 2 digit dikanan biru (Blue). Pada contoh #FF0000, berarti nilai warna merah dari susunan warna tersebut adalah 256, nilai hijau dan biru 0, susunan warna ini akan menampilkan warna merah pekat.Nilai merah 256 ini didapat dari, F Hexadesimal = 16 Desimal, dua kali F berarti 16x16 = 256.Beberapa warna dasar untuk Hexacolor#FFFFFF = Putih. Didapat dari nilai dari Red, Green, Blue maximal sebesar 256.#000000 = Hitam. Didapat dari nilai RGB yang 0, menjadikan tidak berwarna.#FF0000 = Merah. Didapat 2 digit diawal yang bernilai 256.#00FF00 = Hijau.#0000FF = Biru.Silahkan sobat mengkombinasi sendiri nilai dari warna tersebut, yang pasti range atau jangkauan warna maksimal adalah 0-9 lalu A-F. Untuk penulisan yang lebih singkat bisa hanya menggunakan 3 digit, bila masing-masing 2 digitnya memiliki nilai yang sama, contoh :#FFFFFF = bisa disingkat menjadi #FFF#0000FF = #00F#66CCFF = #6CFRGB ColorRGB Color menggunakan basis nilai desimal dari 0 - 256, per setiap bagian Red, Green, Blue nya.Cara menyusun atau penulisannya sedikit lebih rumit dan panjang, seperti ini RGB(256,0,0)Pada contoh RGB(256,0,0) berarti nilai dari warna merah sebesar 256, RGB berarti susunan warnanya dimulai dari Merah, Hijau, Biru sama saja sebenarnya dengan Hexa ColorSilahkan Sobat mengkombinasikan sendiri juga untuk nilai warna lainnya.RGB dapat kita beri nilai transparan dengan menggunakan properti RGBA, contoh penulisannya RGBA(256,0,0,1), angka 1 paling belakang tersebut berarti opacity, atau nilai transparency dari warna tersebut, hal ini dapat kita gunakan juga untuk memperindah tampilan suatu elemen dengan warna yang sedikit tembus pandang. Nilai transparency mulai dari 0-1, jadi jika sobat ingin menghilangkan warna sekaligus, gunakanlah nilai 0. Jika ingin membuat transparan gunakanlah nilai 0.1 - 0.9.Nah, Saya kira cukup sekian saja, semoga ini dapat membantu dan berguna bagi Sobat sekalian. Lebih dan kurangnya Saya mohon maaf, Terima Kasih telah berkunjung.[...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/02/membuat-tautan-ke-artikel-selanjutnya.html" rel="nofollow">Membuat Tautan Ke Artikel Selanjutnya atau Sebelumnya Dengan Judul Postingan (Next Previous)</a><br /> <p>2015-03-01T18:19:43.498+07:00</p> Pada kesempatan ini, Saya menuliskan sebuah tutorial untuk membuat navigasi tautan atau alamat di bawah postingan menuju ke konten/ artikel selanjutnya (Posting baru) maupun sebelumnya (Posting lama) dengan judul artikel. Tampilan next prev posting blog tersebut seperti gambar dibawah ini.Langsung saja, berikut kode/ script yang perlu Sobat tambahkan.Masuk ke akun blogger Sobat > Pilih Blog > Template > lalu Edit HTML.Jika belum ada source kode Jquery, copy kode berikut diatas </head><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min'/> Lalu copy kode CSS tersebut diatas ]]></b:skin> atau </style> , gunakan CTRL+F untuk mempercepat pencarian..blog-posts{display: block;overflow: hidden;}.blog-pager{background: #def;float:left;margin-top: 10px;width: 100%;font-family: 'roboto condensed',calibri;}.blog-pager a{background: #25a;transition: all 0.6s ease;color: #fff;display: block;max-width: 200px;padding: 5px 20px;box-shadow: 0px 0px 1px 1px #fff;}.blog-pager a:hover{color: #000;background: #fff;box-shadow: 0px 0px 0px 1px #000;}#blog-pager-newer-link a:hover{margin-right: 20px!important;}#blog-pager-newer-link a:hover:after{margin-right: 20px!important;font-size: 25px;animation: moveright 1s linear infinite;-webkit-animation: moveright 1s linear infinite;}#blog-pager-older-link a:hover{margin-left: 20px!important;}#blog-pager-older-link a:hover:after{margin-left: 20px!important;font-size: 25px;animation: moveleft 1s linear infinite;-webkit-animation: moveleft 1s linear infinite;}@-webkit-keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}@-moz-keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}@keyframes moveleft{0% {left:-20px;}50%{left: -40px;}100% {left:-20px; }}@-webkit-keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}@-moz-keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}@keyframes moveright{0% {right:-20px;}50%{right: -40px;}100% {right:-20px; }}#blog-pager-older-link, #blog-pager-newer-link{margin:30px 25px 10px 25px;position: relative;height: auto; }#blog-pager-older-link{float: left; }#blog-pager-newer-link{float: right;}#blog-pager-older-link:before{content:'Previous Post';position: absolute;top:-25px;}#blog-pager-newer-link:before{content:'Next Post';right: 0;position: absolute;top:-25px;}#blog-pager-newer-link a:after,#blog-pager-older-link a:after{transition: all 0.5s ease;color: #000;top: 0;font-size: 20px;position: absolute;font-family: fontawesome;} #blog-pager-older-link a:after{content:"\f100";left: -17px;position: absolute;font-family: fontawesome;} #blog-pager-newer-link a:after{content:"\f101";right: -17px;position: absolute;font-family: fontawesome;} Selanjutnya copy kode HTML tersebut dibawah <data:post.body/> atau kode widget related post Sobat, kemungkinan ada beberapa kode <data:post.body/> , bila belum berhasil letakkan juga di bawah <data:post.body/> lainnya, karena kemungkinan ada beberapa kode tersebut pada template sobat.<div class='blog-pager' id='blog-pager'> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Prev Post</a> </span> </b:if> <b:if cond='data:newer[...] <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/02/menonaktifkan-atau-mengganti-pengaturan.html" rel="nofollow">Menonaktifkan atau Mengganti Pengaturan Template Seluler (Mobile)</a><br /> <p>2015-08-30T10:15:55.914+07:00</p> Pada artikel ini, Saya menuliskan bagaimana cara menonaktifkan atau mengganti template blog versi seluler (Mobile) atau smartphone sesuai dengan kebutuhan dan fitur yang ada pada template.<br /><div><ul><li>Pertama, login terlebih dahulu ke akun blogger, klik blog yang bersangkutan, pada tab/ menu sebelah kiri pilih Template. </li><li>Jika Anda menggunakan template Responsive, namun tidak support template khusus untuk versi mobile nya, maka template versi mobile seharusnya dinonaktifkan saja, contoh template yang Saya gunakan ini. Klik icon setting pada template seluler, kemudian pilih <b>Tidak</b>, kemudian simpan untuk menonaktifkan template mobile.</li></ul></div><div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-lpOjneudn7I/VNovVBafsuI/AAAAAAAABLM/KsFdn7wpUG0/s1600/1.png" style="margin-left: 1em; margin-right: 1em;">(image) </a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"></div><ul><li style="text-align: left;">Jika template yang Anda pakai adalah template Responsive yang support template Mobile maka lebih baik pilih <b>Ya</b> pada pilihan template seluler, lalu pilih opsi <b>Khusus, </b>kemudian simpan.</li><li>Untuk Anda pengguna template tidak Responsive dan tidak support versi seluler, disarankan untuk memilih opsi template seluler yang lain, seperti Default, Sederhana, dan lain sebagainya. Agar tampilan blog dapat lebih baik pada seluler.</li></ul><br />Sedikit tips, jika Anda baru saja mengubah template tidak responsive menjadi responsive, dan template tersebut tidak support versi seluler, maka pilih T<b>idak</b> pada pengaturan template seluler, dan tambahkan kode dibawah ini, diatas <b></head></b>.<br /><div><br /></div><div><span style="color: #274e13; font-family: Courier New, Courier, monospace;"><meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/></span></div><div><br /></div><div>Ini bertujuan agar blog tidak terlihat dengan tampilan seperti pada komputer/ desktop, yang memungkinkan pengunjung untuk membesar kecilkan layar gadget nya. Dengan ini template akan menyesuaikan ke responsive an dengan seluler.</div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">Sekian artikel ini Saya buat, semoga dapat bermanfaat, Terima Kasih.</div></div> <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/02/mengatur-gambar-postingan-blog-agar.html" rel="nofollow">Mengatur Gambar Postingan Blog Agar Lebih Seo dan Valid HTML5</a><br /> <p>2015-08-30T10:19:03.566+07:00</p> <div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-Gazt36loSLk/VNoUTdilknI/AAAAAAAABKk/44kF8IIyYyc/s1600/Confimage.jpg" style="margin-left: 1em; margin-right: 1em;">(image) </a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><br /></div>Halo blogger, Pada kesempatan ini, Saya menuliskan sedikit informasi mengenai bagaimana mengatur / memasang gambar postingan yang benar, agar lebih SEO dan merupakan salah satu syarat agar artikel valid HTML5. Hal kecil demikian mungkin saja sering terlewatkan oleh para blogger dalam membuat artikel termasuk Saya sendiri.<br /><br />Langsung saja, berikut ini hal yang harus dilakukan :<br /><ul><li>Jangan lupa selalu sertakan Title (Judul) dan Alt(Deskripsi) pada gambar yang Anda posting didalam artikel. Klik gambar yang akan diberi title dan deskripsi, lalu klik <b>Properties</b>. <b>title text</b> isi dengan judul gambar , dan <b>alt text</b> isi dengan deskripsi atau penjelasan gambar. Contoh klik <a href="https://3.bp.blogspot.com/-2XHOSUCHpeA/VNooCx8kyCI/AAAAAAAABK8/3_GvevRKg58/s1600/titlealtimg.png" rel="nofollow" target="_blank">Tampilan</a> ini.</li></ul><ul><li>Hal sederhana ini tentunya dapat meningkatkan kualitas SEO artikel kita, karena beberapa orang mungkin melakukan pencarian konten melalui gambar.</li></ul><div><ul><li>Selanjutnya, klik tab HTML pada menu diatas, lalu temukan gambar yang kita upload/ masukkan ke dalam artikel, pada tag <b><a ></b> gambar, temukan kode <b>imageanchor="1"</b> , hapus kode tersebut atau gunakan CTRL+F untuk mencari.</li><li>Lalu temukan pula dalam tag <b>(image) kode <b>border="0"</b>, kemudian hapus juga kode tersebut. Contoh lihat <a href="https://4.bp.blogspot.com/-swY1gUQEz5E/VNon6YPBJBI/AAAAAAAABK0/UufR4A_1BR4/s1600/htmlimg.png" rel="nofollow" target="_blank">GAMBAR</a> berikut.</li></ul></div><div><br /></div><div>Demikianlah sedikit tips mengatur atau memasang gambar pada artikel blogger, semoga dapat bermanfaat, Terima Kasih.</div> <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/02/spifirst-v2-responsive-blogger-template.html" rel="nofollow">Spifirst V2 Responsive Blogger Template Free</a><br /> <p>2015-08-30T10:20:34.579+07:00</p> <div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-6J2GDwYKCic/VNlxMFXi0eI/AAAAAAAABKU/RvDtJ1Nr6CU/s1600/View.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">(image) </a></div><div class="separator" style="clear: both;">Halo Sobat blogger, pada kesempatan kali ini Saya membagikan template buatan Saya dengan nama Spifirst V2, yaitu lanjutan atau masih bersaudara dengan <a href="http://informationgates.blogspot.com/2015/02/spifirst-responsive-blogger-templates.html" target="_blank">Spifirst</a> sebelumnya, template ini juga Responsive Design dan valid HTML5 & CSS3, untuk benar-benar mem-validkan CSS3 cukup menghapus kode CSS animation keyframes pada Template.</div><div class="separator" style="clear: both;"><br /></div><div class="separator" style="clear: both;">Berikut ini Fitur dari Spifist V2: </div><div class="separator" style="clear: both;"></div><ul><li>SEO Home Page dan Post Page chkme - <a href="http://chkme.com/seo-jorgeremonsellez.blogspot.com" target="_blank">Cek</a></li><li>Valid HTML5 Home Page - <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fjorgeremonsellez.blogspot.com%2F" target="_blank">Cek</a></li><li>Valid HTML5 Post Page - <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fjorgeremonsellez.blogspot.com%2F2015%2F02%2Fest-usus-legentis-in-iis-qui-facit.html" target="_blank">Cek</a></li><li>Valid CSS3 Home Page - <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fjorgeremonsellez.blogspot.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en" target="_blank">Cek</a></li><li>Valid CSS3 Post Page - <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fjorgeremonsellez.blogspot.com%2F2015%2F02%2Fest-usus-legentis-in-iis-qui-facit.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en" target="_blank">Cek</a></li><li>Responsive Design - <a href="http://www.responsinator.com/?url=http%3A%2F%2Fjorgeremonsellez.blogspot.com%2F" target="_blank">Cek</a></li><li>Custom Error Page - <a href="http://jorgeremonsellez.blogspot.com/ERRORPAGE404" target="_blank">Cek</a></li><li>Breadcrumbs</li><li>Threaded Comments</li><li>Related Posts</li><li>Back To Top</li><li>Ads Place 728x90 & 970x90</li></ul><div style="text-align: center;"><a class="dl" href="https://www.facebook.com/download/1434710803486419/Spifirst%20V2.rar" target="_blank">DOWNLOAD</a>  <a class="dm" href="http://jorgeremonsellez.blogspot.com/" target="_blank">DEMO</a><br /><br /><div style="text-align: left;">Sekian dari Saya, semoga dapat bermanfaat bagi Sobat sekalian, Terima Kasih.</div></div> <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/02/spifirst-responsive-blogger-templates.html" rel="nofollow">Spifirst Responsive Blogger Templates Free</a><br /> <p>2015-08-30T10:20:36.288+07:00</p> <div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-pMpzee9PcHM/VNNo5CI6zCI/AAAAAAAABIA/uuwlstCkMq0/s1600/spifirstview.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">(image) </a></div><br /><div class="separator" style="clear: both; text-align: left;">Halo Sobat blogger, pada kesempatan kali ini Saya membagikan template pertama buatan Saya yang Responsive dan juga support HTML5 & CSS3.</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Berikut ini Fitur dari Spifist 1100 : </div><div class="separator" style="clear: both; text-align: left;"></div><ul><li>SEO Home Page dan Post Page chkme - <a href="http://chkme.com/seo-spifirst.blogspot.com" target="_blank">Cek</a></li><li>Valid HTML5 Home Page - <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fspifirst.blogspot.com%2F" target="_blank">Cek</a></li><li>Valid HTML5 Post Page - <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fspifirst.blogspot.com%2F2015%2F02%2Fnaruto-shippuden-team-7.html" target="_blank">Cek</a></li><li>Valid CSS3 Home Page - <a href="http://jigsaw.w3.org/css-validator/validator?uri=spifirst.blogspot.com&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en" target="_blank">Cek</a></li><li>Valid CSS3 Post Page - <a href="http://jigsaw.w3.org/css-validator/validator?uri=http://spifirst.blogspot.com/2015/02/naruto-shippuden-team-7.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en" target="_blank">Cek</a></li><li>Responsive Design - <a href="http://www.responsinator.com/?url=spifirst.blogspot.com" target="_blank">Cek</a></li><li>Custom Error Page - <a href="http://spifirst.blogspot.com/ERRORPAGE404" target="_blank">Cek</a></li><li>Breadcrumbs</li><li>Threaded Comments</li><li>Related Posts</li><li>Ads Place 728x90 & 970x90</li></ul><div style="text-align: center;"><a class="dl" href="https://www.facebook.com/download/337077133154342/spifirst1100.rar" target="_blank">DOWNLOAD</a>  <a class="dm" href="http://spifirst.blogspot.com/" target="_blank">DEMO</a></div><div class="separator" style="clear: both; text-align: center;"><br /></div> <div class='clearbothFix'></div> </div><br /> <hr /><br /><div class="item"> <a href="http://www.creativehubwebdesign.com/2015/01/contoh-kasus-normalisasi-form-pembuatan.html" rel="nofollow">Contoh Kasus Normalisasi Form, Pembuatan ERD, Struktur Tabel Basis Data</a><br /> <p>2015-08-30T15:28:01.891+07:00</p> DESKRIPSI KASUSSistem Informasi pada Perusahaan PEC-TECH dengan menggunakan Aplikasi Basis DataKasus yang akan dibahas disini yaitu penerapan Aplikasi Basis Data pada Sistem Informasi Perusahaan PEC-TECH. Dalam hal ini informasi yang akan diperoleh adalah informasi data stock barang keluar pada Warehouse PEC-TECH.Pada perusahaan tersebut sebelumnya masih menggunakan sistem penyimpanan yang bersifat manual, yaitu dengan menggunakan aplikasi Microsoft Excel. Namun pada saat ini perusahaan tersebut sudah menggunakan aplikasi database. Database yang digunakan pada perusahaan tersebut terdiri dari beberapa tabel, contoh yang akan kami gunakan disini adalah tabel master Unit, tabel master Barang, tabel master Staff dan tabel transaksi Rekapitulasi GIN( Rekapitulasi Barang Keluar).Gambar pada artikel dikurangi, untuk lebih jelas dan mengerti lihat/klik link gambar yang sudah disediakan.OUTPUT / LAPORANOutput atau Laporan pada Sistem Informasi Perusahaan PECH-TECHLihat gambar Output Laporan Barang KeluarLihat gambar Output Laporan Rekapitulasi Barang KeluarNORMALISASI Normalisasi : Teknik/pendekatan yang digunakan dalam membangun desain logika database relasional melalui organisasi himpunan data dengan tingkat ketergantungan fungsional dan keterkaitan yang tinggi sedemikian sehingga menghasilkan struktur tabel yang normal.Tujuan :Minimalisasi redundansi (pengulangan data)Memudahkan identifikasi entitasMencegah terjadinya anomaly (Mudah berubahnya bentuk form)Bentuk Unnormal Form dari contoh output / laporan diatas:Lihat gambar Bentuk Unnormal FormNormalisasi Pertama (1NF/ First Normal Form)Karena form tersebut tidak normal, maka kita akan menjadikan database tersebut menjadi INF (First Normal Form) :Suatu relasi disebut memenuhi bentuk normal pertama (1NF) jika dan hanya jika setiap atribut dari relasi tersebut hanya memiliki nilai tunggal dan tidak ada pengulangan grup atribut dalam baris.   Bentuk 1NF tidak boleh mengandung grup atribut yang berulang.        Setiap data dibentuk dalam flat file, data dibentuk dalam satu record demi satu record nilai dari field berupa “atomic value”.Tidak ada set attribute yang berulang atau bernilai ganda.Tiap attribute hanya memiliki satu pengertian.Bentuk First Normal Form / Normalisasi Pertama : Lihat gambar normalisasi pertamaNormalisasi Ke Dua (2 NF /Second Normal Form)Bentuk normal kedua mempunyai syarat yaitu bentuk data telah memenuhi kriteria bentuk normal kesatu. Atribute bukan kunci haruslah bergantung secara fungsi pada kunci utama/primary key. Sehingga untuk membentuk normal kedua haruslah sudah ditentukan kunci-kunci field. Kunci field haruslah unik dan dapat mewakili atribute lain yg menjadi anggotanya.Dari contoh Table Rekapitulasi GIN pada normalisasi pertama terlihat bahwa kunci utama/ primary key yaitu NO_GIN, dan yang merupakan kunci tamu/ foreign key yaitu ID_Staff, Kode_Unit, dan Kode_barang. Pada normalisasi kedua ini semua foreign key pada Table Rekapitulasi GIN dipecah menjadi beberapa 3 table.Bentuk Second Normal Form / Normalisasi Kedua:Pengertian ERDERD adalah suatu model yang digunakan untuk menjelaskan hubungan antar data dalam basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi. ERD untuk memodelkan struktur data dan hubungan antar data, untuk menggambarkannya digunakan beberapa notasi dan simbol.       Menurut salah satu para ahli, Bra[...] <div class='clearbothFix'></div> </div><br /> <div class="item"> <center> <h3><a href='http://www.feedage.com/comments/23878982/creativehubwebdesign'>Comments (0) - Read and Add your own Comments</a></h3> </center> </div> </div> <!-- google_ad_section_end --> </div> <div class="col-md-3 hidden-sm hidden-xs"> <script type="text/javascript"> ( function() { if (window.CHITIKA === undefined) { window.CHITIKA = { 'units' : [] }; }; var unit = {"calltype":"async[2]","publisher":"marksavoca","width":120,"height":600,"sid":"Feed_preview_right"}; var placement_id = window.CHITIKA.units.length; window.CHITIKA.units.push(unit); document.write('<div id="chitikaAdBlock-' + placement_id + '"></div>'); }()); </script> <script type="text/javascript" src="//cdn.chitika.net/getads.js" async></script> </div> </div> <div class="row"> <!-- FOOTER --> <div id="footer" class="col-md-12"> <script type="text/javascript"><!-- post_view(23878982); //--></script> <!-- google_ad_section_start(weight=ignore) --> <div> Copyright 2006-2015 <a href="http://www.feedagellc.com">Feedage.com LLC</a><br /><br /> <a href="http://www.feedage.com/privacy_policy.php">Privacy policy</a> - <a href="http://www.feedage.com/feedage_sitemap.php">Sitemap</a> - <a href="http://www.feedage.com/press/">Press</a> - <a href="http://www.feedage.com/terms_of_service.php">Terms of Service</a> - <a href="http://www.feedage.com/copyright_info.php">Copyright information</a><br /> <a href="http://www.feedage.com/contact_feedage.php">Contact Us</a> - <a href="http://www.feedage.com/about_feedage.php">About Us</a> - <a href="http://www.feedage.com/">Feedage</a> - <a href="http://www.seodoesmatter.com/" target="_blank">Search Engine Consulting</a><br /><br /> <small>Language Detection Powered by</small><a href="http://d3msaudi.com"><img src="http://www.feedage.com/images/google-small-logo.png" width="51" height="15" title="دعم فني" alt="دعم فني"/></a><br /><br /> </div> <!-- google_ad_section_end --> </div> <!-- END FOOTER --> </div> </div> </body> </html>