TheMasDoyok memperkenalkan serial terbaru: BlogProject for Nuwbie. Pada serial ini saya akan menulis tutorial mengenai pembuatan suatu project blog untuk keperluan tertentu dari nol hingga jadi. Pada edisi pertama saya akan memperkenalkan pembuatan blog Download MP3 mudah di blogspot. Dann... bonus, di setiap serial blogproject akan dilengkapi dengan template gratis yang sesuai. :D Cekidot. Demonya: http://themasdoyokmp3.blogspot.com/
Fitur-fitur:
1. Tidak Usah Upload file MP3 Sendiri karena blog ini blog pencari mp3 otomatis
2. Template gratis yang sesuai kebutuhan
3. Loading cepet
4. Tambahan: Optimasi SEO dan Modifikasi Template harap dilakukan sendiri biar tambah joss hehe

Step by Step:
A. Membuat Blog Blogspot
B. Membuat Google Custom Search 2 Buah
C. Membuat Laman Download
D. Membuat Laman Search
E. Membuat Laman Chart
F. Membuat Postingan
G. Pemasangan Template dan Setting

A. Membuat Blog Blogspot
Hal yang pertama Anda butuhkan adalah membuat blog Blogspot.
Tutorial pembuatan blog blogspot: Pembuatan Blog di Blogger

B. Membuat Google Custom Search 2 Buah
Google Custom Search pertama untuk halaman download
- Buat Google CSE di http://www.google.com/cse
- Klik New Search Enginee
- Pada sites to search isikan www.4shared.com (agar pencarian link download otomatis hanya mencari di 4shared)
- Klik tombol Create
- Klik Edit Search Enginee > Look and Feel > Layout
- Pilih jenis tampilan Result Only
- Klik Save and Get Code (Akan muncul halaman kode, copy kode dan simpan ke notepad)


Google Custom Search kedua untuk halaman hasil cari
- Langkahnya sama, hanya pada point ke 2, sites to search isi dengan Alamat blog Anda.
- Langkah semua sama sampai Save and Get Code. Simpan juga kode yang ini ke notepad atau Ms Word.

C. Membuat Laman Download
- Klik Laman
- Buat Laman Baru
- Buat Laman Kosong
- Pada Judul Isikan 'Download'
- Pada kolom Isian isikan dulu satu karakter, misal 'A'
- Publish
- Coba Buka Halaman Download,
apakah URL sudah benar berformat:
http://alamatblog.blogspot.com/p/download.html
(kadang dalam pembauatan laman terjadi Eror sehinnga URl berakhiran /p/blog-page.html bukan /p/judul.html)
- Jika sudah benar, sekarang Edit halaman tadi. Masuk ke mode pengeposan Edit HTML.
- Copy Paste kode berikut:

<div style="text-align: center;">
Terima kasih atas kunjungan Anda. Silahkan pilih link download di bawah ini: (<b><a href="http://a lamatblog.blogspot.com/" target="">atau Kembali Ke Beranda</a></b>)</div>
<div style="text-align: center;">
<br /></div>
Script Google Custom Search 1 yang tadi Disimpen di Notepad, masukkan Kesini

- Publish Laman

D. Membuat Halaman Search
Sama dengan cara membuat Laman Download.
- Pada Judul isikan dulu 'search'
- Pada kolom isikan dulu satu karakter, misal 'a'
- Publish terlebih dahulu dan pastikan URL benar.
- Edit laman. Pada pengeposan mode EDIT HTML yang dimasukkan adalah Script Google CSE yang kedua.

E. Membuat Laman Chart
- Pada Judul isikan dulu 'chart'
- Pada kolom isikan dulu satu karakter, misal 'a'
- Publish terlebih dahulu dan pastikan URL benar.
- Edit laman. Pada pengeposan mode EDIT HTML yang dimasukkan adalah:

<div style="text-align: center;">
<b><span style="font-family: Verdana,sans-serif;"><span style="font-size: large;">Tangga Lagu Indonesia Terbaru Juni 2013</span></span></b>&nbsp;</div>
<br />
<br />
<div id="charthot">
<a href="#">Judul Lagu1</a></div>
<div id="chartup">
<a href="#">Judul Lagu 2</a></div>
<div id="chartdown">
<a href="#">Judul Lagu 3</a></div>
<div id="chartstop">
<a href="#">Judul Lagu 4</a></div>

Keterangan:
1. Setelah URL Laman terbentuk, Anda boleh gonta-ganti judul Laman dan tidak akan merubah URL
2. Cara Mengedit Chart:
- # isi dengan URL Lagu
- Judul Lagu silahkan ubah sesuai judul lagu di posisi tersebut
- pada id, ganti sesuai kebutuhan. charthot otomatis di bagian kiri judul lagu muncul gambar api yang berarti baru muncul/ngehits. chartup mengalami kenaikan peringkat. chartdown penurunan peringkat dan chartstop tidak mengalami perubahan peringkat.

F. Membuat Postingan
1. Agar postingan lebih baik di index Google, sebaiknya dilengkapi dengan liryc.
2. Agar lebih menarik pengunjung bisa dilengkapi dengan foto artist atau album.
3. Tulislah judul yang menarik tapi tidak menipu.
4. Jangan Lupa tentukan Label agar gadget Rekomendasi Artikel bekerja.
5. Tambahkan kode berikut ini paling atas dari isi postingan (ditambahkan melalui pengeposan mode Edit HTML)
<div id="downloadlink"><a href="#" target="_blank">Download </a></div>
6. # ganti dengan link download, format penulisan link download:
  http://alamatlamandownload.html?q=Artist Judul Lagu
  contoh: http://themasdoyokmp3.blogspot.com/p/download.html?q=Fatin Perahu Kertas
7. Agar tidak berulang-ulang menuliskan link download, Anda bisa menambahkannya ke template postingan. (Setiap membuat postingan baru, otomatis kode tersebut sudah ada di paling atas)
- Login Blogger > Setelan > Pos dan Komentar > templat Entri
- Isikan kode seperti pada poin nomer 4
- Tekan tombol Simpan Setelan

G. Pemasangan Template dan Setting
1. Download Template di: Download Theme TheMasDoyok MP3 v1
2. Pasang Template di Blog (Baca: Cara Ganti Template Terbaru)
3. Setting NavBar
- Login Blogger > Template > Edit HTML
- Cari kode berikut ini dan ganti sesuai kebutuhan:
<div class='topnav' id='topnav'>
    <ul id='topnav'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>Lagu Pop</a></li>
<li><a href='#'>Lagu Barat</a></li>
<li><a href='#'>Lagu India</a></li>
<li><a href='#'>Tips Download</a></li>
<li><a href='http://themasdoyokmp3.blogspot.com/p/chart.html'>Chart Lagu Indonesia</a></li>
        </ul>
    </div>

4. Setting Search Box
- Cari kode berikut
<div id='searchbox'> <form action='http://themasdoyokmp3.blogspot.com/p/search.html'>
      <div>
        <input name='cx' type='hidden' value='007737737555262419625:o8skn4r0k6a'/>
        <input id='searchform2' name='cof' type='hidden' value='FORID:10'/>
        <input id='searchform2' name='ie' type='hidden' value='UTF-8'/>
        <input autocomplete='on' id='searchform2' name='q' placeholder='tulis nama artist atau lagu, tekan enter' size='33' type='text'/>
             </div>
- Ganti yang berwarna hijau dengan URL/alamat Laman search yang telah dibuat pada langkah D.
- Ganti yang berwarna merah dengan id cx Google CSE Anda yang kedua (yang untuk halaman search)

5. Setting Halaman Download dan Halaman Chart
- Cari Kode Berikut
<b:if cond='data:blog.url == &quot;http://themasdoyokmp3.blogspot.com/p/download.html&quot;'>
<style>
  #header-wrapper, #searchbox{display:none;}
  body {background:#000}
#main-wrapper, #outer-wrapper {
    width: 600px;
}
</style></b:if>
<b:if cond='data:blog.url == &quot;http://themasdoyokmp3.blogspot.com/p/chart.html&quot;'>
<style>
  #header-wrapper, #searchbox{display:none;}
  body {background:#000}
#main-wrapper, #outer-wrapper {
    width: 600px;
}
- ganti yang berwarna hijau dengan URL/alamat laman download seperti telah dibuat pada langkah C.
- ganti yang berwarna merah dengan URL/alamat laman chart seperti telah dibuat pada langkah E.


 Item info: Cara Membuat Blog Download MP3 di Blogspot

Sudahkah Anda menggunakan Google Custom Search di Blog Anda? Jika belum, yang pertama harus Anda lakukan adalah segera memasangnya karena ini berarti peningkatan segalanya untuk blog Anda. Pencarian yang lebih mudah, hasil yang lebih relevan dan mendongkrak SEO Anda.

Baca:
- Cara Membuat Google Custom Search
- Hasil Cari Google Custom Search di Halaman Baru
- Dapat Uang dari Google Custom Search
- Mengubah Tampilan Google Custom Search
- Index Manual di Google Custom Search
(Keterangan: Artikel-artikel tersebut adalah artikel yang dipost mungkin setahun lalu, Google CSE melakukan sedikit perubahan pada desain dashboard. Screenshoot yang ditampilkan akan sedikit berbeda)

Kembali ke laptop, kembali ke judul...
Mungkin Anda mengalami keluhan serupa. URL Pada hasil cari Google Custom Search menampilkan terlalu banyak karakter. Termasuk di dalamnya karakter unik CSE cx, ford dan UTF. Misalkan di blog ini script CSE diletakkan di halaman:
http://www.themasdoyok.com/2008/12/hasil-pencarian-mas-doyok.html
kemudian kita search dengan keyword: tips blog
maka alamat pada address bar yang akan muncul adalah:
http://www.themasdoyok.com/2008/12/hasil-pencarian-mas-doyok.html?cx=007737737555262419625%3A5hrz_kthoju&cof=FORID%3A10&ie=UTF-8&q=tips+blog

Terlalu panjang bukan?
Lalu bagaimana jika kita ingin karakter yang berwarna merah hanya menampilkan keyword saja (?q=keyword , tidak menampilkan cx, cof dan UTF). Caranya gampang. Anda cukup menggunakan script dari Google Developers berikut ini pada pemostingan mode HTML.

<script>  (function() {    var cx = '123:456'; // Insert your own Custom Search engine ID here    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;    gcse.src = (document.location.protocol == 'https' ? 'https:' : 'http:') +        '//www.google.com/cse/cse.js?cx=' + cx;    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);  })();  </script>  <!-- Place this tag where you want both of the search box and the search results to render -->  <gcse:search></gcse:search>

Ganti yang berwarna merah dengan id cx (custom search enginee ID) Anda.
Bisa Anda temukan di: Setup > Basic > Search Enginee Id (Perhatikan gambar)

Dengan cara di atas, maka format URL yang akan muncul di address bar:
www.alamatblog.blogspot.com/-/....html?q=keyword


Tips & Keuntungan
- Masukkan script di atas pada laman blogspot, bukan postingan biasa. URL menjadi lebih pendek lagi.
- Menggunakan script di atas menunjukkan hasil cari yang lebih profesional karena memuat lebih sedikit karakter di Address Bar.
- URL singkat bahkan memudahkan pengunjung untuk ketik keyword langsung di address bar. Pengunjung cukup mengganti karakter yang berada di belakang ?q=


Semoga bermanfaat. Salam Blogging...


Update
Google CSE sekarang sudah menggunakan susunan sript seperti di atas. Jika ingin lebih simple, bagi pengguna CSE lama bisa ambil ulang code di Google CSE.

Item Info: Google CSE, Hanya Menampilkan ?q=