Membuat Postingan Berkolom

Kamu pasti tahu bentuk atau format surat kabar yang berkolom-kolom. Dalam blogger kita juga dapat membuat format postingan seperti itu (beda-beda tipis lah). Supaya lebih terdefinisi sandingkan <b>trik blogger</b> ini dengan menggunakan <a href="http://optimasi-blog.blogspot.com/2009/05/tampilan-huruf-awal-posting-bergaya.html">huruf awal posting bergaya koran</a>.<br /><br /><br /><br />Mari kita review <i>trik blogger</i> membuat postingan berkolom :<br /><br /><ul><li>Login dulu ke account blogger kamu.</li><br /><li>Pilih tab Tata Letak --> Edit HTML.</li><br /></ul>Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.<br /><br /><ul><li>Cari kode ]]></b:skin>.</li><br /></ul>Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.<br /><br /><ul><li>Copas kode CSS berikut di atas kode tersebut.</li><br /></ul><div class="code">.post-column-top {<br /><br />-moz-column-count: 2;<br /><br />-moz-column-gap: 15px;<br /><br />-moz-column-rule: 0px dotted #E1D4C0;<br /><br />-webkit-column-count: 2;<br /><br />-webkit-column-gap: 15px;<br /><br />-webkit-column-rule: 0px dotted #E1D4C0;<br /><br />-khtml-column-count: 2;<br /><br />-khtml-column-gap: 15px;<br /><br />-khtml-column-rule: 0px dotted #E1D4C0;<br /><br />padding-bottom: 10px;<br /><br />border-bottom:1px dashed #E1D4C0;<br /><br />}<br /><br /><div style="color: red;">.post-column-bottom {</div><div style="color: red;">-moz-column-count: 2;</div><div style="color: red;">-moz-column-gap: 15px;</div><div style="color: red;">-moz-column-rule: 0px dotted #E1D4C0;</div><div style="color: red;">-webkit-column-count: 2;</div><div style="color: red;">-webkit-column-gap: 15px;</div><div style="color: red;">-webkit-column-rule: 0px dotted #E1D4C0;</div><div style="color: red;">-khtml-column-count: 2;</div><div style="color: red;">-khtml-column-gap: 15px;</div><div style="color: red;">-khtml-column-rule: 0px dotted #E1D4C0;</div><div style="color: red;">}</div>.post-column-top2 {<br /><br />-moz-column-count: 3;<br /><br />-moz-column-gap: 10px;<br /><br />-moz-column-rule: 0px dotted #E1D4C0;<br /><br />-webkit-column-count: 3;<br /><br />-webkit-column-gap: 10px;<br /><br />-webkit-column-rule: 0px dotted #E1D4C0;<br /><br />-khtml-column-count: 3;<br /><br />-khtml-column-gap: 10px;<br /><br />-khtml-column-rule: 0px dotted #E1D4C0;<br /><br />font-size: 85%;<br /><br />line-height:14px;<br /><br />padding-bottom: 10px;<br /><br />border-bottom:1px dotted #E1D4C0;<br /><br />}<br /><br /><div style="color: red;">.post-column-bottom2 {</div><div style="color: red;">-moz-column-count: 3;</div><div style="color: red;">-moz-column-gap: 10px;</div><div style="color: red;">-moz-column-rule: 0px dotted #E1D4C0;</div><div style="color: red;">-webkit-column-count: 3;</div><div style="color: red;">-webkit-column-gap: 10px;</div><div style="color: red;">-webkit-column-rule: 0px dotted #E1D4C0;</div><div style="color: red;">-khtml-column-count: 3;</div><div style="color: red;">-khtml-column-gap: 10px;</div><div style="color: red;">-khtml-column-rule: 0px dotted #E1D4C0;</div><div style="color: red;">font-size: 85%;</div><div style="color: red;">line-height:14px;</div><span style="color: red;">}</span></div><ul><li>Jangan lupa disimpan.</li><br /></ul>Keterangan :<br /><br /><ul><blockquote><br /><li>...-column-count menunjukkan jumlah kolom.</li><br /><li>...-column-gap menjempolkan jarak antar kolom.</li><br /><li>...-column-rule mengelingkingkan border antar kolom (kalau tidak digunakan juga tidak apa-apa).</li><br /><li>font-size menengahkan ukuran huruf.</li><br /><li>line-height memaniskan jarak antar baris teks/kalimat.</li><br /><div style="text-align: center;"><span style="font-size: large;"><strike>(Jari-jari.....)</strike></span></div><li>padding-bottom menunjukkan jarak kolom atas dengan kolom bawah (berguna kalau kamu membuat dua baris kolom).</li><br /><li>border-bottom menunjukkan garis bawah kolom (berguna kalau kamu membuat dua baris kolom).</li><br /></blockquote></ul>Catatan :<br /><br /><ol><li><i>Kode CSS</i> di atas digunakan untuk membuat postingan berkolom 2 (dua) dan 3 (tiga).</li><br /><li><i>Kode CSS</i> tersebut bisa kamu pilih atau dipakai seluruhnya.</li><br /><li>Untuk penggunaan kode -moz, -webkit, -khtml dapat kamu baca pada postingan "<a href="http://optimasi-blog.blogspot.com/2010/06/rounded-corner-membuat-sudut-menjadi.html">Membuat Rounded Corner</a>".</li><br /><li><i>Kode CSS</i> tersebut dapat kamu permak sesuai dengan keinginan dan template blog kamu.</li><br /></ol><ul><li><b>Contoh Terapan I :  Postingan 2 (dua) kolom</b></li><br /></ul><red><span class="firstletter"></red>I<red></span></red>ni merupakan contoh terapan I, yakni membuat postingan menjadi 2 (dua) kolom. Pertama ketiklah seluruh isi postingan, kemudian edit setelah selesai. Jangan lupa untuk meletakkan kode <a href="http://optimasi-blog.blogspot.com/2009/05/tampilan-huruf-awal-posting-bergaya.html">huruf awal bergaya koran</a> dan kode untuk membuat posting menjadi dua kolom. Kamu juga bisa meletakkan kode pemformatan lainnya, kalau ada dan tersedia serta menarik minat mata pengunjung untuk membaca postingan tersebut.<br /><br /><br /><br /><span style="color: red;"><div class="post-column-top"></span>Aturlah penambahkan kode kolom agar lebih menarik. Paragrap pembuka biarkan sesuai dengan format posting yang ada. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.<span style="color: red;"></div></span><br /><br /><span style="color: red;"><div class="post-column-bottom"></span>Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawahnya kamu tidak akan melihat ada garis putus-putus lagi.<span style="color: red;"></div></span><br /><br /><br /><br /><ul><li>Jadinya akan seperti berikut :</li><br /></ul><p><span class="firstletter">I</span>ni merupakan contoh terapan I, yakni membuat postingan menjadi 2 (dua) kolom. Pertama ketiklah seluruh isi postingan, kemudian edit setelah selesai. Jangan lupa untuk meletakkan kode <a href="http://optimasi-blog.blogspot.com/2009/05/tampilan-huruf-awal-posting-bergaya.html">huruf awal bergaya koran</a> dan kode untuk membuat posting menjadi dua kolom. Kamu juga bisa meletakkan kode pemformatan lainnya, kalau ada dan tersedia serta menarik minat mata pengunjung untuk membaca postingan tersebut.</p><div class="post-column-top" style="column-count: 2; column-gap: 15px; column-rule: 0px dotted #E1D4C0; -moz-column-count: 2; -moz-column-gap: 15px;<br />-moz-column-rule: 0px dotted #E1D4C0; -webkit-column-count: 2; -webkit-column-gap: 15px; -webkit-column-rule: 0px dotted #E1D4C0; padding-bottom: 0.5em; border-bottom:1px dashed #E1D4C0;">Aturlah penambahkan kode kolom agar lebih menarik. Paragrap pembuka biarkan sesuai dengan format posting yang ada. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.</div><div class="post-column-bottom" style="column-count: 2; column-gap: 15px; column-rule: 0px dotted #E1D4C0; -moz-column-count: 2; -moz-column-gap: 15px;<br />-moz-column-rule: 0px dotted #E1D4C0; -webkit-column-count: 2; -webkit-column-gap: 15px; -webkit-column-rule: 0px dotted #E1D4C0;">Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini  kamu tidak akan melihat ada garis putus-putus lagi.</div><br /><br /><ul><li><b>Contoh Terapan II:  Postingan 2 (dua) dan 3 (tiga) kolom</b></li><br /></ul><span style="color: red;"><div class="post-column-top"></span>Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 1 (satu) dan 2 (dua) diatur dengan 2 (dua) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom 3 (tiga). Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.<span style="color: red;"></div></span><br /><br /><span style="color: red;"><div class="post-column-top"></span>Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.<span style="color: red;"></div></span><br /><br /><span style="color: red;"><div class="post-column-top2"></span>Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 3 (tiga) dan 4 (empat)  diatur dengan format 3 (tiga) kolom. Paragrap selanjutnya dapat kamu optimasi dengan  menggunakan kode-kode lainnya.  Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 3 (tiga) kolom.<span style="color: red;"></div></span><br /><br /><span style="color: red;"><div class="post-column-bottom2"></span>Kemudian kita akan membuat kolom ke-4, sehingga kolomnya akan berjumlah 4 (empat) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.<span style="color: red;"></div></span><br /><br /><br /><br /><ul><li>Jadinya akan seperti berikut :</li><br /></ul><div class="post-column-top" style="column-count: 2; column-gap: 15px; column-rule: 0px dotted #E1D4C0; -moz-column-count: 2; -moz-column-gap: 15px;<br />-moz-column-rule: 0px dotted #E1D4C0; -webkit-column-count: 2; -webkit-column-gap: 15px; -webkit-column-rule: 0px dotted #E1D4C0; padding-bottom: 0.5em; border-bottom:1px dashed #E1D4C0;">Aturlah penambahkan kode kolom agar lebih menarik. Paragrap 1 (satu) dan 2 (dua) diatur dengan 2 (dua) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode untuk membuat posting berkolom 3 (tiga). Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 2 (dua) kolom.</div><div class="post-column-top" style="column-count: 2; column-gap: 15px; column-rule: 0px dotted #E1D4C0; -moz-column-count: 2; -moz-column-gap: 15px;<br />-moz-column-rule: 0px dotted #E1D4C0; -webkit-column-count: 2; -webkit-column-gap: 15px; -webkit-column-rule: 0px dotted #E1D4C0; padding-bottom: 0.5em; border-bottom:1px dashed #E1D4C0;">Kemudian kita akan membuat kolom ke-2, sehingga kolomnya akan berjumlah 2 (dua) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.</div><div class="post-column-top3" style="column-count: 3; column-gap: 10px; column-rule: 0px dotted #E1D4C0; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: 0px dotted #E1D4C0; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: 0px dotted #E1D4C0; font-size:85%; line-height:14px; padding-bottom: 0.5em; border-bottom:1px dotted #E1D4C0;">Aturlah penambahkan kode kolom agar lebih menarik. Paragrap  3 (tiga) dan 4 (empat)  diatur dengan format 3 (tiga) kolom. Paragrap selanjutnya dapat kamu optimasi dengan menggunakan kode-kode lainnya. Pembagian kolom otomatis dilakukan oleh kode tersebut, seperti paragrap ini akan menampakkan posting dengan 3 (tiga) kolom.</div><div class="post-column-bottom3" style="column-count: 3; column-gap: 10px; column-rule: 0px dotted #E1D4C0; -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: 0px dotted #E1D4C0; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: 0px dotted #E1D4C0; font-size:85%; line-height:14px;">Kemudian kita akan membuat kolom ke-4, sehingga kolomnya akan berjumlah 4 (empat) baris. Coba perhatikan jarak (padding-bottom) antara kolom di atas dengan kolom ini dan perhatikan pula ada garis putus-putus (border-bottom). Tapi setelah kamu menyelesaikan paragarap ini, di bawah kolom ini kamu tidak akan melihat ada garis putus-putus lagi.</div><br /><br />Panjang dan lama (itulah coki-coki!!???) juga postingan trik membuat postingan berkolom ini. Akhirnya selamat berkolom ria dalam postingan blog kamu...

Posted by Hii Sekai

Plugin Sosial dari Facebook

<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Plugin Sosial Facebook" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAFRZsoRWsz78S3nnE2Ybz3td52O4mPGaLjdT00mmP8sxn8NVCsopSnDxqQlpa-RbGKYgRJgatDDRt71woQhLotQE5Hk1SevLZb3KG8GA9cCZBAf_yIuEG8eMMhZ-vDRMagE8kB3St1UA/s1600/Plugin+Sosial+Facebook.png" width="150" /></div>Sekitar 1 (satu) bulan OB meninggalkan dunia on-line, termasuk blogging.  Bertapa mencari ilham di dasar seribu sungai (hanya becanda).  Bukannya bosan melainkan kesibukan pindah homebase dan mendirikan usaha sendiri di tempat baru tersebut.  Alhamdulillah sekarang sudah rampung kira-kira 75%.  Sekarang OB menyempatkan membuat satu postingan yang sekiranya menambah daftar <i>trik blogger</i> di hati dan pikiran para blogger.  Kok, jadi dramatis gini...  <b>Trik blogger</b> ini masih terkait dengan posting sebelumnya tentang <a href="http://optimasi-blog.blogspot.com/2010/07/promosi-blog-dengan-facebook.html">promosi blog dengan facebook</a>, coba tebak?  Betul sekali.  Setelah pamer blog di facebook, tentunya ingin pula plugin di facebook muncul di blog kamu.<br /><br />Kemudian OB tidak akan menjelaskan secara detail tentang kodenya yang seperti apa, karena kode tersebut otomatis tampil pada saat kamu mengkostumisasi plugin ini di layanan pengembang plugin sosial facebook.  Demo salah satu plugin tersebut (Like Button) dapat kamu lihat di kiri bawah (footer) blog ini.<br /><br /><br /><br /><ul><li>Arahkan alamat browser kamu ke <a href="http://developers.facebook.com/plugins?ref=mf" rel="nofollow" target="_blank">Facebook Developers</a>.</li><br /><li>Kamu akan di bawa ke halaman kumpulan plugin sosial yang dapat diterapkan dalam blog kamu, seperti ;  Like Button, Activity Feed, Recommendations, Like Box, Login Button, Friendpile, Comments, dan Live Stream.</li><br /></ul><ul><li><b>Contoh Terapan I (Like Button) :</b></li><br /></ul>->  Klik link yang bertuliskan Like Button.<br /><br />->  Isi form sesuai dengan keinginan dan template blog kamu, seperti yang ditunjukkan oleh gambar di bawah ini.<br /><br /><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Like Button Form" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghjD0-KBLRVOFgS1KRIjIFu2pK3LC8Zx1NXq6xCLaciEdWKmBXnhOdssJtkpxAIumDI5zlIaBMcJceXk5E_t4nk_z5uX_jx3HgXgxgtbG4v7YetP24g3zKVmqtlapOHHLsPpPiUCyTIsk/s1600/Like+Button.png" /></div><br /><br />Catatan :<br /><br /><span style="color: blue;">URL to Like</span> diisi dengan alamat blog kamu.<br /><br /><br /><br />->  Setelah selesai klik "Get Code", maka akan muncul kode sesuai dengan isian form tersebut.<br /><br /><br /><br /><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Get Code Button" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUUutPGiBaY-YsRDa4bvUToJ1t4JFb8G9S30RjO-nAk2JROUqkK1-ur5qkVcCK47yUK4nZVbOl3lfeC2Etv-73EiYJfPYdEzyvpJ2qyMkD5IfNYLjqOu-ESDLvvX0qz3VbIXzlvVRSSkc/s1600/Get+Code.png" /></div><br /><br />->  Copy kode dalam kotak <span style="color: red;">iframe</span> ke blog kamu.<br /><br />->  Sign-in ke akun blogger kamu.<br /><br />->  Kemudian klik Design (Rancangan) --> Add Gadget (Tambah Gadget).<br /><br />->  Dalam jendela pop-up yang tampil, pilih HTML/JavaScript dengan mengklik tanda + di kanannya.<br /><br />->  Paste kode <span style="color: red;">iframe</span> dari plugin sosial facebook.<br /><br />->  Selesai.<br /><br /><br /><br /><ul><li><b>Contoh Terapan II (Like Box) :</b></li><br /></ul>->  Klik link yang bertuliskan Like Box.<br /><br />->  Isi form sesuai keinginan dan template blog kamu, seperti yang ditunjukkan oleh gambar di bawah ini.<br /><br /><br /><br /><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Like Box Form" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUTCX4F27_LmwCtF1lFRqiAvndBwiFiGp79X2h2v2eW5m2BXERJMPh2yLURwDKa8FkJBR6nTiR6OGontz7nR_91vS_TL7b_cFm3I_oWIQF3blfDRMwgI8VaB8yNVCBDZJNUczrb0VFEMg/s1600/Like+Box.png" /></div><br /><br />Catatan :<br /><br /><ul><li><span style="color: blue;">Facebook Page ID</span> diisi dengan ID halaman facebook kamu.</li><br /></ul><br /><br /><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Facebook Page ID" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj3hlMPH2F2ulqKnMENVoj5fJs-qzS2OHmaWeZugKjJYngmfuvgenkrl1f3gNY6W3Du6Mo2PNfQg6_1b1D9rDYAXSEwnHg72D0MP5NWzEOvyBn6nZV5bwbToZT5pDaZIVVPUZ1wa2M_zo/s1600/Page+ID.png" /></div><br /><br /><ul><li>Untuk membuat halaman baru di facebook silakan dibuka kembali posting tentang <a href="http://optimasi-blog.blogspot.com/2010/07/promosi-blog-dengan-facebook.html">promosi blog dengan facebook</a>.</li><br /></ul>->  Selanjutnya lakukan langkah yang sama dengan contoh terapan I.<br /><br /><br /><br />Catatan :<br /><br />Langkah dalam mengkostumisasi plugin sosial lainnya lebih kurang sama dengan contoh terapan di atas.<br /><br /><br /><br />Selamat memajang plugin sosial facebook di blog kamu...

Posted by Hii Sekai

Promosi Blog dengan Facebook

<p class="first-letter">Banyak cara untuk mempromosikan blog kamu, seperti; mendaftarkan blog ke <i>search engine</i> (<a href="http://optimasi-blog.blogspot.com/2009/03/cara-mendaftarkan-blogger-di-google.html">google</a>, <a href="http://optimasi-blog.blogspot.com/2009/03/cara-mendaftar-blogger-di-search-engine.html">yahoo</a> & <a href="http://optimasi-blog.blogspot.com/2009/06/search-engine-baru-dari-microsoft.html">bing</a>), <a href="http://optimasi-blog.blogspot.com/2009/03/meningkatkan-trafik-blog-melalui-blog.html">blog directory</a>, <a href="http://optimasi-blog.blogspot.com/2010/05/cara-claim-blog-di-technorati.html">technorati</a>, <a href="http://optimasi-blog.blogspot.com/2009/03/etika-bertukar-link-link-exchange.html">tukaran link</a>, dan sebagainya. Apabila OB memposting tentang <b>promosi blog</b> di <a href="http://www.facebook.com/" rel="nofollow" target="_blank">facebook</a>, mungkin sudah terdengar basi. Eit..., jangan langsung divonis dong! Dan kemungkinan lainnya ini merupakan sesuatu yang baru di mata kita parablogger. Apa iya sih? Umumnya promosi blog di facebook adalah hal yang lazim. Hanya dengan memasukkan alamat blog (situs web) di informasi kontak dalam pengaturan profil selesai deh. Namun yang akan kita diskusikan dalam posting ini tidak sesederhana itu. Penasaran khan? Daripada main teka-teki, yuk kita langsung urai benang merahnya.</p><br />Metode <b>promosi blog</b> di facebook yang akan kita bicarakan di sini adalah dengan membuat "Halaman Resmi" tanpa membuat akun baru [ <a href="http://www.facebook.com/aris.asmara" target="_blank">Akun Facebook OB</a> | <a href="http://www.facebook.com/pages/Tips-SEO-dan-Trik-Blogger-Indonesia/132606743428576#%21/pages/Tips-SEO-dan-Trik-Blogger-Indonesia/132606743428576?v=wall" target="_blank">Demo</a> ].  <br /><br /><ul><li>Silakan sign-in ke akun <a href="http://www.facebook.com/" rel="nofollow" target="_blank">facebook</a> kamu.</li><br /><li>Kemudian klik link berikut untuk <a href="http://www.facebook.com/pages/create.php" rel="nofollow" target="_blank">membuat halaman baru di facebook</a>.</li><br /><li>Kamu akan dibawa ke halaman seperti yang ditunjukkan oleh gambar di bawah ini :</li><br /></ul><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Buat Halaman Facebook" border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1CDVIl9aWVLiJJfYUePZFqlUiGyptSi1Pui_rLbs_RniJt8AAtFMEj6a3XE_We7y3V-D2gl6gd873au5RN7umxdT7G2JyiXGFyEYGKkUDqeOPKjPsv7vOVuTyYYuFgSaKGbxyBrgfEXQ/s320/buat+halaman+facebook.png" width="320" /></div><blockquote>Di kolom kiri terdapat form untuk membuat "Halaman Resmi".</blockquote><ul><li>Pada "Buat Halaman untuk:", pilih "Merek, produk, atau organisasi.</li><br /><li>Setelah itu akan muncul dropdown menu dan pilih option Situs Web (paling bawah). Seperti yang diperlihatkan oleh gambar berikut :</li><br /></ul><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Produk Halaman Facebook" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVKP0aYau7U_usgzsW3sG6Uahrt2bcuKotSXtRHvXGII90H98qTvJ9AXLiNI0g_1mM63zwfep92XjkK51gk1UONTTH21f22xgqWGU5RO6eOwNyFWM1am6XHwLuIdDK2ZZWaRBjvbZGO30/s320/produk+halaman+facebook.png" width="320" /></div><ul><li>Beri "Nama Halaman" sesuai dengan tema blog kamu serta jangan lupa untuk untuk memberi tanda centang pada teks pernyataan di bawahnya. Di bawah ini screenshotnya :</li><br /></ul><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Nama Halaman Facebook" border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9vTES9GVxJtYnDhvkJvD8FmGiq3DTDVfZocvCOSoQx3hhKwBbm4ty6UkN677GLMU10-ua-pXQ_uPUrUhZd1ESc-tHN1RL8ibwCvrojme-9jQt86Tf_RVdlP5oCcJb_q16ouXUHpGL9jU/s320/nama+halaman+facebook.png" width="320" /></div><ul><li>Terakhir klik button "Buat Halaman Resmi".</li><br /></ul>Catatan :<br /><br />Langkah selanjutnya mirip dengan ketika pertama kali kamu menggunakan akun facebook.<br /><br /><br /><br /><i>Bagaimana mengisi halaman baru facebook tersebut?</i><br /><br />Untuk mengisi halaman tersebut sama dengan pada saat kamu mengisi akun facebook kamu (Apa yang Anda pokirkan?) di "Dinding". Bedanya mungkin hanya terletak pada isi pesan yang kamu tulis. Oleh karena halaman baru tersebut akan digunakan untuk promosi blog, maka kamu hanya perlu menaruh kata/kalimat yang berkaitan dengan blog. Agar lebih terdefinisi kata/kalimat tersebut dilampiri dengan tautan ke posting blog kamu.<br /><br /><br /><br /><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_dBFl-0A3OpfCGiiv3IjN0KGaeePDfDgOWM-8wzg4AXgc0yAS_2t_2QJ72vyC2KJHF8xu0UhN8hUbB95UyBaeZ3zx1XPMhd3lCueiRW9B9Z_xnBUqkKRrV5HsLkUfZNDiTcIpQahCUk/s320/dinding+halaman.png" width="320" /></div><br /><br />Contoh menurut cara OB :<br /><br /><ol><li>Copy 2 - 3 kalimat pada awal suatu posting.</li><br /><li>Paste ke "Dinding" halaman resmi, kemudian OB tautkan ke alamat posting yang bersangkutan.</li><br /><li>Setiap ada postingan baru, OB akan melakukan hal yang sama seperti pada point 1 dan 2.</li><br /></ol>Catatan :<br /><br /><ul><li>Setiap pesan dalam dinding halaman yang telah dibuat dapat ditampilkan ke akun facebook kamu dengan cara mengklik "bagikan" (footer masing-masing pesan).</li><br /></ul><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9_Wqc37MVH-UpLGW5myXdU_OHCZOud7TlQ8zyZG7AhUFSc_as6jBTqmahl6v-EG1ksWHpaV-vn7zQVk3fA1zrk-ta426pKq-EyboXS0BJ3JznJsOGAZiTcGcrWy16RRTEaZkYMlPVIQg/s320/bagikan+pesan+di+fb.png" width="320" /></div><ul><li>Untuk berpindah ke halaman lain (pada saat kamu telah login di facebook), klik "Akun" --> "Kelola Halaman".</li><br /></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tuEsHfyRxp9Wu3lG0Ko2N6mBaFC5jrPW0xTSnV2N5BKRFXTnCClbmyqJT43kYfUntBffSzrnSUNX9WqjqAkoIdg3Ib5ObLjum013wbURdRb0aiv0irDSnC1WkmxYnwjV3f5ySKvAW_M/s1600/kelola+halaman.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tuEsHfyRxp9Wu3lG0Ko2N6mBaFC5jrPW0xTSnV2N5BKRFXTnCClbmyqJT43kYfUntBffSzrnSUNX9WqjqAkoIdg3Ib5ObLjum013wbURdRb0aiv0irDSnC1WkmxYnwjV3f5ySKvAW_M/s320/kelola+halaman.png" width="320" /></a></div><br /><br />Selamat berpromosi blog di facebook via halaman resmi...

Posted by Hii Sekai

Menghilangkan "Subscribe to"

<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Subscribe to" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSXybLHDdvS6grTe9WYt5IhCszkXeC-WOHd6j938gMw-bE63P7aAlUS-W4pJKePIhsa8B1p6zplf5LKC3ia71MdX7BndTWtvu_Yx80KHeAAYpde1NVr29I9xU07oKfj-01ugC3bE37eAM/s1600/subcribe+to.gif" width="150" /></div>Maksud "Subscribe to" di sini adalah link teks yang bertuliskan Langgan:Poskan Komentar (Atom)/sejenisnya terletak di bawah link Newer Post, Home, dan Older Post (paging control). Fitur ini berfungsi untuk umpan balik pengunjung blog terhadap setiap komentar dalam suatu posting. Umpan balik tersebut dapat berupa RSS atau Atom. Ketika pengunjung mengklik link subscribe to, maka dia akan diarahkan ke alamat feed komentar (posting tertentu) blog kamu, ex : Silakan klik <a href="http://optimasi-blog.blogspot.com/feeds/2725897855937870510/comments/default" target="_blank">berlangganan komentar posting ini</a>. Selanjutnya ia akan memilih berlangganan (subscribe) komentar dengan menggunakan salah satu site-feed, seperti; live bookmarks (FF), bloglines, my yahoo, atau google. Point diskusi <b>trik blogger</b> kita kali ini adalah berkenaan dengan fitur "subscribe to" seperti di atas, yakni bagaimana cara menghilangkannya.<br /><br /><div class="post-column-bottom"><ul><li>Sign-in ke akun blogger kamu.</li><br /><li>Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".</li><br /></ul>Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.<br /><br /><ul><li>Delete kode CSS seperti di bawah ini :</li><br /></ul>.feed-links { <br /><br />...<br /><br />}<br /><br /><br /><br />Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser, sehingga kamu tinggal memasukkan kata yang ingin dicari.<br /><br /><br /><br />Catatan :<br /><br />Kalau tidak ketemu, loncat ke step berikutnya.<br /><br /><ul><li>Kemudian cari kode HTML, berikut :</li><br /></ul><div style="color: red;"><div class='feed-links'></div><div style="color: red;"><data:feedLinksMsg/></div><div style="color: red;"><b:loop values='data:links' var='f'></div><div style="color: red;"><a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a></div><div style="color: red;"></b:loop></div><div style="color: red;"></div></div><ul><li>Delete semua kode berwarna merah di atas.</li><br /><li>Simpan template.</li><br /></ul>Sekarang coba lihat blog, masih nongol atau tidak fitur tersebut. Kalau masih ada, silakan ambil penghapus dan hapus link teks Langgan:Poskan Komentar (Atom)/sejenisnya. Becanda... Maksud OB kita diskusikan lagi dalam komentar posting ini.</div>

Posted by Hii Sekai

Menghilangkan "Status Message"

<div style="clear: both; margin:0.25em 1em 0.25em 0; float:left;"><img alt="Status Message" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbfKsroiy6tGPuLHmNoGEyeCjgQrUrhJY3grrX1VIJzl1xCWPqLfFBmBwtDIp6A-t9xxPNmtDRt4rGEzwlRF7PEzXLXTmSmcQ-J2GyaPzn0BstHm051UNWYUtXOqUVv7dHqiQ2DyYRsPU/s1600/status-msg-wrap.gif" width="150" /></div><p>"Status Message" dalam blogger merupakan status pesan yang ditampilkan pada halaman main (post) paling atas untuk memberitahukan sesuatu hal kepada pengunjung blog.<br /><br />Misalnya :<br /><br /><ol style="list-style-position:inside;"><li>Kamu menggunakan <a href="http://optimasi-blog.blogspot.com/2009/06/membuat-search-dalam-blog.html">fasilitas search dalam blog</a>, ketika mengetik kata/frase kata yang ingin dicari dan ternyata kata/frase kata itu tidak ada dalam postingan, maka muncul pesan yang menyatakan "Tidak ada entri yang cocok dengan kueri...".</li><br /><li>Kamu menggunakan readmore (Default blogger atau <a href="http://optimasi-blog.blogspot.com/2009/06/otomatis-readmore.html">otomatis readmore</a>), ketika mengklik salah satu label, maka akan ditampilkan pesan (disertai dengan posting yang sesuai dengan label tersebut) yang menyatakan "Menampilkan entri terbaru dengan label...".</li><br /></ol><p>"Status Massage" ini dapat kamu hilangkan dengan menambahkan kode CSS tertentu. Trik blogger ini cukup sederhana dan mudah diterapkan dalam blog kamu. Adapun kode CSS-nya adalah <pre><red>.status-msg-wrap {display:none;}</red></pre></p><p>Sekarang dimana kode itu diletakkan? Kode CSS dalam blogger terletak di antara kode <code><blue><b:skin><![CDATA[</blue></code> sampai dengan <code><blue>]]></b:skin></blue></code>. Atau agar lebih mudah letakkan saja di atas kode <blink><code>]]></b:skin>.</code></blink></p><p>Mohon dimaklumi posting trik blogger ini singkat saja, karena mau nonton final piala dunia (sok loe, OB. Bilang aja kalau isi postingnya memang segitu). Ssst..., jangan bikin OB malu dong!!!</p>

Posted by Hii Sekai

Cara Mendaftarkan Blogger di Google Search Engine

<div style="text-align: justify;">Setelah blog selesai, coba masukkan judul blog kamu pada <span style="font-style: italic;">search engine</span> google. Apa yang terjadi? Kemungkinan besar google belum bisa membacanya. Hal ini dikarenakan blog tersebut masih berpredikat sebagai "new custumer", sehingga masih belum cukup syarat untuk terindeks di <span style="font-style: italic;">mesin pencari</span> google. Terkecuali kamu telah melakukan beberapa <a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-blog.html"><span style="font-style: italic;">optimasi dalam blog</span></a>, namun upaya itu pun tidak jarang memerlukan waktu yang panjang dan proses yang berliku. <span style="font-weight: bold;">Optimasi blog</span> yang diulas kali ini pun tidak menjamin bahwa blog kamu akan cepat terindeks, tapi usaha ini perlu dilakukan dalam upaya memperkenalkan blog kamu kepada <a href="http://optimasi-blog.blogspot.com/2009/03/apa-itu-search-engine-optimization-seo.html"><span style="font-style: italic;">search engine</span></a> google.<br /><br /></div><div class="fullpost"><div style="text-align: justify;"><br /><br />Tanpa panjang lebar, mari bersama-sama kita buka simpul ikatannya satu demi satu "bagaimana cara mendaftar blogger di google" :<br /><br /></div><ul style="text-align: justify;"><li>Klik <a href="http://www.google.com/addurl/?continue=/addurl" target="_blank">di sini</a> untuk memulai pendaftaran. Halaman browsing kamu akan ditampilkan seperti di bawah ini</li><br /></ul><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ZIbr0NQMnhsGufmj62JHHSYBp_PgzT7SWz2q4tyCajM7L6slgtyy_OT59_uj0DMWkpBCytaWCPw0zZSucSxCmCTZJvurmMJNEU1FXG5rrd9eEsj1csab65g8-6MhlaorIpY1ijkvjo4/s1600-h/addurl.jpg"><img alt="Search Engine" border="0" id="BLOGGER_PHOTO_ID_5312927551069329858" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4ZIbr0NQMnhsGufmj62JHHSYBp_PgzT7SWz2q4tyCajM7L6slgtyy_OT59_uj0DMWkpBCytaWCPw0zZSucSxCmCTZJvurmMJNEU1FXG5rrd9eEsj1csab65g8-6MhlaorIpY1ijkvjo4/s320/addurl.jpg" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 141px;" /></a><br /><br /><ul style="text-align: justify;"><li>Pada "URL", masukkan alamat lengkap blog kamu (ex : http://namablogkamu.blogspot.com).</li><br /><li>Tambahkan komentar atau kata kunci yang mendeskripsikan mengenai blog kamu dalam kotak isi-an "Komentar". Kalimat atau kata kunci yang kamu masukkan dalam "Komentar" tidak akan mempengaruhi cara pengindeksan oleh google.</li><br /><li>Selanjutnya masukkan huruf yang tampil dalam kotak di atas tombol "Tambahkan URL"</li><br /><li>Terakhir klik "Tambahkan URL".</li><br /></ul><div style="text-align: justify;"><br /><br />Tunggu loading ke halaman verifikasi yang menyatakan blog kamu telah dimasukkan dalam database google dan bersabar untuk penayangannya di <span style="font-style: italic;">search engine</span> google.<br /><br /></div><br /><br />Selamat mencoba... <img alt="senyum" class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" title="senyum" /></div>

Posted by Hii Sekai

Fitur baru Blogger : Statistik blog

Sekarang pihak blogger telah meluncurkan fitur satistik pengunjung blog di blogspot untuk mengetahui tentang lalu lintas berita situs.<br /><br /><br /><br />Pilihan ini sudah diterapkan di <a href="http://draft.blogger.com/"><span style="font-weight: bold;">blogger in draft</span></a> dan tidak lama lagi juga akan segera diterapkan di <a href="https://www.blogger.com/start"><span style="font-weight: bold;">blogger</span></a>.<br /><br /><br /><br /><br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQs-ZoyTU4DcxCzzDbk1ABPrWYgMtrtBn8oKtnyoVNZ3ZCCS59ad7ByHo56L5x4DS_in46Ps-MiK1yEGL97QXK6268x1DaBSWAWMrmIPqRsT5ZVkmerlwjFd_6-4e17omqg2hImlMg4MA/s1600/statistik.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5489613496802270578" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQs-ZoyTU4DcxCzzDbk1ABPrWYgMtrtBn8oKtnyoVNZ3ZCCS59ad7ByHo56L5x4DS_in46Ps-MiK1yEGL97QXK6268x1DaBSWAWMrmIPqRsT5ZVkmerlwjFd_6-4e17omqg2hImlMg4MA/s400/statistik.png" style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 400px; height: 182px;" /></a><br /><br />Fitur ini seperti <span style="font-weight: bold;">Google-analytics</span> namun hanya memberikan gambaran rinci seperti pandangan Page untuk posting, lalu lintas dan sumbernya, audience.<br /><br /><br /><br />Yang keren tentang fitur ini adalah bahwa ia <span style="font-weight: bold;">dapat diperbarui setiap jam</span>. Jadi kamu tidak perlu menunggu terlalu lama untuk melihat statistik blog kamu.<br /><br /><br /><br />Kamu dapat membaca lebih lanjut tentang hal ini di <a href="http://bloggerindraft.blogspot.com/2010/07/introducing-blogger-stats.html"><span style="font-weight: bold;">Bloggerindraft</span></a>.<a name='more'></a>

Posted by Hii Sekai

Membuat Highlight Current Page Menu tanpa Javascript

Bagi kalian yang udah memasang <span style="font-weight: bold;">navigation menu</span> pada blognya mungkin masih ada kekurangan, yaitu jika mengarah pada salah satu halaman static belum terhighlight.<br /><br />Beberapa cara bisa dilakukan, tapi kebanyakan menggunakan <span style="font-weight: bold;">jQuery</span> atau juga <span style="font-weight: bold;">javascripts</span>. Tapi ada cara yang lebih mudah yang saya temukan di blognya <a href="http://www.oblo.web.id/" rel="nofollow" target="_blank">Denny</a> yang menggunakan modifikasi pada tag <ul> dengan permainan <b:if>.<br /><br /><br /><br />Tapi kode yang digunakan memang agak panjang dan berulang-ulang, tapi cara ini murni tanpa menggunakan Javascript yang katanya bisa membuat loading blog kita agak lama.<br /><br /><br /><br /><img alt="navigasi" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhonmi6LHFCZ3u-HPPLOwGw-xLSp-30qXrp8MjjIxhzMfzFz3_sEsZkT2WqYQsdSlyVmq036z69fBB5twB47w67mnoc7ySnyfn75zlNRHcq4GeXx3dQ8qkDz8_q91Zv0Ht0KRBsI05L2Vg/s400/highlight.JPG" style="display: block; margin: 0px auto 10px; text-align: center; width: 380px; height: 172px;" /><br /><br /><br /><br />Kita mulai aja ya.<br /><br /><br /><br />Login ke account blogger kamu.<br /><br />Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".<br /><br /><br /><br />contoh :<br /><br /><br /><br /><blockquote><ul id='nav'><br /><br /><li><a class='current' href='<span style="font-weight: bold;">URL HOME</span>' title='Homepages'>Home</a></li><br /><br /><li><a class='current' href='<span style="font-weight: bold;">URL ABOUT</span>' title='About Writer'>About</a></li><br /><br /><li><a class='current' href='<span style="font-weight: bold;">URL CONTACT</span>' title='Contact Person'>Contact</a></li><br /><br /><li><a class='current' href='<span style="font-weight: bold;">URL SITEMAP</span>' title='Sitemap'>Sitemap</a></li><br /><br /></ul></blockquote><br /><br /><br /><br />diganti menjadi :<br /><br /><br /><br /><blockquote><ul id='nav'><br /><br /><b:if cond='data:blog.url != "<span style="font-weight: bold;">URL HOME</span>"'><br /><br /><li><a href='<span style="font-weight: bold;">URL HOME</span>' title='Homepages'>Home</a></li><br /><br /><b:else/><br /><br /><li><a class='current' href='<span style="font-weight: bold;">URL HOME</span>' title='Homepages'>Home</a></li><br /><br /></b:if><br /><br /><b:if cond='data:blog.url != "<span style="font-weight: bold;">URL ABOUT</span>"'><br /><br /><li><a href='<span style="font-weight: bold;">URL ABOUT</span>' title='About Writer'>About</a></li><br /><br /><b:else/><br /><br /><li><a class='current' href='<span style="font-weight: bold;">URL ABOUT</span>' title='About Writer'>About</a></li><br /><br /></b:if><br /><br /><b:if cond='data:blog.url != "<span style="font-weight: bold;">URL CONTACT</span>"'><br /><br /><li><a href='<span style="font-weight: bold;">URL CONTACT</span>' title='Contact Person'>Contact</a></li><br /><br /><b:else/><br /><br /><li><a class='current' href='<span style="font-weight: bold;">URL CONTACT</span>' title='Contact Person'>Contact</a></li><br /><br /></b:if><br /><br /><b:if cond='data:blog.url != "<span style="font-weight: bold;">URL SITEMAP</span>"'><br /><br /><li><a href='<span style="font-weight: bold;">URL SITEMAP</span>' title='Sitemap'>Sitemap</a></li><br /><br /><b:else/><br /><br /><li><a class='current' href='<span style="font-weight: bold;">URL SITEMAP</span>' title='Sitemap'>Sitemap</a></li><br /><br /></b:if><br /><br /></ul></blockquote><br /><br /><br /><br />Ganti huruf yang dicetak tebal dengan Link URL yang dipakai.<br /><br /><br /><br />Kemudian pada kode CSSnya ditambahkan kode baru :<br /><br /><br /><br /><blockquote>#nav ul li a.current {color:#000; background:#fff; text-decoration:none;}</blockquote><br /><br /><br /><br />Kalau kamu sedikit menguasai pengkodean CSS maupun HTML, kode-kode diatas bisa dirubah agar tampak berbeda...<br /><br /><br /><br />Contoh penerapannya bisa kamu lihat di blog <a href="http://rudyazhar.blogspot.com" target="_blank"><span style="font-weight: bold;">Rudy Azhar</span></a> pada Navigasi paling atas kanan.

Posted by Hii Sekai