searchbox

Sabtu, 08 Juni 2013
Cara Membuat Blog Download MP3 di Blogspot - THEMASDOYOK.COM

Cara Membuat Blog Download MP3 di Blogspot - THEMASDOYOK.COM


Cara Membuat Blog Download MP3 di Blogspot

Posted: 08 Jun 2013 10:42 AM PDT

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

Google CSE, URL Hanya Menampilkan Keyword

Posted: 08 Jun 2013 04:25 AM PDT

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=

Baca selengkapnya »
Kamis, 06 Juni 2013
Membuat Komentar Utama dan Reply Berbeda Gaya - THEMASDOYOK.COM

Membuat Komentar Utama dan Reply Berbeda Gaya - THEMASDOYOK.COM


Membuat Komentar Utama dan Reply Berbeda Gaya

Posted: 06 Jun 2013 06:16 PM PDT

Utak-atik tampilan blog memang gak ada puasnya. Setiap saat kita pasti nyoba dan nyoba lagi. Biar gak bosen. Biar blog tetep fresh. Salah satu bagian yang wajib dimodifikasi adalah kotak komentar. Alasaannya serderhana, karena dibagian ini kita akan berinteraksi dengan banyak blogger lain. Jadi mereka harus bisa nyaman dong di blog kita.

Pada contoh di atas, ukuran foto pengomentar utama dan ukuran font komentar  lebih besar ketimbang reply, warna stabilo author pun juga beda.

Nah, kali ini kita akan memodifikasi agar tampilan/style komentar utama berbeda dengan komentar reply. Standard bawaan blogger CSS-CSS komentar reply akan sama dengan komentar utama. Jika Anda pengen membuatnya berbeda Anda bisa tambahkan CSS seperti contoh berikut:

CSS Komentar utama (sudah ada):
.comments .comments-content .comment-content {
background: #FFFFFF;

}

CSS Komentar reply (untuk ditambahkan):
.comment-replies .comment-content {
background: #EEEEEE !important;

}

Keterangan:
- Perhatikan yang berwarna merah dan hijau adalah perbedaannya.
- Pada CSS Komentar reply tambahkan !important agar CSS bekerja (Baca: Fungsi dan Pengertian !important)

Contoh CSS jadinya adalah seperti kode berikut ini. Anda bisa copy semuanya untuk mengganti CSS komentar yang ada di Blog Anda.

.comments {border:1px solid #ccc;}
.comments .comment-block {margin-left:90px}
.comments .comment-replybox-thread {
    margin-left: 20px;
    margin-top: 5px;}
.comments .comments-content .comment {border-bottom:1px solid #EEEEEE;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {
    margin: 0;}
.comments .comments-content .icon.blog-author {background: #999999;}
.comments .comments-content .datetime a:link {color:#999999;}
.comments .comments-content .datetime a:visited {color:#999999;}
#comments h4 {  background: none repeat scroll 0 0 #EEEEEE;color: #262626;
    font-size: 16px; padding-bottom: 25px; padding-left: 25px; padding-top: 25px;
font-style:normal; font-family:arial;}
#comments-block dt { margin: .5em 0;}
#comments-block dd { margin: .25em 0 0;}
#comments-block dd.comment-footer {
  margin: -.25em 0 2em;
  line-height: 1.4em;
  font-size: 78%; display: none;}

#comments-block dd p {
  margin: 0 0 .75em;}
.comment-form {clear: both;
    margin-left: 20px; margin-top: -60px;width: 550px;}
.comments .avatar-image-container {
    float: left; overflow: hidden;}
.avatar-image-container {

background: url("//ssl.gstatic.com/s2/profiles/images/silhouette46.png") repeat scroll 0 0 / 100% auto transparent;
    border-radius: 50px 50px 50px 50px;
-moz-border-radius: 50px 50px 50px 50px;
 -webkit-border-radius: 50px 50px 50px 50px;
    color: #FFFFFF;
    display: block; float: left;font-size: 20px;
 margin-left: 20px;text-align: center;}
#comments-block.avatar-comment-indent {
    margin-left: 4px; position: relative;}
ol #comments-block li {border-bottom: 1px solid #EEEEEE;
    list-style:none;margin: 20px 0;
    z-index: -100;min-height:90px;}
#comments-block .comment_content {
    width: 500px;}
.deleted-comment {font-style:italic; color:gray;}


.comments .comments-content .comment-content {
color: #071585;font-size: 18px;margin-top: 10px;
line-height: 1em;text-align: left;}
.comment-replies .comment-content {
font-size: 13px !important; color:#000 !important;
margin-top:0px !important;}

.comments .comments-content .datetime {

font-size: 15px;}
.comment-replies .datetime {
font-size: 10px !important;} 

.comments .comments-content .user {
background: none repeat scroll 0 0 #00B3F0;
color: #fff;font-size: 16px; padding: 5px;}
.comments .comments-content .user a,
.comments .comments-content .user a:link{
background: none repeat scroll 0 0 #00B3F0;
color: #fff;font-size: 16px; padding: 5px;}
.comment-replies .user, .comment-replies .user a,
.comment-replies .user a:link {
font-size: 12px !important; padding:0pc !important;
background:#eee !important; color: #000 !important;}

.comments .comment-block {margin-left: 100px;}
.comment-replies .comment-block {
margin-left: 75px !important;}

.comments .avatar-image-container img {

width: 70px;}
.comment-replies  .avatar-image-container img {
width: 40px !important;} 

.comments .avatar-image-container {
max-height: 70px; width: 70px;}
.comment-replies  .avatar-image-container {
max-height: 40px !important; width: 40px !important;
}
 
.comments .avatar-image-container img {
max-width: 70px;}
.comment-replies .avatar-image-container img {
max-width: 40px; !important} 

.avatar-image-container {height: 70px;}
.comment-replies .avatar-image-container {height: 40px !important;}


Semoga bermanfaat dan mempercantik blog Anda :D
Item Description: Membuat Komentar Utama dan Reply Berbeda Gaya

New THEMASDOYOK Answers

Posted: 06 Jun 2013 03:05 AM PDT

Seringkali banyak pertanyaan dari blogger mengenai template, gadget atau SEO. Saya jawab sebisanya dan kadang-kadang saya posting agar bisa kita pelajari bersama. Nah, atas dasar itu, saya membuka kembali layanan lama yang dulu bernama MasDoyok Answers (baca: Memperkenalkan MasDoyok Answers) yang ikut hilang karena domain lama di banned. Sekarang TheMasDoyok Anwers hadir kembali dengan pengelolaan yang lebih baik.


Jadi... Ketika Anda memiliki masalah atau pertanyaan menyangkut blogging, Anda dapat dengan mudah akses TheMasDoyok Answers, tidak harus menunggu saya online di fb atau twitter. Saya akan berusaha menjawab secepatnya, dan mungkin beberapa teman yang ada disana juga bisa ikut membantu memberikan jawaban.

Sekarang juga, bisa dicek di alamat:
http://www.themasdoyok.com/p/answers.html

Bahan pembelajaran yang masuk juga akan saya arsipkan untuk kemudian diposting setiap minggunya. Semoga kedepannya semakin memudahkan dan banyak manfaat.

Juga mengenalkan, papan informasi TheMasDoyok di alamat:
http://www.themasdoyok.com/p/informasi.html

Kadang-kadang saya tidak mempunyai waktu untuk posting panjang mengenai info penting atau isu tertentu, Anda bisa cek terlebih dahulu disini dalam format info singkat dan padat. Sekali lagi, semoga bermanfaat.

NB: Tips Berinteraksi di TheMasDoyok Answers
Deskripsi Item: Tanya Jawab Blog di THEMASDOYOK Answers

Baca selengkapnya »
Rabu, 05 Juni 2013
Backup Gadget HTML Blogger? - Konsultasi - THEMASDOYOK.COM

Backup Gadget HTML Blogger? - Konsultasi - THEMASDOYOK.COM


Backup Gadget HTML Blogger? - Konsultasi

Posted: 05 Jun 2013 03:11 AM PDT

Gadget HTML memang bermasalah ketika harus mengalami lintas template. Mungkin Anda sering mengalami, backup template Anda, namun ketika dipasang di blog lain template tidak se normal yang Anda duga. Banyak gadget hilang atau berantakan. Nah, biasanya ini terjadi pada gadget-gadget HTML (Gadget yang ditambahkan melalui tata letak, Add gadget > HTML gadget.)

1. Bisakah Mempertahankan Isi Gadget HTML?
Beberapa kali melakukan percobaan tetap saja saya kehilangan isi pada gadget HTML, ketika backup-an template digunakan di blog yang lain. Yang bertahan hanyalah title gadget, sementara isinya hilang atau berpindah acak ke kolom gadget HTML yang lain. Ini menjawab pertanyaan mengapa ketika Anda menggunakan template-template super custom bergaya magazine atau news dari simplex misalnya, maka para penyedia template akan melengkapinya dengan tutorial manual pengisian gadget-gadget HTML.


Intinya isi gadget HTML tidak bisa bertahan, jadi jika Anda ingin back-up template, untuk gadget-gadget HTML sebaiknya di back-up manual. Dengan cara pergi ke tata letak > Edit gadget HTML yang Anda inginkan, kemudian copy dan save isi gadget tersebut ke notepad, ms word atau program lainnya.

2. CSS Tertentu Untuk Gadget HTML
Gadget-gadget HTML memiliki id HTML1, HTML2, HTML3 dan seterusnya. Misalkan Anda meletakkan gadget HTML di sidebar, maka Anda dapat melakukan kustomisasi CSS khusus pada gadget HTML tertentu agar berebeda dengan gadget-gadget lain di sidebar. (Gadget-gadget pada sidebar akan mengikuti CSS sidebar, misalkan title akan otomatis mengikut CSS .sidebar h2, isi akan mengikuti .sidebar .widget dan lain-lain)

Nah, untuk membuat CSS tertentu Anda bisa menambahkan CSS selector #HTML1 atau #HTML2 atau #HTML3 dan seterusnya. Letakkan di atas ]]></b:skin>.

Contoh penulisannya sebagai berikut:
#HTML1 {font-size: 12 px; background:  #fff}
#HTML1 h2 {font-family: Arial}

Untuk mengetahui ID Widget silahkan baca: Cara Mudah Mengetahui ID Widget

3. Mempertahankan CSS Gadget HTML
Selanjutnya, pertanyaannya adalah bagaimana mempertahankan CSS dari gadget HTML?.
Misal kita membuat CSS untuk gadget HTML1 pada blog A, kemudian kita backup/download template kita. Template tadi ingin kita terapkan di blog yang lain, misal blog B. Padahal di blog B sudah ada gadget HTML1-nya. Ini berarti bisa terjadi tabrakan dua gadget HTML1.

Karena hal ini, maka otomatis gadget HTML1 pada template backup-an ketika dipasang di blog B akan berubah menjadi HTML2. Padahal seperti kita tahu CSS-nya menggunakan selector #HTML1. Alhasil, CSS selector salah sasaran akan mengatur gadget HTML1 yang asli ada di blog B, padahal yang kita inginkan CSS tersebut mengatur HTML1 pada template back-up yang knii sudah berganti id menjadi HTML2.

Permasalahan seperti ini tidak akan kita temukan jika kita tidak akan menggunakan template editan kita untuk banyak blog. Untuk mengatur Gadget HTML tertentu, cukup gunakan cara seperti pada poin nomer 2. Namun, jika kita ingin membagikan template editan kita kepada umum atau akan digunakan untuk beberapa blog kita, maka gunakan pengaturan CSS seperti berikut:

Pada Kolom Edit HTML Template, gadget HTML akan berbentuk kode seperti berikut:
<b:widget id='HTML1' locked='false' title='' 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>


- Tidak usah mengedit ID gadget HTML1
- Untuk pengaturan judul gadget HTML, ubahlah 'title' menjadi id unik terserah Anda, misalkan 'toptabview'. Berarti baris title menjadi: <h2 class='toptabview'><data:title/></h2>.
- Untuk pengaturan gadget HTMl, seperti background gadget dll, ubahlah 'widget-contet' menjadi id unik misalkan 'toptabview'. Berarti baris widget-content menjadi: <div class='toptabview'>
- Terakhir tambahkan CSS dengan format:
.toptabview h2 {font-size:.......;}
.toptabview {background:...;}

Dengan cara tersebut, meski id gadget HTML berubah, maka CSS tidak akan salah sasaran. Hanya berbagi pengetahuan, jika Anda mengetahui lebih, tolong di share ya di kolom komentar...

NB: Jiak belum mengenal CSS, bisa dipelajari di: Belajar CSS.

Info ArticleBackup Gadget HTML Blogger - Blog Konsultasi

Baca selengkapnya »