Cara Bikin Gambar Bergerak (Marquee Image)

Dulu kursus blog pernah posting mengenai text bergerak (marquee). Eh...ternyata kurang lengkap tuh postingan sampai ada yg nanya "gimana kalo bikin gambar bergerak...??". Yawda...buat temen2 sekalian apa sih yang ngga. Berikut contoh untuk gambar bergerak : Tempat belajar blog dan bisnis online - Nah....buat yang pengen bikin gambar bergerak seperti diatas, ikuti langkah - langkahnya sebagai berikut :
  • Seperti biasa login di blogger, lalu masuk ke layout kemudian page element.
  • Klik add new page element --> HTML/JavaScript. Untuk letaknya terserah anda, mau diletakkan di sidebar, footer, atau dimana saja juga bisa.
  • Copy Paste kode dibawah ini :

    <marquee onmouseout="this.start()" direction="up" align="center" scrollamount="2" onmouseover="this.stop()" width="100%" height="100"><img src="http://mizwar.blog.googlepages.com/logo.gif" alt=""/> <img src="http://static.technorati.com/pix/fave/btn-fave2.png" alt="" /> </marquee>

    Text yg berwarna merah adalah kode HTML untuk gambar. Untuk mengganti gambarnya, silahkan ganti text yg berwarna merah tebal dengan url gambar anda. Text yg berwarna hijau tebal, adalah arah bergerak gambar. Untuk mengganti arahnya, silahkan ganti kata "up" dengan "down", "left" atau "right".
  • Save dan Selesai..
Perhatian :
  1. Gambar bergerak tersebut bisa juga disimpan di postingan. Caranya, ketika memposting klik edit html lalu masukan kode seperti diatas.
  2. Untuk menampilkan gambar beserta link-nya, silahkan lihat di cara membuat link di artikel paling bawah.

Cara Daftar Technorati

Sudah tau apa itu technorati...?! Sekedar penjelasan singkat aja, untuk meningkatkan traffic pengunjung ke blog kita, supaya lebih dapat dikenal oleh blogger lain selain menerapkan dengan apa yang namanya seo, sebaiknya anda pun mendaftarkan blog anda di technorati. Apa sih technorati..?! Technorati adalah salah satu direktori blog terbesar saat ini. Dan fungsinya pun banyak, selain menjadi sebuah diektori blog, technorati bisa berfungsi sebagai blogsearch, tags aggregator, dan online bookmarks. Disamping itu, dengan mendaftarkan blog kita di technorati, kita bisa mengetahui situs / blog mana saja yang memasang link blog kita.

Bagaimana cara mendaftar di technorati..?! ikuti langkah2 di bawah ini :
  • Menuju ke technorati.com

  • Klik menu Join :

  • Isi data secara lengkap lalu klik join

  • Setelah itu, akan muncul confirmation code. Hiraukan menu tersebut. Dan langsung cek email anda yang didaftarkan di technorati lalu klik link yang telah diberikan melalui email anda. contoh link-nya seperti ini :

    http://technorati.com/account/verify?username=zxc123&key=fe0920359b91b42130a69d64048fc2c4


  • Setelah itu masukan url blog anda kemudian klik begin claim dan selesai

Setelah melakukan pendaftaran, selanjutnya anda tinggal memaksimalkan layanan technorati. Untuk lebih jelasnya mengenai cara memaksimalkan technorati, ikuti saja terus blog ini

Google Pagerank Update Kembali

Haha....dari dulu pas aku bikin blog ini...aku sering berpikir kapan blog ini bisa dapet Pagerank. Yaa minimal PR1 lah...eh taunya...pas tadi pagi buka blog ini, ternyata blog ini udah ada pagerank nya. Yang bikin aku kaget kok malah langsung PR2...kenapa ga PR1 dulu. Bingung...jadinya... Ah...tapi yang pasti aku seneng banget karena blog ini udah ada Pagerank-nya. Gimana dengan blog anda...?? Sudahkah anda check pagerank blog anda sendiri...?? kalo belum silahkan check disini. Tapi...jangan kaget lho, banyak juga blog - blog lain yang justru pagerank-nya anjlok alias turun. Bahkan ada yang sampai turun dari PR4 ke PR0. Sebenernya pusing juga kalo mikirin tentang bagaimana google melakukan perhitungan pagerank. Tapi yang pasti, berapapun pagerank kita jangan pernah berhenti untuk belajar dan berbagi lewat media blog. Setuju gak...?. Dan akhirnya saya mengucapkan banyak terimakasih kepada para pembaca blog ini semua, karena apalah artinya blog ini kalo tanpa ada pembacanya sama sekali. Ok....Happy Blogging aja semuanya.

Cara Bikin Gambar Melayang

Mungkin anda agak sedikit bingung juga dengan apa itu gambar melayang, nah...biar lebih jelasnya silahkan liat screenshoot dibawah ini :


Dari screenshoot diatas, anda bisa lihat gambar icon YM yang ditunjuk dengan tanda panah itu. Nah...itu dia yang saya sebut dengan gambar melayang. Knapa disebut melayang, karena kalo anda scrool blog anda, maka gambar icon YM tersebut akan tetap berada dan terlihat seperti melayang diatas blog. Kalo ga percaya, silahkan anda coba sendiri dengan menggulung blog ini kebawah dan lihat apakah letak gambar YM itu berubah atau tidak.

Bagaimana cara buatnya, silahkan ikuti langkah2nya di bawah ini :
  • Seperti biasa, anda login terlebih dahulu di blogger lalu menuju ke layout dan edit HTML

  • Biar ngga bingung, jangan kasih tanda centang pada kolom expand template widget

  • Setelah itu, cari kode ]]></b:skin> dan letakkan diatasnya kode CSS berikut :

    #gambar_melayang {
    position:fixed;
    _position:absolute;
    top:-25px;
    left:5px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }


    Kode CSS diatas, akan menempatkan gambar anda berada di pojok kiri atas. Untuk merubah letaknya, silahkan ganti text yg berwarna merah. Kata left menjadi right untuk posisi disebelah kanan. Jika ingin posisi-nya dibawah silahkan ganti kata top dengan bottom

  • Selanjutnya, cari kode tag </body> dan letakkan diatasnya kode html berikut :

    <div id='gambar_melayang'>
    <a href='ymsgr:sendIM?miz_doc86'>
    <img alt='Chat with me' border='0'
    src='http://opi.yahoo.com/online?u=miz_doc86&m=g&t=8'
    style='float: right; margin-top: 35px;'/></a>
    </div>


    Kode yang berwarna merah adalah kode untuk menampilkan status icon ym saya. Untuk merubahnya menjadi status ym anda, silahkan ganti text yg berwarna merah tebal dengan id ym anda masing2. Selain itu, anda bisa mengganti gambarnya sesuai keinginan anda, bisa widget, link, dll. Dengan catatan, anda meletakkan script atau kode HTML-nya diantar tag <div id='gambar_melayang'> dan </div>

  • Save Template dan Selesai.

Cara Bikin Footer Navbar

Mungkin buat sebagian orang agak kurang mengerti apa itu footer navbar, Jadi saya akan sedikit mencoba menjelaskan mengenai apa itu footer navbar sebelum bagaimana cara bikinnya. Pertama kali saya melihat footer navbar ini di blognya mas anang, karena kelihatan menarik..maka saya pun mencoba mengaplikasikannya di blog ini. Dan hasilnya...anda semua bisa melihat di bagian paling bawah dari blog ini. Berikut screenshootnya :


Anda bisa lihat text yang berada di dalam lingkaran biru, nah itulah yang disebut dengan footer navbar. Pasti dah ngertikan......Pengen pasang footer navbar di blog anda...? Ikuti cara2-nya dibawah ini :

1. Login di blogger, lalu setelah masuk dashboard pilih blog yang akan anda pasangi navbar ini

2. Seperti biasa, masuk layout --> edit html

3. Beri tanda centang pada expand template widget

4. Cari ]]></b:skin> lalu copy paste kode dibawah, diatas kode barusan

#navbar-footer a {
color: #000;
font-weight:bold;
}

#navbar-footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #fff;
width: 100%;
left: 0px;
text-align: left;
color: #000;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}


5. Langkah selanjutnya, masukan kode berikut persis diatasnya kode </body>

<div id='navbar-footer'>
<p align='center'>
<a href='http://kursus-blog.blogspot.com/'>Kursus Blog</a> © Juni 2008<br/>Template Designed by <a href='http://www.blogger.com/profile/01431888848076356714' target='new'>Mizwar</a> | on <a href='http://bloggertemplates-foryou.blogspot.com' target='new'>Blogger Templates</a></p>
</div>


Silahkan ganti semua text yang berwarna merah sesuai dengan data anda sendiri. Jika anda mengerti, anda bisa memodifikasi kode diatas sesuai keinginan anda. Bisa ditambahkan gambar, marquee, atau apa saja terserah anda. Ok...Selamat mencoba.

Cara Daftar Google Adsense

Panduan mengenai cara daftar google adsense ini sengaja saya posting khusus buat orang2 yang tadi nanyain gimana cara daftar di adsense. Singkat aja ya......beberapa hal yang mesti anda tahu sebelum mendaftar di google adsense yaitu diantaranya anda harus sudah mempunyai website / blog. Untuk lebih mudahnya bikin aja blog di blogger. Lalu isi postingan blog anda minimal 3 artikel dan harus memakai bahasa inggris soalnya adsense belum bisa support bahasa indonesia. Kalo ngga bisa nulis pake bahasa inggris...jangan takut silahkan liat di ezine articles dan copy paste aja artikelnya buat postingan blog anda. Kalo misalnya blog anda sudah terisi 3 postingan (minimal) dengan memakai bahasa inggris, baru deh anda bisa daftar google adsense. Berikut penjelasannya... 1. Menuju ke http://google.com/adsense 2. Kalo misalnya anda sudah punya account google. Langsung aja login dengan menggunakan alamat email anda di google (gmail) dan jangan lupa passwordnya.
3. SIlahkan isi data yang diminta dengan benar 4. Kalo data sudah terisi secara lengkap, langsung klik aja submit information. Selesai... Setelah...mendaftar di google adsense, account anda tidak langsung diterima melainkan harus menunggu persetujuan dulu dari pihak google. Kalo menurut saya, waktu account kita diterima di google adsense itu bervariasi. Bisa 1 hari, 2 hari, atau bahkan lebih. Cuma...ga menutup kemungkinan juga kalo account kita bisa di approve hanya dalam waktu 2 jam. Ya...intinya silahkan berharap-harap cemas aja deh.

Apa itu google adsense

Sudah tahu adsense...?? Kalo belum silahkan baca dulu artikel ini sampai anda benar-benar mengerti tentang adsense. Simple-nya Adsense adalah suatu program periklanan milik google. Nah...di google adsense ini, kita sebagai pemilik situs / blog bisa ikutan untuk menjadi publisher iklan2 yang sudah terdaftar di google adsense, dan sebagai imbalannya kita akan mendapatkan komisi dari adsense. Caranya pun lumayan mudah, kita tinggal menyisakan ruang di blog / situs kita untuk dipasangi iklan adsense tersebut. Kita ngga perlu pusing2 untuk memilih iklan mana yang akan dipasang, karena adsense akan secara otomatis akan menampilkan iklan yang berhubungan dengan isi dari blog / situs kita. Kita hanya harus memilih jenis iklan apa saja yang ingin kita pasang di blog / situs kita. Mau...text, gambar atau video. Bagaimana cara dapetin uang dari adsense..?? Adsense akan membayar kita jika ada pengunjung blog/situs kita yang melakukan klik terhadap iklan adsense yang terpasang di blog kita. Tentunya tidak semua klik....hanya setiap klik yang memang dianggap oleh adsense sah.

Ingat...jangan pernah mengklik iklan adsense anda sendiri, bagaimanapun caranya anda akan ketahuan sama pihak google dan resikonya account anda di adsense akan di banned

Kisaran komisi yang saya tahu, yang diberikan adsense pada kita adalah $0.01 s.d $5.00 setiap kliknya. Nah....sekarang anda sudah pada tahu tentang adsense, pengen ikutan langsung aja daftar di google adsense kalo misalnya butuh panduan, langsung aja ke cara daftar google adsense

Author Comments Highlight

Sebelum membahas mengenai "Author Comments Highlight", gimana kabar saudara/i sekalian...?? Mudah2an sehat selalu..Amiin.....

Okay...langsung aja ke permasalahan. Anda tahu apa itu "Author Comments Highlight"...?! Mungkin..bagi anda yang tahu bahasa inggris, pasti tahu artinya...nah bagi yang ga tau sama sekali alias "teu terang" kata orang sunda mah, maksud dari Author Comment Highlight itu adalah Tampilan komentar yang berbeda untuk pemilik blog. Contoh-nya seperti ini :


Lihat yang background-nya berwarna biru, itu adalah komentar pemilik blog. Nah...ngerti kan sekarang.....!! Terus gimana caranya...?! langsung aja ikutin cara2-nya dibawah ini.

1. Yang pasti, anda harus login terlebih dahulu ke blogger tentunya dengan id dan password blogger anda.

2. Langsung menuju Layout --> edit HTML

3. Backup dulu template anda sebagai jaga2....

4. Kasih tanda centang di kolom expand template widget

5. Selanjutnya, anda cari kode default komentar pada template anda. Kalo pada template minima kurang lebih kodenya seperti ini :



<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'&gt
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>



Nah...kalo template anda misalnya bukan minima, biasanya untuk kode default komentar diawali dengan tag <ul>. Pokoknya yang ada kode comments-blocks aja deh.

6. Kalo misalnya sudah ketemu, silahkan copy paste kode yang berwarna merah dan letakkan sesuai intruksi dibawah ini. (Ingat hanya kode yang berwarna merah)


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<dt class='owner-Author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:else/>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<b:else/>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:if>

</b:loop>
</dl>



8. Kalo sudah, selanjutnya tinggal memasang kode css untuk membedakan tampilan komentar pemilik blog. simpan kode ini diatas tag ]]></b:skin


.owner-Body {
margin:0;
padding:0 0 0 20px;
}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
background:#333333;
}


9. Save template dan selesai.

Catatan :
Setelah kode tersebut dipasang, maka hasilnya kurang lebih seperti ini :


Nah...kalo misalnya anda tahu, anda bisa merubah seluruh tampilannya dengan memodifikasi kode css untuk komentar blog anda. Selamat mencoba.....

Cara Promosi Blog

Mungkin diantara alasan kenapa kita bikin blog salah satunya yaitu blog kita ingin dikunjungi banyak orang. Tentunya, buat blog yang memang baru saja di buat hal itu memang agak lumayan sulit juga. Tapi, sebenernya ada cara yang sangat mudah bagaimana memperkenalkan blog anda ke org lain, walaupun blog anda baru saja dibuat. Tapi, saya sarankan sebelum anda mempromosikan blog anda ke orang lain, minimal anda harus punya 10 artikel yang sudah anda posting di blog anda. Menurut pendapat saya, ada 3 hal yang menjadi sumber bagaimana blog kita dikunjungi. 1. Search Engine Mungkin anda sudah tidak asing lagi dengan yang ini, karena memang Search Engine ini merupakan sumber traffic yang paling diminati oleh  setiap blogger. Cuma masalahnya, bagaimana blog kita bisa tampil di search engine. Tentu hal tersebut bukan cara yang mudah.Tapi...jangan putus asa dulu, silahkan anda terapkan teknik SEO versi Kursus Blog dan coba praktekkan satu-satu. 2. Referer site Nah...kalo yang ini memang menjadi modal pertama untuk mendatangkan traffic di blog yang baru. Bisa dikatakan, referensi dari situs / blog lain Pengen tau cara-nya...? Silahkan baca sampai selesai artikel ini. 3. Direct Traffic Maksudnya.....setiap pengunjung yang datang ke blog anda tidak melalui sumber no.1 dan no. 2. Melainkan...langsung menuju ke alamat blog anda. Tentunya, dengan catatan mereka sudah mengetahui alamat / url blog anda. Ok...basa basi-nya cukup aja, langsung ke permasalahan bagaiamana cara promosi blog yang benar2 efektif bisa mendatangkan traffic ke blog anda.
  • Daftarkan blog anda ke berbagai serach engine. Silahkan klik disini untuk mendaftarkan blog anda secara otomatis ke beberapa search engine.
  • Rajin mengunjungi blog lain dan menuliskan komentar
  • Isi setiap comment box pada blog yang anda kunjungi (kalo ada) dan memang cara ini adalah yang paling ampuh.
  • Hindari komentar Spam
  • Promosi lewat Email dengan mencantumkan signature yang menuju ke blog anda
  • Promosi lewat Yahoo Messenger dengan menampilkan blog anda sebagai status message YM anda
  • Barter Link (Link Exchange)
  • Pasang Iklan di situs periklanan (memerlukan biaya)
  • Daftarkan blog pada layanan pihak ketiga. Seperti technorati, mybloglog, blogcatalog, delicious dll
Coba anda terapkan hal - hal diatas, ya setidaknya blog anda akan lebih dikenal orang / blogger lain. Dan jangan lupa untuk selalu memperhatikan setiap posting yang anda tulis. Karena postingan yang berkualitas dapat menarik minat pengunjung blog anda. Selamat Mencoba

Cara Menampilkan Adsense di Blog Bahasa Indonesia

Karena kemaren buanyak banget yang nanya "kenapa ya kok blog ini iklan adsense-nya bisa muncul". Ya..dikarenakan sampai saat ini, yang saya tau..adsense belum ngasih semacam pengumuman atau mungkin peraturan untuk menampilkan iklan mereka di blog bahasa indonesia, tapi sebenernya anda sudah bisa menampilkan adsense di blog anda yang berbahasa indonesia. Katanya sih....walaupun gitu, kalo ketahuan sama pihak adsense katanya account adsense kita bakalan di banned. Trus...knapa dong udah tau bakalan di banned, kok blog ini tetep nampilin iklan adsense...?? ya...jawabannya sih simple, pengen + nambah penghasilan dolar..... Tapi...kayaknya ngga lama lagi mungkin saya akan mencabut iklan adsense di blog ini. Soalnya takut juga di banned . Cuma kalo misalnya anda bener2 pengen pasang adsense di blog anda yang memang berbahasa indonesia, gampang kok....ikutin aja trik berikut : Biasanya kode adsense yang anda peroleh itu seperti ini : <script type="text/javascript"><!-- google_ad_client = "pub-7936348065526719"; /* 468x60, created 7/3/08 */ google_ad_slot = "2846927536"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> Nah....supaya tampil di blog yang berbahasa indonesia, anda cukup menambahkan kode google_language = "en"; di bawah kode google_ad_height = 60;. Sehingga kode adsense yang harus dipasang adalah seperti ini : <script type="text/javascript"><!-- google_ad_client = "pub-7936348065526719"; /* 468x60, created 7/3/08 */ google_ad_slot = "2846927536"; google_ad_width = 468; google_ad_height = 60; google_language = "en"; //--> </script> <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> Nah...kode yang merah tersebut, adalah kode tambahan supaya adsense anda tampil di blog yang berbahasa indonesia. Ok dah...Selamat mencoba aja.

Optimasi SEO Blogspot supaya Tampil di Seacrh Engine

Optimasi SEO Blogspot ini saya hanya bisa menyarankan dan memang terbukti berhasil, Jika anda memang ingin blog anda tampil di search engine, saya sarankan untuk mengikuti Optimasi SEO Blogspot ini. Tapi ingat...sekali lagi ini hanya saran dari saya setelah merasakannya. Gimana mo lanjut....?? kalo mau langsung aja ikutin cara2nya.....
  1. Optimalkan keywords untuk setiap content blog anda. Jangan pernah salah untuk memilih keyword, apalagi yang sama sekali ga ada kaittannya sama isi dari blog anda. Untuk Lebih jelasnya, silahkan ikuti pasang meta tag di blogspot
  2. Optimalkan Title Tag / Judul Halaman Blog. Untuk keterangan lebih lanjut silahkan ikuti Optimasi Judul Halaman Blog
  3. Jadikan paragaraf pertama postingan anda sebagai tempat untuk keyword anda. Misalnya pada postingan ini saya utamakan kata Optimasi SEO Blogspot. Lihat berapa banyak kata tersebut di ulang di paragraf pertama postingan ini. Tapi ingat jangan terlalu banyak. maksimal 3 / 4 kali.
  4. Daftarkan Sitemap untuk blog anda. Untuk caranya, silahkan menuju ke Google Sitemap Untuk Blogspot
  5. Pasang Artikel yang berkaitan untuk setiap label postingan anda. Jika belum, silahkan menuju Pasang related post di blog
  6. Manfaatkan fasilitas Readmore (Baca Selanjutnya). Karena hal tsb akan menarik perhatian pengunjung blog anda. Kalo belum pake, silahkan ke bikin readmore 1 atau bikin readmore 2
  7. Banyakin One way link. Yang paling gampang, silahkan buat blog sebanyak mungkin dan arahkan link blog2 tersebut ke blog yang ingin anda optimalkan
  8. Pasang Social Bookmark seperti techorati
Gimana...mudahkan...?? Sekali lagi ingat ini cuma saran saya aja. Dan butuh waktu yang lumayan lo untuk liat hasilnya. Tapi ga ada salahnya khan kalo dicoba...dijamin HALAL. Salam ngeblog

Google Sitemap Untuk Blogspot

Tips SEO - Anda tau sitemap...? Apa sih sitemap itu...? Sekedar informasi saja, sitemap merupakan kumpulan daftar halaman sebuah blog. Dengan adanya sitemap, akan memudahkan search engine untuk mengcrawler blog kita. Nah....selain mendaftarkan blog kita di google, satu hal lagi yang wajib anda lakukan supaya bisa di indeks search engine yaitu dengan mencantumkan sitemap blog kita. Nah....bagaimana caranya..?? ikutin aja langkah2 di bawah ini :
  1. Login di http://www.google.com/webmasters/ dengan menggunakan id dan password account gmail anda.
  2. Jika belum memasukan situs anda silahkan daftarin dulu. Kalo udah langsung aja menuju sitemap --> add sitemap
  3. Pada kolom choose type, pilih add general web sitemap
  4. Pada my sitemap URL (Url Blog anda biasanya sudah ada) isikan atom.xml
  5. Klik OK dan selesai
Yap begitulah cara mudah untuk mendaftarkan sitemap blog anda di google. Selamat Mencoba Update : Cara ini akan mengalami error jika anda menggunakan feedburner sebagai rss feed anda. Untuk mengatasinya, silahkan baca postingan mengatasi eror google sitemap

SEO : Optimasi Judul Halaman Blog

Tentang SEO - Salah satu cara bagaimana search engine mengindeks blog kita (blogspot) adalah dengan melihat title tag / judul halaman. setiap halaman posting yang kita tulis itu akan terindeks sesuai dengan judul postingan tersebut. Cuma...kalo anda perhatikan, Jika anda mempunyai judul blog yang panjang, maka setiap judul artikel yang terindeks search engine tidak akan tampil semuanya. Nah....berikut saya sampaikan bagaimana cara memperbaiki Judul Halaman Blog agar SEO Friendly.
  1. Saya sarankan, anda memperpendek judul blog.....dengan mengoptimalkan kata kunci utama blog anda.
  2. Saatnya edit HTML. Silahkan login di blogger kemudian menuju ke menu layout lalu edit HTML
  3. Selanjutnya, cari kode HTML berikut (di bagian atas) <title><data:blog.pageTitle/></title>
  4. Hapus kode tersebut dan ganti dengan kode dibawah ini :

    <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> - <data:blog.title/></title> </b:if>

  5. Save Template dan selesai
Perubahan kode HTML tersebut akan membuat judul halaman blog anda berada di depan judul blog anda. Sehingga setiap judul blog anda, akan beralih peranan menjadi kata kunci untuk blog anda.
Selamat Mencoba

Tips SEO : Pasang Meta Tag di Blogspot

Tips SEO kali ini membahas mengenai meta tag. Jika anda belum tahu apa itu meta tag dan apa manfaatnya memasang meta tag di blog anda, berikut penjelasan singkatnya.

Apakah anda tahu bahwa memasang meta tag itu adalah suatu hal penting untuk mendatangkan lebih traffic dari search engine seperti google, yahoo, atau msn.

Pengertian Meta Tag
Meta tag adalah sebuah tag yang menjelaskan deskripsi blog / situs anda. Sekaligus memberikan informasi kepada mesin pencari, mengenai isi dari blog / situs anda. Perlu diketahui saja, memasang meta tag di blog / situs anda merupakan hal paling penting dalam SEO. Dengan meta tag di blog / situs anda, akan mempermudah mesin pencari untuk meng-indeks blog / situs anda. Tentunya, anda harus mendaftarkan dulu blog / situs anda di mesin pencari. Jika belum langsung aja ke Cara Daftar Search Engine. Mau pasang meta tag sekarang juga...? gampang kok. Silahkan ikuti tutorialnya.

1. Login di blogger. Pada menu dashboard pilih layout.


2. Klik pada menu edit HTML.


3. Selanjutnya, cari kode berikut :

<b:include data='blog' name='all-head-content'/>

4. Copy Paste kode di bawah ini dan simpan tepat di bawah kode diatas.

<meta content='Deskripsi Blog ' name='description'/>
<meta content='Kata Kunci Blog' name='keywords'/>
<meta content='Nama Anda' name='author'/>

Catatan: Ganti Text yang berwarna merah, sesuai intruksi berikut :
Deskripsi Blog --> Penjelasan Tentang isi dari Blog Anda
Kata Kunci Blog --> Kata Kunci tentang Blog anda
Nama Anda --> ya....nama dikau lah, masa nama saya.....hehehe

Kalo masih bingung, berikut contoh meta tag untuk blog saya :

<meta content='Tempatnya Belajar Blog dan Bisnis Online ada template gratis serta ebook juga lho' name='description'/>
<meta content='kursus blog, Belajar blog, blogger hack, tutorial blogger, kursus, blog, bisnis, bisnis online, tutorial blog, seo, affiliate,free template, free blogger templates' name='keywords'/>
<meta content='mizwar' name='author'/>

Mudah kan...? Langsung praktekin aja.........

Bikin Readmore Versi Baru (Peekaboo Posts)

Kursus blog punya Blogger Hack baru nih, namanya readmore with peekaboo posts with special effect. Ngerti ga...?? Intinya Blogger Hack kali ini adalah Cara bikin readmore versi baru. Kenapa disebut versi baru, karena sebelumnya kursus blog pernah menulis juga tentang cara buat readmore (ringkasan artikel). yang mana, readmore yang pertama mempunyai perbedaan dengan readmore kali ini. Perbedaanya, terletak ketika kita mengklik kata readmore.

Di readmore yang lama, kalo kata readmore di klik maka akan terbuka halaman baru sesuai url postingan tersebut. Nah...di readmore yang versi baru ini, kalo kita klik readmore maka seluruh artikel / postingan kita akan tampil pada halaman itu juga, alias url-nya tetap dan juga artikel tersebut bisa di ringkas kembali dengan meng-klik kata summary only. Ok deh....kalo pengen liat contohnya sekaligus merasakannya silahkan ke hacktest Blog dan klik kata "Read More". Kalo udah liat dan memang pengen pake readmore yang baru ini, silahkan ikuti langkah2nya. Dengan catatan jika anda sudah memakai readmore yang lama, hapus dulu semua kodenya karena tidak akan berjalan. Kalo udah...langsung aja ikutin tutorialnya.

1. Setelah login di blogger langsung aja menuju layout --> edit HTML

2. Seperti biasa, sebelum otak atik template silahkan download dulu template anda


3. Kemudian Kasih tanda centang di kolom expand template widget


4. Selanjutnya silahkan cari tag </head> kemudian copy paste diatasnya semua kode yang ada di halaman ini.

5. Jika sudah selesai copy paste-nya, cari kode ini : <b:includable id='post' var='post'> kemudian perhatikan kode di bawah dan copy paste kode yang berwarna merah saja sesuai dengan posisinya (karena kode yang warna hitam merupakan kode standar blogger).


<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>

<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>

</b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<p><data:post.body/></p>


<b:else/>
<p><data:post.body/></p>
<span id='showlink'>

<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Summary only...</a></p>

</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>


6. Selanjutnya, cari kembali tag </head> kemudian copy paste script berikut diatasnya :


<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/prototype.js'/>
<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects'/>
<script type='text/javascript'>
var fade = true;
var peekaboo_bgcolor = '#ffffff';
</script>



7. Selesai (Untuk pemasangan kode), Save Template anda

Sekarang, silahkan menuju ke setting --> formatting. Di bagian paling bawah, pada kotak post template, isikan kode berikut :

<span id="fullpost">

</span>

Nah...ketika posting (bikin artikel), coba klik edit HTML....maka akan tampil kode seperti diatas. Selanjutnya, Letakkan bagian posting yang akan di tampilkan diatas kode

<span id="fullpost">

Sementara sisanya (akan tampil setelah readmore di klik), letakkan di antara kode

<span id="fullpost">

dan

</span>

Selesai deh....

Catatan: Cara tersebut hanya untuk postingan yang baru. Untuk postingan yang lama, silahkan anda edit postingan tersebut, kemudian tambahkan kode

<span id="fullpost">

dan

</span>

Sesuai intruksi diatas.

Jika masih ada kesulitan, silahkan tinggalkan komentar......insyaAllah saya akan membantu anda.

Salam Blogger

Cara Membuat Tabview Widget

Selamat Sore semuanya......kursus blog kali ini saya akan menulis artikel tentang cara membuat tabview widget untuk blog anda. Tabview ini berfungsi untuk menampilkan label, komentar terbaru, dan artikel terbaru dalam 1 widget. Berikut screen shoot tabview yang saya maksud :
Jika ingin liat contohnya sekaligus merasakan fungsinya, liat aja di bagian atas posting ini (persis seperti gambar diatas). Menarik kan....? saya mendapatkan ini dari hoctro's. Thanks a lot hoctro's for share this hack to another blogger. Pengen pasang juga tabview ini di blog anda semua...? ikuti aja langkah2 di bawah ini : 1. Setelah login di blogger, langsung menuju ke layout lalu edit HTML. 2. Sebagai keamanan silahkan download dulu template anda 3. Kalo udah, silahkan copy paste script berikut di bawah tag ]]></b:skin> sebelum tag </head>. Awas..jangan sampe salah ya...!!.


<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.

// "cb" is intended to be a common library, where different widgets would
// utitlize the shared operations such as getTitle, getLink, etc. from a json object.
var cb = {

// search function requires these parameters:
// 1. query: a blogger address, such as "hoctro.blogspot.com",
// 2. type: type of return data, either "comments" or "posts",
// 3. start: the start-index parameter (where to start extracting data)
// 4. increment: the number of elements the json will get back. (the smaller value, the faster time to travel back)
// 5. func: the returned function the json object will feed.

search: function(query, type, start, increment, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/' + type + '/default?alt=json-in-script&amp;start-index='
+ start + '&amp;max-results=' + increment + '&amp;callback=' + func + '&amp;orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},

// searchLabel function return a result of posts w/ a label query
// it requires these parameters:
// 1. query: a blogger address, such as "hoctro.blogspot.com",
// 2. an array of labels
// 3. func: the returned function the json object will feed.
searchLabel: function(query, label, func) {
var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + encodeURIComponent(label) +
'?alt=json-in-script&amp;callback=' + func + '&amp;orderby=published');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
},

// getTotalResults needs the json object, and it'll return the total number of comments (or posts) of the blog.
getTotalResults: function(json) {
return json.feed.openSearch$totalResults.$t;
},

// getStartIndex gets the start index of a search inside an json object.
getStartIndex: function(json) {
return json.feed.openSearch$startIndex.$t;
},

// getLink return a href link if "name" matches the content inside "a" tags) of the link
getLink: function(entry, name) {
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == name)
alturl = entry.link[k].href;
}
return alturl;
},

// getTitle gets the title of the title of an entry of a json object.
getTitle: function(entry) {
return entry.title.$t;
},

// getContent gets the content inside an entry of a json object.
getContent: function(entry) {
return entry.content.$t;
},

// getCommentAuthor: gets the commenter name inside an entry of a json object.
getCommentAuthor: function(entry) {
return entry.author[0].name.$t;
},

// Given a json label search, this function return the decoded label.
getLabelFromURL: function(json) {
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
// The next two lines are borrowed from Ramani's Neo Template
// code. Thanks Ramani!
var label = raw.substr(raw.lastIndexOf('/')+1);
return decodeURIComponent(label);
}
}
},
txt : function (s) {
return s + " Widget by &lt;a href='http://hoctro.blogspot.com" + "'&gt;Hoctro&lt;/a&gt;";
}
};
</script>


4. Kalo udah, silahkan save dulu template anda lalu lanjutkan kembali 5. Copy paste kode berikut, persis dibawah kode yang anda copy pada langkah ke 3



<link href='http://yui.yahooapis.com/2.3.0/build/tabview/assets/border_tabs.css' rel='stylesheet' type='text/css'/>

<script src='http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.3.0/build/element/element-beta-min.js' type='text/javascript'/>

<script src='http://yui.yahooapis.com/2.3.0/build/tabview/tabview-min.js' type='text/javascript'/>


<style type='text/css'>

.yui-content {
padding:1em; /* pad content container */
}

.yui-navset .yui-content {
border:1px solid #ccc;
}
.yui-navset .yui-nav .selected a, .yui-navset .yui-nav a:hover {
background-color:#fff;
}

.yui-navset .yui-nav li a {
background:#e5e5e5 url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat;
}
.yui-navset .yui-nav li a em {
background:transparent url(http://developer.yahoo.com/yui/examples/tabview/img/round_4px_trans_gray.gif) no-repeat top right;
padding:0.5em;
}

/* top oriented */

.yui-navset-top .yui-nav { margin-bottom:-1px; } /* for overlap, based on content border-width */
.yui-navset-top .yui-nav li a {
border-bottom:1px solid #ccc;
}

.yui-navset-top .yui-nav .selected a { border-bottom:0; }
.yui-navset-top .yui-nav .selected a em { padding-bottom:0.6em; } /* adjust height */
</style>

6. Kalo udah, silahkan save lagi template anda 7. kemudian kasih tanda centang di kolom expand template widget.




8. Cari kode berikut : <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'>. Copy paste kode berikut, persis dibawah kode diatas (yang barusan dicari)




<b:widget id='HTML11' locked='false' title='MultiTab Widget' type='HTML'>
<b:includable id='main'>
<div class='widget-content'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'
></h2>
</b:if>
<div id='doc'>
<div>
<h2>Judul</h2>
<div class='yui-navset' id='multiTab1'/>
</div>

<!--
<div>
<h2>Hackosphere</h2>
<div class='yui-navset' id='multiTab2'/>
</div>
-->

</div>
<div id='103'/>
</div>

<script type='text/javascript'>
// Developed by Hoctro - All rights reserved 2007
// This credit must be included in all your derived usages.
var p1 = document.createElement('h6');
document.getElementById('103').appendChild(p1);
p1.innerHTML = cb.txt('TabView');

function listOneTab(json, tabView, title, act) {
var label = '';
var text = '';
var nPost = 10;

if (title == "")
label += cb.getLabelFromURL(json);
else
label += title;

text += "<div id='" + label + "'><ul>";

var numberPost = (json.feed.entry.length &lt;= nPost) ?
json.feed.entry.length : nPost;

for (var i = 0; i &lt; numberPost; i++) {
var entry = json.feed.entry[i];
text += "<li>" + "&lt;a href='" + cb.getLink(entry, "alternate")
+ "'&gt;" + cb.getTitle(entry) + "</li>";
}

text += '</ul></div>';

tabView.addTab( new YAHOO.widget.Tab({
label: label,
content: text,
active : act
}));


}

var blog1 = "bloganda.blogspot.com";
var tabView1 = new YAHOO.widget.TabView('multiTab1');
var labels1 = ['Label Blog', 'Label Blog','Label Blog'];
function listTab1(json) {
listOneTab(json, tabView1, "", false);
}
function listLatestPostsTab1(json) {
listOneTab(json, tabView1, "Latest Posts", true);
}
function listLatestCommentsTab1(json) {
listOneTab(json, tabView1, "Latest Comments", false);
}

// Activating calls!

// Latest Posts
cb.search( blog1, "posts", 1, 25, 'listLatestPostsTab1');

// Latest Comments
cb.search( blog1, "comments", 1, 25, 'listLatestCommentsTab1');

// Preferred Labels
for (var i=0; i &lt; labels1.length; i++)
if (labels1[i]) cb.searchLabel(blog1, labels1[i], 'listTab1');

/*
var blog2 = "hackosphere.blogspot.com";
var tabView2 = new YAHOO.widget.TabView('multiTab2');
var labels2 = ['Neo','Widgets', "Blogger Power"];
function listTab2(json) {
listOneTab(json, tabView2, "", false);
}
function listLatestPostsTab2(json) {
listOneTab(json, tabView2, "Latest Posts", true);
}
function listLatestCommentsTab2(json) {
listOneTab(json, tabView2, "Latest Comments", false);
}
// Activating calls!
// Latest Posts
cb.search( blog2, "posts", 1, 25, 'listLatestPostsTab2');

// Latest Comments
cb.search( blog2, "comments", 1, 25, 'listLatestCommentsTab2');

// Preferred Labels
for (var i=0; i &lt; labels2.length; i++)
if (labels2[i]) cb.searchLabel("hackosphere.blogspot.com", labels2[i], 'listTab2');

*/
</script>
</b:includable>
</b:widget>

Setelah copy paste kode tersebut silahkan ganti kode yang berwarna merah sesuai dengan blog anda.  

Judul --> ganti dengan judul tab view anda  
Bloganda.blogspot.com --> ganti dengan blog punya anda (tanpa "http://")  
Label --> ganti dengan nama label blog anda

Jika merasa kesulitan, silahkan tinggalkan pesan di kolom komentar, atau hubungi saya via ym (kalo sedang online). Selamat mencoba

Pasang kode HTML di postingan

Kemaren ada seorang pengunjung blog yang nanya, kurang lebih seperti ini :
Salam..bgmn cara posting suatu artikel yg ada kode html nya. contohnya seperti artikel sekilas ttg HTML ini..krn kalo saya coba, selalu error, dan jadinya kosong, kode HTML nya nggak bisa ditampilkan. trima kasih sebelumnya..
Ok....karena pertanyaan tersebut, saya langsung kasih deh gimana caranya. Hal pertama yang harus diperhatikan dalam bagaimana cara pasang kode HTML dipostingan yaitu ketika membuatnya anda berada pada posisi edit html bukan mode compose. yang ke dua, untuk menambahkan kode html di postingan anda cukup dengan menambahkan tag <code> dan </code> diantara kode html yang akan ditampilkan di postingan. Contoh misalnya anda ingin menampilkan kode html berikut :
<p align='justify'>Tes kode html</p>
maka untuk membuatnya yaitu dengan cara menambahkan tag <code> dan </code> diantara <p align='justify'>Tes kode html</p>. Maka hasilnya seperti ini :
<code>
&lt;p align='justify'&gt;Tes kode html&lt;/p&gt;
</code>
Perhatikan text yang warna merah. Itu adalah kode2 untuk mengganti karakter html. Berikut beberapa karakter html yang biasanya dipakai :
    Karakter HTML    
    Pengganti Karakter    
<
&lt;
>
&gt;
&
&amp;
 "
&quot;
±
&plusmn;
Spasi
&nbsp;
©
&copy;
Nah....jadi kesimpulannya, untuk menampilkan kode html di postingan, anda harus menambahkan <code> dan  </code> diantara kode html yang akan ditampilkan. Lalu ganti karakter2 kode html-nya sesuai dengan keterangan table diatas. Mudahkan...??. Jika masih mengalami masalah, silahkan bertanya kembali... Selamat ngeblog aja deh

blogger