Friday, September 6, 2013

John Chow dot Com

John Chow dot Com


3 SEO Strategies You Need To Drive More Traffic

Posted: 05 Sep 2013 08:40 PM PDT

Big Idea Mastermind

Let me share with you some of the SEO strategies you need to drive more traffic to your blog.

You and I know that before you can build a successful blog, you need people.

Truly, a community is not composed of Trees and Animals – it has to be real people with taste, otherwise it's no longer a community.

Search engine optimization has become one of the delicate marketing practices – as a result of Google Panda, Penguin 1.0 and now the Penguin 2.0.

If you had listened to your inner voice, you'll hear Google telling you something that no one else knows.

Matt Cutts is a cute guy who tends to reveal everything that Google is up to. But there is one thing that you should be focused on. I'll reveal that one thing in the 2nd strategy.

So without much ado, take these 3 SEO Strategies, apply them to your blog and drive quality traffic. Shall we?

1.      Make your old content relevant

googleThis is a no-brainer. But if you truly want to start driving organic traffic from Google, then don't neglect your old content.

I know you must have written hundreds if not thousands of blog posts in 2011, '12 and this year too. Are they still valuable?

Did you know that Wikipedia does not advertise anywhere? Maybe I've been blind to this, but I've never seen wikipedia's Ad campaign in Google, Yahoo or Bing Search Engines.

All the articles they've written years ago are still relevant because the editors and writers interlink them.

Wikipedia has covered 99% of the topics you've in mind and Google loves them because they interlink a lot. Sure, relevance is what you must earn for. Also, Mashable, Techcrunch and other authority content websites interlink a lot.

The posts of 2002 till 2012 are still referenced. In the eyes of Google, such articles and videos are still valuable and that's the key point of effective on-page SEO.

When you write blog posts, make sure you interlink your relevant pages. It can send positive signals to Google and get you some traffic love?

2.      Link out to authority sites

Don't be selfish. Search engine optimization has gone beyond your own blog and grandma's pet naughty free blogger blog. You've to link out because you don't know it all.

Experts have strong networks and when you link to other relevant content pages outside your blog, you're telling Google that you know who is who on the internet. It's about building a community of influencers who know their onions. Hmm, I mean Carrot!

If your niche is internet related, then you've a lot of authority sites to link to.

And the good news is that health related niches are seen as authority – Google therefore rewards health sites more. Answer me, Medical Doctors and Bloggers, who should you trust?

If you answered Medical Doctors, then you can understand why Google is driving angrily towards authority.

3.      Focus on relevant content

After Google released their first Panda update, there is a call for relevant content.

You've to identify your niche and stick to it. Forget all the hype about quality content, the only quality content is one that's helpful and relates to a group of people.

Don't cast your net too wide and expect miracles to happen. If your niche is internet marketing, why not narrow it down and be more specific.

I mean, you can write about email marketing 95% of the time? Or what about social media, SEO, brand marketing, business start up, monetization, traffic generation et al? When your content is relevant, you're telling Google where your expertise lies.

Because if you claim to be an expert, then you can't be jack-of-all-trade and master-of-none. Write epic content that can help your target audience. Don't try to impress everyone.

Google tracks the keywords you mention and use on your content consistently. Search engine spider doesn't have eyes or intellect, but it can tell what keywords you're trying to optimize for if used on a regular basis.

When you write guest posts, make sure it's relevant to your domain and niche, then link back to your most-relevant post. Continue doing this and gradually, you'll build authority and drive traffic beyond your wildest imaginations.

SEO is still alive…

Yes, web 2.0 websites have become stronger after Penguin 2.0 update. When you build branded anchor texts from the content, it can bump your rankings almost overnight.

An example of a branded anchor text is http://contentmarketingup.com, instead of content marketing. You can then link the anchor to a relevant content page on your blog.

SEO isn't dead. Yes, a lot of changes on the algorithm have been recorded way back, but the foundation is still the same – build authority links with your relevant content.

What do you say? Did Penguin 2.0 update affect your website? Share your opinion right below and go see a movie…will ya?




FacebookTwitterDiggStumbleUpon

Tuesday, August 27, 2013

Cara Membuat Blog Komik Online di Blogspot - THEMASDOYOK.COM


Cara Membuat Blog Komik Online di Blogspot - THEMASDOYOK.COM


Posted: 27 Aug 2013 03:31 PM PDT
Bonus Template Komik Online di Blogger/Blogspot - Serial blog project kembali hadir, sebuah serial pembuatan blog profesional secara detail dan komplit, menggunakan mesin tercinta kita blogger atau blogspot. Lewat serial blog project ini saya berharap pengguna blogger tidak perlu berkecil hati karena blogger tetap bisa dimanfaatkan secara luas untuk banyak hal, jika kita kreatif. Oke kita mulai.

LIHAT DEMO | DOWNLOAD TEMPLATE

Step by step:
1. Membuat Blog di Blogger
2. Pasang Script Image Selector untuk Komik Online
3. Tutorial Posting
Sampai langkah ini Anda sudah bisa membuat sebuah blog Komik Online.
4. Membuat Halaman Manga List (optional)
5. Bonus Template (optional)

1. Membuat Blog di Blogger
Paling awal, Anda harus memiliki sebuah blog. Mulai buat!

2. Pasang Script Image Selector di Blogger
Letakkan script berikut di atas </head>
<script src='https://googledrive.com/host/0B69aOIwUyEZmTDVPc1J6c2lBZEk' type='text/javascript'/>

Akan lebih baik lagi jika script tersebut di host sendiri (baca: Host JavaScript di Google Drive)

3. Tutorial Posting
Posting dalam mode HTML, bukan mode compose. Masukkan script berikut ini ke postingan Anda:
<div id="comiccover"><img src="#"></div>
<div id="controlimage"><a href="javascript:void(showPrevious());">Previous Page</a><span ID="index">index</span><a href="javascript:void(showNext());">Next Page</a></div>
<span ID="page">page</span>
<span ID="caption">caption</span>

<script language="javascript">
addPhoto("#", "", "1");
addPhoto("#", "", "2");
addPhoto("#", "", "3");
addPhoto("#", "", "4");
addPhoto("#", "", "5");
</script>

<script language="javascript">initPhoto();</script>

Keterangan:
ID comiccover, berguna untuk setting gambar komik yang muncul di homepage. Ganti pagar berwarna merah pada baris pertama dengan URL gambar yang ingin ditampilkan pada homepage.
- ID controlimage, baris berwarna hijau tidak perlu Anda rubah, karena itu navigasi otomatis untuk membaca komik.
- span ID page, lokasi penampilan komik dan ID caption untuk memberikan keterangan pada gambar komik. Sebaiknya tidak usah diubah.
- addPhoto, bagian ini adalah isi konten komik. Ganti yang berwarna merah dengan alamat gambar komik. Isikan seterusnya berurutan. Anda bisa menambahkan halaman lain tidak terbatas dengan menambahkan script berikut: addPhoto("#", "", "5"); angka 5 ganti dengan angka 6 dan seterusnya.
 - Jadi, yang perlu Anda rubah pada script di atas hanya pada bagian #.

Agar tidak susah payah menulis script dasar tersebut berulang-ulang, Anda bisa menambahkannya ke template Postingan (Setelan -> Pos dan Komentar -> Copykan kode di atas ke Templat Entri -> Simpan)

NB: Jika Anda menggunakan template sendiri, maka perlu ditambahkan kode berikut ini di atas </head>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
  <style>#comiccover {display:none}</style></b:if>


4. Membuat Halaman Manga List (optional)
Untuk membuat halaman manga list silahkan tambahkan CSS berikut ini ke template Anda, letakkan di atas
]]></b:skin>

#subheadpost {position:relative;margin-right:10px;float:left;}
#subheadpost header {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    bottom: 15px;
    padding: 0 5px;
    position: absolute;
    width: 120px;}

#subheadpost h5 {
    color: #C00C0C;
    float: left;
    font-family: Arial,sans-serif;
    font-size: 11px;
    font-weight: 700;
    height: 5px;
    margin: 0;
    text-shadow: 1px 1px 1px #0B0B0B;
    width: 100%;
}
#subheadpost h6 {
    color: #FFFFFF;
    float: left;
    font-family: Arial,sans-serif;
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    padding-bottom: 10px;
    text-shadow: 1px 1px 1px #0B0B0B;
}


Buatlah sebuah static page/laman kemudian posting dalam mode HTML, masukkan script berikut:
<div id="subheadpost"><a href="#"><img width="140px" height="190px" src="#"><header><h5>Action</h5><h6>TORIKO</h6></header></a></div>

Keterangan:
- # pertama ganti dengan URL tujuan, misalkan halaman label
- # kedua ganti dengan alamat gambar, misalkan gambar naruto
- Action ganti dengan label komik, misal petualangan
- TORIKO ganti dengan judul komik
- Tambahkan kode serupa di bawahnya jika ingin menambahkan kotak list mangan yang lain

5. Bonus Template
Jika Anda menggunakan template ini, maka
- Anda tidak perlu menambahkan script image selector. Sudah terinstal
- Anda tidak perlu menambahkan script NB pada poin 3
- Anda tidak perlu menambahkan CSS pada poin 4
- Belum ane SEO-in, SEO ini sendiri ya :D maklum cepet2 editnya.

Link download templatenya ada di atas ya! Kalau tidak bisa didownload kabari saya lewat facebook.

Item Info: Membuat Komik Online di Blogspot/Blogger

Sunday, August 25, 2013

Pengaturan Margin dan Padding di Bootstrap - THEMASDOYOK.COM

Pengaturan Margin dan Padding di Bootstrap - THEMASDOYOK.COM


Pengaturan Margin dan Padding di Bootstrap

Posted: 25 Aug 2013 05:06 PM PDT

Pengaturan Margin dan Padding di Bootstrap - Bootstrap v3 telah dikembangkan. Versi ini memungkinkan responsibility di berbagai device seperti mobile, tablet dan desktop tanpa pengaturan css manual. Sistem grid yang fleksibel memungkinkan kita mengatur lebar kolom yang akan menyesuaikan device tanpa penambahan rumus kondisional secara manual di blog.

Saya mencoba membuat template full bootstrap, paling tidak dari segi CSS, sama sekali tidak ada CSS yang ditulis manual di blog, dan ternyata cukup membuat puyeng. Contoh project: http://project-bootstrap.blogspot.com/. Mungkin akan terjadi error atau apa, karena masih saya utak atik terus menerus sambil belajar. Template tersebut juga sudah lolos validasi HTML5.

Sementara ini, lebih banyak kesulitan yang didapatkan ketimbang kelebihan yang saya rasakan ketika mencoba mengembangkan template berbasis bootstrap. Kode memang menjadi lebih ringkas dan tentu saja loading cepat, tapi belum keseluruhan class CSS bootstrap bisa mewakili kebutuhan desainer.

Misalkan saja untuk masalah padding dan margin kita akan dibuat sangat ribet. Di web resmi bootstrap (getbootstrap.com), diajarkan tentang pergeseran widget ke kanan (bisa mewakili margin-left) menggunakan sistem offseting column, tapi untuk kebalikannya juga belum ada class standard yang bisa kita gunakan.


Jadi, untuk menentukan margin dan padding kita harus memberikan tambahan kode CSS internal, seperti contoh: 

.selector {
margin: 0px;
padding: 0px;
}  

Info Tentang: Pengaturan margin, padding dan color di Bootstrap

Membuat Bootstrap di Blogger - Blogspot

Posted: 25 Aug 2013 06:21 PM PDT

Instal Bootstrap di Blogger Blog - Banyak pengguna blogger yang bingung soal bootstrap. Mungkin banyak yang mempunyai keinginan untuk aplikasikan bootstrap di blog blogspot mereka, tapi bingung step-step nya. Ya, sambil belajar bareng mari kita coba buat bootstrap di blogger.

(Sebaiknya dibaca: Bootstrap belum tepat untuk blogspot). Tapi untuk belajar boleh juga lah, biar tidak ketinggalan jaman.

Langkah-langkahnya:
1. Download File Bootstrap
2. Upload di Google Drive
3. Pemasangan di Blogspot

Download File Bootstrap
Untuk versi terbarunya bisa di download di https://github.com/
File nya terus di update, jadi nanti kita bisa ikuti perkembangannya.
- Download file tersebut, hasil download berupa zip file
- Extract file ke folder yang Anda tentukan. File zip tersebut terdiri dari file xss, images dan js


Upload di Google Drive
- Sementara 2 file aja dulu yang di upload di Google Drive. Baca Tutorial: Host JavaScript di Google Drive.
- File yang diupload adalah file bootstrap.min.css dan bootstrap.min.js

Pemasangan di Blogspot
Nah, ini langkah terpenting.
- Login Blogger
- Klik Template
- Klik Edit HTML
- Masukkan script bootstrap yang sudah diupload di atas </head>

Nah, setelah script ditambahkan Anda mulai bisa menggunakan class-class bootstrap.

Kalau Mau Mudah,
Kalau bingung cara upload file dan pasangnya, cukup tambahkan kode berikut ini di atas </head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://html5shim.googlecode.com/svn/trunk/html5.js' type='text/javascript'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"/>



Jika, sudah silahkan Simpan Template Anda. Sekarang Anda mulai bisa menambahkan berbagai component dengan mudah. Untuk penambahan elemen silahkan lihat di: Componen . Btotstrap

Sekarang sudah update versi 3: http://getbootstrap.com/

Item Info: Membuat Bootstrap di Blogger - Blogspot

Saturday, August 24, 2013

Pengertian Apa Itu Bootstrap - THEMASDOYOK.COM

Pengertian Apa Itu Bootstrap - THEMASDOYOK.COM


Pengertian Apa Itu Bootstrap

Posted: 24 Aug 2013 05:57 PM PDT

Pengertian Twitter Bootstrap -  Banyak blogger yang mulai tertarik dengan Bootstrap namun mereka masih bertanya apa sih fungsinya sebenarnya. Adakah kelebihannya? Bagaimana instalasinya? Nah, sedikit demi sedikit di blog ini akan mulai di bahas tentang bootstrap, mulai dari pengenalan hingga pemasangannya di Blogger.

Apa itu Bootstrap?
Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.

Bootstrap juga memudahkan pengaturan website bagi mereka yang kurang mahir coding atau tidak punya waktu banyak. Sekumpulan javascript dan CSS yang dibutuhkan untuk banyak sekali widget ada dalam satu file yang terus di update oleh pengembang. Pemilik website tidak akan lagi disibukkan dengan pengaturan css atau javascript berlebihan. Mereka hanya perlu menentukan gadget atau elemen apa yang ingin ditampilkan dalam bentuk HTML standart bootstrap yang sangat simple.

Misalkan dulu untuk menambahkan menubar di blogspot, maka Anda perlu menyisipkan file CSS, HTML bahkan JavaScript untuk effect tertentu. Kemudian ketika Anda ingin menambahkan dropdown menu, maka per widget, paling tidak Anda butuh menambahkan CSS dan HTML lagi. Belum lagi jika ingin lebih menarik akan dibutuhkan javascript tambahan. Begitu seterusnya setiap penambahan widget selalu dibutuhkan banyak kode. Tapi setelah instalasi bootstrap, Anda hanya perlu menambahkan kode HTML nya saja.


Tapi...  Penggunaan bootstrap kadang membuat kita jadi kurang kreatif, Coding yang sudah di buatkan oleh pengembang membuat desain web kita terbatas. Sebenarnya kita masih bisa tambahkan CSS manual pada elemen-elemen bootstrap untuk mempercantiknya, tapi jelas ini membuat web kita nanggung. Menambahkan CSS manual sama saja kembali ke cara lama.

Jadi, pilihan Anda apakah akan mengikuti perkembangan jaman bersama bootstrap, editing dan kelola website secara instan. Atau lebih suka oprek template sendiri berkutat dengan kode CSS yang Anda susun-susun sendiri.

Jawabannya, tentu sesuai kebutuhan dan kepuasan Anda.

Item info: Pengertian Apa Itu Bootstrap

Memasang Awesome Icon di Judul Gadget atau Menubar

Posted: 23 Aug 2013 08:55 PM PDT

Memasang Awesome Font/Icon di Samping Judul Gadget - Pagi ini full membahas Awesome Icon. Seklaian daripada lupa mending post beberapa sekaligus. Hari ini berurutan mulai post:
- Menggunakan Awesome Font di Blogspot
- Daftar Lengkap Awesome Icon Untuk Blog
- Custom CSS Untuk Awersome Icon/Font

Nah, kali ini untuk menjawab pertanyaan teman-teman yang ingin meletakkan awesome font tersebut di judul gadget sidebar ataupun di menubar.


Pemasangan Di Samping Judul Gadget
1. Login Blogger
2. Edit HTML
3. Kemudian cari kode gadget Anda, misalkan:

<b:widget id='HTML1' locked='false' title='Artikel Terkait' type='HTML'>
            <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
          </b:widget>


*yang di stabilo merahungu adalah judul gadget Anda
*perhatikan yang berwarna merah adalah baris yang harus Anda rubah dan sisipkan kode.

Kode awal:
<h2 class='title'><data:title/></h2>

menjadi:

 <h2 class='title'><i class="icon-facebook"> <data:title/></h2>

*yang berwarna biru ganti dengan kode icon sesuai keinginan Anda. Kode icon bisa dilihat di: Daftar Lengkap Awesome Icon Untuk Blog
*Untuk mengatur icon di samping judul gadget agar posisinya bagus, bisa dengan CSS tambahan sesuai dengan artikel: Custom CSS Untuk Awersome Icon/Font


Pemasangan Pada Menubar
Untuk pemasangan pada menubar, maka posisi awesome icon seperti pada kode di bawah ini:
<li><i class="icon-facebook icon-2x"></i>  <a href="#">Pemula</a></li>

Sesuaikan dengan CSS agar terlihat bagus pada menubar.
Semoga bermanfaat. Blogging is Sharing... Kadang-kadang monetizing hehe

Item Review: Memasang Awesome Icon di Judul Gadget Blog