Tapi sebelumnya, ada sedikit update (yang OOT):

1. Jika anda masuk blog ini melalui halaman depan (homepage), anda akan melihat ribbon kecil OPL Award. OPL Award adalah sebuah penghargaan yang diberikan One Page Love kepada situs-situs satu halaman (one page) dengan desain terbaik di seluruh dunia. Dan kebetulan, Majuterus bisa lolos :). It’s good to know someone appreciate our design/work.
2. Jika segalanya lancar, saya akan menjadi web designer buat sebuah web design studio yang berbasis di San Diego, CA. Semoga :).
3. Selagi di sini, saya ingin berterima kasih kepada Supakunza yang telah mempercayakan theme development kepada saya. Looking forward for more projects masbro :).

Nah, sekarang setelah preambule telah ditulis, mari masuk ke topik bahasan. LESS.

LESS adalah sebuah CSS Preprocessor. Dia adalah sebuah bahasa pemrograman yang output/hasil akhirnya adalah file CSS yang seperti biasa kita buat. Pertanyaannya adalah, jika LESS menghasilkan CSS biasa, lalu kenapa harus memakai LESS? Bukankah lebih enak langsung menulis file CSS daripada harus membuat dan mempelajari bahasa lain lagi?

Pertama-tama, LESS tidak harus dipakai. LESS sifatnya opsional. Hanya saja dengan menggunakan LESS, kita bisa mempersingkat waktu dalam membuat CSS. Lagipula, output dari LESS adalah sebuah file CSS yang biasanya sudah berbentuk minified, jadi kalau ingin efisien dalam membuat file CSS, LESS adalah opsi yang layak dipertimbangkan.

LESS Compiler

Untuk membuat LESS dan otomatis menghasilkan file CSS, kita membutuhkan sebuah compiler. Walaupun kita bisa juga menggunakan PHP/JavaScript untuk menghasilkan file CSS di server side, tapi untuk alasan kecepatan load situs/blog, saya menyarankan untuk menggunakan compile LESS di komputer kita saja (compile menggunakan aplikasi). Nanti file CSS hasil compile yang diupload ke server.

Berikut adalah beberapa LESS compiler yang bisa anda download dan install untuk compile (mengubah) file LESS ke CSS:

1. SimpLESS – http://wearekiss.com/simpless
2. CodeKit – http://incident57.com/codekit/ (Hanya untuk Mac OS X. Berbayar)
3. Crunch – http://crunchapp.net/ (Butuh Adobe AIR)
4. WinLESS – http://winless.org/ (Hanya untuk Windows)

Selain berbentuk stand-alone application, anda juga bisa menggunakan Extensions/Add-ons untuk code editor kesayangan anda. Berikut adalah beberapa di antaranya:

1. Sublime Text 2 – https://github.com/BBB/sublime-lesscss
2. Adobe Dreamweaver – http://www.adobe.com/
3. Adobe Brackets – https://github.com/olsgreen/BracketLESS

* Kalau ada info lain, silahkan tambahkan di kotak komentar.

Membuat LESS

Mari sekarang kita belajar membuat LESS yang mencakup 4 bahasan. Variable, Mixins, Nesting, dan Functions & Operations. Di sini saya menggunakan Adobe Brackets. Untuk memulai, buat 1 file less dan 1 file css kosong.

Variable

Dengan variable, kita dapat menggunakan suatu value dari property secara berulang-ulang dengan lebih mudah. Misal kita menulis LESS berikut …

@merah: #FF0000;
@biru: #8FD8D8;

#header {
  background: @merah;
}
h2 {
  color: @biru;
}

Maka ketika di-compile, kita akan mendapatkan CSS seperti berikut:

#header {
  background: #FF0000;
}
h2 {
  color: #8FD8D8;
}

Jadi jika kita menulis kode CSS yang banyak dengan menggunakan warna, kita tidak perlu mengingat-ingat kode hex color lagi. Cukup tulis @merah atau @biru. Mudah diingat daripada kode hex bukan?

Mixins

Mixins memungkinkan kita untuk memasukkan class (dengan properties-nya) ke dalam class lain. Misal…

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Maka hasil compile…

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

Nesting

Nesting memudahkan kita untuk tidak perlu menulis ulang deklarasi setiap kali melakukan inherit.

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { 
    font-size: 12px;
    a { 
      text-decoration: none;
      &:hover { 
        border-width: 1px;
      }
    }
  }
}

Hasil compile:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

Functions & Operations

LESS memungkinkan kita untuk menambah / mengkalikan / membagi value properties dengan functions & operations. Misal…

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Hasil compile file LESS ke CSS…

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

Dan itu adalah pembahasan sederhana tentang LESS. Untuk bacaan yang lebih lengkap, silahkan kunjungi http://lesscss.org/.
Semoga bermanfaat.

The post Belajar Menggunakan LESS (CSS Preprocessor) appeared first on Majuterus Web Design.

Bingung? Akan saya jelaskan dengan contoh.

Misalkan kita ingin menulis kode HTML berikut…

<div>
    <ul>
        <li></li>
    </ul>
</div>

Dengan emmet, kita cukup menuliskannya seperti berikut…

div>ul>li

Sangat singkat bukan? Jika kita menulis kode HTML yang “repetitif” atau sama secara berulang kali, emmet akan sangat membantu mempercepat penulisan kode HTML. Lagipula, hampir semua code editor sekarang mendukung penggunaan emmet. Jadi tidak ada salahnya untuk belajar menggunakan emmet.

Dan untuk berbagi, berikut ini adalah emmet favorit yang sering saya pakai.

1. Multiplication

Ini adalah salah satu emmet favorit saya. Dengan ini kita akan bisa menghemat banyak waktu penulisan HTML. Misal jika kita menulis kode berikut…

div>ul>li*7

Maka kita akan mendapatkan hasil berikut…

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

2. Multiple Class untuk Satu Item

Ini sangat bermanfaat untuk penulisan HTML yang menggunakan Twitter Bootstrap. Seperti yang kita tahu, Twitter Bootstrap terkadang membutuhkan beberapa class dalam satu item. Dengan emmet, kita cukup menuliskan kode berikut…

.satu.dua.tiga

Maka kita akan mendapat banyak class dalam satu item.

<div class="satu dua tiga"></div>

3. Numbering

Dengan menambahkan $ dan menggunakan *, kita dapat memberi urutan nomor pada obyek yang kita inginkan. Misalkan kita menulis emmet berikut…

ul>li.item$*5

Maka kita akan mendapatkan hasil berikut…

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

4. Grouping

Grouping berguna untuk membuat sebuah kode HTML yang kompleks. Biasanya untuk membentuk satu struktur HTML yang lengkap. Sebagai contoh, ini adalah kode emmet yang biasa saya pakai untuk layout awal dokumen…

div#container>(header>img.logo[src="image-url" alt="alt text"])+(article>hgroup>h1{heading}+h2{sub-heading}+p{article content})+(aside>p{aside content})+(footer>p{copyright})

Catatan: [ ] berguna untuk atribut. Dan { } untuk teks.

Dari kode emmet diatas, kita akan mendapatkan hasil berikut…

<div id="container">
    <header><img src="image-url" alt="alt text" class="logo"></header>
    <article>
        <hgroup>
            <h1>heading</h1>
            <h2>sub-heading</h2>
            <p>article content</p>
        </hgroup>
    </article>
    <aside>
        <p>aside content</p>
    </aside>
    <footer>
        <p>copyright</p>
    </footer>
</div>

Walaupun pada awalnya membingungkan, tapi jika kita sudah terbiasa, maka saya yakin anda tidak akan bisa lepas dari emmet. Untuk contoh emmet lain, bisa anda baca dari http://docs.emmet.io/.

Untuk kelanjutan mempercepat pembuatan dokumen HTML, pada artikel selanjutnya (jika sempat), saya akan membahas tentang LESS.

The post Belajar Menggunakan Emmet appeared first on Majuterus Web Design.

Selain itu, dot grid juga lebih murah dan mudah untuk dibuat. Cukup dengan komputer dan printer biasa, maka kita bisa memiliki lembar dot grid untuk sketsa sebanyak yang kita mau. Dan di sini, saya akan membagikan dot grid saya kepada Anda, GRATIS.

Dalam file zip, ada 3 ukuran kertas. A4, Letter, dan F4. Semuanya dengan dot grid 0.5cm. Silahkan download dan print. Tidak perlu atribusi atau lisensi macam-macam.

Tapi ada dua hal yang perlu saya ingatkan. Pada waktu mencetak, pastikan untuk tidak melakukan scale dokumen. Dan juga pada waktu membuat sketsa di kertas dot grid, ada baiknya menggunakan pensil yang keras macam H / 2H. Hindari pensil lunak semacam 2B. Pensil 2B meninggalkan noda jika dihapus.

Download Dot Grid.

The post Download Dot Grid PDF Gratis appeared first on Majuterus Web Design.

Namun di sini saya tidak ingin membahas tentang desain grafis. Di sini saya ingin membahas beberapa plugin menarik yang bisa membantu para web designer dalam mengerjakan atau membuat mock ups di Photoshop. Plugin-plugin ini dijamin dapat mempermudah anda. Mari kita mulai dari yang saya pakai.

GuideGuide

Di internet ada banyak CSSGrid yang juga menyertakan grid/guide dalam bentuk file PSD, sehingga kita bisa mudah mendesain website dengan lebih presisi. Namun ada kalanya kita tidak ingin memakai setting mereka. Kadang kita ingin menggunakan aturan grid kita sendiri. Nah, GuideGuide akan membantu memudahkan untuk melakukan itu.

Website: http://guideguide.me/

CSS3Ps

Plugin ini akan mengubah layer Photoshop anda menjadi CSS3. Jadi jika misal anda membuat tombol dengan gradient warna-warni plus glow, tidak perlu bingung lagi.

Website: http://css3ps.com/

Web Font Plugin

Plugin ini akan memudahkan jika anda berencana akan menggunakan webfont, baik dari WebINK ataupun dari Google Web Fonts. Karena plugin ini akan memasukkan font dari WebINK dan Google Web Fonts ke dalam Photoshop anda. Jadi font yang anda desain di Photoshop akan sama dengan yang ada di “live site“.

Website: http://www.webink.com/webfontplugin

WebZap

Plugin ini memang dibuat khusus untuk mock ups. Ada banyak pilihan menu layout, images placeholder, dll. Mantap pokoknya. Tapi plugin satu ini tidak gratis. Anda diharuskan membayar. Tidak mahal, cuma 19$ saja.

Website: http://webzap.uiparade.com/

Lorem Ipsum

Ini bukan plugin sebenarnya, karena ini sudah ada sebagai fitur standar dari Adobe Photoshop CS6. Cukup klik menu Type > Paste Lorem Ipsum untuk membuat text placeholder.

Selain plugin-plugin di atas, ada juga beberapa plugin lain yang sepertinya menarik, namun belum sempat saya coba. Misal CSSHat, PNGExpress, Divine, dan lain-lain.

Punya pengalaman menggunakan plugin yang belum masuk daftar di atas? Silahkan tinggalkan komentar anda.

The post Plugin Photoshop Untuk Web Design appeared first on Majuterus Web Design.

Anda menemukan desain Flat UI lain? Silahkan masukkan ke dalam kotak komentar.

The post Inspirasi Flat UI Design appeared first on Majuterus Web Design.

Nah, pada sebuah pameran The Happy Show  oleh Stefan Sagmeister dan Jessica Walsh (SagmeisterWalsh) yang diadakan di MOCA (Museum of Contemporary Art), Los Angeles, Amerika Serikat, Ting-Ting Jahe adalah salah satu karya yang dipamerkan. Kenapa ting-ting jahe? Karena ting-ting jahe adalah permen favorit Sagmeister :).

Typo :)

Images courtesy of Andrew Kim

Don’t you just love being an Indonesian?

NB: Foto lengkapnya bisa dilihat di The Happy Show at MOCA (WARNING! Karena graphic yang ada cenderung vulgar, Anda harus berumur 18+ sebelum membuka tautan)

The post Ting Ting Jahe Goes To LA appeared first on Majuterus Web Design.

1. Google adalah mesin pencari nomor satu dunia. Bisa dilihat dari data pengunjung Google Search per 1 Mei 2011 yang mencapai 1.000.000.000 unique visitor per bulan. (Wikipedia)
2. 65,4% traffic situs/blog dunia berasal dari Google.
3. 75% pencari informasi di Google tidak pernah membuka halaman kedua Google SERP. Pada perkembangannya, mayoritas pencari informasi dengan Google akan memperbaiki keyword yang diketik daripada membuka halaman kedua Google SERP. (WWW User Survey)

Melihat statistik di atas, saya rasa bila anda ingin mencari traffic yang berlimpah, maka mengoptimasi blog agar dapat tampil di halaman pertama atau posisi atas hasil pencarian Google adalah sebuah kewajiban.

Setiap orang memiliki cara yang berbeda-beda untuk mengoptimasi blognya. Setiap orang memiliki teknik masing-masing. Namun bagi saya berikut adalah cara paling efektif agar artikel blog bisa masuk ke halaman pertama hasil pencarian Google.

* Beberapa data dibawah bukan dimaksudkan untuk pamer. Data digunakan untuk pembuktian dari cara yang saya pakai.
** Saya bukan ahli SEO. Hanya ingin berbagi saja. Jika ada yang salah, silahkan melakukan koreksi di kotak komentar.
 

1. WordPress

Untuk hasil yang optimal, saya menggunakan WordPress. Saya tidak mengatakan kalau platform lain tidak optimal. Karena saya sendiri memiliki blog di platform lain seperti blogspot dan tumblr. Namun karena WordPress sudah SEO friendly sejak lahir, juga adanya kemudahan kustomisasi, tersedianya plugin yang melimpah untuk apa saja yang saya inginkan, dan juga dengan adanya forum yang menghubungkan sesama pengguna WordPress atau dengan developer, membuat saya lebih memilih WordPress untuk SEO daripada platform lain.

2. SEO Friendly Theme

Tidak peduli betapa bagusnya tulisan kita. Tidak peduli betapa optimalnya keyword yang ada di artikel kita. Tanpa sebuah theme yang SEO Friendly, akan membuat Google kesulitan membaca, mempelajari dan mengindex artikel di dalam blog kita. Maka dari itu, usahakan untuk menggunakan theme yang SEO Friendly untuk blog kita.

Di sini, kebetulan saya menggunakan theme buatan saya sendiri, yang walaupun jelek, namun telah saya optimalkan agar lebih SEO Friendly. Bagaimana dengan theme lain? Pada dasarnya, jika anda mencari theme yang SEO Friendly, anda cukup memperhatikan beberapa poin berikut :

1. Valid XHTML
2. Penggunaan Heading yang baik, terutama H1 dan H2. Pada theme yang SEO Friendly, biasanya menganut heading dinamis yang akan merubah tag H1 dan H2 menurut halaman yang dibuka.
3. Content muncul sebelum sidebar (bisa diatur di CSS).
4. Fast Load. Karena sesuai update Google Panda tahun lalu, Google telah memasukkan kecepatan load sebagai salah satu poin pertimbangan layak atau tidaknya sebuah situs/blog masuk ke dalam SERP.
5. Custom Menu Support. Dengan adanya custom support, kita dapat mengaplikasikan Google Rich Snippets Author dengan lebih mudah. Saya pernah menulisnya di Versi Mudah Mengaplikasikan Google Rich Snippets Ke Dalam WordPress.
6. Breadcrumbs. Bukan sebuah keharusan menurut saya. Tergantung kompleksitas blog. Bila blog anda terdiri dari bermacam-macam kategori yang dalam, breadcrumbs bisa jadi akan sangat membantu Google untuk mempelajari struktur blog.

3. Mencoba Menulis Artikel Sebaik Mungkin / Berkualitas

Sebenarnya artikel berkualitas tidak ada hubungannya dengan posisi atas Google SERP. Bahkan saya yakin artikel berkualitas tidak ada pengaruhnya sama sekali (setidaknya, tidak secara langsung). Namun dengan menulis sebuah atau banyak artikel berkualitas, maka itu akan menarik atau membuka kemungkinan orang untuk merujuk artikel kita. Dan itu berarti kita akan mendapatkan backlink. Teman-teman pasti tahu bahwa backlink membawa peranan penting atas posisi artikel blog di hasil pencarian Google.

Selain itu, dengan artikel berkualitas, akan membuat pembaca tertarik untuk share lewat Twitter, Facebook, atau Google+ karena mereka menemukan “value”. Mereka menemukan sesuatu yang lebih. Dan dengan share artikel ini berarti kita mendapatkan backlink (lagi). Penjelasannya ada di poin 7 : Social Media.

4. Long Tail Keywords

Keyword adalah kata kunci yang digunakan dalam sebuah website agar website tersebut dapat ditemukan. Keyword digunakan oleh visitor atau pengunjung yang melakukan pencarian menggunakan kata kunci yang diinginkan, oleh search engine keyword tadi dicocokan ke website yang mempunyai keyword yang relevan dengan yang dicari oleh visitor tadi. (sumber : Google Tanya Jawab)

Namun keywords yang selalu saya gunakan bukan keywords umum, melainkan keywords yang lebih spesifik atau lebih dikenal dengan Long Tail Keywords. Misalkan saya ingin menggunakan keywords umum “belajar photoshop”. Bila saya menggunakan keywords tersebut, maka blog baru saya kecil kemungkinannya muncul di halaman pertama Google, karena sudah banyak blog-blog senior yang menggunakan keywords tersebut. Maka dari itu saya menggunakan long tail keywords. Dari keywords umum “belajar photoshop” saya kembangkan menjadi keywords “belajar cara menggabungkan gambar dengan photoshop” atau “belajar cara manipulasi foto dengan photoshop”, dan sebagainya.

Kelebihan long tail keywords ini antara lain :

1. Mudah diranking oleh Google. Karena jarang ada blogger yang menggunakan long tail keywords, sehingga tingkat persaingan menjadi rendah.
2. Lebih banyak mendatangkan pengunjung. Karena orang yang mencari informasi dengan long tail keywords ini sejak awal pasti sudah berniat untuk belajar photoshop. Lebih spesifik lagi, belajar menggabungkan gambar dengan photoshop, atau yang lain. Untuk blog anda, tentu tinggal sesuaikan dengan niche blog.

Lalu dimana posisi terbaik untuk meletakkan long tail keywords? Yang pertama, tentu di dalam artikel. Selebihnya saya selalu menempatkannya di meta tag description dan judul artikel.

Bagaimana dengan meta tag keywords?

Sejak beberapa minggu yang lalu saya tidak lagi menggunakan meta tag keywords. Saya tidak melihat manfaat penggunaan meta tag keywords. Lagipula di Google Webmaster Central, Google jelas-jelas menyatakan tidak menggunakan meta tag keywords. Jadi saya pikir meta tag keyword sudah tidak perlu dipakai lagi.

* Anda bisa melihat bagaimana mayoritas webmaster meletakkan keyword ke dalam halamannya di SEOMoz : Search Ranking Factors.

5. Revisi

Setelah menerbitkan artikel, selang 1 minggu kemudian saya biasanya menggunakan Google Webmaster Tools untuk melihat perkembangan artikel. Dengan melihat jumlah clicks di Google Webmaster Tools, saya bisa melihat artikel mana yang bagus perkembangannya dan mana yang perlu direvisi (diperbaiki keywordsnya). Karena seperti yang teman-teman mungkin tahu, SEO bukanlah kegiatan satu kali aksi lalu beres. SEO memerlukan kegiatan yang kontinyu atau berkelanjutan.

6. Link

Link adalah tautan yang menghubungkan antara halaman satu ke halaman lain. Atau dari satu situs ke situs lain. Dan di blog majuterus, saya selalu menyematkan beberapa link. Baik itu internal link maupun external link.

Apa itu internal link? Internal link adalah link yang menuju halaman lain, namun masih didalam domain situs/blog tersebut. Internal link diperlukan untuk menunjukkan keterkaitan antara artikel satu dengan artikel lain. Selain untuk memudahkan pembaca artikel dalam mencari artikel yang berkaitan, internal link juga dapat memudahkan Google dalam mengindex halaman artikel (mempelajari struktur blog). Semakin banyak internal link blog kita, semakin bagus rank kita di hasil pencarian Google. Untuk menganalisa blog, kita bisa menggunakan seoworker.

Bagaimana dengan external link? External link adalah kebalikan dari internal link (tentu saja). External link adalah sebuah link yang menuju halaman lain di luar domain situs/blog. Sebenarnya masih ada pro dan kontra tentang baik atau buruknya penggunaan external link. Tapi bagi saya pribadi, asal bermanfaat bagi pembaca artikel saya, tidak ada masalah bila memberi external link. Tapi tentu saja, keputusan akhir tetap kembali kepada selera anda.

7. Social Media

Berdasarkan data dari Hubspot, URL artikel yang dishare melalui Twitter memiliki inbound links sebesar 113% lebih besar daripada URL artikel yang sama sekali tidak dishare melalui Twitter. Dan bila dibandingkan antara artikel yang dishare lewat Twitter dengan artikel yang dishare lewat Facebook, Twitter menghasilkan inbound links 54% lebih besar daripada Facebook. Bila kita menggunakan keduanya, maka kita akan mendapatkan 149% inbound links. Jumlah yang menggiurkan bukan? (sumber : Social Sharing Increases Blog Page Views 160%)

Apa hubungan social media dengan Google? Kemungkinan untuk dirank tinggi di Google SERP lebih mudah tercapai karena Google senang melihat artikel yang aktif dishare lewat social media. Maka dari itu, saya selalu menyempatkan untuk “nge-tweet” setiap artikel yang saya terbitkan.

Jadi, siapa yang masih memakai layanan link farm? Saya tidak. (Bagi anda yang sering share file, manfaatkan plugin tweet to download atau like to download untuk meningkatkan ratio tweet/like artikel anda)

8. Plugin SEO Ultimate

Ini adalah resep utama saya untuk mencapai posisi atas Google SERP. Hanya dalam waktu 1 minggu setelah menggunakan plugin SEO Ultimate, beberapa artikel saya yang pada awalnya tidak tampak sama sekali, perlahan-lahan mulai merangkak naik ke halaman pertama Google SERP.

Masih ingat dengan artikel-artikel tentang Google Rich Snippets yang pernah saya tulis sebelumnya? Dengan bantuan plugin SEO Ultimate, artikel-artikel tersebut, walaupun tidak menjadi nomor 1 karena kalah otoritas dengan wordpress.org, tapi bisa menguasai 4 besar hasil pencarian Google. Hasil yang tidak pernah saya dapat dari plugin SEO lainnya (saya sudah mencoba hampir semuanya).

Plugin SEO Ultimate ini benar-benar mantab!!!

9. Rajin Update

Google suka blog yang aktif, blog yang selalu update. Sebuah blog yang selalu menampilkan artikel-artikel baru secara rutin akan membuat Google sering melakukan crawl. Semakin cepat dicrawl, maka semakin cepat pula artikel kita diindex. Dan semakin cepat diindex, maka pada akhirnya kemungkinan masuk Google SERP semakin besar.

Dari hasil percobaan dengan artikel Bagaimana Cara Menyikapi Blogger Copas (iya, artikel itu bukan sekedar curhat, tapi juga dimaksudkan untuk bahan percobaan). Artikel tersebut hanya membutuhkan waktu 22 menit (atau mungkin kurang) untuk bisa berada di nomor satu dari 4,410,000 artikel yang membahas topik sama. (mungkin plugin SEO ultimate dan plugin Google XML Sitemap berpengaruh di sini).

10. Blogwalking

Cara terakhir dan termudah. Main ke blog lain dan tinggalkan komentar. Tujuannya selain untuk mempromosikan blog kita, blogwalking juga bertujuan untuk mencari backlink.

Dengan blogwalking kita juga mengundang pemilik blog untuk melakukan blogwalking ke blog kita. Tujuannya supaya blog terlihat aktif. Karena akhir-akhir ini, Google suka sekali menyingkirkan blog-blog yang tidak aktif dari daftar pencarian. Jadi terus blogwalking :D.

Dan itu adalah 10 cara saya agar bisa masuk halaman pertama Google. Tapi harap diingat bahwa dengan berhasil masuk ke 10 besar hasil pencarian Google ini hanyalah langkah awal. Untuk merubah posisi atas di Google SERP menjadi sebuah traffic atau penjualan masih diperlukan cara-cara lain. Tapi untuk membahas itu….kapan-kapan saja ya :).

Bagaimana dengan teman-teman? Cara apa yang teman-teman pakai agar bisa masuk halaman pertama hasil pencarian Google? Silahkan bagi di sini.

The post Buat Google ♥ Blog Kita : Tips Agar Artikel Blog Berada Di Posisi Atas Google SERP appeared first on Majuterus Web Design.

Saya rasa ini adalah pertanyaan yang masih menjadi perdebatan antara blogger yang mencopas dengan blogger yang dicopas. Pada satu sisi blogger yang mencopas mempunyai dalil apa yang ditulis di internet berarti bebas untuk ditulis dalam bentuk artikel copas ke dalam blognya karena ilmu tidak boleh disimpan sendiri. Ilmu harus dibagi. Kalau tidak mau dicopas, jangan menulis di internet.

Namun pada sisi lain, sisi blogger yang dicopas, akan merasa jengkel. Bisa dimengerti karena beberapa sebab berikut :

1. Dalam menulis sebuah artikel original, blogger membutuhkan waktu dan energi untuk memikirkan ide dan menuliskannya ke dalam sebuah artikel. Bahkan beberapa bisa mengalami stress dalam menulis sebuah artikel (http://darinholic.com/6-langkah-mudah-mengatasi-stres-saat-blogging.html).
2. Traffic yang menuju blogger original berkurang. Atau bahkan mungkin malah tidak ada. Sebab semua traffic menuju blogger pencopas karena kalah otoritas.
3. Merasa tidak dihargai karena seringkali blogger copas tidak memberitahu atau tidak meminta izin blogger original. Lebih parah lagi, tidak ada link yang merujuk artikel original.

Lalu bagaimana cara menyikapi blogger copas? Dari hasil blogwalking/googling ke blog-blog lain yang membahas tentang blogger copas, saya menyimpulkan beberapa cara yaitu :
 

Langkah Proaktif

1. Disable klik kanan, walaupun pendapat pribadi cara ini tidak begitu efektif.
2. Menyelipkan link artikel terkait ke dalam artikel.
3. Watermark semua gambar dengan logo, nama, atau URL blog kita.
4. Pasang script tracker dari copyscape atau tynt atau copygator.

Langkah Reaktif

1. Biarkan saja. Karena mayoritas blog yang mencopas tidak mempunyai otoritas terlalu besar. Apa tidak takut duplicate content? Google sudah memiliki sistem yang bisa membedakan mana artikel original dan mana yang hasil copas. Bisa dilihat dari hasil search di Google.

   

2. Menghubungi blogger copas. Nyatakan bahwa anda keberatan artikel anda dicopas. Saya rasa ini cara paling elegan untuk melakukan protes. Biasanya sih, blogger pencopas akan menurunkan artikel copas tersebut (mungkin malu karena ketahuan). Tapi bila tidak diturunkan, kita bisa menggunakan cara TERMINATOR dibawah.
3. Hubungi Google untuk menghapus artikel copas dari index.
4. Hubungi web host blogger copas. Nyatakan bahwa blog yang menggunakan jasa mereka telah melakukan pelanggaran dengan mencuri artikel orang lain (harus ada bukti yang cukup). Web host biasanya tidak menolerir jasanya digunakan untuk hal-hal negatif. Bila terbukti blog tersebut akan dinonaktifkan oleh pihak web host. Tapi ini tidak selalu, karena beberapa web host juga tidak mau di”komplain” pengguna jasanya.
5. Kalau blogger tersebut memasang Adsense, hubungi Google Adsense. Google tidak menolerir blog yang isinya hasil copas.
6. Buat artikel yang menyebutkan blogger X telah melakukan copas artikel anda. Tapi saya tidak menyarankan cara ini. Karena rasanya terlalu “sadis”. Serasa seperti pembunuhan karakter.
7. Dan lain-lain. Sebutkan cara anda di kotak komentar.

Dan itu adalah beberapa cara yang bisa dilakukan jika artikel kita dicopas. Lalu bagaimana dengan anda? Apa yang anda lakukan jika artikel anda dicopas?

The post Bagaimana Cara Menyikapi Blogger Copas? appeared first on Majuterus Web Design.

Karenanya, untuk membantu teman-teman yang belajar desain dengan Photoshop secara otodidak agar dapat berkembang, berikut adalah cara saya Belajar Desain Dengan Photoshop Sendiri / Otodidak.
 

1. Photoshop Itu Mudah

Kita akan susah mempelajari sesuatu jika kita melihatnya sebagai hal yang sulit. Maka dari itu, jika kita ingin belajar Photoshop, beri sugesti pada diri kita bahwa mempelajari Photoshop itu mudah.
 

2. Mengenal Program Photoshop

Akan sangat membantu bila kita telah mengenal berbagai fungsi tools, options, filters dan cara kerja Photoshop. Dengan mengenal Photoshop, maka kita akan dapat lebih mudah mempelajari sebuah tutorial.

Untuk mempelajari atau mengenal program Photoshop, kita dapat belajar dari berbagai sumber. Seperti buku (cetak maupun elektronik), video (youtube – photoshop basic tool atau Adobe TV – Photoshop CS5 Basic), dan situs (tutorial9 – recommended).
 

3. Belajar Dari Sang Ahli

Di internet banyak sekali orang baik hati yang memberikan tutorial tentang Photoshop. Kita bisa bebas menentukan tutorial mana yang akan kita pelajari. Namun sedikit tips, hindari belajar tutorial Photoshop dari pemula. Karena bila kita belajar dari pemula, maka ilmu yang kita dapat juga hanya sebatas tingkat pemula. Jika kita ingin menjadi seseorang yang mahir mendesain dengan Photoshop, belajarlah dari sang ahli. Bila kita belajar dari sang ahli, maka kita akan mendapatkan ilmu setingkat sang ahli.
 

4. Jangan Terpaku Pada Hasil Akhir Tutorial

Ketika kita mempelajari sebuah tutorial, jangan terlalu terpaku pada hasil akhir. Sebaliknya, perhatikan dan pelajari teknik yang dibutuhkan untuk mencapai hasil akhir. Karena esensi dari tutorial yang penting buat kita para pemula yang sedang belajar desain dengan Photoshop adalah teknik-teknik yang digunakan.
 

5. Memperkaya Imajinasi dan Kreatifitas

Poin ini adalah yang paling mudah dan menyenangkan. Untuk memperkaya imajinasi dan kreatifitas, bisa kita lakukan dengan melihat-lihat hasil karya orang lain di kommunitas desain semacam deviantart atau behance. Dengan melihat hasil karya orang lain, kita dapat melihat berbagai kemungkinan desain yang bisa dilakukan dengan Photoshop.

Banyak orang menyebut ini sebagai proses mencari inspirasi.
 

6. Berlatih Dan Belajar Teknik Baru

Poin terakhir dan terpenting. Desain adalah skill. Desain adalah keterampilan yang hanya bisa didapat dengan berlatih. Ibarat pisau, harus terus diasah agar semakin tajam. Mungkin kedengarannya cliché, tapi itulah adanya.

Jika kita terus berlatih. Membuka diri kita akan hal-hal, teknik, metode baru. Pada akhirnya hanya akan ada satu hasil yang kita dapatkan yaitu kita akan semakin terampil mendesain dengan Photoshop.

Dan itu adalah 6 cara saya belajar desain dengan Photoshop secara otodidak. Mungkin tidak semua orang setuju. Mungkin tidak semua orang sependapat. Tapi bagi saya 6 cara tersebut ampuh.

The post Cara Belajar Desain Dengan Photoshop Sendiri / Otodidak appeared first on Majuterus Web Design.

Eniwei. Kembali ke tutorial photoshop. Kali ini kita akan belajar cara menggabungkan beberapa gambar dengan Photoshop. Kita akan membuat gambar berikut …

menjadi gambar berikut … (Temanya masih tentang hancur-hancuran. 2012? :D)

Mungkin tidak semua orang suka hasil akhirnya yang full contrast. Tapi tenang, anda bisa mengatur kontrasnya di langkah terakhir tutorial.

Dalam membuat gambar di atas, saya menggunakan beberapa teknik yang pernah saya tulis sebelumnya seperti Seleksi Dengan Menggunakan Refine Edge, Menghilangkan Background Dalam Waktu Kurang Dari 1 Menit, dan Seleksi dengan Pen Tool.

Berhubung tutorial kali ini lebih untuk intermediate (yang sudah mengenal Photoshop). Maka bila anda belum terlalu mengenal Photoshop, tolong pelajari terlebih dahulu artikel-artikel di atas, karena saya tidak akan membahas terlalu mendalam tentang teknik-teknik dasarnya di tutorial ini.
 

Resource

Kita akan membutuhkan gambar-gambar yang bisa anda download di :
- http://freetextures.3dtotal.com/preview.php?imi=3915&s=c:Industrial&p=3&cid=3
- http://freetextures.3dtotal.com/preview.php?imi=3914&s=c:Industrial&p=3&cid=3
- http://freetextures.3dtotal.com/preview.php?imi=4074&s=c:Industrial&p=1&cid=3
- http://freetextures.3dtotal.com/preview.php?imi=4069&s=c:Industrial&p=0&cid=3
- http://freetextures.3dtotal.com/preview.php?imi=3911&s=c:Industrial&p=3&cid=3
- http://freetextures.3dtotal.com/preview.php?imi=3914&s=c:Industrial&p=3&cid=3
- Waiting in the desert by Night-Fate http://night-fate-stock.deviantart.com/art/waiting-in-the-desert-104414540
- Storm 2 bt Flaivoloka http://www.sxc.hu/photo/1153645

Tutorial

1. Buka gambar Waiting in the desert by Night-Fate. Kita akan memisahkan gambar cewek dengan background. Tapi itu nanti. Untuk sekarang, kita akan menggunakan gambar ini sebagai panduan perpektif.

Copy dan paste semua gambar gedung industri ke lembar kerja Waiting in the desert. Resize dan atur posisi gambar. (Mungkin dengan bermain Opacity, dapat membantu)

2. Buat seleksi dengan Pen Tool untuk memisahkan gambar gedung-gedung industri dari background langit. Sisakan sebagian bongkahan bangunan / sampah agar waktu menyatukan gambar dapat terlihat lebih alami.

Untuk seleksi dengan Pen Tool baca cara membuat Seleksi dengan Pen Tool.

3. Setelah menghilangkan background langit pada sisi luar gedung, masih tersisa background langit di dalam pagar pembatas. Untuk menghilangkan ini, kita gunakan Background Eraser Tool. Cara penggunaannya, silahkan baca Menghilangkan Background Dalam Waktu Kurang Dari 1 Menit.

4. Lakukan langkah 2 dan 3 pada semua gambar gedung industri lainnya, sehingga hasil akhir yang kita dapat kurang lebih akan seperti ini…

5. Pada gambar di atas sudah terlihat konsepnya. Namun masih ada yang kurang, yaitu tanahnya belum ada. Untuk ini, kita gunakan gambar Industrial 3914. Buat seleksi pada tanah dengan Rectangle Marquee Tool, copy dan paste ke lembar kerja kita. Posisikan layer tanah hasil seleksi ini di atas layer Background.

Pada saat ini, gambar mungkin terlihat aneh. Terlihat tidak menyatu. Tidak apa-apa. Sementara kita biarkan dulu.
 

6. Sekarang, mari kita memisahkan gambar cewek dari background. Caranya, pilih layer Background (gambar cewek), duplikasi layer (Cmd / Ctrl + J). Klik dan seret layer hasil duplikasi ke atas. Untuk memisahkan gambar cewek dari background anda bisa menggunakan Refine Edge atau dengan Pen Tool. Silahkan pilih yang mana yang termudah bagi anda.

7. Semua gambar telah tergabung. Saatnya untuk memanipulasi agar terlihat menyatu. Pada gambar anda, mungkin akan terlihat potongan-potongan tidak beraturan yang dibuat pada langkah 2.

Untuk menghilangkan ptongan tersebut tanpa terlihat kasar, gunakan Eraser Tool dengan brush Soft Mechanical dan Opacity 50%. Sapukan Eraser Tool pada tepi potongan gambar.

 
8. Setelah langkah ke 7, gambar kita akan berbentuk seperti ini….

9. Satukan (merge) semua layer bangunan dan tanah menjadi satu layer. Caranya dengan pilih semua layer bangunan dan tanah (sambil tekan Shift untuk memilih), lalu tekan Cmd / Ctrl + E. Di sini saya memberikan layer hasil gabungan dengan nama Reruntuhan.

 
10. Pada gambar di atas, gambar cewek terlihat seperti melayang. Untuk mengatasinya, kita buat bayangan. Buat layer baru di bawah layer cewek. Gambar sebentuk bayangan dengan Pen Tool. Rubah opacity menjadi sekitar 60%.

11. Sekarang untuk menambah kesan dramatis, kita akan memberi efek cahaya pada gambar. Pilih menu Filter » Render… » Lighting Effects… Opsi yang saya pakai adalah…

Setelah mengaplikasikan opsi di atas, gambar anda akan berwujud kurang lebih seperti gambar berikut …

Lalu dengan Burn Tool dan Dodge Tool, atur tingkat kegelapan shadow atau kecerahan highlight, baik pada layer Reruntuhan maupun pada layer Cewek. Baca Efek Pencerahan Dengan Dodge Tool.
 

12. Lalu untuk memberi kesan lebih dramatis, saya menambahkan gambar awan dari gambar Storm 2 di bawah layer Reruntuhan. Kemudian, beri efek cahaya pada layer Reruntuhan dengan pengaturan berikut…

Merge layer cewek, bayangan, reruntuhan, dan awan menjadi satu layer.

 
13. Aplikasikan Photo Filter (Image » Adjustments » Photo Filter…) dengan pengaturan Warming Filter (85). Atur Density ke 25%. Jangan lupa untuk mencentang Preserve Luminosity.

 
14. Duplikasi layer (Cmd / Ctrl + J). Lalu aplikasikan Gaussian Blur. Di sini saya menggunakan Radius 30 pixels.

 
15. Langkah terakhir. Rubah Blending mode menjadi Color Dodge. Dan atur Tingkat kontras dengan merubah Opacity.

Hasil Akhir Tutorial

The post 5….4….3….2….1…. appeared first on Majuterus Web Design.