Pengenalan CSS


Ini merupakan post pertama aku mengenai pemrograman web, ngak tau kenapa minggu-minggu ini lagi suka pemrograman sama matematika? Walaupun pusing dan sempet ngak bisa tidur karena buat program ngak jadi-jadi, tapi secara keseluruhan programming itu asyik lho.

Sebenarnya aku masih punya banyak banget hutang buat SEO tutorial. Tapi karena akhir-akhir ini aku lagi belajar programming jadi share mengenai CSS dulu deh.

Sebelum memulai, pastikan kamu sudah paham betul HTML agar proses belajar lebih mudah nantinya. Belajar HTML [disini].

Siapkan camilan dan secangkir kopi bila diperlukan.

MENGENAL CSS


Cascading Style Sheet (CSS) merupakan salah satu teknologi bahasa pemrograman berbasis web yang dikembangkan untuk mempercantik halaman web dan mengendalikan beberapa komponen dalam sebuah website sehingga akan lebih terstruktur dan seragam.

CSS bisa juga diartikan sebagai bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kamu untuk menampilkan halaman yang sama dengan format yang berbeda. Hal tersebut membuat HTML menjadi lebih efisien karena melihat perkembangan HTML yang kurang praktis karena terlalu banyak dibebani hal-hal yang berkaitan dengan layout seperti font dan lain-lain.

Penggunaan CSS terbukti tidak hanya menutupi kekurangan HTML tapi juga menyempurnakannya dalam berbagai aspek. Banyak website dengan design interaktif & responsif tidak lepas dari peran CSS dalam mengatur elemen website. Walaupun banyak digunakan dalam pengembangan web, tutorial pengenalan CSS ini dibuat pada dasarnya memiliki destinasi tujuan lebih ke SEO karena pengetahuan CSS yang baik akan sangat membantu dalam proses optimasi mesin pencari nantinya.

Aplikasi CSS pada SEO dengan dilakukannya minifying atau proses compressing halaman website agar loading page menjadi lebih ringan.

Q: Apakah membutuhkan compiler untuk menjalankan CSS?
A: Tidak perlu, kamu cukup menjalankan CSS menggunakan browser. Semua browser mempunyai engine yang bisa menginterpretasikan script CSS yang kamu buat.

Q: Dimana aku bisa menulis script CSS?
A: Kamu bisa menulis script CSS di teks editor seperti notepad, wordpad dan sebagainya.

Q: Apakah penulisan syntax case sensitive?
A: Syntax CSS bersifat tidak case sensitive, artinya huruf kecil dan besar adalah sama.


KELEBIHAN CSS


Adapun beberapa kelebihan CSS adalah sebagai berikut:
1. Memisahkan desain dengan konten halaman web.
2. Mengatur design sefisien mungkin.
3. Lebih mudah di load karena pada umumnya membuat coding web lebih ringkas
4. Satu script CSS dapat digunakan banyak halaman web.


Syntax CSS


Berikut ini adalah struktur penulisan CSS.

Selector {
         Properties : Value;
}

Komentar dalam CSS:

// Komentar
/* Komentar */


Selector pada CSS


CSS memiliki 3 jenis selector basic yaitu class selector, id selector, dan tag selector.

1. Class Selector.

Class merupakan “agen bebas” yang dapat diterapkan untuk tag HTML apapun. Kamu dapat membuat nama class dengan hampir semua nama apapun. Karena class selector dapat diterapkan ke beberapa tag HTML sekaligus, maka class adalah selector yang paling serbaguna. Penulisan class selector dalam CSS disymbolkan dengan tanda titik ( . ).

Contoh:
Penulisan code dalam dokumen HTML


....
<h3 class='judul'>
          Indahnya Pantai Melbourne di Australia
</h3>
....

Penulisan code dalam CSS

.judul {
          Font : 12pt Impact;
}

B. ID Selector

Hampir sama dengan class, ID Selector dapat diterapkan untuk hampir semua tag HTML, tetapi penggunaanya hanya sekali dalam satu halaman untuk satu tag HTML tertentu.

Contoh:
Penulisan code dalam dokumen HTML

....
<div id='footer'>
          Copyright © SearchMarketing.com.au
</div>
....

Penulisan code di CSS

#footer {
          color : blue;
          border : 1px solid black;
}

3. Tag Selector

Nama dari element HTML digunakan sebagai selector untuk mendefinisikan tag HTML yang berasosiasi. Misalnya, selector dari <h1> adalah h1. HTML selector digunakan dalam CSS rule untuk mendefinisikan bagaimana suatu tag akan ditampilkan.

Contoh:
Penulisan code di dokumen HTML

....
<h1> Tutorial HTML dan CSS </h1>
....

Penulisan code di CSS:

h1 {
          font : 12pt Impact;
          color : red;
}


Aplikasi CSS


Ada 3 cara penggunaan CSS yaitu inline CSS, embedded CSS dan external CSS.

A. Inline CSS
Cara penggunaan CSS dengan menambahkan langsung pada tag html yang digunakan sebagai atribut.

B. Embedded CSS
Merupakan aplikasi CSS yang disisipkan di dalam tag <head>...</head> pada dokumen HTML.

C. External CSS.
Cara ini menggunakan file CSS yang dituliskan secara terpisah dengan dokumen html. Dengan cara ini, kamu nanti hanya perlu memiliki satu set kode CSS dimana kode style CSS akan di host secara terpisah.

Contoh Embedded CSS:

<html>
          <head>
                    <title>Digital Marketing Service: SEO, PPC, Social Media Marketing | Search Marketing.com.au</title>
          </head>
<body>
          <a href=http://searchmarketing.com.au>Digital Marketing Service in Australia</a>
</body>
</html>

Dari kode diatas kita memiliki sebuah dokumen HTML yang isinya adalah link menuju. http://searchmarketing.com.au. Ketika halaman tersebut dibuka lewat browser maka hasilnya akan seperti gambar dibawah ini:


Bagaimana kalau kita mau merubah style teks link agar lebih menarik, untuk merubahnya kita bisa gunakan CSS. Sekarang kita coba ubah style link tersebut dengan CSS.

Pertama tambahkan tag <style>...</style> diantara tag <header>...</header>,
kemudian masukkan code CSS di antara tag <style>...</style>.

<style type="text/css">
          a {
                    color : red; /* merubah warna teks */
                    text-decoration : none; /* menghilangkan underline */
                    background-color : green; /* merubah warna background */
          }
</style>

Dari script diatas kita bermaksud mau merubah style/tampilan teks link pada halaman browser menjadi warna merah. Menghilangkan garis bawah pada teks link dengan properties text-decoration dan merubah warna background pada text link dengan warna hijau. Hasilnya:


Sekarang kita tambahkan efek pada link tersebut. Berikut adalah kode untuk menambahkan efek pada teks link.

<style type="text/css">
          a {
                    color : red;
                    text-decoration : none;
                    background-color : green;
}

          a:hover {
                    color : green;
                    background-color : red;
                    text-weight:bold; /*membuat teks tebal*/
}
</style>

Dari kode diatas kita menambahkan efek pada link, efek tersebut akan berkerja pada saat pointer mouse mengenai teks link yang merupakan fungsi dari "hover". Dan hasilnya akan seperti ini:



Pembuatan Top Menu Sederhana Dengan CSS




<html>
<head>
<title>Belajar Web</title>
<style>
/* RESET */
html, body, div, span, applet, object, iframe, h1, h3, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
margin: 0; padding: 0; outline: 0; fontsize: 100%; vertical-align: baseline; background: transparent; height: auto; border-top-width: 0; border-bottom-width: 0; border-left-width: 0;}
blockquote:before, blockquote:after,q:before, q:after {content: none;} blockquote, q {quotes: none;}
:focus {outline: 0;}
.clear {clear: both;display: block;height: 1px;overflow: hidden;margin: 0;padding: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse;border-spacing: 0;}
ol, ul {list-style: none;}
ol, ul {list-style: none;}
body {background-color: #ffffff;backgroundposition: center center;}
/* RESET */

          #menu ul li a {
                    color : red;
                    text-decoration : none;
                    padding : 0px 5px 0px 5px; /*memberi jarak antar teks*/
                    font : 15pt cambria; /* mengatur format teks */
                    font-weight : bold;
          }

          #menu ul li a:hover {
                    color : white;
                    background-color : red;
          }

          #menu ul li {
                    display : inline; /* membuat tampilan list sejajar ke samping* /
                    padding : 0px 2px 0px 2px;
                    background-color : blue;
          }
</style>
</head>
<body>
          <div id="menu">
                    <ul>
                              <li><a href="#">HOME</a></li>
                              <li><a href="#">PRODUCT</a></li>
                              <li><a href="#">GALLERY</a></li>
                              <li><a href="#">ABOUT US</a></li>
                              <li><a href="#">CONTACT US</a></li>
                    </ul>
          </div>
</body>
</html>

Maka hasilnya akan terlihat seperti gambar dibawah ini:


Keterangan syntax:
*) #menu ul li berfungsi mengatur bagian list sub menu yang berada didalam bagan list menu utama.
*) text-decoration : none; Menghilangkan garis bawah (underline) pada link
*) display : inline;  Membuat tampilan list sejajar ke samping
*) #menu ul li a:hover Mengatur font dan warna background ketika pointer mouse diarahkan ke link pada list dan sub menu list.
*) /* RESET */ Global reset CSS function Berfungsi menyamakan layout berbeda pada setiap default browser.

Ini baru basic dari CSS, lain kesempatan akan aku share fungsi CSS lain yang bisa diaplikasikan pada dokumen HTML untuk tingkat intermediate sampai advanced lebih detail dan lengkap karena teknologi pemrograman web masih terus dikembangkan sampai saat ini.

Apabila ada pertanyaan silahkan tanyakan pada kolom komentar.



playboy_seo



Description: Pengenalan CSS Rating: 3.5 Reviewer: Agung Purnomo - ItemReviewed: Pengenalan CSS

Co-Citation dan Co-Occurrence - Konsep Baru dari Link Building

co_citation_co_occurence_konsep_baru_dari_link_building

Akhir-akhir ini aku banyak mendapati keluhan para Blogger terkait Penguin/Panda update, dari situ banyak yang bertanya gimana sih cara menghadapi update algoritma Google, saat update kemarin terhitung memang cukup banyak blog yang tumbang oleh algoritma ini, mulai dari peringkat yang drop ke halaman 10 sampai deindex atau tidak dilisting mesin pencari, meski ekspresi keluhan mereka bervariasi, tetapi secara keseluruhan pendapat mereka hampir seragam.

Kenapa sekarang susah banget blog dihalaman 1 Google?

Beberapa tahun lalu, kira-kira dari tahun 2009 s/d 2012 bisa dikatakan cukup mudah untuk me-ranking keyword, webmaster bisa dengan mudah stuffing keyword melalui anchor text ataupun blast backlink sekaligus.

Yang aku cermati dan analisa memang dari kisaran tahun tersebut peran dari anchor text untuk meranking sebuah keyword masih terlihat dominan, tapi setelah update algoritma Penguin 3.0 Oktober 2014 dan Google Panda 4.1 September 2014 diluncurkan kemarin, saat ini Google sangat selektif dalam me-handle anchor text, bahkan tidak segan untuk memberi "hadiah" penalty.

Apakah hal itu pertanda anchor text sudah mati?

Belum, tapi aku pastikan value dari anchor text itu sendiri bobotnya sudah sangat berkurang di mata search engine.

Google tidak mau blog kita mempunyai ribuan anchor text dengan tipe [exact], apalagi sekarang itu bisa mudah di generate oleh automation tools.

Cukup signifikannya perbedaan pola link building antara dulu dan sekarang, sedikit kesalahan atau kurang anchor text diversity bisa menyebabkan inkonsistensi peringkat blog di mesin pencari, Dance, Sandbox bahkan yang lebih fatal Deindex.

Lalu backlink seperti apa yang masih bekerja sampai sekarang?

Contextual Link masih merupakan yang terbaik asalkan relevan dengan link yang dirujuk.


Basic Anchor Text


Basic dari penggunaan achor text yaitu apabila spider/bot mesin pencari merayapi sebuah atribut anchor text maka spider tersebut akan meranking keyword yang terdapat dalam anchor text tersebut. Melalui anchor text banyak webmaster bisa dengan mudah menembak keyword dengan melakukan stuffing. Oleh karena itu beberapa tahun belakangan Google mulai bereksperimen dengan mencoba menggantikan peran permainan klasik dari anchor text dengan Co-Citation dan Co-Occurence


Apa itu Co-Citation?


co_citation

Kalau diartikan secara sederhana yaitu sebuah kutipan web lain yang masih relevan dengan web kita (Citation = Kutipan)

Contoh Co-Citation:
Harga emas jatuh ke level terendah selama 3 tahun terakhir sejak 2010 pada jumat kemarin tanggal 12 Juli 2013. Seperti dilansir dalam laman Invest.com, harga emas jatuh karena aksi jual para investor yang mengalihkan investasinya dari emas ke pasar saham. Pada perdagangan kemarin harga resmi di emas antam juga sempat turun sebesar 3000 rupiah dibanding hari sebelumnya.

Yang menjadi Co-Citation dari penggalan kalimat tersebut yaitu "Seperti dilansir dalam laman Invest.com". Atau dengan kata lain Co-Citation menyajikan fakta pada sebuah artikel yang diikuti kutipan dari sumber terpercaya.


Apa itu Co-Occurrence?


co_occurrence

Hampir mirip dengan dengan Co-Citation, Co-Occurrence mengindikasikan link berkualitas yaitu link yang disekitarnya terdapat padanan atau kandungan kata relevan dengan link pada sebuah artikel.

Contoh Co-Occurrence:
Agung Purnomo merupakan Founder dari Playboy SEO Service Inc sebuah perusahaan Digital Agency di Jakarta yang juga sekaligus Bisnis Owner dari toko online jam dinding unik minimalis IndoClockStore.com.

Kata-kata yang dicetak tebal (bold) merupakan bagian dari Co-Occurrence karena berupa frase/padanan kata yang masih terkait atau berhubungan dengan anchor text (Playboy SEO Service Inc).

Kesimpulan:

  • Co-Citation dan Co-Occurrence akan menjadi The Next Big Thing dalam dunia SEO menggantikan peran lama dari anchor text untuk menghindari keyword stuffing atau berbagai manipulasi SERPs yang dilakukan webmaster. Untuk itulah membuat konten berkualitas yang tidak hanya ditujukan pada robot mesin pencari merupakan hal yang tidak bisa ditawar lagi.
  • Lupakan software/automation tools yang bisa me-generate banyak link sekaligus, coba evaluasi lagi bila menggunakan cara manual saja kita melakukan kesalahan apalagi yang menggunakan tools. Tools-tools canggih seperti SenukeX sekalipun apabila tidak paham cara menggunakannya bisa saja menyebabkan inkonsistensi peringkat blog pada mesin pencari.
  • Hindari Blackhat/Greyhat SEO, selain kurang etis juga karena teknik tersebut bersifat jangka pendek (short term). Google menjadi pintar saat ini karena kitalah yang membuatnya pintar. "Think SEO Think Long Term"



Description: Co-Citation dan Co-Occurrence - Konsep Baru dari Link Building Rating: 3.5 Reviewer: Agung Purnomo - ItemReviewed: Co-Citation dan Co-Occurrence - Konsep Baru dari Link Building

Playboy SEO Services



Perusahaan riset kelas dunia (Forrester Research) yang cukup bergengsi mengeluarkan fakta yang perlu anda cermati mengenai cara orang melakukan pencarian di Search Engine yaitu:

     "93% orang menggunakan Search Engine untuk mencari informasi"

Hasil survey langsung kepada pengguna Search Engine, ternyata:

     "87% visitor website datang dari halaman 1"

Artinya jika website anda tidak muncul di halaman 1 Search Engine seperti Google untuk keyword dari produk yang anda jual, maka anda akan kehilangan 87% calon prospek potensial dan mereka tidak akan pernah melihat produk anda walaupun produk tersebut sangat mereka butuhkan.

     "75% visitor tidak pernah melihat lebih dari halaman 4"

Artinya jika website anda tidak muncul di 4 halaman awal Search Engine, maka anda akan kehilangan 96,75% calon prospek yang masih potensial.

***

Melalui hasil riset tersebut, menggunakan service dari kami merupakan pilihan yang tepat dan sangat menguntungkan, omset toko online anda meningkat tajam dengan banyaknya traffic yang datang dari mesin pencari. Traffic dari mesin pencari merupakan traffic potensial yang ketika orang mengetikkan sebuah kata kunci disana sedang membutuhkan informasi atau mencari jawaban atas permasalahan mereka, yang lebih hebat lagi anda tidak perlu capek-capek melakukan promosi lagi setelah menggunakan layanan kami karena semuanya akan berjalan secara otomatis.



PROUDLY PRESENT


playboy-seo-services

Playboy SEO Service merupakan Jasa SEO Profesional khusus dalam optimasi keyword yang ditujukan untuk siapa saja yang ingin blog, website ataupun toko online mereka ada di halaman 1 Google dengan keyword yang mereka inginkan.

Portofolio: 
http://lakucombelanjaonline.carbonmade.com/projects/5267679#1



PAKET SEO



HARGA
  BRONZE
     Rp 
   Juta
SILVER
  *Rp 10 
   Juta
GOLD
 Rp 18 
Juta


★ Jumlah Keyword        20       50      100


ANALYSIS

★ Keyword Analysis                   
★ Competitive Analysis                   
★ Link Analysis                   
★ Site Architecture Analysis        -            
★ Site Navigation Analysis        -       -          

SETUP

★ Setup Sitemap                   
★ Setup Akun Google Webmaster Tools                   
★ Setup Robots.txt        -              
★ Setup RSS Feed        -       -         

ON-PAGE OPTIMIZATION

★ Optimasi Metadata                   
★ Optimasi Heading Tag                     
★ Optimasi Image                   
★ Optimasi URL                   
★ Optimasi Site Speed         -            
★ Optimasi Geo Targetting         -        -      


OFF-PAGE OPTIMIZATION

★ Social Bookmark                   
★ Social Network                     
★ Web 2.0 Properties                   
★ Forum Profile                   
★ Classified                   
★ Video Sharing                   
★ Doc Sharing        -            
★ RSS Directory        -            
★ Press Release        -       -      
★ Wiki

        -       -        

SOCIAL MEDIA OPTIMIZATION

★ Facebook Like

       
   
      
 
      
  
★ Facebook Share        -            
★ +G        -       -      


TRACKING & REPORT

★ Traffic Report
 
       
   
      
 
      

★ Ranking Report                   




WHY CHOOSE US?



       KAMI BEKERJA DENGAN PLANNING DAN STRATEGI
     
      HARGA TERJANGKAU

   GRATIS KONSULTASI


       GARANSI TERBAIK


SATU-SATUNYA SEO SERVICES YANG BERANI MENGGARANSI TOP 5 GOOGLE








SYARAT DAN KETENTUAN:



*) Harga berlaku untuk 6 bulan.
*) Uang muka 50%.
*) Biaya maintenance keyword sebesar 75% apabila anda ingin memperpanjang kontrak dengan Playboy SEO Service.
*) Website tidak berisi konten pornografi, SARA, judi online (gambling), malware dan hal yang kurang etis lainnya.
*) No blackhat/greyhat SEO (cloaking, 301 redirect, hidden text etc).
*) No porn, gambling, violence atau illegal links ke website anda.
*) No reciprocal link, link exchanges, paid links, paid traffics etc.




GARANSI


"Apabila selama 4 bulan website anda belum menempati halaman 1 Google (5 besar) untuk keyword yang anda inginkan, maka kami akan kembalikan 100% uang anda."

"SEO is Hard and Playboy SEO Services Make it Easy"

Segera hubungi kami untuk pemesanan

 Mobile: +62 857 1645 1987
 eMail: agung.purnomo305@gmail.com




PEMBAYARAN


BCA KCP Kelapa Gading Hibrida
 No. Rek: 6300126748
 Atas Nama: Agung Purnomo

Cimb Niaga Cabang Depok
 No. Rek: 520-01-24461-11-5
 Atas Nama: Agung Purnomo

PayPal
 Email: agung_lp305@yahoo.com

Konfirmasi pembayaran bisa dilakukan via SMS, Yahoo Messenger (Chat) atau Email.





Description: Playboy SEO Services Rating: 3.5 Reviewer: Agung Purnomo - ItemReviewed: Playboy SEO Services

Need SEO Services?






Sore-sore gini asyiknya minum minuman berenergi sambil makan martabak paling enak di Jakarta. Sedap!

AWARD




Tools

Tools
Powered by Blogger.