Cara membuat Blog

Ping service

2009-06-27T22:55:00.000-07:00

kali ini membahas mengenai ping service. Saya yakin sebagian dari anda sudah banyak yang tahu tentang ping service. Tapi..saya juga yakin masih ada diantara blogger khususnya blogger baru yang sama sekali tidak mengetahui apa itu ping services. Ping service bisa dikatakan suatu layanan yang dapat menginformasikan akan adanaya update terbaru pada suatu web atau blog. Dengan memanfaatkan fasilitas ping services ini, secara tidak langsung dapat meningkatkan rangking seo suatu web atau blog di mata search engine.

Ping service termasuk salah satu tips seo yang patut dicoba. walaupun pada kenyataannya, tips seo yang satu ini sering sekali dianggap sepele oleh sebagaian orang. Padahal kalo menurut saya, apa susahnya sih melakukan ping..?! tinggal masukin alamat web / blog, trus klik, udah beres. Apalagi sekarang sudah banyak kok situs - situs yang menyediakan layanan ping secara otomatis langsung ke beberapa direktori.

Berikut saya kasih beberapa situs yang menyediakan layanan ping otomatis :

Ping-o-Matic

Mypagerank

Feedshark

BlogFlux

King Ping

Pingoat

Pingthemempire

Bagaimana cara melakukan ping

Untuk melakukan ping ke situs ping service diatas, caranya setelah anda mengupdate blog kemudian anda menuju ke salah satu layanan ping diatas. Contoh misalnya di ping-o-matic anda tinggal memasukan Judul blog anda sama url blog anda kemudian klik send ping dan selesai. Tapi ingat..jangan pernah terlalu sering nge-ping..!! Selain dilarang, hal tersebut dapat dianggap spam oleh penyedia layanan ping.

Traffic blog

2009-06-27T22:54:00.000-07:00

Bagi kebanyakan blogger, traffic merupakan suatu hal yang sangat penting. Terutama bagi para blogger yang memonetisasi blognya. Baik itu melalui PPC, PTC, Affliate dan lain - lain.

Namun, keadaan ini sangat bertolak belakang dengan kita sebagai blogger baru yang memang tidak tahu sama sekali bagaimana caranya mendatangkan traffic. Sedangkan kita pun sebagai blogger baru sangat ingin untuk memometisasi blognya. Sungguh merupakan suatu hal yang mustahil jika blog yang baru saja dibuat langsung bisa mendatangkan traffic ribuan perhari.

Sebagai langkah awal buat para blogger baru (seperti saya) untuk mendatangkan traffic yang lumayan, saya mempunyai beberapa cara yang sangat mudah. Cara ini sebenarnya sudah banyak yang mengetahuinya namun suka dianggap sepele. Padahal menurut saya, cara ini merupakan yang paling ampuh untuk mendatangkan traffic dengan mudah (khusunya buat blog baru).

Sambil kita belajar SEO untuk mendatangkan traffic yang lebih, ga ada salahnya jika kita menerapkan cara mudah ini untuk mendatangkan traffic ke blog. Nah..berikut cara - cara yang menurut saya dapat dengan mudah sekali untuk mendatangkan traffic ke blog :

Sering - sering berkunjung ke blog lain (minimal 100 blog / hari) dengan meninggalkan jejak baik di buku tamu atau dengan berkomentar

Pasang Iklan mengenai blog anda di situs iklan baris yang gratisan

Menuliskan alamat blog anda di setiap tempat ramai yang anda kunjungi

Setuju atau tidak, itulah 3 cara mudah menurut saya untuk mendatangkan traffic ke blog yang baru. Selain mudah untuk dilakukan, cara - cara tersebut diatas pun sama sekali tidak membutuhkan biaya alias gratis. Jika anda mempunyai cara mudah lain untuk mendatangkan traffic ke blog, silahkan tulis di kolom komentar

Daftar isi widget blog

2009-06-27T22:49:00.000-07:00

Daftar isi blog merupakan suatu elemen penting yang harus dimiliki oleh suatu blog. Karena dengan adanya daftar isi blog tersebut, para pengunjung akan lebih mudah untuk mencari suatu artikel yang mereka cari. Kali ini, saya akan share mengenai bagaimana cara membuat daftar isi blog dengan menggunakan javascript. Bila masih ada yang belum mengerti mengenai hal ini, anda bisa lihat contohnya di bawah ini :

Nah...bagi anda yang pengen pasang widget tersebut di blognya, berikut langkah - langkahnya :

Klik add page element (Terserah anda mau disimpan dimana. Baik di sidebar atau di bagian footer)

Pilih html / javascript (lihat anak panah di gambar)

Selanjutnya, copy paste kode di bawah :

<div style="border: 1px solid #000; overflow: auto; height: 220px;"> <script style="text/javascript" src="http://mizwar.blog.googlepages.com/daftar_isi.js"></script> <script style="text/javascript"> var numposts = 1000; var showpostdate = false; var showpostsummary = false; var numchars = 100; var standardstyling = true; </script> <script src="http://BLOGANDA.blogspot.com/feeds/posts/default? orderby=published&alt=json-in-script&max-results=999 &callback=showrecentposts"></script> </div>

Silahkan ganti text yang berwarna merah dengan nama blog anda.

Tambahan
Widget tersebut, akan hanya akan menampilkan judul blog nya saja. Jika anda ingin memodifikasinya, silahkan ganti kata false dengan true atau sebaliknya. lihat text berikut :

var numposts = 1000;
var showpostdate = false; / untuk menampilkan tanggal postingan
var showpostsummary = false; / untuk menampilkan ringkasan postingan
var numchars = 100;
var standardstyling = true;

Ok..selamat mencoba

Dasar css

2009-06-27T22:42:00.000-07:00

CSS atau Cascading Style Sheet adalah bahasa pemrograman atau scripting untuk mengatur tampilan suatu website atau blog. Mungkin bagi para blogger sudah sering melihat kode CSS ini. Karena blog khususnya yang hosting di blogspot memang menggunakan CSS untuk merubah dan mangatur tampilan blog itu sendiri. Tampilan disini maksudnya untuk mengatur tampilan baik dari segi warna (huruf atau background), image, huruf dan elemen2 lain yang ada kaitannya dengan tampilan suatu blog atau web. Sebelum ada CSS, untuk mengatur tampilan suatu huruf biasanya menggunakan tag <p font="tahoma">bla bla bla</p>. Tapi setelah adanya CSS hal tersebut tidak perlu dilakukan lagi.

CSS bisa diaplikasikan dengan 3 cara :

Langsung dituliskan pada tag <head></head>. Dengan catatan harus diawali dengan tag <style type="text/css"></style>.

Menggunakan file eksternal. Maksudnya, setiap kode css disimpan pada suatu file dengan type .css dan nantinya di deklarasikan didalam tag <head> dengan cara seperti berikut :

<head><link rel="stylesheet" href="css/style.css" type="text/css" /></head>

Diaplikasikan langsung pada tag yang bersangkutan

Dalam penulisan kode CSS mempunyai aturan tersendiri. Mungkin bagi anda yang masih sangat awam mengenai CSS, artikel ini bisa dijadikan sebagai bahan pembelajaran bagi anda. Ya walaupun memang sangat dasar sekali, tapi ga ada salahnya kan...

Cara pendeklarasian dan penulisan CSS

Menggunakan tanda # sebagai awalan. Contohnya :

#my_style { background-color :#000; font-color :#fff; }

Untuk pendeklarasiannya, karena memakai tanda # maka atribut yang digunakan adalah id. Sehingga contoh pendeklarasiannya adalah

<div id='my_style'>bla bla bla</div>

Nah..sehingga hasilnya akan menjadi seperti ini :
bla bla bla

Tapi ingat, sifat dari id adalah unik. Makanya tidak boleh ada elemen lain yang memakai id yang sama pada suatu CSS.

Menggunakan tanda dot atau titik (.). sebagai awalan, contoh :

.my_style { background-color :red; font-color :#fff; }

Untuk pendeklarasiannya, karena memakai tanda (.) maka atribut yang digunakan adalah class. Sehingga contoh pendeklarasiannya adalah

<div class='my_style'>text</div>

Nah..sehingga hasilnya akan menjadi seperti ini :
bla bla bla

Nah..kalo sifat dari id adalah unik, maka sebaliknya kalo class tidak unik dan bisa diaplikasikan lebih dari 1 class yang sama dalam suatu doc html.

Tanpa memakai tanda # atau (.) tapi langsung diaplikasikan pada suatu kode html, contoh :

div { background-color:blue; }

Nah jika memakai cara seperti ini, maka semua tag div akan mempunyai style yang sama sesuai kode CSSnya.

Ok....sekian dulu untuk pengenalan kode CSS. Jika masih merasa bingung, saya mohon maaf karena mungkin penjelasannya agak sedikit kacau alias berantakan.

Simpan widget sebelum ganti template

2009-06-27T22:40:00.000-07:00

Kemaren ada yang nanya ma saya,

"mas mo nanya nih, kalo mo ganti template widgetnya ke hapus ya"....

Setelah saya baca pertanyaan tersebut, saya jadi berpikir ternyata masih ada blogger yang ga tau gimana caranya ganti template yang baik. Nah...mungkin kebanyakan dah pada tau banget kalo yang namanya widget bakal ke hapus jika templatenya di ganti. Nah...gimana caranya supaya walaupun template kita diganti, tapi widget ga kehapus...?!!. Jawabannya pasti silahkan backup dulu widgetnya...Nah..cara backupnya gimana..?!

Untuk membackup widget blog supaya ga kehapus jika kita mengganti template blog kita, caranya banyak banget. Tapi untuk saat ini, saya hanya akan ngasih tau cara backup widget yang paling mudah menurut saya. Soalnya kalo dibahas disini semua takut ke panjangan nih..Ok Langsung saja saya kasih tau caranya.

Silahkan login dulu di blogspot. Setelah itu, langsung menuju ke halaman tata letak lalu perhatikan gambar di bawah ini :

Kalian bisa lihat yang ditunjukin ma panah yang warna merah itu kan..?! nah...untuk membackup widget, setelah masuk halaman tata letak, kalian tinggal klik link edit pada widget yang akan kalian backup. Setelahnya akan muncul gambar seperti di bawah :

Nah...silahkan kalian copy kode widgetnya, lalu simpan ke dalam file notepad. Begitu pula dengan widget yang lainnya, silahkan ulangi lagi dari langkah awal. Nah...jika semua widget sudah di backup, baru deh kalian ganti templatenya. Jika sudah, baru masukin lagi widget2 yang tadi di backup. Sehingga widget blog kalian tidak akan hilang...

Link warna warni

2009-06-27T22:39:00.000-07:00

Yaa...mungkin dah pada banyak yang tahu, tentang tutorial yang satu ini. Tapi...siapa tau ada yang masih blom tahu mengenai rainbow link atau link warna - warni, makanya saya coba postingin artikelnya. Nah...sebelum bahas gimana cara bikinnya, kalian perlu tahu apa sih yang dimaksud dengan rainbow link ini.

Rainbow link adalah suatu link yang apabila link tersebut disorot oleh kursor, maka warna link tersebut akan berubah menjadi warna - warni. Ya..seperti namanya rainbow link atau dalam bahasa indonesia bisa diartikan sebagai link pelangi. Untuk menambahkan aplikasi ini, kalian butuh suatu kode javascript. Kode javascript tersebut, bisa kalian dapatkan di http://dynamicdrive.com. Nah...untuk tutorial jelasnya, silahkan ikuti petunjuk berikut:

Langkah awal yaitu seperti biasa, silahkan login dulu di blogger lalu langsung menuju ke edit HTML. Nah..ga usah kasih tanda centang pada kolom expand template widget. Selanjutnya, silahkan cari kode </head> lalu simpan script berikut di bawah kode </head> tersebut.

<script src="http://mizwar.blog.googlepages.com/rainbow.js">

Nah...sehingga hasil akhirnya seperti ini :

</head> <script src="http://mizwar.blog.googlepages.com/rainbow.js">

Jika sudah sesuai, silahkan save template kalian lalu coba arahkan kursor ke salah satu link yang ada di blog sampean.

Cloud animasi

2009-06-27T22:37:00.000-07:00

Baru juga pasang label cloud dengan animasi, eh...dah ada yang nanyain gimana cara bikinnya. Yawda daripada bingung dan ribet kalian pada nyari kesana kesini ga dapet, aku kasih deh tutornya.

widget yang satu ini, merupakan kombinasi dari javascript dan flash. Kalo boleh jujur, saya dapatkan widget ini dari blogger buster (versi english). Nah...berhubung blog saya ini bahasa indo, jadi saya kasih tutornya pake bahasa indo juga biar pada ngerti. Gimana....dah ga sabar pengen pasang ya...?! yawda langsung aja simak langkah - langkahnya di bawah ini :

Setelah kalian login di blogger, langsung saja menuju tata letak kemudian edit html. Jangan kasih tanda centang pada kolom expand template widget, karena hanya bikin bingung doang. Selanjutnya cari kode html ini di template blog kalian. Kalo ga ada, ya...yang mirip2 aja deh.

<b:section class='sidebar' id='sidebar' preferred='yes'>

Nah...kalo dah ketemu, tambahin dibawahnya kode html berikut :

<b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <script src='http://halotemplates.s3.amazonaws.com/ wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/ wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

....kalo udah copy pastenya, klik pratinjau....trus kalo hasilnya dah keliatan di sidebar blog kalian , berarti beres deh. Tinggal bagaimana kalian memberikan sentuhan lain untuk widget tersebut supaya keliatan klop dengan blog kalian.

Kustomisasi Label Cloud Animasi

Nah...untuk masalah yang satu ini, perlu saya kasih tahu bahwa sesuai kode yang tadi kalian masukan seperti diatas, bahwa widget ini mempunyai settingan defaultnya seperti dibawah ini :

1. Panjang widget = 240px
2. Lebar widget = 300px
3. Background = putih
4. Warna huruf = abu
5. ukuran huruf = 12

untuk merubah settingan diatas supaya lebih cocok dengan blog kalian, ikuti petunjuk berikut :

1. untuk merubah panjang (merah) dan lebar (biru) widget, kalian cari kode seperti berikut, lalu ganti angkanya :

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/ wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

2. untuk merubah warna background, tinggal ganti saja kode hexa yang berwarna hitam sesuai kode diatas.

3. untuk merubah warna huruf, cari kode berikut lalu ganti angkanya (merah) sesuai kode hexa warna yang kalian kehendaki

so.addVariable("tcolor", "0x333333");

4. untuk merubah ukuran huruf, cari kode berikut lalu ganti angka (warna merah) sesuai ukuran huruf yang dikehendaki

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Nah...gampang kan...?! atau masih pada bingung...?? Selamat berbingung ria aja deh...

Statistik blog

2009-06-27T22:36:00.000-07:00

Sebelum posting, dan walaupun agak telat..hehehe...saya pribadi ingin mengucapkan Minal Aidzin Wal fa izin ya....buat temen2 semua. Saya mohon maaf apabila ada salah kata, tingkah laku, atau apa saja yang sangat tidak berkenan di hati kalian semua.

Kali ini saya akan memberikan sebuah widget, yang memang sangat simple tapi mempunyai makna yang besar yaitu widget Statistik Blog. Yupz...widget ini akan menampilkan statistik blog kita masing - masing, sehingga para pengunjung blog akan tahu bagaimana statistik blog qta. Berikut screenshoot nya :

Nah...dengan adanya statistik blog seperti gambar diatas, para visitor bisa tau berapa banyak artikel dan berapa banyak komentar yang masuk di blog.

Nah....jika ingin pasang widget ini, caranya gampang banget..

1. Login di blogger

2. Masuk ke menu layout / tata letak

3. Pada menu Elemen Halaman, klik pada kata Tambah Gadget, untuk menambah widget baru.

4. Kemudian pilih Html / Javascript, lalu copy paste kode dibawah ini :

Jangan lupa untuk ganti kata blogkamu dengan nama blog kalian

5. Save kemudian lihat hasilnya...

Gambar di judul postingan

2009-06-27T22:35:00.000-07:00

Mungkin buat temen2 yang udah sering berkunjung di blog ini, pasrti ngeliat ada sesuatu yang beda dengan tampilan judul posting blog ini. Kalo dulu, judul postingan blog ini terlihat biasa - biasa saja. Tapi kali ini ada sebuah gambar buku kecil disamping judul postingan blog ini.

Hal ini, sengaja saya lakukan supaya judul postingan blog ini keliatan enak dilihat (Menurut saya...ga tau kalo menurut kalian. Hehehe...).

Masih belum jelas juga...?? berikut screenshootnya

Nah....buat temen yang ingin nyelipin gambar juga di judul postingannya, dan kebetulan ga tau caranya, silahkan ikuti langkah2nya seperti berikut :

1. Silahkan cari sebuah gambar, yang menurut kalian cocok untuk diselipin di judul postingan blog kalian, dan ukuran gambarnya ga boleh terlalu besar. ya...kalo saya pake yang 45px * 59px

2. Kalo udah ketemu, silahkan simpan gambar tersebut di tempat hostingan gambar yang biasa kalian pake.

3. Langkah selanjutnya, login di blogger lalu langsung saja masuk ke menu edit Html. Ga usah ngasih tanda centang pada kolom expand template widget

4. Cari kode dibawah ini :

.post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; }

5. Hapus kode tersebut, lalu ganti dengan kode dibawah ini :

.post h3 { margin:.25em 0 .5em; padding:15px 0 15px 50px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; background:url(url gambar anda) no-repeat left center; }

Jangan lupa untuk mengganti kata yang berwarna merah dengan url gambar kalian.

6. Kalo udah, klik dulu pratinjau. Kalo misalnya masih belum pas posisinya silahkan rubah ukuran paddingnya (disesuaikan).

7. Kalo udah pas silahkan save template kalian.

Pasang kotak pencarian di blog

2009-06-27T22:33:00.000-07:00

Sebelumnya,saya minta maaf sama temen2 yang suka berkunjung di blog ini karena blog ini sudah lama sekali tidak di update. Hal...ini karena mungkin kesibukan saya yang sangat - sangat susah untuk mencari waktu buat blogging. Tapi...akhirnya saat ini saya sempatkan untuk update blog lagi. Postingan kali ini membahas tentang bagaimana cara pasang search engine di blog. Tujuannya yaitu, supaya para pengunjung blog kita tidak kesulitan untuk mencari artikel - artikel yang sudah lama kita posting. Bagaimana caranya, silahkan ikuti intruksi berikut :

Sebagai catatan, kalian bisa pasang search engine ini di bagian apa saja yang ada di blog kalian. Hal yang harus kalian lakukan hanya memasang kode kotak pencarian saja. Silahkan mau dipasang di postingan, sidebar, header, atau apa saja. Yang pasti tinggal copy paste aja kode berikut :

<form id="searchthis" action="http://namablog.blogspot.com/search" style="display:inline;" method="get"> <input id="b-query" maxlength="255" name="q" size="20" type="text"/> <input id="b-searchbtn" value="Search" type="submit"/> </form>

Jangan lupa untuk mengganti kata yang berwarna biru dengan nama blog kalian.

Kalo udah di pasang, maka hasilnya akan seperti berikut :

Mudahkan....OK, happy blogging aja deh.

Memperlebar halaman blog

2009-06-27T22:31:00.000-07:00

Mungkin dari sebagian besar template default yang disediakan blogger, tidak semuanya memeliki lebar halaman yang penuh. Rata – rata setiap template masih memiliki ruang untuk dimanfaatkan baik untuk memperlebar sidebar, ataupun halaman posting. Kali ini saya akan coba memberikan sedikit gambaran tentang memperlebar halaman blog. Cuma, cara ini akan lebih pas jika diaplikasikan di template minima, yaitu template default blogger. Tapi…tidak menutup kemungkinan juga dapat diaplikasikan di template default blogger yang lainnya. Oke….berikut penjelasannya.

Sebelumnya, saya asumsikan kalo temen2 sudah berada di menu edit html. Dan ingat…tidak usah memberikan tanda centang pada kolom expand template widget karena hanya akan membingungkan saja.

Sebelumnya, silahkan cari kode css #outer-wrapper. Untuk lebih mudah mencarinya, tekan ctrl+f lalu ketikkan kode yang di cari. Kalo sudah ketemu, maka akan tampak kode seperti berikut :

#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #main-wrapper { width: 410px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 220px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Penjelasan :
#outer-wrapper --> kode untuk lebar halaman blog.
#main-wrapper --> kode untuk lebar postingan blog
#sidebar-wrapper --> kode untuk lebar sidebar blog.

Untuk merubah lebar halaman blog, temen2 tinggal mengganti angka – angka yang terdapat pada setiap kode css diatas. Semakin besar angkanya, maka halaman blog pun semakin lebar. Contoh : Misalnya, temen2 ingin mengganti lebar halaman blog menjadi 950 pixel. Maka silahkan ganti jumlah angka pada tag width untuk kode css #outer-wrapper menjadi --> 950px; Sehingga hasilnya seperti dibawah ini :

#outer-wrapper { width: 950px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }

Nah…setelah mengganti kode #outer-wrapper, jangan lupa untuk mengganti kode tag width pada #main-wrapper dan #sidebar-wrapper juga. Karena jika tidak diganti maka jarak antara halaman posting dan sidebar blog akan sangat lebar. Untuk mengantisipasinya, rubah juga angka pada tag width #main-wrapper dan #sidebar-wrapper menjadi 500px untuk #main-wrapperdan 400px untuk #sidebar-wrapper. Sehingga menjadi :

#main-wrapper { width: 500px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 400px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Untuk merubah lebar kolom pada #main-wrapper dan #sidebar-wrapper, harus sesuai dengan lebar kolom pada #outer-wrapper. Misalnya, lebar halaman blog 950px maka jumlah dari lebar postingan dan sidebar blog harus kurang dari 950px. Hal ini dikarenakan supaya postingan blog dan sidebar blog tidak berdempetan dan mempunyai jarak antara keduanya. Jarak antara postingan dan sidebar bisa disesuaikan dari 30px s.d 50px.

Nah…setelah merubah lebar bagian blog diatas, ada satu bagian lagi yang harus dirubah yaitu bagian bawah blog. Temen2 tinggal mencari kode #footer-wrapper dan rubah angka pada tag width-nya menjadi sama dengan lebar halaman blog (#outer-wrapper).

Jika semua bagian telah mengalami perubahan, maka sebelum nge-save template lebih baik melihat dulu hasil perubahan dengan mengklik pratinjau / preview. Jika memang sudah sesuai baru di save. Jika belum temen2 tinggal klik bersihkan edit / clear edit untuk mengembalikan perubahan2 yang telah terjadi pada template. Ok….selamat mencoba.

Blogrool dengan marquee

2009-06-27T22:30:00.000-07:00

Apa sih kotak blogger itu….?! Mungkin bagi sebagian blogger udah ada yang tahu maksudnya dengan postingan saya yang ini. Tapi…bagi anda yang belum tahu, yang dimaksud dengan kotak blogger disini yaitu suatu kotak tempat menyimpan link blog lain. Intinya setiap blog yang mau tukeran link dengan blog kita sendiri, kita pasang link blog mereka di kotak blogger tersebut. Nah…pada kursus kali ini, ada sedikit variasinya..yaitu dengan menambahkan efek marquee. Bagi yang belum tahu apa itu marquee, baca artikel tentang marquee.

Untuk lebih jelasnya mengenai kotak blogger dengan marquee silahkan liat tampilan di bawah ini :

Kursus Blog
Free Templates

Bagus ga….?! Ok deh…buat temen2 semua yang pengen pasang kolom blogger seperti diatas, silahkan ikuti langkah2nya di bawah ini :

Di jendela dashboard, klik menu layout lalu add new page element di sidebar layout anda. (Cara ini bisa juga dipasang di footer. Intinya terserah temen2 semua mau pasang dimana)

Setelah itu, pilih Html/javascript kemudian copy paste kode berikut :

<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" style="border: 1px solid #000; padding: 5px; text-align: center;" width="150px" height="150px"><a href="http://kursus-blog.blogspot.com/" target="_blank">Kursus Blog</a> <a href="http://bloggertemplates-foryou.blogspot.com/" target="_blank">Free Templates</a></marquee>

Ket :
- direction="up"
  arah dari marquee bergerak keatas. Jika ingin berganti arah, ganti kata "up" dengan "down" (bawah), "left" (kiri) atau "right" (kanan).
- scrollamount="2"
  kecepatan bergerak. Semakin besar angkanya, maka semakin cepat pula marquee tersebut bergerak.
- border:1px solid #000
  merupakan deskripsi dari garis kolom.
  1px --> tebal garis
  solid --> type garis. bisa diganti dengan kata dashed (-) atau dotted (.)
  #000 --> warna garis hitam. bisa diganti sesuai keinginan anda
- text-align:center
  Text berada di tengah. Bisa diganti dengan left, right atau justify (rata kiri kanan)
- width="150px"
  lebar kolom sebesar 150 pixel. Biar lebih sesuai dengan lebar dimana anda menyimpan marquee, anda tinggal mengganti 150px dengan 100%
- height="150px"
  panjang dari kolom marquee. Semakin besar angkanya (dalam pixel), maka semakin panjang pula kolom marquee

Save dan Selesai

Tentang technorati

2009-06-27T22:29:00.000-07:00

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

Gambar bergerak di blog

2009-06-27T22:27:00.000-07:00

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 :

-

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 :

Gambar bergerak tersebut bisa juga disimpan di postingan. Caranya, ketika memposting klik edit html lalu masukan kode seperti diatas.
Untuk menampilkan gambar beserta link-nya, silahkan lihat di cara membuat link di artikel paling bawah.

Footer navbar

2009-06-27T22:25:00.000-07:00

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.

Form langganan email

2009-06-27T22:22:00.001-07:00

Salah satu layanan yang disediakan oleh feedburner yaitu form berlangganan email. Layanan feedburner yang satu ini akan memudahkan para pengunjung blog untuk mendapatkan update posting terbaru dari suatu blog melalui email. Jadi para pengunjung yang memang senang dan suka dengan artikel suatu blog, tidak perlu langsung terjun payung mengunjungi blog tersebut. Cukup dengan mendaftarkan email-nya untuk berlangganan artikel terbaru, maka mereka pun akan mendapatkan informasi tentang update terbaru via email mereka.

Cara membuat form berlangganan email ini, sangatlah mudah. Dengan catatan anda harus mendaftarkan terlebih dahulu feed blog anda di feedburner. Bagi yang belum, silahkan baca artikel tentang cara daftar feedburner dan jangan lupa cara setting feedburner juga. Bagi yang sudah..yu ah kita langsung...aja.

Berikut langkah2 cara membuat form berlangganan email di feedburner.

Buka http://www.feedburner.com kemudian klik sign in lalu masukan username dan password anda.

Klik pada blog yang akan di pasang layanan berlangganan email.

Di bagian menu atas, klik publicize.

Selanjutnya, pada halaman publicize klik email subscription

Jika email subscription anda belum active, silahkan klik dulu activate untuk menggunakan layanan ini.

Setelah itu, akan muncul suatu halaman. Untuk memasang form berlangganan email di blog ada 2 cara. 1. Copy seluruh kode html nya lalu paste di sidebar blog anda, 2. Langusung dengan memanfaatkan import elemen blogger.

Saya akan membahas cara yang ke-1 aja. Silahkan copy semua kode html yang ada pada halaman tersebut

Kemudian masukan ke element blog anda dengan gadget html/javascript. Terserah anda mau dimasukkan dimana. Sidebar bisa footer juga bisa. Jangan lupa di save.

Selesai..

Gambar melayang

2009-06-27T22:21:00.000-07:00

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.

Promosi blog

2009-06-27T22:19:00.001-07:00

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

Komentar higtlight

2009-06-27T22:18:00.000-07:00

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.....

Meta tag di blog

2009-06-27T22:16:00.002-07:00

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.........

Google sitemap

2009-06-27T22:16:00.001-07:00

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 :

Login di http://www.google.com/webmasters/ dengan menggunakan id dan password account gmail anda.
Jika belum memasukan situs anda silahkan daftarin dulu. Kalo udah langsung aja menuju sitemap --> add sitemap
Pada kolom choose type, pilih add general web sitemap
Pada my sitemap URL (Url Blog anda biasanya sudah ada) isikan atom.xml
Klik OK dan selesai

Yap begitulah cara mudah untuk mendaftarkan sitemap blog anda di google.

Selamat Mencoba

Optimasi SEO

2009-06-27T22:15:00.001-07:00

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.....

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
Optimalkan Title Tag / Judul Halaman Blog. Untuk keterangan lebih lanjut silahkan ikuti Optimasi Judul Halaman Blog
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.
Daftarkan Sitemap untuk blog anda. Untuk caranya, silahkan menuju ke Google Sitemap Untuk Blogspot
Pasang Artikel yang berkaitan untuk setiap label postingan anda. Jika belum, silahkan menuju Pasang related post di blog
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
Banyakin One way link. Yang paling gampang, silahkan buat blog sebanyak mungkin dan arahkan link blog2 tersebut ke blog yang ingin anda optimalkan
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

Yahoo emotion di postingan

2009-06-27T22:14:00.001-07:00

Dari pada kesel nunggu jemputan, mending nulis postingan dulu...biar ga ngantuk...
Pada kesempatan kali ini (ciee...kayak yg mo pidato aja ) saya mo kasih tau cara pasang icon yahoo emotions di postingan. Yaa kaya postingan saya ini.....Supaya lebih berwarna gitu.... Mungkin bagi sobat yang sudah sering chatting pake YM, pasti dah ga asing dengan hal ini. Tapi kalo masalah cara nampilinnya di postingan blog saya kurang tau....apa udah bisa atau belum. Nah...bagi yang sudah bisa, saya mohon koreksiannya (takut ada yg kurang). Tapi....bagi yg belum silahkan aja untuk dicoba pasti berhasil kok. Soalnya saya dah aplikasikan sendiri di blog saya ini. Sobat semua tinggal copy aja code-nya lalu sisipkan diantara kata-kata yang pengen di pasangin emotion-nya. Tapi...inget jangan lagi nulis sedih..malah diselipin icon yang bahagia apalagi yang ketawa ntar disangka ..... lagi . Ok..silahkan sobat copy kode di bawah ini :

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif" width=42 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" width=20 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" width=34 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" width=22 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif" width=22 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" width=18 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" width=30 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" width=30 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" width=24 height=18 border=0>

-- <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" width=18 height=18 border=0>

Sebenarnya....masih banyak yahoo emotions yang belum saya cantumkan di postingan ini. Tapi kalo sobat dah ga sabaran silahkan klik disini. Atau sobat pengen tau cara lain yang lebih mudah tanpa harus mencantumkan kode tapi langsung ada di menu postingan silahkan klik disini.

Ok....selamat ber smile - smile aja deh..

Menampilkan icon status Yahoo

2009-06-27T22:13:00.001-07:00

Sobat pasti tahu dengan YM (Yahoo Messenger) kan...? itu lho yang sering di pakai chat....Nah kali ini saya akan memberi tahukan bagaimana cara menampilkan status YM kita apabila sedang online atau offline. Biar pengunjung blog kita tahu dan kali aja ada cewe yg pengen kenalan (PD ). Berikut ini...contoh gambar icon ym status :

asa1asasasasas2sasasasasa3asasas4sasa5asasa

Nah....diatas adalah gambar iconnya. Adapun untuk menampilkan gambar tersebut + status YM kita sedang online atau offline, silahkan copy paste kode di bawah ini :

<a href="ymsgr:sendIM?ID YM ANDA"><img src="http://opi.yahoo.com/online?u=ID YM ANDA&m=g&t=Style" border="0"></a>

Nah...text yg berwarna biru...silahkan ganti sesuai data anda untuk ID YM ANDA, ganti dengan Id ym sobat. Contoh kalo punya saya miz_doc86. pada STYLE ganti dengan gambar YM sesuai selera anda pilih aja antara 1 s.d 5. contoh gambarnya ada di atas.

Link teman bergulung

2009-06-27T22:12:00.001-07:00

Duh...rupanya masih ada yg ga ngerti tentang artikel saya tentang kotak blogroll. Sebenernya maksud dari kotak blogroll tersebut adalah untuk menampilkan link2 teman yang ingin tukeran link. Ok deh....kali ini saya akan coba jelaskan, mudah2an pada ngerti.

Untuk menampilkan link di kotak blogroll tsb, setelah temen2 copy code yang ini :

<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" style="border: 1px solid #000; padding: 5px; text-align: center;" width="150px" height="150px"><a href="http://kursus-blog.blogspot.com/" target="_blank">Kursus Blog</a> <a href="http://bloggertemplates-foryou.blogspot.com/" target="_blank">Free Templates</a></marquee>

Coba lihat kode html yg berwarna merah, nah...disana lah link itu ditempatkan. Nah, bila ingin menambahkan link di kotak blogger tersebut, cari kode </marquee> lalu simpan link yang akan dibuat sebelum kode terebut (Bila belum tau cara buat link, silahkan baca yg ini). Contoh : Misalnya link yg akan disimpan adalah link blogger tutorials. Maka kode htmlnya seperti berikut :

<a href="http://mizwar-tutorials.blogspot.com/">blogger tutorials</a>

Setelah itu, simpan kode barusan sebelum kode </marquee>. Sehingga kode seluruhnya kurang lebih seperti ini :

<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" style="border: 1px solid #000; padding: 5px; text-align: center;" width="150px" height="150px"><a href="http://kursus-blog.blogspot.com/" target="_blank">Kursus Blog</a> <a href="http://bloggertemplates-foryou.blogspot.com/" target="_blank">Free Templates</a> <a href="http://mizwar-tutorials.blogspot.com/">blogger tutorials</a></marquee>

Nah...temen2 liat kode yg berwarna biru, itu kode link yg baru saja dimasukan. Sehingga hasilnya bila ditampilakan kurang lebih seperti ini :

Kursus Blog
Free Templates
blogger tutorials

Gimana...Mudahkan...?? Selamat mencoba.

Tampilan tanggal hari ini

2009-06-27T22:11:00.001-07:00

Bingung juga untuk kasih judul postingan ini. Karena takut anda semua pada bingung dengan judul yang di maksud, saya coba jelasin dikit deh. Menampilkan tanggal hari ini di blog, maksudnya suatu cara untuk menampilkan tanggal secara otomatis di halaman blog. Sebagai contohnya, anda bisa lihat di blog ini. Atau lihat gambar di bawah

Anda semua bisa lihat text yang ditunjukan dengan panah itu...?! Nah..itulah yang saya maksud. Dengan kode javascript, accesories blog ini akan tampil secara otomatis sesuai dengan tanggal dan harinya. Nah..buat anda yang pengen pasang tampilan tanggal seperti ini, silahkan ikuti petunjuknya.

Langsung menuju edit HTML

Copy paste kode dibawah, dan simpan diantara kode ]]></b:skin> dan </head> :

<script type='text/javascript' src='http://mizwar.blog.googlepages.com/tampil_tanggal.js'></script>

Sehingga hasilnya seperti ini :

]]></b:skin> <script type='text/javascript' src='http://mizwar.blog.googlepages.com/tampil_tanggal.js'></script> </head>

Save Template

Nah..untuk langkah awal sudah selesai. Sekarang langkah berikutnya yaitu memilih penempatan untuk tampilan tanggalnya. Anda bisa menempatkan accesories ini di semua tempat di blog anda. Baik itu postingan, sidebar, atau footer. Yang perlu anda lakukan adalah menuliskan kode berikut :

<script>tampiltanggal();</script>

Nah...selesai deh.

Catatan :
Accesories tersebut hanya menampilkan hari, tanggal, bulan dan tahun dalam bahasa indonesia. Jika blog anda memakai bahasa inggris, ganti kode yang no.3 dengan kode berikut :

<script type='text/javascript' src='http://mizwar.blog.googlepages.com/current-date.js'></script>

dan untuk kode yang terakhir (sebelum catatan ini) ganti dengan kode

<script>showCurrentDate();</script>

Ok...selamat mencoba

Photo author di komentar

2009-06-27T22:10:00.001-07:00

Untuk mempercantik komentar blog, ga ada salahnya jika kita menampilkan photo untuk setiap author yang berkomentar. Cara menampilkan photo author di komentar blog ini saya coba aplikasikan di blog ini dan hasilnya anda bisa lihat screenshootnya :

Nah..jadi intinya, blogger hack yang satu ini berfungsi untuk menampilkan photo setiap author komentar yang memakai id google / profile blogger sebagai identitas sang komentator. Maksudnya, kan kalo kita mo ngomentari suatu blog ada pilihannya tuh di bagian beri komentar sebagai. Nah..jika kita memilih akun google / profile blogger kita sebagai identitas sang komentator, maka photo kita yang di profile blogger akan muncul di halaman komentar. Sedangkan jika kita memilih identitas lain, yang muncul hanya gambar no photo (lihat screenshoot diatas).

Jika anda memang tertarik untuk pasang blogger hack diatas, berikut langkah - langkahnya :

Silahkan login di blogger dan masuk ke menu edit html. Kemudian, kasih tanda centang pada kolom expand template widget. Setelah itu, cari kode seperti berikut (tanpa kode yang berwarna merah). Dan jika sudah ketemu, silahkan tambahkan kode yang berwarna merahnya :

<dl id='comments-block'>
       <b:loop values='data:post.comments' var='comment'>
         <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<div class='commentphoto' style='float:right;'/>
           <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'>
             <a expr:href='data:comment.url' title='comment permalink'>
               <data:comment.timestamp/>
             </a>
             <b:include data='comment' name='commentDeleteIcon'/>
           </span>
         </dd>
<div style='clear:both;'/>
       </b:loop>
     </dl>

Nah...langkah selanjutnya, silahkan anda cari kode </head> dan copy paste script berikut diatas kode barusan

<script src='http://www.geocities.com/miz_doc86/comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

Save template anda, dan lihat hasilnya.

Tambahan :
Jika anda merasa ukuran photo tersebut terlalu besar, anda bisa memperkecilnya dengan menambahkan kode diantara script diatas. Berikut contohnya (lihat kode yang berwarna merah):

<script src='http://www.geocities.com/miz_doc86/comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.imageWidth = 30;
BloggerProfiles.imageHeight = 30;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

Nah..dengan menambahkan kode di script seperti diatas, maka...tampilan photo yang defaultnya width=60 dan height=75 diperkecil menjadi 30. Terserah anda mau memperkecilnya seperti apa, tinggal ganti saja angka 30 dengan ukuran pixel yang anda kehendaki.

Ok...Selamat mencoba.

Pesan alert

2009-06-27T22:08:00.000-07:00

Jika anda sering melakukan blogwalking, pasti anda suka menemukan suatu blog yang sebelum halaman blognya terbuka suka menampilkan pesan alert seperti disamping. Setelah anda mengkliknya, andapun baru bisa melihat seluruh halaman blog yang anda kunjungi itu.

Nah...jika anda tertarik untuk memasang pesan alert seperti itu di blog anda, caranya sangatlah mudah. Anda tinggal menambahkan kode berikut di html blog anda

<script language='JavaScript'>alert("Selamat datang di blog saya");</script>

Perhatikan text yang berwarna merah. Text tersebut adalah isi pesannya. Jadi jika anda ingin menambahkan / mengganti pesannya, anda tinggal mengganti text yang berwarna merah tersebut dengan tulisan yang anda inginkan.

Bagi yang belum pada ngerti mengenai cara pasang pesan alert tersebut di blog, berikut petunjuknya :

Silahkan anda login di blogger dan langsung menuju tata letak lalu edit html. Ga usah kasih tanda centang pada kolom expand template widget.

Langkah selanjutnya, anda cari kode </head> lalu copy paste script yang tadi saya terangkan tadi diatas kode tersebut. Jika sudah maka hasil copy pastenya akan seperti ini :

<script language='JavaScript'>alert("Selamat datang di blog saya");</script>

</head>

Gimana...?! Mudahkan...selamat mencoba...

Menu navigasi

2009-06-27T22:06:00.000-07:00

Menu navigasi halaman ini bisa di bilang sebagai alternatif pengganti untuk tulisan "posting lama" dan "posting baru". Mungkin anda sudah sering membaca artikel mengenai cara menghilangkan atau mengganti tulisan posting lama dan posting baru. Seperti yang telah dikupas oleh kang rohman di salah satu postingannya. Jika anda ingin tau contoh dari menu navigasi halaman ini, anda bisa lihat di bagian bawah blog ini. Berikut screenshootnya :

Nah...jika anda memang ngerasa kurang begitu menyukai dengan adanya tulisan posting lama dan posting baru, anda bisa menggantinya dengan menu navigasi halaman ini. Berikut cara penerapannya di blogspot :

Silahkan login dahulu di blogger kemudian masuk ke menu page element. Setelah itu, klik add new page element dan pilih html/javascript. Langkah selanjutnya, silahkan copy paste kode berikut di form page element yang baru anda tambahkan dan ga usah di kasih judul.

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Halaman '+thisNum+' dari '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Jika sudah di copy pastenya, klik simpan atau save. Langkah selanjutnya, drag and drop page element yang barusan anda buat ke bawah page element postingan. Sehingga hasilnya seperti ini :

Jika sudah selesai klik simpan.......

Silahkan dicoba.....

Google translation

2009-06-27T22:05:00.000-07:00

Sebagaimana yang kita ketahui semua, bahwasaannya google translate saat ini sudah mendukung bahasa indonesia. Oleh karena itu, setiap web / blog yang menggunakan bahasa indonesia, sudah bisa di terjemahkan ke dalam bahasa lain dengan melalui google translate. Untuk lebih mempermudah pengunjung blog dalam menterjemahkan blog kita (bhs. indonesia) ada baiknya jika kita memasang widget google translation flag di blog. Caranya ga sulit kok, tinggal copy paste saja kode di bawah ini ke salah satu bagian blog anda sesuai dengan yang anda inginkan :

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;" src="http://3.bp.blogspot.com/_KL7_V6HnzdI/SN3XCb32jyI/AAAAAAAABTA/rzl27g2sKeA/s320/english.jpeg" height="20" title="English" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/SN3JZ6YKkvI/AAAAAAAABRg/LjZULAz9R8g/s320/french.jpg" height="20" title="French" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/SN3JZ40Sm3I/AAAAAAAABRo/Q2O9aHB-bWE/s320/german.jpg" height="20" title="German" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/SN3JZ5TeKRI/AAAAAAAABR4/n-XIUMlMFjc/s320/spanish.jpg" height="20" title="Spain" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/SN3JZxnaB_I/AAAAAAAABRw/Oz7n09quInQ/s320/italian.jpg" height="20" title="Italian" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/SN3Jik1jeqI/AAAAAAAABSo/-aBxInd6w_I/s320/dutch.jpeg" height="20" title="Dutch" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/SN3LzIo5VYI/AAAAAAAABSw/wrF9OOQaREU/s320/russian.jpeg" height="20" title="Russian" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/SN3JZxKyHLI/AAAAAAAABSA/1F3l_X-QRWs/s320/brazilian.jpg" height="20" title="Portuguese" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;" src="http://2.bp.blogspot.com/_KL7_V6HnzdI/SN3JiXqVOUI/AAAAAAAABSI/R-HtgGYiXlU/s320/japan.jpg" height="20" title="Japanese" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;" src="http://4.bp.blogspot.com/_KL7_V6HnzdI/SN3Jic7D82I/AAAAAAAABSQ/DumkmputQVs/s320/korean.jpg" height="20" title="Korean" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/SN3JitvLxwI/AAAAAAAABSg/PTs6D3zolg8/s320/arab.jpeg" height="20" title="Arabic" align="absbottom"/></a>

<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/SN3JiQNoV7I/AAAAAAAABSY/-v8xIVgB3rU/s320/china.jpg" height="20" title="Chinese Simplified" align="absbottom"/></a>

Jika widget diatas sudah diterapkan, maka hasilnya akan seperti ini :

Anda bisa lihat beberapa bendera. Yang mana jika kita klik salah satu bendera, maka blog kita akan langsung diterjemahkan ke dalam bahasa yang sesuai dengan bendera yang anda klik tadi. Sekian dulu ya..jika ada pertanyaan, silahkan masukan saja di komentar...

Pasang Yahoo search

2009-06-27T22:03:00.001-07:00

Yahoo search widget merupakan suatu widget yang berfungsi untuk mencari suatu kata / artikel di dalam suatu blog atau web dengan bantuan yahoo search. Pada dasarnya widget yang satu ini sama saja dengan widget pencarian yang lain seperti google custom search yang bisa kita dapatkan jika kita mengikuti adsense. Berikut screenshoot dari yahoo serach widget :

Jika anda ingin pasang widget tersebut di blog anda, silahkan copy paste kode di bawah ini ke salah satu page element blog anda

<div id="ysrchForm  width:170px;margin:0 auto;padding:20px;position:relative; ">
<form id="searchBoxForm_undefined" action="http://search.yahoo.com/search" style="padding:0;">
<input value="UTF-8" name="ei" type="hidden"/>
<input value="ystg" name="fr" type="hidden"/>
<div style="padding:0 80px 0 0;zoom:1;">

<input onfocus="this.style.background='#fff';" type="text" id="searchTerm"
onblur="if(this.value=='')this.style.background='#fff
url(http://us.i1.yimg.com/us.yimg.com/i/us/sch/gr2/lg_pwsch.gif) 3px center  no-repeat'"
style="height:15px;border: solid 1px black; background:#fff
url(http://us.i1.yimg.com/us.yimg.com/i/us/sch/gr2/lg_pwsch.gif) 3px center no-repeat;
position:relative;" size="33" / name="p"/>

<input id="btn_undefined" style="position:absolute;padding-left:10px;"
src="http://bloggerplugins.googlepages.com/yahoo-search-widget-button.png"
value="Search" type="image"/></div><span padding:0; font:11px/11px helvetica, sans-serif;
list-style-type:none;="arial," margin:0; normal text-align:left;>

<li style="display:inline;padding-right:10px;">

<input id="web_radio" style="vertical-align:middle;margin-right:5px; "
value="" name="vs" type="radio"/>

<label for="web_radio" style="display:inline;vertical-align:middle; padding-top:2px; text-decoration:none;">Web</label></li>

<li style="display:inline;padding-right:10px;">

<input id="site_radio" checked="checked" style="vertical-align:middle;margin-right:5px; "
value="http://bloganda.blogspot.com" name="vs" type="radio"/>

<label for="site_radio" style="display:inline;vertical-align:middle; padding-top:2px; text-decoration:none;">Blog anda</label></li>
</span></form></div>

Setelah di copy paste, jangan lupa untuk mengganti text yang berwarna merah dengan nama blog anda. Selamat mencoba....

source: http://www.bloggerplugins.org/

Pasang google search

2009-06-27T22:01:00.000-07:00

Setelah kemaren saya posting tentang cara pasang yahoo search widget di blog, eh taunya ada yang nanya seperti ini :

Sebenernya sih saya ga kepikirin untuk postingin artikel ini. Kiraian dah pada tahu semua. Eh taunya masih ada yang belom tuh. Makanya saya postingin artikel cara pasang google search widget di blog ini. Buat anda yang juga pengen widget google search, silahkan baca artikel ini sampe tuntas. Untuk screenshootnya google search itu seperti ini :

Untuk memasang google search widget ini, caranya sama seperti pasang yahoo search widget. Anda login dulu di blogger, kemudian masuk ke halaman tata letak lalu tambahkan page element dan pilih yang html/javascript. Selanjutnya, silahkan copy paste kode dibawah dan ganti text yang berwarna merah sesuai dengan keterangan blog anda :

<form action="http://www.google.com/search" method="get">

<input onfocus="this.style.background='#fff';" maxlength="255" value=""
type="text"onblur="if(this.value=='')this.style.background='#fff
url(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)
3px center no-repeat'" style="height:18px;border: solid 1px black; background:#fff
url(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)
3px center no-repeat; position:relative;" size="25" name="q"/>

<input id="btn_undefined" style="position:absolute;padding-left:5px;"
value="Search" src="http://bloggerplugins.googlepages.com/yahoo-search-widget-button.png"
type="image"/><br/>

<div style="margin-top:5px;">

<li style="display:inline;padding-right:10px;margin-top:5px;">
<input checked="checked" value="" name="sitesearch" type="checkbox"/> Web</li>

<li style="display:inline;padding-right:10px;margin-top:5px;">
<input checked="checked" value="http://bloganda.blogspot.com" name="sitesearch"
type="checkbox"/> Blog Anda</li>

</div>
</form>

Nah...setelah copy paste, jangan lupa untuk mengganti text yang berwarna merah dengan nama blog anda...Ok..silahkan dicoba..

Tampilkan jam dan tanggal

2009-06-27T22:00:00.001-07:00

Jika pada kesempatan yang lalu saya posting tentang menampilkan tanggal hari ini di blog, maka untuk lebih memperlengkap postingan tersebut, saya akan memberikan anda semua suatu cara untuk menampilkan Tanggal beserta jam nya (Update). Untuk menampilkan tanggal dan jam di blog, diperlukan suatu kode javascript. Sehingga tanggal dan jam tersebut bisa langsung terupdate sesuai dengan zona waktu. Jika ingin melihat contohnya, anda bisa lihat disini.

Untuk menerapkannya di blogger, anda tinggal memasukan kode javascript berikut ke dalam page element blog anda. Namun...jika anda mengerti dengan javascript, anda bisa mengaplikasikannya di html blog anda. Berikut kodenya :

<script type="text/javascript">
    var dayarray = new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu");
    var montharray = new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");

    var kursusblog = new Date();

    var day = kursusblog.getDay();
    var month = kursusblog.getMonth();
    var daym = kursusblog.getDate();
    var year = kursusblog.getFullYear();

        var currentTime = new Date()
        var hours = currentTime.getHours()
        var minutes = currentTime.getMinutes()

        if (minutes < 10)
                minutes = "0" + minutes

    if (daym < 10)
        daym = "0" + daym;
   
        document.write("<b>Hari ini</b>" + " " + dayarray[day] + ", " + daym + " " + montharray[month] + " " + year);
document.write("<br/>");
document.write("<b>Pukul</b>" + " " + hours + "<blink>:</blink>" + minutes);
</script>

Silahkan copy paste kode tersebut diatas dan aplikasikan di page elemen blog anda. Bila masih ada hal yang belum dimengerti, silahkan bertanya dengan mengisi kolom komentar di postingan ini.

Pasang alexa widget

2009-06-27T21:59:00.000-07:00

Alexa widget merupakan salah satu aksesoris blog yang sangat berguna. Alexa widget ini akan menampilkan suatu nilai traffic atau alexa rank dari suatu blog. Jika misalnya anda masih bingung dengan yang namanya alexa rank, silahkan baca postingan saya mengenai alexa rank. Untuk pasang alexa widget di blogspot, caranya sangat mudah. Bagi anda yang ingin memasangnya, silahkan ikuti langkah berikut :

Buka situs alexa.com
Di halaman pertama, klik webmaster corner (lihat gambar)
Kemudian akan muncul suatu halaman dan klik widget (lihat gambar)
Selanjutnya, silahkan pilih jenis tampilan alexa rank kemudian masukan alamat blog anda di jenis tampilan widget alexa rank. contoh : www.bloganda.blogspot.com
Nah...yang terakhir, silahkan pilih jenis widgetnya kemudian copy paste script yang ada disampingnya ke dalam page element blog anda.

Nah...begitulah mengenai cara pasang widget alexa rank di blogspot. Jika ada pertanyaan, silahkan mengajukan lewat kolom komentar.

Lagi SEO

2009-06-27T21:58:00.000-07:00

Artikel belajar seo ini bukanlah sebuah tutorial mengenai cara beajar seo. Artikel ini sengaja saya posting sebagai bahan gambaran bagi anda untuk memahami bagaimana belajar seo. SEO merupakan suatu hal yang tidak akan pernah lepas dari para blogger. Khususnya bagi mereka yang memang lebih mengutamakan monetize blog ( memaksimalkan blog untuk memperoleh pengahsilan ).

Pertama kali terjun payung di dunia blogger saya sama sekali ga tau apa itu seo. Jangankan itu, dengernya aja belum pernah. Bahkan saya juga sama sekali sangat tidak menyangka jika keyword kursus blog yang saya pilih bisa menjadi no.1 di search engine google. Sebagai bukti silahkan klik disini. Pada awalnya saya bangga dengan hasil tersebut..eh ternyata setelah saya selidiki keyword tersebut masih sangat minim di cari orang. Alhasil pengunjung blog ini pun masih sangat sedikit.

Akhirnya..saya pun mencoba untuk memahami lebih jauh mengenai seo. Intinya..supaya blog kita banyak dikunjungi orang. Terlebih jika kita memang sangat mengandalkan monetize blog yang memang salah satu syarat mutlaknya blog kita harus banyak dikunjungi orang.

belajar seo sebenernya gampang. Cuma untuk memahami sekaligus mengaplikasikan seo itu sendiri yang susah. Makanya banyak orang bilang seo itu gampang - gampang susah. Tapi jangan putus asa kalo kita yakin dan mau serius ga ada yang ga mungkin kok.

Di internet ini banyak sekali artikel - artikel tentang seo. Walaupun kita ga tau yang nulis artikel tersebut memang benar - benar memahami seo atau tidak. Tapi lepas dari itu semua, inti dari artikel seo itu yang harus kita cermati bukan siapa yang buatnya. Karena yang namanya ilmu akan datang dari siapa saja bukan dari kalangan tertentu.

Nah..sebelum mengakhiri postingan ini, saya akan sedikir berbagi tips bagaimana cara belajar seo yang baik (menurut saya) dan memang hal ini yang sedang saya coba jalani sekarang. Jika memang menurut anda bermanfaat, silahkan ambil dan ikuti, jika tidak...lewat saja OK. Berikut tips dari saya mengenai cara belajar seo :

Pelajari SEO dengan membaca artikel - artikel orang lain.
Simak dan cermati inti dari setiap artikel seo itu
Coba praktekan sesuai dengan apa yang anda pelajari
Yang terakhir...dan yang paling penting jangan pernah ingin terburu - terburu untuk memperoleh hasil karena segala sesuatu itu butuh waktu dan pengorbanan

Mungkin itu aja dulu sedikit mengenai belajar seo. Mudah - mudahan bermanfaat ya...

Nomor komentar

2009-06-27T21:57:00.002-07:00

Blogger Numbering Comment atau no. urut komentar ini merupakan salah satu blogger hack yang bisa menampilkan no. urut di setiap komentar. Walaupun artikel ini dah banyak yang tulis (kalo saya search di google) tapi barangkali ada diantara temen2 yang belum tau dan ingin pasang blogger numbering comment ini. Untuk lebih jelasnya mengenai bagaimana blogger numbering comment ini, berikut screenshootnya :

Bisa anda lihat hasil dari blogger numbering comment ini. Fungsinya yaitu menambahkan no. urut sesuai komentar yang ada pada blog anda. Blogger hack ini saya dapet dari fernando di salah satu postingannya tentang numbering comment

Jika anda tertarik untuk pasang blogger hack ini, berikut langkah2nya :

Masuk ke lauout > edit html > kasih anda centang pada kolom expand template widget.
Setelah itu cari kode html ini <dl id='comments-block'> kemudian tambahkan dibawahnya kode (hanya) yang berwarna merah sesuai dengan letaknya.

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<div class='' expr:id='data:comment.id'>

<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/>

<span class='numberingcomments'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt>

<dd class='comment-body'>
.......
</dd>

</div>

</b:loop>
</dl>

Selanjutnya, copy paste kode css berikut di atas kode html ]]></b:skin>:


.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*posisi angka komentar*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}

.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;}

Save template..kemudian lihat hasilnya

Meningkatkan alexa rank

2009-06-27T21:57:00.001-07:00

Postingan ini merupakan posting lanjutan tentang alexa rank. Kali ini saya akan berbagi tips meningkatkan nilai Alexa Rank anda. Mungkin sebagian dari anda sudah banyak yang sering membaca mengenai cara meningkatkan alexa rank ini. Karena memang, mengenai tips meningkatkan alexa rank sudah banyak dibahas di blog lain. Tetapi walaupun begitu, ga ada salahnya jika kursus blog juga posting artikel ini.

Untuk meningkatkan nilai alexa rank (maksudnya nurunin angkanya), menurut apa yang sudah saya coba selama ini ada 4 cara :

Pasang widget Alexa di blog (wajib).
Bagi yang belum tau, silahkan baca cara pasang widget alexa rank.

Pasang Alexa toolbar di browser (harus).
Bagi yang pake browser IE silahkan download di http://download.alexa.com/ dan yang pake firefox silahkan download di https://addons.mozilla.org/en-US/firefox/addon/5362.

Posting tulisan mengenai Alexa

Tingkatkan traffic pengunjung setiap harinya
Terutama pengunjung dengan IP unik.

Nah...itulah cara saya meningkatkan (menurunkan) alexa rank di blog ini. Yah..walaupun artikelnya singkat dan padat (pede), mudah - mudahan bisa bermanfaat.

Membuat 2 kolom sidebar blog

2009-06-27T21:55:00.002-07:00

Cara membagi 2 kolom sidebar blog atau cara membagi kolom sidebar blog menjadi 2...?! bingung juga sih kasih judul postingan ini. Tapi saya yakin anda pun sudah tahu dengan maksud judul postingan diatas. Postingan kali ini seputar otak atik template blog. Jika pada postingan terdahulu saya tulis tentang bagaimana cara memperlebar halaman blog, maka kali ini saya akan coba berbagi tentang cara membagi 2 kolom sidebar blog atau menambahkan kolom di sidebar blog.

Cara ini sudah sering saya aplikasikan di template default blog minima. Tapi walaupun demikian, masih tetap bisa diaplikasikan di template blog lain karena intinya sama saja. Sebelum mulai membahas mengenai cara membagi 2 kolom sidebar blog, ada baiknya jika anda memperlebar dulu kolom sidebar blog anda. Karena jika kolom sidebar blog anda kecil, maka kalo di bagi 2 akan menjadi tambah kecil. Oleh karena itu, anda harus memperlebar dulu sidebar blog anda. Untuk cara memperlebarnya, anda bisa baca di postingan saya tentang bagaimana cara memperlebar halaman blog.

Nah..kalo sekiranya lebar kolom sidebar blog anda sudah cukup, maka saatnya untuk membagi 2 kolom sidebar tersebut. Silahkan simak langkah - langkahnya :

1. Proses editing kode css
Setelah login di blogger, langsung masuk ke menu edit html dan tidak usah kasih tanda centang pada kolom expand template widget. Selanjutnya, cari kode css seperti ini :

#sidebar-wrapper {
  width: 190px;
  float: $endSide;
  word-wrap: break-word; 
  overflow: hidden;    
}

tidak harus sama sih, intinya cari kode css untuk membuat sidebar. Jika pada kode diatas yaitu #sidebar-wrapper. Kemudian liat berapa jumlah width-nya, jika pada kode diatas width-nya adalah 190px.

Nah..logikanya jika ingin di bagi 2, maka jumlah width sidebar yang pertama harus dibagi 2. Misal..pada kode di atas width-nya 190px. Maka untuk membaginya tinggal 190px : 2 sehingga lebar masing - masing kolom sidebar adalah 95px. Memang betul, tapi ingat kita harus ngasih jarak antara sidebar yang ke-1 dengan yang ke-2 supaya tidak berdempetan. Bagaimana caranya..?! sebelum membagi 2, kurangi dulu sesuai dengan jarak yang di inginkan. Misal...saya mau kasih jaraknya 20px, maka lebar sidebar yang ke-1 menjadi 190px - 20px dan hasilnya 170px. Nah..baru setelah itu dibagi 2, sehingga lebar masing - masing sidebar menjadi 85px.

Setelah kita menentukan lebar masing - masing sidebar, selanjutnya tinggal mendeklarasikannya di kode css. caranya....copy paste kode sidebar yang pertama menjadi 2 dan ubah namanya menjadi #sidebar2-wrapper. Misal..untuk kode diatas menjadi seperti ini :

#sidebar-wrapper {   --> kode sidebar awal
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

#sidebar2-wrapper {

--> kode sidebar 2 (hasil copy paste)

width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Selanjutnya, ubah width (lebar) masing - masing sidebar seperti yang telah dibahas tadi menjadi 75px. Sehingga hasilnya menjadi seperti ini :

#sidebar-wrapper {   --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

#sidebar2-wrapper {

--> kode sidebar 2 (hasil copy paste)

width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Langkah yang terakhir untuk proses editting kode css yaitu menambahkan jarak antara 2 kolom sidebar tersebut. Caranya, tambahkan di kode css #sidebar2-wrapper berupa perintah untuk pendeklarasian jarak, yaitu margin. Sehingga hasilnya seperti ini :

#sidebar-wrapper {   --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

#sidebar2-wrapper {

--> kode sidebar 2 (hasil copy paste)

width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
margin-right: 20px;
}

2. Aplikasi di kode html
Nah..untuk proses editting kode css sudah selesai. Kemudian saatnya untuk mengaplikasikan kode css tersebut di kode html blog. caranya..cari kode html seperti ini dan fokuskan pad text yang berwarna hijau saja. Karena untuk yang berwarna merah tiap template pasti berbeda:

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
      </div>

Jika sudah ketemu, copy paste text yang berwarna hijau di bawah kode html tersebut. Kemudian rubah type id-nya menjadi sidebar2. Maka hasilnya :

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
      </div>

<div id='sidebar2-wrapper'>
        <b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
      </div>

Awas..jangan sampe salah. Jika sudah selesai silahkan klik dulu pratinjau / preview. Apabila hasilnya sudah bagus baru di save. Tapi...apabila masih ada error atau kesalahan, klik bersihkan edit / clear edit, kemudian ulangi langkahnya dari awal.

Waduh..cape juga ya ngetik banyak gini. Yaa..mudah2an bisa dimengerti dan tidak ada kesalahan dalam aplikasinya. Jika ada pertanyaan, silahkan bertanya di kolom komentar ya...

Dah ngantuk nih...tidur dulu ah........

Tentang Rss

2009-06-27T21:55:00.001-07:00

Apa itu Rss Feed

Rss feed merupakan sebuah file berformat XML untuk sindikasi yang telah digunakan (diantaranya dan kebanyakan) situs web berita dan weblog. Teknologi yang dibangun dengan RSS mengijinkan kita untuk berlangganan kepada situs web yang menyediakan umpan (feed) RSS, biasanya situs web yang isinya selalu diganti secara reguler. Untuk memanfaatkan teknologi ini kita membutuhkan layanan pengumpul. Pengumpul bisa dibayangkan sebagai kotak surat pribadi. Kita kemudian dapat mendaftar ke situs yang ingin kita tahu perubahannya. Namun, berbeda dengan langganan koran atau majalah, untuk berlangganan RSS tidak diperlukan biaya, gratis. Tapi, kita biasanya hanya mendapatkan satu baris atau sebuah pengantar dari isi situs berikut alamat terkait untuk membaca isi lengkap artikelnya. (wikipedia)

Manfaat RSS Feed

Dengan adanya RSS feed, akan sangat memudahkan setiap orang untuk berlangganan suatu artikel / informasi terbaru dari sebuah situs berita atau weblog. Misalnya..jika anda ingin berlangganan artikel terbaru dari kursus blog ini, anda tinggal memilih jenis langganan yang anda sukai

Berlangganan via RSS Feed
Berlangganan RSS Feed via email

Intinya jenis langganan apapun yang anda pilih, anda akan mendapatkan informasi / update terbaru dari situs atau weblog yang anda ikuti. Itulah sekilas tentang RSS Feed.

Daftar isi blog

2009-06-27T21:54:00.001-07:00

Cara buat daftar isi blog ini merupakan alternatif lain dari postingan saya sebelumnya tentang pasang widget daftar isi blog. Di postingan yang lalu, proses membuat daftar isi blog-nya menggunakan javascript sehingga proses loadingnya lumayan berat. Untuk daftar isi yang saat ini akan dibahas, cara buatnya tidak menggunakan kode javascript sehingga akan lebih mudah dan cepat proses loadingnya.

Cuma bedanya, antara postingan yang lalu (widget daftar isi blog) dengan postingan yang ini terletak pada cara menampilkannya. Pada postingan yang lalu, daftar isi blog akan langsung tampil ketika halaman blog terbuka. Namun untuk daftar isi blog yang sekarang, untuk menampilkannya harus terlebih dahulu membuat suatu link atau tautan yang akan menampilkan daftar isi blog tersebut. Sebagai contoh, klik disini untuk melihat daftar isi dari kursus blog

So..buat anda yang ingin tau cara buat daftar isi blog ini, silahkan ikuti langkah - langkahnya :

Langkah ke-1

Login di Blogger kemudian langsung menuju ke edit html. Jangan lupa kasih tanda centang pada kolom expand template widget.

Selanjutnya, cari kode html berikut :

<b:include data='post' name='post'/>

Kalo sudah ketemu, hapus kode barusan dan ganti dengan kode dibawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:5px;border-right:1px solid #ebebeb;
border-bottom:1px solid #ebebeb;margin-bottom:5px;background:#f2f2f2;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Kemudian save template.

Langkah ke-2

Untuk langkah yang ke-2, adalah penempatan link tautan yang akan menampilkan daftar isi blog nantinya. Supaya lebih mudah, saya sarankan untuk menempatkannya di menu navigasi blog anda. Tapi, jika anda ingin menempatkannya di sidebar blog (misalnya) juga ga pa pa. Yang penting, link ini tampil di halaman blog anda. Ok...berikut kode link yang harus anda pasang :

<a href="http://NamaBlog.blogspot.com/search?max-results=999">Daftar isi Blog</a>

Tapi ingat, jangan lupa untuk mengganti text yang warna merah dengan nama blog anda. Kalo sudah selesai, save lagi kemudian coba anda liat hasilnya untuk melihat daftar isi blog anda.

Tentang feedburner

2009-06-27T21:52:00.000-07:00

Salah satu cara untuk memaksimalkan suatu blog adalah dengan mendaftarkan blog tersebut ke feedburner. Secara tidak langsung, layanan gratis yang disediakan feedburner dapat membantu meningkatkan traffic blog kita. Sebenernya ada layanan feed lain yang serupa seperti feedblitz dan rmail. Cuma kali ini saya akan bahas feedburner aja.

Apa itu Feedburner

Berikut adalah kutipan dari situs feedburner mengenai pengertian feedburner

FeedBurner is the leading provider of media distribution and audience engagement services for blogs and RSS feeds. Our Web-based tools help bloggers, podcasters and commercial publishers promote, deliver and profit from their content on the Web

Sedangkan kalo menurut saya pribadi, Feedburner merupakan penyedia jasa layanan publikasi suatu web / blog dengan cara menyebarluaskan content dan rss feeds suatu web / blog. Secara tidak langsung feedburner akan membantu mempromosikan suatu web / blog dengan layanan yang dimilikinya. Sehingga dapat meningkatkan traffic pengunjung web / blog tersebut. Untuk lebih jelasnya mengenai feedburner, langsung aja ke situsnya atau klik disini

Cara Daftar Blog ke Feedburner

Setelah membahas mengenai apa itu feedburner, sekarang bagian cara mendaftarkan blog ke feedburner.

Langkah pertama yang harus dilakukan adalah dengan mengunjungi situs feedburner di http://www.feedburner.com/. Selanjutnya, akan muncul suatu halaman web seperti ini :

Pada kotak yang ditunjukin tanda panah merah, masukan alamat feed blog anda. Contoh untuk blog ini http://kursus-blog.blogspot.com/feeds/posts/default. Silahkan ganti alamat blognya dengan alamat blog anda. Setelah itu langsung klik next (ga usah checklist kolom i am a podcaster).

Kemudian akan muncul lagi suatu halaman seperti ini:

Isi kolom tersebut sesuai data blog anda. Kalo dah beres, klik activate feed. Jika ada kesalahan pengisian, coba ulangi lagi sampai sukses. Kesalahan biasanya pada pengisian kolom feed address karena udah ada nama feed dengan address yang sama. Untuk mengatasinya gunakan nama feed yang unik (ga harus sesuai dengan judul blog), setelah itu klik activate feed lagi. Lalu akan muncul sebuah halaman seperti ini :

Setelah alamat feed blog anda jadi, anda langsung saja menuju ke blogger untuk mengubah settingan feed blogger. Caranya masuk ke menu pengaturan kemudian klik feed situs. Lalu masukan alamat feed anda yang tadi di buat ke kotak isian posting URL pengubahan arah feed lalu save.

Kembali ke laptop feedburner. Langsung klik aja skip directly to feed management (ga usah klik next). Nah...setelah itu maka feed blog anda di feedburner sudah jadi. Selanjutnya tinggal cara setting di feedburner

Tentang SEO

2009-06-27T21:51:00.002-07:00

Pada waktu saya mulai menyelami Dunia Internet, Saya sering bertanya pada diri saya sendiri tentang bagaimana cara orang bisa tau Blog atau Situs kita...Ternyata setelah saya pelajari, Orang datang ke situs / blog kita yaitu dengan 2 hal : 1. Mesin Pencari (Google, Yahoo) 2. Referensi dari blog atau situs lain. Nah....terus saya berpikir lagi bagaimana situs atau blog saya bisa muncul di Search Engine (Mesin Pencari) dan ternyata setelah saya cari2 informasi mengenai hal tersebut, barulah saya tahu kenapa suatu situs bisa muncul di search engine, yaitu dengan istilah SEO. Apa itu SEO.....?

SEO adalah kepanjangan dari Search Engine Optimatization intinya, SEO adalah suatu cara untuk meningkatkan rangking situs / blog kita di Mesin Pencari. Sobat tau apa itu mesin pencari...? mesin pencari adalah suatu mesin yang bisa mencari atau yang lebih pasnya melacak situs kita dengan kata kunci tertentu. Contoh : sobat coba masuk ke www.google.com dan ketikkan kata kuncinya yaitu Kursus Blog. Hasilnya....sobat lihat gambar dibawah ini :

Sobat bisa lihat di gambar diatas, kalo blog ini ada di urutan ke 4 hal 1 dengan kata kunci Kursus Blog (Padahal blog ini usianya masih belum 1 bulan lho.....). Mengapa bisa demikian...? karena saya mengoptimasi kata kunci untuk blog ini dengan kata Kursus Blog.

Kembali ke masalah SEO. Sebenarnya, Teknik SEO itu sendiri, lebih diterapkan untuk blog / situs yang memang sifatnya commercial. Dalam artian blog / situs tersebut memang ditujukan khusus untuk bisnis. Nah...kalo kita selaku blogger dan memang kalo kita buat blog hanya sekedar hobi tanpa ada latar belakang bisnis maka SEO itu tidak terlalu penting.

Tapi kalo sobat bener2 pengen tahu mengenai masalah SEO beserta tips dan trik SEO supaya blog / situs kita bisa muncul di search engine, silahkan ikuti terus Kursus Blog ini atau silahkan sobat daftar untuk berlanggan artikel Kursus Blog ini.

Emotion di komentar

2009-06-27T21:51:00.001-07:00

Kalo kata o-om sih "ga akan lengkap kalo komentar tanpa emotions". Yupz..emang betul banget sih kayak gitu soalnya dengan adanya emotions kita jadi bisa mencurahkan perasaan kita. Nah...untuk pasang emotions di Kotak Komentar ini sebelumnya anda harus sudah pasang dulu kotak komentar blogspot, kalo belum silahkan menuju ke bikin kotak komentar di bawah postingan blog. Kalo udah langsung aja ikutin cara2 ini :

Langkah #1 (Pasang Javascript)
Anggap saja anda sekarang telah berada di menu edit HTML, Silahkan copy paste kode ini persis diatas kode tag body penutup --> </body>

<script src='http://mizwar.blog.googlepages.com/senyum.js' type='text/javascript'/>

Jadi posisi sesudah di copy-nya seperti ini :

<script src='http://mizwar.blog.googlepages.com/senyum.js' 
type='text/javascript'/>

</body>

Nah....kalo udah silahkan kasih tanda centang pada kotak expand template widget. Lalu cari kode seperti ini :

<p class='comment-footer'>

 <b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'

expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>


</b:if>

</b:if>

</p>

Jika sudah ketemu, copy paste kode berikut di bawah <p class='comment-footer'> (lihat kode diatas)

save template dan selesai. Untuk cara pakai-nya tinggal tambahin aja tanda emotions sesuai gambarnya.

Kode HTML di postingan

2009-06-27T21:49:00.000-07:00

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>

<p align='justify'>Tes kode html</p>

</code>

Perhatikan text yang warna merah. Itu adalah kode2 untuk mengganti karakter html. Berikut beberapa karakter html yang biasanya dipakai :

Karakter HTML	Pengganti Karakter
<	<
>	>
&	&
"	"
±	±
Spasi
©	©

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

Membuat tab view widget

2009-06-27T21:16:00.000-07:00

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...!!.

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

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'>

<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>
<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 <= nPost) ?
json.feed.entry.length : nPost;

for (var i = 0; i < numberPost; i++) {
var entry = json.feed.entry[i];
text += "<li>" + "<a href='" + cb.getLink(entry, "alternate")
+ "'>" + 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 < 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 < 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

Menyisipkan tombol digg

2009-06-27T21:15:00.001-07:00

Kemaren ada seorang teman yang nanyain bagaimana cara menyisipkan tombol digg di postingan blog seperti blog ini, nah....sekarang, bagi sobat yang memang menginginkan hal tersebut bisa ikuti langkah - langkah menyisipkan tombol digg di postingan sebagai berikut :

Ups....lupa, sebelum memulainya, pastikan pada settingan blog anda yaitu sudah di set ke enabled post page sudah di set ke yes. Ok....silahkan ikuti langkah - langkahnya :

Seperti biasa, Login dulu di Blogger
Lalu masuk ke Layout trus Edit HTML.
Sebelum otak atik template, sebagai keamanan silahkan download dulu template..setelah itu, beri tanda checklist pada Expand Template Widget.
Setelah itu, silahkan cari kode html seperti ini :

Kalo sudah ketemu, silahkan copy paste salah satu kode berikut :

Menampilkan Tombol Digg di Pojok Kanan Atas Postingan

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

Untuk Menampilakn Tombol Digg di Pojok Kiri Atas POstingan

<div style='float:left; margin-right:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <p><data:post.body/></p>

Menampilkan Tombol Digg di bawah Postingan

<p><data:post.body/></p><div style='float:right; margin-left:10px;'> <script type='text/javascript'> digg_url="<data:post.url/>"; </script> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div>

Selamat Mencoba....

Tampilan label dengan daftar isi

2009-06-27T21:13:00.000-07:00

Setelah jalan-jalan liat blog orang2 yang bener jago blogging, akhirnya saya menemukan trik bagaimana cara memaksimalkan tampilan label / archive anda. Konsekuensinya....setelah kita mengklik label / archive kita, maka yang akan keluar dari label tersebut bukan isi dari posting, melainkan hanya judul post-nya saja alias daftar isi blog. sebagai contohnya, silahkan anda klik Tutorial Blogger pada menu navigasi blog saya ini. Ok...langsung aja saya kasih bagaimana caranya.

Login di Blogger.
Pada menu Dashborad klik Layout lalu edit HTML.
Kasih centang pada kolom Expand Template Widget
Trus cari kode seperti di bawah ini :

<b:include data='post' name='post'/>

kalo sudah ketemu, silahkan ganti kode tersebut dengan kode HTML di bawah ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> <data:post.title/></a><br/><br/> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>

Kalo udah selesai, save template anda

Menampilkan label dengan dropdown

2009-06-27T21:12:00.000-07:00

Tampilan menu Label untuk default blogspot yaitu dengan menu ul (list style). Mungkin untuk sebuah blog yang mempunyai label sedikit, tampilan tersebut tentu tidak masalah karena hanya memerlukan sedikit space di bagian sidebar. Nah....coba kalo blog tersebut mempunyai label yang banyak....berapa banyak space yang habis untuk memuat label tersebut.....Tentunya hal ini akan sangat mempengaruhi efisiensi blog kita. Nah...supaya tampilan label tidak terlalu menghabiskan space sidebar anda, saya punya trik bagaimana cara menampilkan label dengan dropdown menu. Berikut Tutorialnya :

Seperti biasa, Login dulu di blogger
Di jendela dashboard, klik menu layout lalu pilih edit HTML
Setelah itu, jangan lupa kasih tanda centang di expand template widget
Lalu cari kode seperti di bawah ini :

<ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul>

Kalo ngga ketemu, berarti menu label anda belum terpasang. Silahkan pasang terlebih dahulu lalu ikuti langkah2nya lagi. Kalo sudah ketemu, ganti kode tersebut dengan kode di bawah ini :

<br /> <select onchange='location=this.options[this.selectedIndex].value;'> <option>Select a label</option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>) </option> </b:loop> </select>

Klik save dan selesai.....

Selamat mencoba...

Membuat related post

2009-06-27T21:11:00.000-07:00

Mungkin anda sudah tidak asing dengan apa yang dinamakan Related Posts. Kalo misalnya belum tahu, saya kasih sedikit gambaran, Related Posts itu adalah Artikel yang Bersangkutan dimana kalo misalnya kita menampilkan suatu artikel maka akan tampil juga artikel lain dengan label yang bersangkutan. Pasti dah ngerti kan sekarang......

Ok....sekarang bagaimana cara buat Related Posts. Silahkan ikuti tutorialnya.

Login di Blogger
di menu Dashboard klik Layout --> edit HTML.
Kasih tanda checklist pada kolom Expand Template Widget.
Cari kode HTML berikut :

<data:post.body/>
Kemudian buka link berikut Related Posts code dan copy semuanya
Simpan kode yang barusan di copy seperti ini :

<data:post.body/> (Simpan kodenya disini)
Save Templates dan selesai

Selamat Mencoba.....!

Memodifikasi template

2009-06-27T21:09:00.000-07:00

Pada postingan kali ini, saya akan memberikan tips bagaimana cara memodifikasi template blogger baru anda dengan mudah...

A. Memasuki Halaman Template
1. Jika anda sudah berada di blog anda (sudah login), klik pada menu customize.

2. Jika anda berada dalam suatu blog dan ingin memodifikasi blog anda yang lain, klik pada dashboard.

3. Jika sudah masuk ke dashboard klik layout.

4. Jika sudah masuk ke setting halaman, klik menu template.

B. Ganti ke Edit HTML menu.

Untuk melihat kode struktur template anda, klik edit HTML. Pada defaultnya, Template tersebut tidak menampilkan struktur lengkap sebuah template untuk setiap widget. Jadi apa yang anda liat adalah sebagian kecil kode dari template tersebut. Lihat gambar di bawah ini :

(1) Sebelum memulai memodifikasi template anda, sangat aman apabila anda mendownload dulu template anda.

(2) Jika terdapat kesalahan dalam modifikasi template, silahkan upload kembali template anda.

(3) Ini adalah suatu cara untuk menampilkan kode template anda sepenuhnya (kasih tanda centang)

(4) Untuk menambahkan widget baru, masukan diantar b:section tab di dalam id='sidebar'.

C. Menambahkan kode CSS atau Java Script.
(1) Cara termudah untuk menambahkan kode CSS yaitu diatas kode html

]]>

(2) Nah...kalo untuk kode javascript, cara yang termudah yaitu di bawah kode di atas. Untuk lebih jelasnya...lihat gambar di bawah ini :

(3) Selesai......

Daftar ke search Engine

2009-06-27T21:08:00.000-07:00

Materi Tips SEO kali ini adalah mengenai Cara Daftar Blog ke Serach Engine. Daftar Blog ke search engine dimaksudkan, supaya...blog kita dapat terindeks di search engine (Google, Yahoo, Msn, dll). Pernah ga terbayang kalo blog kita muncul di hal pertama di search engine google misalnya? Bagaimana hal tersebut bisa terjadi...salah satunya adalah dengan mendaftarkan situs/blog kita search engine. Berikut cara - caranya :

Daftar situs/blog di google
Anda pasti sudah tidak asing dengan google. Ya...karena google merupakan mesin pencari (search engine) terbaik saat ini. Nah..supaya blog kita muncul di mesin pencari ini, silahkan daftar kan blog anda dengan mengunjungi www.google.com/addurl. Selanjutnya silahkan isi form2 yang disediakan sesuai dengan data situs/blog anda.

URL --> isi dengan alamat blog anda. contoh = http://bloganda.blogspot.com
Comments --> isi dengan keyword pada bloganda
Optional --> isi sesuai text yang tertulis (untuk menghindari spam)

Nah....Selesai deh

Daftar blog di yahoo
Selain google, search engine lain yang biasa dipakai orang2 untuk mencari sebuah situs adalah yahoo. Supaya blog anda terindeks di mesin pencari ini, silahkan kunjungi https://siteexplorer.search.yahoo.com/submit. Untuk di mesin pencari ini, anda tinggal masukan alamat blog anda dan alamat blog feed anda. contoh untuk alamat blog = http://bloganda.blogspot.com contoh untuk feedblog = http://feeds.feedburner.com/feedanda (kalo anda daftar di feedburner).

Daftar blog di Msn
Mungkin untuk mesin pencari yang ini anda agak sedikit asing mendengarnya. Memang sih saya juga merasa demikian. Tapi ga ada salahnya kalo anda mendaftarkan blog anda di msn, gampang kok tinggal kunjungi http://search.msn.com/docs/submit.aspx?FORM=WSDD2. lalu isi text sesuai gambar (untuk menghindari spam) kemudian masukan url blog anda c:/ http://bloganda.blogspot.com. selesai

Selain diatas sebenarnya ada cara yang lebih mudah untuk daftar ke beberapa search engine secara otomatis tinggal kunjungi ini atau ini lalu masukan url blog anda.

Sekilas HTML

2009-06-27T21:07:00.000-07:00

Dalam dunia internet ada istilah yang dinamakan dengan kode HTML. Begitu juga dengan blog, selain mencakup CSS dan Java Script, HTML juga sangat penting peranannya. Malah...kalo menurut saya, HTML Justru fondasi utama dalam pembuatan sebuah blog. Tanpa kode HTML, kode CSS dan Java Script tidak akan berfungsi. Nah...kali ini saya akan sedikit membahas mengenai masalah HTML.

Pengertian HTML

HTML (Hyper Text Markup Language) yaitu suatu bahasa pemrograman yang digunakan untuk pembuatan web / situs, yang berfungsi untuk menampilkan atau menginstruksikan berbagai macam informasi dalam sebuah browser internet.

HTML biasanya mencakup kode kode. yang mana kode kode tersebut berisi perintah atau instruksi dalam perancangan sebuah web atau situs.

Untuk membuat kode HTML, sekarang ini sudah banyak sekali program yang bisa digunakan. Diantaranya....Notepad, Ms Frontpage, atau Macromedia. Mungkin sobat semua sudah tidak asing dengan software tersebut. Karena khusus untuk notepad dan ms frontpage itu biasanya sudah ada di komputer sobat.

Struktur Dasar HTML

Untuk mengetahui bagaimana itu HTML, saya akan berikan stuktur dasar penulisan HTML :
<html> <head> <title> - Judul Web - </title> </head> <body> - Isi Web - </body> </html>

Nah...kode-kode diatas adalah kode dasar dari HTML. Dengan kode diatas saja sobat sudah bisa membuat web/situs cuma sangat-sangat sederhana sekali. Ok......sekian dulu postingan saya mengenai HTML. Mudah-mudahan sobat semua sudah punya gambaran mengenai HTML. Ya...walaupun cuma sedikit tapi setidaknya kalo ada yang nanya dah tau..... Untuk lebih jelasnya....mengenai HTML, stay tune terus di blog ini....karena saya juga akan kasih tau mengenai kode kode yang biasa dipakai dalam HTML. Ok....Wassalam

Merubah tanggal dengan icon kalender

2009-06-27T21:03:00.000-07:00

Haloo semua....Selamat pagi. Aku punya hacking blog yang baru nih....walaupun aku baru tahu, padahal orang lain sudah tahu dari dulu . Nah...untuk blog hack yang ini saya akan kasih tau bagaimana Mengganti Tanggal dengan Icon Kalender. Pengen tahu contohnya...? Lihat aja nih di blognya mr. robbex. Dah liat...? Pengen tau caranya...?Ok deh langsung aja ya......

Setelah login di blogger, dan sebelum edit HTML anda, pastikan dulu format tanggal blog anda harus mm/dd/yyyy. Kalo belum, silahkan ganti dulu. Caranya...setting--->>formatting trus ganti date header format-nya dengan mm/dd/yyyy. kalo ga tau formatnya seperti ini : 1.25.2008.
Nah..langkah ke-2 yaitu edit HTML. caranya masuk ke layout--->>edit HTML jangan lupa kasih tanda centang di Expand Template Widget.
Kalo udah, Silahkan cari kode HTML di bawah ini :
<TITLE><data:blog.pageTitle/></TITLE>
Kalo sudah ketemu, copy paste script berikut dibawah kode HTML yang tadi :
<SCRIPT type='text/javascript'> //<![CDATA[ function date_replace(date) { var da = date.split('.'); var day = da[1], mon = da[0], year = da[2]; var month = ['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>"); } //]]> </SCRIPT>
Kalo udah, cari kode berikut :
h2.date-header { background:none; margin:1.5em 0 .5em; border:0px; font-size:80%; color:#b33c3c; font-style:normal; }
Kalo dah ketemu, copy kode berikut di bawah kode diatas :
.dateblock { background: url("http://mizwar.blog.googlepages.com/biru.gif") no-repeat; width: 55px; margin: 0; font-weight: bold; height: 50px; /*position: absolute; top: 0; left: 0;*/ float: left; text-align: center; } .month { font-size: 11px; width: 34px; margin-top:4px; margin-bottom:3px; margin-left:5px; margin-right:5px; text-transform: uppercase; color: #fff; } .day { color:#3366CC; font-size: 19px; width: 37px; margin: 0 5px; }

Keterangan: Kode http://mizwar.blog.googlepages.com/biru.gif adalah gambar kalender. Kalo anda ingin mengganti gambar kalender tersebut, silahkan ganti text biru.gif dengan text kalender di bawah ini :

Blue.gif cyan.gif hijau.gif
orange.gif pink.gif ungu.gif
hitam.gif kuning.gif merah.gif

Untuk mengganti warna text bulan, silahkan ganti kode heksa warna #fff dengan warna sesukakamu. Begitu juga jika ingin mengganti warna text tanggal, silahkan ganti kode heksa #3366cc dengan kode warna sesukamu.

Apabila letak text bulan tidak sesuai dengan kalender, silahkan ubah kembali marginnya dengan disesuaikan.
Kalo udah selesai, kemudian cari kode html berikut :

<data:post.dateHeader/>
Lalu ganti dengan script ini :

<DIV class='dateblock'> <SCRIPT>date_replace('<data:post.dateHeader/>'); </SCRIPT></DIV>
Save Template dan Selesai

Navigasi dengan CSS

2009-06-27T20:58:00.000-07:00

Dulu sebelum ada yang namanya kode CSS, menu navigasi dibuat dengan menggunakan table dengan kode HTML. Baik itu secara horizontal menu atau vertikal menu. Bahkan, untuk membuat sebuah layout website pun masih pake table. Nah...kalo sekarang udah ga zaman bikin menu navigasi dengan table udah ada cara lain yaitu dengan menggunakan kode CSS. Berikut cara-caranya dan mudah2an dapat dipahami.........

Tutorial Membuat Kode CSS Menu Navigasi

Sebelum dimulai, perlu diketahui bahwa untuk menempatkan kode CSS di blog yaitu harus diantara tag <head> dan </head>. Atau untuk lebih gampangnya, simpan aja diatas kode

]]></b:skin> </head>

Ok....langsung aja ke cara membuat kode CSS untuk menu navigasi.
Pertama anda harus buat dulu kode css untuk tag pengaturan menu navigasi. Lihat kode dibawah ini :

#menu { margin-bottom: 10px; height: 29px; background: transparent ; padding: 0px 0; }

Setelah itu, buat kode CSS untuk merubah format default untuk tag ul dan li

#menu ul { margin: 0; padding: 7px; height: 29px; text-align: center; } #menu ul li { list-style: none; display: inline; }

Maksud dari kode CSS diatas adalah untuk merubah format tag ul dari vertikal ke horizontal serta mengatur margin dan padding tiap menu navigasi. Selanjutnya, buatlah kode CSS untuk membuat variasi link dari menu navigasi. kodenya :

#menu ul li a:link, #menu ul li a:active, #menu ul li a:visited { color: white; margin-bottom:4px; padding: 13px 7px 13px 7px; font-size: 1em; font-family: 'lucida grande', arial, sans-serif; font-weight: bold; text-decoration: yes; background: url(http://i283.photobucket.com/albums/kk315/ meezanx_2008/menu.gif) repeat-x; background-position:center; } #menu ul li a:hover { color: white; }

Nah.....kode2 diatas itu semua adalah Tutorial mebuat kode CSS menu navigasi. Untuk lebih jelasnya dan cara menyimpan kode tersbut di template blog anda ikuti langkah2 berikut :

Login ke Blogger lalu pilih layout kemudian edit HTML
Sebagai kemanan silahkan download dulu template anda
Ingat....Jangan kasih tanda checklist pada kotak Expand Template Widget.
Cari kode berikut :

]]></b:skin>
</head>

Kalo sudah ketemu. silahkan copy paste kode berikut di atas kode HTML tadi

#menu { margin-bottom: 10px; height: 29px; background: transparent ; padding: 0px 0; } #menu ul { margin: 0; padding: 7px; height: 29px; text-align: center; } #menu ul li { list-style: none; display: inline; } #menu ul li a:link, #menu ul li a:active, #menu ul li a:visited { color: white; margin-bottom:4px; padding: 13px 7px 13px 7px; font-size: 1em; font-family: 'lucida grande', arial, sans-serif; font-weight: bold; text-decoration: yes; background: url(http://i283.photobucket.com/albums/kk315/meezanx_2008/menu.gif) repeat-x; background-position:center; } #menu ul li a:hover { color: white; }

Setelah selesai copy paste nya, cari kode berikut :

<div id='content-wrapper''>

Kalo sudah ketemu (harus) copy kode berikut di atas kode html tadi

 <div id='menu'> <div style='display:none;'> <img alt='preload' src='menuon.png'/> </div> <ul> <li><a href='URL ANDA' target='_blank">Text Anda</a></li> <li><a href='URL ANDA' target='_blank">Text Anda</a></li> <li><a href='URL ANDA' target='_blank">Text Anda</a></li> <li><a href='URL ANDA' target='_blank">Text Anda</a></li> </ul> </div> 

Catatan Penting :

Ganti URL ANDA dengan link yang anda maksud dan Text Anda dengan nama dari masing - masing link. Lihat Cara Membuat Link.
Jika anda mengerti kode CSS, anda bisa ganti kode CSS-nya, sesuai dengan kebutuhan anda.

Kalo sudah selesai, save template.

OK....Selamat mencoba...

Membuat text area

2009-06-27T20:57:00.000-07:00

Apa itu Text Area....? Untuk lebih memudahkan sobat, silahkan lihat di Bag. Sidebar blog ini dengan judul "Tukeran Link yu". Dimana.....di dalamnya ada kode-kode HTML untuk di copy paste. Memang setiap blog yang pasang text area, rata2 berfungsi untuk copy paste kode HTML bagi para pengunjungnya, Baik itu untuk tukeran link, atau pun untuk menyimpan kode2 HTML atau javascript yang nantinya akan di copy paste oleh pengunjung. Nah...bagaimana cara membuatnya, Silahkan copy paste kode di bawah ini :

<textarea rows="4" cols="20" name="code"> Simpan Text atau Kode HTML disini</textarea>

Nah...Text yang berwarna biru itu, tinggal sobat ganti sesuai apa yang mau ditulis didalam text area tersebut. Jadi kalo lihat kode HTML di atas, hasilnya akan seperti ini :

Simpan Text atau kode HTML disini

Untuk mempermudah pemahaman sobat, berikut keterangan dari kode html diatas :

rows="4" --> Panjang area (Bisa diganti sesuai keinginan)
cols="20" --> lebar area (Bisa diganti sesuai keinginan)

Nah.....sekarang pasti sudah tau kan...?? Gampang kok.......Selamat Mencoba.

Tambahan, kalo sobat pengen text area yang seperti ini :

Selesai

Membuat text bergerak

2009-06-27T20:52:00.000-07:00

Sebelum saya membahas mengenai marquee, saya akan berbicara sedikit mengenai apa itu marquee. Seperti judul postingan di atas, Marquee adalah Text Bergerak. Masih belum ngerti juga....?? silahkan lihat di bagian sidebar blog ini yang judulnya kerabatku.

Nah...pastinya kalo sudah liat itu sobat pasti tau apa itu marquee. OK.....sekarang saatnya bagaimana cara membuat marquee tersebut. Eittt tapi tunggu dulu...sebagai pengetahuan sobat saja, marquee bisa digunakan untuk text bergerak, link, dan gambar. Dan juga marque bisa digunakan di semua bagian blog. Tentunya....sobat harus tahu dulu bagaimana cara bikinnya . Ok..deh kita mulai aja.

Format dasar Marquee
Sebuah marquee mempunyai format seperti berikut :

<marquee onmouseout="this.start()" direction="up" align="center" scrollamount="2" height="100px" onmouseover="this.stop()" width="100%">TEXT atau LINK atau URL gambar anda</marquee>

Nah....pada kata yang berwarna biru itu, silahkan ganti dengan Text / Link / Url Gambar yang akan sobat jadikan supaya bergerak.

Berikut keterangan dari kode HTML diatas :

onmouseout="this.start()" --> text akan bergerak jika pointer tidak diarahkan ke text
direction="up" --> text akan bergerak ke atas. Bisa diganti dengan down, left, atau right.
align="center" --> text rata tengah
scrollamount="2" --> kecepatan bergerak (makin besar angka berarti makin cepat)
height="100px" --> batas vertikal marquee.
onmouseover="this.stop()" --> marquee akan berhenti ketika mouse diarahkan ke zona marquee tersebut.
width="200px" --> batas horizontal marquee.

Nah....sekarang bisa khan membuat marquee....?. Sebagai contoh, silahkan sobat copy paste kode berikut dan masukan pada blog sobat.

<marquee onmouseout="this.start()" direction="up" align="center" scrollamount="2" height="100px" onmouseover="this.stop()" width="100%"><a href="http://kursus-blog.blogspot.com" target="_blank" alt="Kursus Blog">Kursus Blog</a></marquee>

Ket:

Marquee tsb menggunakan link. Kalo sobat belum tahu cara buat link silahkan ikuti bagaimana cara buat link.
Saya sarankan untuk mempermudah sobat mempraktekkan marquee tsb, sobat simpan di sidebar blog sobat. Caranya klik layout pilih page element lalu add new page element kemudian pilih html/javascript, lalu paste kode diatas.

Selamat mencoba........

Menghilangkan angka dalam label

2009-06-27T20:51:00.000-07:00

Setelah saya perhatikan, kayaknya angka dalam label itu menjadi penghalang keindahan blog saya. Nah....bagi sobat yang ingin juga menghilangkan angka dalam label, saya kasih tau caranya :

Setelah login di Blogger
Masuk ke LAYOUT dan klik edit HTML
Beri tanda checklist pada kolom EXPAND TEMPLATE WIDGET.
Tunggu sejenak sampai proses loading selesai.
Setelah itu....cari kode seperti ini :

(<data:label.count/>)

Nah...kalo bingung nyarinya, gunakan aja menu bar edit pada browser sobat. Tinggal klik edit lalu find in this page
Setelah itu masukan kode seperti diatas
Kalo dah ketemu....Hapus aja kode itu untuk menghilangkan angka dalam label.

Mudah kan........? Selamat mencoba...........

Menghilangkan Navbar Blog

2009-06-27T20:50:00.000-07:00

Sebelum membahas hal tersebut, sebaiknya sobat harus tahu apa akibatnya bila mau menghilangkan navbar blogger. Tapi kalo emang tetep mo diilingain, ini dia langkah - langkahnya :

Login ke blogger lalu masuk ke LAYOUT kemudian edit HTML.
Copy kode di bawah ini.

#navbar-iframe {
height:0px;
visibility:hidden;
display:none}
{

Paste kode tersebut diatas kode ini :

]]></b:skin>

Jadi kurang lebih kodenya seperti ini :

#navbar-iframe {
height:0px;
visibility:hidden;
display:none}

 ]]></b:skin>

Nah....kode yang berwarna biru itu adalah kode untuk menghilangkan navbar blogger. Kalo pengen munculin lagi navbarnya, tinggal hapus aja kode itu.

Selamat Mencoba

Merubah warna dan ukuran gambar

2009-06-27T20:49:00.001-07:00

Untuk membuat blog sesuai dengan selera kita, ada baiknya kita mengganti warna dan ukuran huruf blog kita dari standarnya. Untuk caranya, silahkan ikuti langkah di bawah ini :

Login di Blogger
Pilih menu LAYOUT
lalu klik FONTS and COLORS
Tunggu sesaat sampai loading selesai.
Kalo dah masuk, silahkan ganti ukuran dan warna huruf blog sobat sesuai selera sobat sendiri.

Dalam mengganti warna huruf, ada 2 cara. Pertama sobat tinggal ganti dengan warna yang telah disediakan dengan cara mengklik warna tersebut atau mengganti kode heksa dengan kode heksa warna sobat. Simple kan......Selamat mencoba

Mengganti bakground

2009-06-27T20:44:00.000-07:00

Cara mengganti background.

Ok..temanku semua....kali ini saya akan sedikit membahas mengenai bagaimana cara mengganti background blog. Untuk patokannya....pertama anda harus menyimpan gambar background anda di situs yang menyediakan tempat penyimpanan file. Misalnya www.ripway.com. Tapi ingat sebelum anda menyimpan ga,bar disana, anda harus terlebih dahulu mendaftar gratis kok. Nah kalo sudah daftar, terus upload gambar yang mau dijadikan background, sekarang kembali ke blog.

Login ke Blogger.
Pilih menu LAYOUT lalu editHTML
Jangan kasih tanda checklist pada kolom EXPAND TEMPLATE WIDGET.
Cari kode css body, kurang lebih contohnya seperti dibawah ini :

body {
background:#FFF;
margin: 0 5px 0;
}

Kalo dah ketemu, Tambahkan kode seperti di bawah ini diantara tanda { dan } :

background:#fff url(URL FILE GAMBAR ANDA) repeat-x;

Tapi...kalo misalnya sudah ada kata background, tinggal nambahin kode yg berwarna biru aja. dan jangan lupa selalu ditutup dengan tanda ";".

Catatan :
Tulisan URL FILE GAMBAR ANDA, ganti dengan Url gambar yang anda simpan. Sebagai contoh, Silahkan ganti Url-nya dengan Url di bawah ini :

 (http://www.ripway.com/dataku/kimia.jpg)

Kalo sudah, klik PREVIEW dan coba anda lihat hasilnya. Ok...selamat mencoba

Membuat Read more

2009-06-27T20:36:00.000-07:00

Sebelum membahas bagaimana cara membuat read more di blogspot, terlebih dahulu saya akan sedikit berbicara tentang read more itu sendiri. Read more adalah suatu fungsi yang dapat meringkas suatu artikel / postingan pada blog. Intinya dengan menggunakan cara read more ini, suatu postingan tidak akan tampil seutuhnya pada halaman utama blog (Home). Melainkan hanya berupa ringkasan saja. Setelah kata / tulisan read more itu di klik, barulah seluruh postingan akan tampil.

Cara Membuat Read More

Tahap Kesatu

1. Login di Blogger, kemudian masuk ke halaman edit html

2. kasih tanda checklist pada kolom expand template widget

3. Cari kode html seperti ini :

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

4. Kemudian simpan kode berikut di bawah kode yang anda cari barusan:

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>

5. Selanjutnya, dibawah kode yang baru anda simpan barusan, terdapat kode seperti ini :

<data:post.body/> <div style="'clear:"> <!– clear for photos floats –> </div>

lalu diantara kode

<data:post.body/>

dan

<div style="'clear:"> <!– clear for photos floats –> </div>

Simpan kode yang ini :

<a expr:href='data:post.url'>Read More .. </a> </b:if>

Sehingga hasil dari perubahan kode html selengkapnya menjadi seperti ini :

<div class='post-header-line-1'/> <div class='post-body entry-content'> <b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style> <p><data:post.body/></p> <a expr:href='data:post.url'>Read More .. </a> </b:if> <div style="'clear:"> <!– clear for photos floats –> </div>

Tahap Kedua

Setelah selesai melakukan edit kode html-nya, sekarang kita beranjak ke bagaimana cara melakukan posting artikel supaya fungsi read more tersebut bisa kita aplikasikan. Berikut petunjuknya :

1. Silahkan buat postingan sampai selesai (jg dulu di publish)

2. Tentukan bagian postingan yang akan di tampilkan (ringkasan), kemudian masukan kode berikut pada akhir bagian postingan tersebut :

<span class="fullpost">

3. Pada akhir postingan, masukan kode ini :

</span>

4. Selesai

Jika temen2 masih bingung, berikut ilustrasi dari cara posting artikel dengan menggunakan read more :

ini adalah text ringkasan
<span class="fullpost">
ini adalah text lanjutannya
</span>

Seting Blog

2009-06-27T20:33:00.000-07:00

Cara setting Blog

Setelah pada postingan sebelumnya kita belajar bagaimana cara membuat blog di blogspot, sebelum mulai blogging tentunya ada beberapa hal yang harus dipersiapkan terlebih dahulu. Salah satunya yaitu melakukan settingan pada blog yang baru kita buat.

Pada postingan kali ini, saya akan sedikit memberi masukan kepada teman2 yang baru membuat blog, bagaimana cara setting blog yang benar.

Silahkan ikuti cara2 di bawah ini :

1. Login dulu di blogger.
2. Kalo dah masuk, klik Setting
3. Pada tab Basic atau Dasar isi seperti di bawah ini :

Title >> Isi dengan judul blog sobat
Description >> Isi dengan deskripsi blog sobat
Add your blog to our listing >> pilih yes
Let's search engines find your blog >> pilih yes
Show quick editing on your blog >> pilih yes. Kalo no juga gpp kok
Show email post links >> pilih yes atau no ga masalah
Adult content >> pilih no. Soalnya kalo dipilih yes ntar blog sobat dianggap porno lagi. Jangan sampai ya....kecuali kalo emang isinya porno .
Show compose mode for all your blogs >> yes atau no ga masalah. Tapi kalo menurut saya yes lebih baik (memudahkan kita dalam postingan)
Enable transition >> pilih No
Klik Save Setting

4. Menu Publishing

Kalo pengen robah alamat blog anda, ya tinggal ganti aja kata yang ada di dalam kolom. Tapi sebaiknya jangan...

5. Menu Formatting

Show >> pilih post jangan days
Date header format >> pilih tanggal sesuai selera sobat
Archive index date >> pilih sesuai selera sobat aja
Timestamp format >> pilih yang simple aja deh....
Timezone >> pilih regional waktu kita. Contoh untuk WIB : (GMT+07:00) jakarta
Language >> Pilih sesuai bahasa Blog Sobat
Convert line breaks -- pilih Yes..kalo No juga ga apa apa sih
Show title field -- pilih yes
Show link field -- pilih yes atau no (terserah)
Enable float alignment -- pilih yes atau no (no problem)
Klik save setting

6. Menu Comments

Comments -- pilih show
Who can comment -- pilih Anyone (Supaya setiap orang bisa berkunjung ke blog kita)
Comments default for posts -- pilih New Posts have comment
Back links -- pilih show
Backlink default for post -- pilih New posts have backlink
Comment timestamp format -- pilih yang simple aja deh
Comment form messages -- mo di isi kek mo ngga kek terserah
Show comment in a popup windows -- pilih yes
Enable comment moderation -- pilih No. kecuali buat sobat sobat yang Ja'im, silahkan pilih yes. (maksudnya untuk pengecekan aja. Kalo pilih no maka komentar langsung masuk ke blog sobat, kalo pilih yes maka komentar nunggu dulu konfirmasi dari sobat selaku yang mpunya blog)
Show word verification -- pilih yes (biar komentar spam ga bisa masuk)
Show images profile on comment -- pilih yes
Comment notification email -- isi dengan alamat email sobat (maksudnya...kalo setiap ada yang ninggalin komentar di blog kita, akan dikirim juga ke email kita)
Klik Save Setting

7. Menu Archiving

Archive frequency -- pilih monthly
Enable post page -- pilih yes
Jangan lupa simpan ya.....

8. Menu SIte feed

Allow blogs feed -- pilih full
Post feed redirect url -- masukan alamat feed sobat contoh untuk blog ini "http://feeds.feedburner.com/kursus_blog". kalo belum punya, silahkan daftar di sini (gratis) atau kosongin aja. (untuk pendaftaran feedburner akan saya terangkan nanti di postingan berikutnya)
Klik Save Setting

9. Selesai deh......menu yang lain tinggalin aja.

Link gambar

2009-06-21T18:45:00.000-07:00

Cara membuat link biasa dan link gambar

Untuk membuat suatu link gambar sangat mudah.
Oya, link itu apaan sii...?, link itu jalan pintas yang jika di klik akan menuju ke suatu halaman terntentu.

Contoh ini link ke yahoo : klik disini

link di atas kodenya adalah:
<a href="http//yahoo.com">klik disini</a>

Nah, itu namanya link tanpa gambar. Terus gimana kalau link pakai gambar ? tenang aja, mudah ko.
Pertama anda tentukan alamat tujuan link itu , seperti : htp://www.yahoo.com
Kedua Anda harus punya alamat gambar dulu, misalnya : http://h1.ripway.com/dataku/kimia.jpg.
Oiya, anda bisa taruh file-file gambar di hosting gratis seperti di: www.ripway.com , silahkan sign up disana.

maka ketik kode html ini :


<a href="http://www.yahoo.com/" title="yahoo">
</a><img src="http://h1.ripway.com/dataku/kimia.jpg" width="80" height="100"> </a>

width="80" ini menentukan lebar gambar.
height="100" ini menentukan tinggi gambar.
Maka hasilnya akan seperti ini...ok kan..

Selamat mencoba

Membuat label

2009-06-21T18:36:00.000-07:00

Jika anda belum tahu menuliskan label pada setiap postingan / artikel,coba ikuti langkah berikut:

Pertama,bagi yang mau mengedit untuk menuliskan Label pada artikel, cari artikel yang ingin di Edit.

Untuk mencari artikel mana yang ingin di Edit, pergi ke Dashboard, pilih Edit Entri,blog yang ingin anda masukkan Label.

Bila anda sudah menentukan artikel mana yang ingin di beri label, pilih artikel tersebut, lalu lihat di sebelah kanan bawah halaman posting, anda hanya disuruh menuliskan nama label yang ingin anda tentukan,
contoh Kesehatan, dll, lalu selanjutnya publikasikan.

Selanjutnya,untuk menampilkan label-label tersebut pada halaman blog,pegilah ke Tata Letak,lalu pilih Element Baru / Add New Widget.
Pilih Label,dan beri judul sesuai keinginan anda,contoh;Tags,Label,Kategori atau yang lain.
Lalu Simpan.

Menu dropdown

2009-06-21T18:23:00.000-07:00

Salah satu cara termudah untuk menampilkan setiap artikel yang kita tulis yaitu dengan menggunakan menu dropdown. mengapa demikian....karena setiap artikel yang kita tulis di blog itu akan tersimpan sesuai dengan bulan dimana kita posting artikel tersebut. Misalnya kita posting artikel bulan Januari, maka artikel tersebut akan berada di arsip bulan januari. Nah...kalo misalnya blog kita udah tahunan nih ceritanya, kira2 sepanjang apa ya arsip bulanan kita...? yang pasti hal tersebut akan menghabiskan semua bagian sidebar kita...hehehehe. Nah...salah satu cara yang paling efisien untuk mengantisipasi hal tersebut, yaitu dengan menu dropdown. Contohnya seperti di bawah ini :

Nah....kali ini, saya akan membahas bagaimana cara membuat menu dropdown untuk archive dan membuat menu dropdown untuk menampilkan hal lain (link, text).

Membuat Menu Dropdown untuk Archive

Login di Blogger
Pada menu dashboard pilih layout lalu pilih Page Element
Setelah itu pilih Add New Page Element
Kemudian pilih Blog Archive.
Lalu checklist Dropdown Menu pada menu Style.
Kemudian pilih Monthly pada Archive Frequency.
Klik Save.
Selesai

Nah...langkah2 diatas adalah untuk membuat menu dropdown untuk archive. Sekarang bagaimana cara Membuat Menu Dropdown untuk menampilkan hal lain semacam link...Silahkan ikuti langkah2 nya.

Membuat Menu Dropdown Untuk Link.

Untuk membuat menu dropdown buat link, silahkan copy paste kode di bawah ini:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex] .value,'_blank')"size=1 name=menu> <option value=0 selected>tulisan disini yang akan muncul duluan</OPTION> <option value="url anda">tulisan di sini yang akan muncul</option> </select></form>

Ket :
--> Silahkan ganti text yang berwarna biru sesuai keterangan yang anda inginkan.

Selamat Mencoba..........

Menampilkan fitur komentar

2009-06-21T17:59:00.000-07:00

Cara menampilkan fitur komentar.

Untuk menampilkan atau menghilangkan fitur komentar, anda hanya disuruh pergi ke Dashboard lalu pilih pengaturan, setelah itu klik komentar.

Seperti ini

Edit seperlunya lalu Simpan.

Pasang gambar di artikel

2009-06-21T17:32:00.000-07:00

Cara memasang gambar di artikel.

Dalam kursus kali ini, kita membahas bagaimana meletakkan objek gambar ke dalam sebuah artikel.
Ada banyak cara sebenarnya, kali ini kita memakai cara pertama dulu.

Cara pertama :

Pergi ke Dashboard, buat artikel / posting baru di Blog anda dengan cara klik bagian Buat Posting Baru
Pilih Toolbar / Icon yang berbentuk Pemandangan seperti ini : akan muncul seperti ini:

Selanjutnya pilih Browse File, yang akan menanyakan anda file mana yang ingin anda masukkan. Dalam pelajaran ini, anda bisa upload / meletakkan gambar baik dari komputer anda maupun alamat URL yang ingin anda kehendaki. Misalnya anda sudah punya alamat gambar seperti ini : http://h1.ripway.com/dataku/kimia.jpg ya masukin aja ke kotak url itu.
Lalu klik UNGGUH GAMBAR.
Selanjutnya tunggu proses, dan setelah proses selesai, klik tombol Selesai, dan anda bisa melihat hasilnya.

2. Cara Kedua :

Siapkan alamat URL gambar yang ingin anda masukkan, misal :
Anda mempunyai alamat URL gambar seperti ini :

http://h1.ripway.com/dataku/kimia.jpg

Maka untuk menampilkan di halaman blog anda, anda bisa menuliskan kode di bawah ini di halaman mode posting HTML anda tentunya. Ini codenya :


<img src="http://h1.ripway.com/dataku/kimia.jpg" width="100" height="120">

 width="100" ini menunjukan lebar gambar.
height="120"

ini menunjukan tinggi gambar.

Maka kode diatas akan menghasilkan gambar seperti di bawah ini :

selamat mencoba.

Memposting Tulisan

2009-06-21T17:31:00.001-07:00

Cara memposting tulisan / artikel di blog

Bagi anda yang baru mulai bikin blog maka sekarang kita akan belajar tentang tata cara memposting suatu artikel kedalam blog.

Di dalam menu posting ada beberapa toolbar yang bisa anda gunakan.
Jika anda sudah terbiasa menggunakan microsoft Word ataupun microsoft Excel tentu barangkali tidak akan mengalami kesulitan ketika memposting suatu artikel, tapi mungkin tidak ada salahnya bila saya bahas sekilas tentang ini, barangkali ada di antara kita yang masih bingung.
Menu toolbarnya adalah :

--> Untuk merubah jenis hurup yang di gunakan

--> Untuk merubah ukuran hurup (heading)

--> Untuk Menebalkan hurup

--> Untuk memiringkan hurup

--> Untuk merubah warna hurup

--> Untuk membuat link

--> Untuk membuat artikel menjadi rata kiri

--> Untuk membuat tulisan menjadi di tengah

--> Untuk membuat artikel menjadi rata kanan

--> Untuk membuat artikel menjadi rata kiri dan rata kanan

--> Untuk membuat sub bahasan oleh angka

--> Untuk membuat sub bahasan oleh bullet

--> Untuk mengecek spelling

--> Untuk memasukan gambar(upload gambar)

--> Untuk membuat artikel dalam kode HTML

--> Untuk membuat artikel dalam mode Compose (biasa)

--> Untuk me review (melihat) artikel

Cara penggunaan toolbar di atas adalah blok (beri tanda) terlebih dahulu tulisan
yang akan di edit, kemudian tekan tombol toolbar yang di inginkan.

Trik menulis sebaiknya klik terlebih dahulu " Edit HTML",jika langsung di mode "Compose/Tulis", sering terjadi hang pada komputer (pengalaman saya pribadi).

Copy artikel yang telah anda buat sebelumnya, kemudian paste di area posting. Edit sesuai dengan kemauan anda.

Klik tombol "Compose / Tulis " untuk melakukan editing (jika anda masih bingung dengan kode HTML).

Klik tombol tool yang berlambang " panorama" berwarna biru, jika anda ingin memasukan gambar ataupun photo untuk menghiasi postingan anda.

Klik tombol " Preview " untuk melihat hasil posting-an anda yang nantinya akan tampil di dalam blog, barangkali masih ada yang perlu di edit.

Klik tombol " Publish ".

Selesai. Tulisan hasil karya anda akan bisa dilihat dan di baca oleh seluruh dunia.

Wow, selamat mencoba....

Mulai Membuat Blog

2009-06-21T17:18:00.000-07:00

Cara memulai bikin Blog.

Apa sih blog itu..?? ya ini seperti yang anda baca....

Dimana tempat bikin blog itu.....?

Disini tempat Nge-Blog yang terpopuler , yaitu di www.blogger.com

Ok, Kali ini kita akan memulai langkah-langkah membuat webblog di: www.blogger.com

Langkah pertama anda harus punya email dulu ya.., untuk mudahnya harus email di www.gmail.com, karena gmail dan blogger itu saudara kandung......??? ayo buka www.gmail.com

Kilik bagian bikin akun itu, yang di lingkaran merah....

Isi form di atas dengan data-data anda...Klik, saya setuju....nah, udah puya emai di gmail.com kaaannnn, ayo lanjut bikin blognya......

Kalau sudah punya email, silahkan lanjut ke alamat www.blogger.com
Untuk lebih mudahnya harap pilih kotak kanan atas dengan bahasa Indonesia, lalu anda akan di hadapkan tulisan yang cukup besar, dalam versi Indonesia, bertuliskan " CIPTAKAN BLOG ANDA "klik bagian tersebut, kemudian, isilah Alamat Email dengan alamat email anda ( sebaiknya anda punya email di www.gmail.com ).
Masukkan password yang anda inginkan, isilah Nama Tampilan dengan nama yang ingin anda tampilkan, selanjutnya, klik "LANJUTKAN", Tuliskan judul blog pada form Judul Blog, selanjutnya tulis nama situs yang anda inginkan pada form Alamat Blog (URL), pilih "LANJUTKAN".
Selanjutnya, pilih template (tipe halaman) yang anda inginkan, kemudian pilih "LANJUTKAN"
Jika semua yang anda lakukan sudah benar, akan tampil tulisan "Blog Anda telah di ciptakan". Pilih "MULAI POSTING".
Silahkan mulai nulis postingan ( artikel ).

Selamat mencoba..
NB: kata lanjutkan bukan berarti kampanya SBY, ....


Blue.gif	cyan.gif	hijau.gif

orange.gif	pink.gif	ungu.gif

hitam.gif	kuning.gif	merah.gif

Cara membuat Blog

Ping service

Traffic blog

Daftar isi widget blog

Top postingan

Dasar css

Simpan widget sebelum ganti template

Link warna warni

Cloud animasi

Statistik blog

Gambar di judul postingan

Pasang kotak pencarian di blog

Memperlebar halaman blog

Blogrool dengan marquee

Tentang technorati

Gambar bergerak di blog

Footer navbar

Form langganan email

Gambar melayang

Promosi blog

Komentar higtlight

Meta tag di blog

Google sitemap

Optimasi SEO

Yahoo emotion di postingan

Menampilkan icon status Yahoo

Link teman bergulung

Tampilan tanggal hari ini

Photo author di komentar

Pesan alert

Menu navigasi

Google translation

Pasang Yahoo search

Pasang google search

Tampilkan jam dan tanggal

Pasang alexa widget

Lagi SEO

Nomor komentar

Meningkatkan alexa rank

Membuat 2 kolom sidebar blog

Tentang Rss

Daftar isi blog

Tentang feedburner

Tentang SEO

Emotion di komentar

Kode HTML di postingan

Membuat tab view widget

Menyisipkan tombol digg

Tampilan label dengan daftar isi

Menampilkan label dengan dropdown

Membuat related post

Memodifikasi template

Daftar ke search Engine

Sekilas HTML

Merubah tanggal dengan icon kalender

Navigasi dengan CSS

Membuat text area

Membuat text bergerak

Menghilangkan angka dalam label

Menghilangkan Navbar Blog

Merubah warna dan ukuran gambar

Mengganti bakground

Membuat Read more

Seting Blog

Link gambar

Membuat label

Menu dropdown

Menampilkan fitur komentar

Pasang gambar di artikel

Cara pertama :

2. Cara Kedua :

Memposting Tulisan

Mulai Membuat Blog