Admin Bar Widget untuk Blogger

Ketika ingin mengupdate blog kadang-kadang kita mendapatkan beberapa ide posting baru atau untuk melakukan beberapa perubahan dengan blog. Admin bar ini memudahkan untuk menavigasi langsung kepada point-point yang ingin kita rubah secara langsung.<br /><br /><br /><br />widget ini menciptakan link yang akan membawa langsung ke pilihan blogger. Ada dua jenis dan masing-masing memiliki cara instalasi yang berbeda. Kita akan membahas kedua cara tersebut.<br /><br /><br /><br />1. Instalasi Custom jenis-jenis ini adalah lebih bergaya, dapat melihat screenshot di bawah ini.<br /><br /><br /><br /><div style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiAjVDqJR8NO2DimBTbu-E2-zAYyC8EX5c6_LgBPb9Pj9s4Pfn6a2m3nMKFf4YdMn_yTjKtHWpLV7PPyFdBwEuqFFch1Qi5gswAxwPQLSEG6PMEY7U_kLkhZhfQOeECC_5l21Sx0q9OP8/s1600/adminbar.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Admin Bar Widget" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiAjVDqJR8NO2DimBTbu-E2-zAYyC8EX5c6_LgBPb9Pj9s4Pfn6a2m3nMKFf4YdMn_yTjKtHWpLV7PPyFdBwEuqFFch1Qi5gswAxwPQLSEG6PMEY7U_kLkhZhfQOeECC_5l21Sx0q9OP8/s400/adminbar.jpg" width="393"/></a></div><br /><br />Untuk memasang widget ini, pergi ke PAGE ELEMENT>> ADD A GADGET>> HTML/JavaScript dan salin kode di bawah ini.<br /><br /><br /><br /><pre><ul class="adminbar"><br /><li><a class="dashboard" href="http://www.blogger.com/home" target="_blank">Dashboard</a></li><br /><li><a class="settings" href="http://www.blogger.com/blog-options-basic.g?blogID=<b>####</b>" target="_blank">Change Settings</a></li><br /><li><a class="layout" href="http://www.blogger.com/rearrange?blogID=<b>####</b>" target="_blank">Change layout</a></li><br /><li><a class="editpost" href="http://www.blogger.com/post.g?blogID=<b>####</b>" target="_blank">Edit posts</a></li><br /><li><a class="newpost" href="http://www.blogger.com/post-create.g?blogID=<b>####</b>" target="_blank">New post</a></li><br /></ul></pre><br /><br />Rubah <b>####</b> dengan id blog Anda. Anda dapat menemukan ID blog anda pada Adress Bar diatas, kemudian jangan lupa disimpan.<br /><br /><br /><br /><div style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinryRh9HNH2nY8okRU29eZ8_AFt4ZDypl9a18KzjXzRnHBjxPkfZtGnIsBmxBKdKd4nEvsiDehb1E6oi5qfVJBOhzzGgw4o3aEY3Sz7kXRKgBjrE3ZsSQdI_2OQXbXEI5-U6iYGKS5QYw/s1600/idblog.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="ID Blog" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinryRh9HNH2nY8okRU29eZ8_AFt4ZDypl9a18KzjXzRnHBjxPkfZtGnIsBmxBKdKd4nEvsiDehb1E6oi5qfVJBOhzzGgw4o3aEY3Sz7kXRKgBjrE3ZsSQdI_2OQXbXEI5-U6iYGKS5QYw/s400/idblog.jpg" width="400"/></a></div><br /><br />Kemudian pergi ke <i>EDIT HTML</i> lalu temukan <i>]]></b:skin></i> kemudian salin kode berikut diatasnya:<br /><br /><br /><br /><pre>ul.adminbar<br />{background-color:#EEEEEE;<br />border:1px solid #E6E8E9;<br />margin-bottom:8px;<br />padding:5px 5px 0;<br />}<br />ul.adminbar li {<br />background-color:#FAFAFA;<br />border:1px solid white;<br />list-style:none outside none;<br />margin-bottom:6px;<br />outline:1px solid #DDDDDD;<br />padding:12px;<br />}<br />ul.adminbar li a<br />{display:block;<br />color:#888888 !important;<br />text-shadow:1px 1px 0 #FFFFFF;<br />text-decoration:none;<br />font-size:22px;<br />height:27px;<br />margin:0 0 0 15px;<br />}<br />a.dashboard<br />{background:url(http://i54.tinypic.com/9iseuw.jpg) no-repeat 0px 0px;<br />padding:4px 0 2px 47px;<br />}<br />a.settings<br />{background:url(http://i56.tinypic.com/2hdofnt.jpg) no-repeat 0px 0px;<br />padding:5px 0 0 47px;}<br />a.layout<br />{background:url(http://i55.tinypic.com/2d8s4qw.jpg) no-repeat 0px 0px;<br />padding:5px 0 0 47px;<br />}<br />a.editpost<br />{background:url(http://i54.tinypic.com/10gwpl5.jpg) no-repeat 0px 0px;<br />padding:5px 0 0 47px;<br />}<br />a.newpost<br />{background:url(http://i54.tinypic.com/4ky1xi.jpg) no-repeat 0px 0px;<br />padding:5px 0 0 47px;<br />}</pre><br /><br />Kemudian Simpan & Selesai sudah.<br /><br /><br /><br />Sekarang jika Anda mengalami kesulitan dengan widget diatas, ada cara lain yang lebih sederhana untuk menginstalnya tanpa menggunakan CSS.<br /><br /><br /><br />2. Instalasi jenis klasik ini lebih sederhana dan mudah. Hanya pergi ke PAGE ELEMENT>> LINK LIST dan tambahkan link berikut di dalamnya.<br /><br /><br /><br /><pre>Dashboard : http://www.blogger.com/home<br /><br />Change Settings : http://www.blogger.com/blog-options-basic.g?blogID=<b>####</b><br /><br />Change Layout : http://www.blogger.com/rearrange?blogID=<b>####</b><br /><br />Edit Posts : http://www.blogger.com/post.g?blogID=<b>####</b><br /><br />New Post : http://www.blogger.com/post-create.g?blogID=<b>####</b><br /></pre><p>Ganti <b>####</b> dengan ID blog kamu dan kemudian simpan.</p>

Posted by Hii Sekai

2 Gadget baru untuk Blogger

Setelah meluncurkan fitur statistik blog untuk blogger yang kini telah meluncurkan sebuah widget Blog's Stat bersama dengan widget Popular Post. Ini adalah dua widget baru yang telah ditambahkan blogger di <a href="http://draft.blogger.com/">draft.blogger</a> untuk diuji.<br /><br /><br /><br /><div style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKvasVerXzq2jlaVWCt11pcOKgy0W9O2_xgT6PtIHFDqz6_hm8RW40NWEHaRthn1smvkjGLlMyFGznQbpGhZ8Tm-SRRVMGUCdRIJPQ0NtrPs3fpfaU4EaDUs4Xr4QZOnvQWGfWsI-ihHo/s1600/2+widget.png" style="margin-left: 1em; margin-right: 1em;"><img alt="New Blogger Gadget" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKvasVerXzq2jlaVWCt11pcOKgy0W9O2_xgT6PtIHFDqz6_hm8RW40NWEHaRthn1smvkjGLlMyFGznQbpGhZ8Tm-SRRVMGUCdRIJPQ0NtrPs3fpfaU4EaDUs4Xr4QZOnvQWGfWsI-ihHo/s400/2+widget.png" width="400"/></a></div><br /><br /><h3>Popular Post</h3>widget ini menampilkan semua posting yang populer yang dapat diurutkan berdasarkan tiga cara baik waktu Semua, Terakhir 30 hari, lalu 7 hari. Anda juga dapat memilih untuk menampilkan thumbnail dari posting tersebut. Anda dapat melihat screenshot di bawah ini.<br /><br /><br /><br /><div style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipImpliU4-Cs0Gxznr-sClFhwiPOMMRBqcKMCmPEBM73rMqUNvqk7clhhN7xYYeJeh3RmA7hXDFjx-R-5u4ieeZRrK7mbZ1FIegTSjQxWNhLVJ7Zt30IBcJd5K8OB622bYqxU0fJ8umnU/s1600/popular+post.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Popular Post Gadget" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipImpliU4-Cs0Gxznr-sClFhwiPOMMRBqcKMCmPEBM73rMqUNvqk7clhhN7xYYeJeh3RmA7hXDFjx-R-5u4ieeZRrK7mbZ1FIegTSjQxWNhLVJ7Zt30IBcJd5K8OB622bYqxU0fJ8umnU/s400/popular+post.png" width="400"/></a></div><br /><br /><h3>Blog’s stats</h3>widget ini menampilkan total tampilan halaman gadget blog.Tampil dalam berbagai gaya dan juga dilengkapi dengan grafik sparkline opsional. Lihat gambar di bawah.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10xtQW-hf6Wq7C2PJ0dH9D6GEKqxWSBQMT3BkzS0lhlJPb5AAFXyZmXIaGDpRd9fPwRdPU95n_W__yHVno3rQ2vtL3BDLW-Z2RMS-k_hiSKr7vb1NYg4y3tbWCZBaYtANujVlHAzOKzY/s1600/blogstats.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Blog Stat Gadget" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi10xtQW-hf6Wq7C2PJ0dH9D6GEKqxWSBQMT3BkzS0lhlJPb5AAFXyZmXIaGDpRd9fPwRdPU95n_W__yHVno3rQ2vtL3BDLW-Z2RMS-k_hiSKr7vb1NYg4y3tbWCZBaYtANujVlHAzOKzY/s400/blogstats.png" width="400"/></a></div><br /><br />Keduanya memang masih belum diterapkan dalam blogger versi dasar. Itu akan datang di blogger dasar dalam satu minggu atau bahkan kurang.

Posted by Hii Sekai

Lagi Malas Posting SEO dan Trik Blogger

<p><div style="clear: left; float: left; margin-bottom: .8em; margin-right: 1em; text-align: center;"><img alt="Ketupat Lebaran" border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj1OFyRVKqWfkOaRzISgCO_8T5PvGMpDz2Enj_qr3YePBK_Y65wn_RKuc13jp4SqMZMK-gEznNDC1oUpvPtgIqjUI5VbWBR7GiWF2FfTNooSYW87wozHBIa6Ta09ugRQHfQ28BjWEKZ7o/s1600/ketupat+lebaran.jpg" width="120" /></div>Emang, kalau sudah kedatangan tamu "Malas", rasanya bikin apa saja jadi serba salah.  Enaknya sih dibawa tidur :-D   Dan sekarang sedikit kesempatan, OB manfaatkan untuk hanya sekedar ber-hello ria dengan kawan-kawan narablog.  Apalagi mumpung pas lebaran, pas kondisinya, pas waktunya, pas tempatnya, pas...pas...salonpas.  OB tidak akan mengupas atau berdiskusi tentang <b>SEO</b> atau <b>trik blogger</b>.  Namun untuk ngucapin ini nih:</p><blockquote><p>Saat ada...<br /><br />Tiada bersuara<br /><br />Saat tiada...<br /><br />Teriak sesal bergema<br /><br />Sebelum adamu menjadi tiada bagiku</p><p>Izinkan sesalku menghampiri lembut dalam pangkuanmu<br /><br />Mohon maaf lahir dan batin</blockquote></p><br /><p style="text-transform:uppercase;text-align:center;font-size:large;color:#274e13;">Selamat Hari Raya Idul Fitri 1431 H</p>

Posted by Hii Sekai

Animasi Transparent Navbar

<p>Sumber : <a href="http://ardianzzz.blogspot.com/2009/11/animasi-jquery-untuk-navbar-blogger.html">(blogspot) Animasi jQuery untuk Navbar</a> by <b>Ardianzzz</b></p><p>Yang perlu dijadikan catatan pada <i>trik</i> ini adalah kita tidak mengubah navbar bawaan default blogger, melainkan sedikit menambah kreasi agar navbar tersebut tampil lebih menarik. Di samping itu, ketika kita mengunjungi blog lain tidak jarang ditemukan blog yang memiliki kresi pada navbarnya, antara lain ; memasang auto hide, menindih navbar bawaan blogger dengan navbar lain, <a href="http://optimasi-blog.blogspot.com/2010/05/pasang-navbar-statis-ala-apture.html">mengganti dengan jenis navbar lain</a>, bahkan <a href="http://optimasi-blog.blogspot.com/2010/05/menghapus-secara-permanen-navbar.html">menghilangkan secara permanen navbar tersebut</a>.</p><p><em>Nah</em>, jika kamu tidak ingin menghilangkan navbar default tersebut, tapi hanya ingin memodifikasinya, mungkin <b>trik blogger</b> ini dapat menjadi salah satu referensi untuk diterapkan dalam blog kamu. <i>Trik</i> ini menampilkan navbar blogger secara transparan dengan menggunakan jQuery, namun akan terlihat ketika didekati oleh kursor mouse.  Adapaun jQuery-nya dapat disimak seperti di bawah ini :</p><pre><code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /><script type='text/javascript'><br />$(document).ready(function(){<br />$("#navbar").fadeTo("slow", <span style="color: red;">0.1</span>);<br />$("#navbar").hover(function(){<br />$(this).fadeTo("slow", <span style="color: #38761d;">1.0</span>);<br />},function(){<br /><br />$(this).fadeTo("slow", <span style="color: red;">0.1</span>);<br />});<br />});<br /></script></code></pre><p>Silakan Copas jQuery di atas di atas tag <b><span style="color: red;"></head></span></b>.</p><p>Catatan :<br /><br />Ganti kode yang berwarna merah (<span style="color: red;">0.1</span> = 90%) menggambarkan transparasi navbar pada saat belum didekati kursor mouse. Jika ingin navbar tidak nampak sama sekali letakkan saja nilai <span style="color: blue;">0.0</span> :)</p><p>Ganti kode yang berwarna hijau (<span style="color: #38761d;">1.0</span>) menjadi <span style="color: blue;">0.75</span> jika ingin transparasi navbar saat didekati mouse bernilai <span style="color: blue;">25%</span>. Sedangkan jika tetap pada nilai <span style="color: #38761d;">1.0</span>, maka navbar akan terlihat sangat jelas (tanpa transparansi) saat didekati kursor mouse.<br/>Selamat mencoba...</p>

Posted by Hii Sekai

Kompres Kode CSS dan Javascript

<p>Sumber :  <a href="http://www.o-om.com/2010/04/compress-javascript-dengan-yui.html" target="_blank">Compress Javascript dengan YUI Compressor</a> by <b>O-OM</b>.</p><p>Mungkin kamu tahu <span class="amp">&</span> mengerti komponen-komponen apa saja yang menyebabkan suatu blog lambat loading (internal), antara lain :  Banyaknya assessoris blog (widget/gadget), menampilkan banyak image, tampilan full post di halaman utama (home), banyaknya script, dan lain-lain.  Atau kamu ingin mendefinisikan <span class="amp">&</span> menambahkan "dan lain-lain" dalam komentar.</p><p>Dalam <i>trik blogger</i> kali ini, kita akan mendiskusikan tentang bagaimana mengoptimalkan kode CSS <span class="amp">&</span> javascript agar sedikit banyaknya dapat lebih cepat loading.  Nah, layanan online yang dapat kita pergunakan untuk melaksanakan fungsi tersebut adalah <a href="http://refresh-sf.com/yui/" target="_blank">Online YUI Compressor</a>.  Cara menggunakan layanan ini juga tidak sulit, kita tinggal memasukan semua kode javascript yang ingin di-kompresi, ingat! tanpa memasukan tag <span style="color: blue;"><script type='text/javascript'> ... </script></span> atau <span style="color: blue;"><script type='text/javascript'> //<![CDATA[ ... //]]> </script></span> tapi hanya kode utamanya saja.</p><p>Adapun cara menggunakan <a href="http://refresh-sf.com/yui/" target="_blank">Online YUI Compressor</a> dapat direview seperti ulasan berikut :</p><br /><br /><div class="separator" style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Online YUI Compressor" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEpjKcjtWz_MtuXcnuQVm4CVhyphenhyphenpI2aseDq8gTqFDXU0Ymm3HzJPI_rTQj4Y_NEUlcOjrmlDVFZSBa_ET3OQL8y8DJCqy_XROvRSqety1l9EBmtPahySqqNUsrHkcilAN-A5BHMOaFJho4/s400/YUI+Compressor.jpg" width="400" /></div><br /><br /><ol><li>Masukkan kode javascript dalam kotak "Code".</li><br /><li>Pilih secara dropdown jenis file pada "File Type".</li><br /><li>Selanjutnya untuk opsi-opsi kosongkan.</li><br /><li>Klik tombol "Compress"</li><br /><li>Tunggu beberapa saat file dikompres dan hasilnya akan ditampilkan tepat di bawah tombol "Compress".</li><br /><div class="separator" style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Hasil Compress" border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeu-gtvGm6VR9wG9rBDkvUZyA8uGUOIbUrI7pLHWoFjASSkYHMxkjsUJmJGNUGA1n-SVrVHR-lrhqgbRXJmBtGGYo-PFrt502WSB-eRKm6JnlUslufjsk984LSatm5KKoGVktdu1LOFFw/s320/Hasil+YUI+Compreesor.jpg" width="320" /></div><li>Copy kode tersebut <span class="amp">&</span> paste di antara tag <span style="color: blue;"><script type='text/javascript'> ... </script></span> atau <span style="color: blue;"><script type='text/javascript'> //<![CDATA[ ... //]]> </script></span> dalam blog kamu.</li><br /></ol><br /><br />Contoh :<br /><br /><br /><br /><ul><li>Javascript otomatis readmore.</li><br /></ul><div class="code"><script type='text/javascript'><br /><br />var thumbnail_mode = "float" ;<br /><br />summary_noimg = 450;<br /><br />summary_img = 450;<br /><br />img_thumb_height = 120;<br /><br />img_thumb_width = 120;<br /><br /></script><br /><br /><br /><br /><script type='text/javascript'><br /><br />//<![CDATA[<br /><br /><div style="color: red;">function removeHtmlTag(strx,chop){</div><div style="color: red;">if(strx.indexOf("<")!=-1)</div><div style="color: red;">{</div><div style="color: red;">var s = strx.split("<");</div><div style="color: red;">for(var i=0;i<s.length;i++){</div><div style="color: red;">if(s[i].indexOf(">")!=-1){</div><div style="color: red;">s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);</div><div style="color: red;">}</div><div style="color: red;">}</div><div style="color: red;">strx = s.join("");</div><div style="color: red;">}</div><div style="color: red;">chop = (chop < strx.length-1) ? chop : strx.length-2;</div><div style="color: red;">while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;</div><div style="color: red;">strx = strx.substring(0,chop-1);</div><div style="color: red;">return strx+'...';</div><div style="color: red;">}</div><div style="color: red;"><br /><br /></div><div style="color: red;">function createSummaryAndThumb(pID){</div><div style="color: red;">var div = document.getElementById(pID);</div><div style="color: red;">var imgtag = "";</div><div style="color: red;">var img = div.getElementsByTagName("img");</div><div style="color: red;">var summ = summary_noimg;</div><div style="color: red;">if(img.length>=1) {</div><div style="color: red;">imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';</div><div style="color: red;">summ = summary_img;</div><div style="color: red;">}</div><div style="color: red;"><br /><br /></div><div style="color: red;">var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';</div><div style="color: red;">div.innerHTML = summary;</div><div style="color: red;">}</div>//]]><br /><br /></script></div>Catatan :<br /><br />Kode yang berwarna merah merupakan kode yang dimasukkan dalam kotak "Code" pada site <a href="http://refresh-sf.com/yui/" target="_blank">Online YUI Compressor</a>.<br /><br /><br /><br /><ul><li>Hasilnya setelah dikompres <span class="amp">&</span> dimasukkan dalam full kode Javascript <a href="http://optimasi-blog.blogspot.com/2009/06/otomatis-readmore.html">otomatis readmore</a>.</li><br /></ul><div class="code"><script type='text/javascript'><br /><br />var thumbnail_mode = "float" ;<br /><br />summary_noimg = 450;<br /><br />summary_img = 450;<br /><br />img_thumb_height = 120;<br /><br />img_thumb_width = 120;<br /><br /></script><br /><br /><br /><br /><script type='text/javascript'><br /><br />//<![CDATA[<br /><br /><div style="color: red;">function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};</div>//]]><br /><br /></script></div><br /><br />Semoga bermanfaat...

Posted by Hii Sekai

Japaian Urang Banjar1 Template Release

Nah ini ada lagi satu <span style="font-style: italic;">template blogger</span> yang tampil kalem (hitam-putih). Khusus bagi narablog yang suka menulis kehidupan kesehariannya, blog ini dapat menjadi <span style="font-style: italic;">template blog</span> yang direkomendasikan. Namun tidak menutup kemungkinan narablog yang berkategori non-diary menerapkan template ini. Alkisah-nya promosi nih...<br /><br /><br /><br />Kunjungi atau klik link berikut <a href="http://utuharies.blogspot.com/2010/08/japaian-urang-banjar1-template-release.html">Japaian Urang Banjar1 Template Release</a> untuk melihat tampilannya (sekaligus demo version). Sedangkan fitur-fitur <span class="amp">&</span> link downloadnya juga dapat kamu review serta download di blog tersebut. Sebagai tambahan fasilitas beda komentar antara owner blog dengan pengunjung sudah diaplikasikan dalam template Japaian Urang Banjar1 tersebut.<br /><br /><br /><br />N/B :<br /><br />Mohon jangan dihapus kode yang bertuliskan "Please don't remove this credit" sampai dengan "End original credit".<br /><br /><br /><br />Selamat mencoba...

Posted by Hii Sekai

Blogger Copy Template Release

<p>Sudah lihatkan format dan gambaran tentang blog ini?  Kira-kira bagaimana menurut pendapat kamu ?  bagus, lumayan bagus, atau hampir bagus.  Lho...lho... kok bagus semua pilihannya.  Apabila kamu tertarik untuk mencoba <i>template</i> ini, maka akan OB tunjukkan link downloadnya.  Tapi sebelum kamu mendownload, mari kita review fitur-fitur yang diadopsi oleh "<b>Blogger Copy Template</b>" ini.</p><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Image Template" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZuv-trAR3-eiy-GakmfzWJpSy6ByymeIcgUke3-_wRx4CoeKDpc8mPNdJxZVe8L3_RbsMPdr3CGD2UwgqzM31r6gGPnDCT1wSJvYmarR4bpKRT4bnUq41clw2-MNcyeIlYEVFB68HFro/s400/Blog+Image.png" title="Blogger Copy Template" width="400" /></div><p><b>Blogger Copy Template</b> support :</p><ul><li>Meta Tag SEO friendly.</li><br /><li>Favicon included.</li><br /><li>Horizontal navigation <span class="amp">&</span> search box.</li><br /><li>Bottom 3 column widget ready.</li><br /><li>Highlight author comments.</li><br /><li>Click the label showing the post title only.</li><br /><li>Paralel date header with comment link.</li><br /><li>Breadcrumbs included.</li><br /></ul><p>Sederhana bukan? Belum ditambahkan macam-macam script agar kamu yang mengadposi <i>template blogger</i> ini lebih leluasa untuk memodifikasinya. Berikut gambaran data waktu download (waktu halaman blogger copy template tampil penuh di layar monitor)  setelah dianalisa melalui <a href="http://websiteoptimization.com/services/analyze/">Website Optimization.com</a> (jelas cepat, karena belum banyak postingnya).</p><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Download Times" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAsaF7lMZ8n93vGTtfWf4ff5c4Pz9PtNPqbqzC1wl4UriTLlqIeuJvbX4Uk27Q5ZsxzhfKkUx1FnaHktiK_YsSNz-oPfSPhiHrV2WP1sR8xsOSyhk6akWWC96V_95pgcKNKVco-jCpwys/s1600/Download+times.png" /></div><p>Hampir kelupaan, ini link downloadnya dijamin cepat tanpa ada banner/link iklan yang melingkupinya.</p><div align="center" style="text-decoration: none;"><a href="https://4047741722708014425-a-1802744773732722657-s-sites.googlegroups.com/site/optimasiblogger/kode-html/blogger-template/Blogger-CopyTemplate.zip?attachauth=ANoY7cpJ7Ymdzfqd74rTDllIAJ6u9_qr80opT0MNseJcxNekXTpRUfJ1QbFp0YpWwTP8GtSggKZvOIGE5NPHS7InG3Ii-ct_4ZSS7tWmziZoybqFI12nXPL-icvjU8-DTL7rXdlaiJInKCRyKO20D7NjOLSTUoWO9KrqwmsrCk1kY6mFbCZ9sFS8H6dDxN0igZmo6mz3x6ygQbR0Ww7Xxf-jd8LkgnOVhs3e7ndCnjPfdbHtOomI5iW3DtFFrH5XTWP80FeCbEyy&attredirects=0"><button type="button">Download Template</button></a></div><h2 style="text-align:center; text-transform:uppercase;"><a href="http://blogujitemplate2.blogspot.com/">Versi demo</a></h2><p>Mohon jangan dihapus kode yang bertuliskan "Please don't remove this credit" sampai dengan "End original credit".  Cukup ganti link copyright-nya saja, karena letaknya sudah OB optimasi yakni penutup dari seluruh content blog (paling bawah pojok kanan).</p>

Posted by Hii Sekai

Membuat "Back to Top"

<span class="awal">K</span>etika kita menulis suatu blog yang lumayan panjang, scroll halaman pun akan semakin lama. Kadang yang membaca ingin pula buru-buru untuk menyelesaikan bacaannya, namun ada kalimat yang harus dipahami sebelumnya. Kebetulan kalimat tersebut berada di paragrap pertama (atas). Repot juga muter scroll mouse atau sekedar menggeser bar yang letaknya dikanan halaman browser. Seandainya ada satu shortcut yang tersedia dalam blog, kemungkinan hal di atas bisa diminimalisasi. Nah, itu yang namanya fasilitas "Back to Top" atau kembali ke atas.<br /><br /><br /><br />Bagaimana <i>trik blogger</i> untuk menambah fasilitas itu, OB? EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji. Alhamdulillah, sekarang OB tidak sakit gigi <span class="amp">&</span> sariawan. Sebenarnya <b>trik blogger</b> membuat "Back to Top" ini merupakan rekomendasi dari mas Rudi (<a href="http://rudyazhar.com/" rel="nofollow" target="_blank">Blog Rudi Azhar</a>) yang merupakan salah satu admin <a href="http://optimasi-blog.blogspot.com/">optimasi blog</a>.<br /><br /><br /><br /><b>Cara I :</b><br /><br /><br /><br /><ul><li>Tambahkan kode CSS berikut di atas kode ]]></b:skin>.</li><br /></ul><div class="code">p.to-top {<br /><br />font-family:Trebuchet MS, Verdana, Verdana Ref, sans serif;<br /><br />font-size:90%;<br /><br />float:right;<br /><br />padding-right:10px; }</div><br /><br />Keterangan :<br /><br /><ol><li>font-family = keluarga bentuk teks yang akan kita tampilkan.</li><br /><li>font-size = ukuran teks.</li><br /><li>float = peletakkan teks (kanan atau kiri)</li><br /><li>padding-right = jarak antara teks dengan bidang sebelah kanan.</li><br /></ol><ul><li>Sekarang, kita tinggal menentukan posisi teks link back to top, misalnya diletakkan di atas footer.</li><br /><li>Cari kode yang menunjukkan awal footer, seperti : <div class='footer-wrapper'>, <div class='footer'>, <div id='footer-wrapper'>, <div id='footer'>, <span class="amp">&</span> sejenisnya.</li><br /><li>Kemudian copas kode berikut di atasnya :</li><br /></ul><div class="code"><p class='to-top'><a href='#to-top' title='back to top'>back to top</a></p></div><ul><li>Jangan lupa melakukan edit pada kode <body> menjadi <body id='to-top'></li><br /><li>Kemudian simpan template kamu.</li><br /></ul>Catatan :<br /><br /><ol><li>Untuk peletakkan back to top tidak harus di atas footer.</li><br /><li>Silakan edit/modifikasi kode CSS tersebut sehingga sesuai dengan yang kamu harapkan.</li><br /><li>Blog demonya ada di <a href="http://utuharies.blogspot.com/" targer="_blank">utuharies.blogspot.com</a>.</li><br /></ol><br /><br /><b>Cara II :</b><br /><br /><ul><li>Metode ini menggunakan jquery, sehingga scrolling halaman (ketika mengklik back to top) lebih lembut <span class="amp">&</span> akan mengikuti scroll halaman.  Demo versionnya silakan perhatikan back to top di sebelah kanan bawah blog ini.</li><br /></ul><div class="code"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br /><br />//<![CDATA[<br /><br />$(document).ready(function(){$("a[href*=#to-top]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});<br /><br />//]]><br /><br /></script></div><br /><br />Catatan :<br /><br />Jquery di atas sudah dikompres (compress) menggunakan <a href="http://www.refresh-sf.com/yui/" target="_blank">online YUI Compressor</a>.<br /><br /><br /><br /><ul><li>Letakkan jquery back to top tersebut di atas kode </head></li><br /><li>Tambahkan kode CSS berikut di atas ]]></b:skin>.</li><br /></ul><div class="code">#back-to-top {right:20px;bottom:40px;position:fixed;}</div><ul><li>Ganti kode <body> dengan <body id='to-top'></li><br /><li>Selanjutnya tambahkan kode berikut di atas kode </body>.</li><br /></ul><div class="code"><div id='back-to-top'><br /><br /><a href='#to-top' title='Back to Top'><img alt='back to top' border='0' <span style="color: blue;">height='37'</span> src='<span style="color: red;">http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png</span>' <span style="color: blue;">width='48'</span>/></a><br /><br /></div></div><br /><br />Catatan :<br /><br /><ol><li>height = tinggi image</li><br /><li>width = lebar image</li><br /><li>Silakan ganti image (<span style="color: red;">http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png</span>) dengan image kamu sendiri. Atau menggunakan image yang ada dengan terlebih dulu mendownloadnya dan upload ke hosting image kamu (<a href="http://optimasi-blog.blogspot.com/2010/06/kenapa-image-di-template-blog-tidak.html">Kenapa image tidak muncul?</a>).</li><br /></ol><ul><li>Simpan template.</li><br /></ul><br /><br />Selamat membuat back to top...

Posted by Hii Sekai

Fitur-fitur baru pada Blogger

Akhirnya blogger menampilkan banyak fitur-fitur baru untuk optimasi pengguna yang menggunakan blog di blogspot.<br /><br />Kali ini saya akan membeberkan fitur-fitur apa saja yang telah disediakan oleh blogger :<br /><br /><br /><br /><b>1. Template Designer</b><br /><br />Sebuah fitur yang sangat luar biasa ditambahkan ke blogger yang memungkinkan para blogger untuk membuat tema yang indah untuk blog mereka melalui program tunggal. fitur ini dapat dibaca di <a href="http://buzz.blogger.com/2010/06/blogger-template-designer-now-available.html">Blogger.buzz</a>.<br /><br /><br /><br /><br /><br /><b>2. New sharing buttons</b><br /><br />Pilihan ini adalah pilihan lain yang baru-baru ini ditambahkan. Sekarang kamu tidak perlu menambahkan tombol bookmark sosial untuk blogger secara manual. Ini dapat dengan mudah ditambahkan tetapi pergi ke PAGE ELEMENT>> BLOG POST.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXnUMlaOqU-C3x5jIeHzHp03sTrtc1spcJ4KH8watYD6GwFQVTA5m9ZHVJdMVUGS0AjWbizdG7SOhWsVJk4BIV5DJCqwlwcjNhmpDw20aeG-CGFANe0_50-KXxBrOg-qLnWgrLnTsUHvY/s1600/sharebuttom.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXnUMlaOqU-C3x5jIeHzHp03sTrtc1spcJ4KH8watYD6GwFQVTA5m9ZHVJdMVUGS0AjWbizdG7SOhWsVJk4BIV5DJCqwlwcjNhmpDw20aeG-CGFANe0_50-KXxBrOg-qLnWgrLnTsUHvY/s400/sharebuttom.png" width="400" /></a></div><br /><br /><b>3. Memasukkan Video Player</b><br /><br />Blogger telah memperkenalkan sebuah pemutar video yang lebih baik untuk video yang menyerupai pemutar YouTube.<br /><br /><br /><br /><iframe allowfullscreen="allowfullscreen" class="b-hbp-video b-uploaded" frameborder="0" height="266" id="BLOGGER-video-0be0734146d67dd3-16570" mozallowfullscreen="mozallowfullscreen" src="https://www.blogger.com/video.g?token=AD6v5dw9JbE3J3M_oypqqZHppginqSTUiHDPd-zT6rdE7frQ4Hfg8N25-_IkMX3pXoccLG7izx2Bfo7_GYR2uUsKbDLtL8tLoQDR4TStjIUgiiM1qSGQ8DBRUtKbdNCFzLouZjQID4Kj" webkitallowfullscreen="webkitallowfullscreen" width="320"></iframe><br /><br /><br /><br />Player ini memungkinkan melihat video dengan full-screen. Player baru ini juga memiliki antarmuka pengguna yang lebih baik, seperti animasi seekbar (bar merah di sepanjang bagian bawah video) dan tombol yang lebih besar. Anda juga dapat klik kanan pada play untuk melihat informasi lebih lanjut tentang video, seperti kinerja pemutaran ("Tampilkan Video Info") atau jaringan kecepatan ("Take Speed Test").<br /><br /><br /><br />Video yang akan Anda upload akan terlihat di blog Anda tetapi tidak di YouTube.<br /><br /><br /><br /><b>4. Pratinjau Posting yang lebih baik</b><br /><br />Selain blogger desainer juga menambahkan opsi baru yang lebih baik pasca pratinjau. Sebelum Anda mempublikasikan posting, jika Anda ingin melihat posting Anda untuk melihat bagaimana sebenarnya akan tampak, tekan saja tombol Preview pada halaman Post Baru. Anda akan melihat jendela baru terbuka dengan tampilan yang lebih akurat.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_d8hljvTwok6jGJxxVyQeYTjs3ROLM8-Kkq9nPcvQIV_O5P-BMUi37FRbDm8AzFHOeS4Ngp_X04NviCxMhXYKVv3F6tqcD0_hzwb4_G1ne81AHhTVSDMRf7SUtZehzo-oq2mVKp5xdY/s1600/pratinjau.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_d8hljvTwok6jGJxxVyQeYTjs3ROLM8-Kkq9nPcvQIV_O5P-BMUi37FRbDm8AzFHOeS4Ngp_X04NviCxMhXYKVv3F6tqcD0_hzwb4_G1ne81AHhTVSDMRf7SUtZehzo-oq2mVKp5xdY/s400/pratinjau.JPG" width="400" /></a></div><br /><br /><br /><br /><b>5. Penambahan Amazon Associaties gadget.</b><br /><br />Blogger juga terintegrasi dengan Amazon Associates. Anda bisa mendapatkan uang selain Google adsense.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin-7HzUn1uZWQziB4NPzI_bH0X4IIxPKUtkcA6mhtQHuH9E8C2Psxe-gjNRRWv2YI701uFQIce1qfkMHG5fCUGXvcJqNKzVt2lg3Zv3JIYQ-WZJ4wx-5_CBZnaywYP_baXCEoOTRuWF9o/s1600/amazon+gadget.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin-7HzUn1uZWQziB4NPzI_bH0X4IIxPKUtkcA6mhtQHuH9E8C2Psxe-gjNRRWv2YI701uFQIce1qfkMHG5fCUGXvcJqNKzVt2lg3Zv3JIYQ-WZJ4wx-5_CBZnaywYP_baXCEoOTRuWF9o/s320/amazon+gadget.JPG" /></a></div>Dengan fitur ini, Anda dapat mencari Amazon langsung dari editor Blogger dan menambahkan gambar dan link ke produk Amazon tepat ke posting Anda. pembaca Anda akan mendapatkan komisi Anda setiap kali mereka membeli produk yang Anda rekomendasikan, dan jika Anda belum memiliki account Amazon Associates, Anda dapat sign up secara gratis tanpa meninggalkan Blogger.<br /><br /><br /><br /><b>6. Blogger stats</b><br /><br />Fitur ini telah saya jelaskan pada postingan sebelumnya tentang <a href="http://optimasi-blog.blogspot.com/2010/07/fitur-baru-blogger-statistik-blog.html"><b>Statistik blog</b></a>.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mvUFHIq8K6x04-aMXj0ympmCwZqtkK-yuwGHofpKdMCGvzS6Ves0OCbT63RCdUZSGeMXtGwWU7fGleqTbzfI0-T1ZGDxsUN2aMoysvURZG-CAHp97NiEwVJVBZ0VC3OMSE8rRTWUpAs/s1600/trafik.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mvUFHIq8K6x04-aMXj0ympmCwZqtkK-yuwGHofpKdMCGvzS6Ves0OCbT63RCdUZSGeMXtGwWU7fGleqTbzfI0-T1ZGDxsUN2aMoysvURZG-CAHp97NiEwVJVBZ0VC3OMSE8rRTWUpAs/s400/trafik.png" width="400" /></a></div><br /><br /><br /><br />So, kenapa harus minder dengan yang lain, kalau fitur blogger sudah selengkap ini.

Posted by Hii Sekai

Mempercantik Search Buttom dengan CSS3

Hampir setiap blog mempunyai tombol search untuk mempermudah pencarian pada blog kita, tapi tampilannya masih banyak yang terkesan standart aja, kalaupun ada yang bagus masih menggunakan image untuk mendukung tampilannya.<br /><br />Kali ini saya ingin membuat search buttom hanya dengan menggunakan kode CSS tanpa image sama sekali.<br /><br /><br /><br />Untuk postingan cara <a href="http://optimasi-blog.blogspot.com/2009/06/membuat-search-dalam-blog.html"><span style="font-weight: bold;">membuat search pada blog</span></a> dapat anda lihat pada postingan sebelumnya.<br /><br /><br /><br />kodenya HTMLnya seperti ini :<br /><br /><br /><br /><blockquote><form action='http://#/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value='Teks kamu...'/> <input id='searchsubmit' type='submit' value='Cari'/></form></blockquote><br /><br />kamu ganti kode diatas dengan kode dibawah berikut ini :<br /><br /><br /><br /><blockquote><form action='/search' class='searchform' method='get'><br /><br /><input class='searchfield' id='q' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/><br /><br /><input class='searchbutton' type='submit' value='Go'/><br /><br /></form></blockquote><br /><br />Langkah selanjutnya kamu harus membuat Kode CSS-nya biar tampilannya menjadi seperti gambar dibawah ini :<br /><br /><br /><br /><img alt="tombol search" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BbxxAEdnt7MTKNG808i3s-XER70EuWLuAwpOe0NVl7Nnc6d4cBJBUXCkdnOkst3sOrXAPHwRIeTmRBJuedrHiPrvKzmPXU3kAau9WhnRVGNgdc6VwzSms1XgzBk6QNV-dMz9cZEBlrw/s400/tombol+search.JPG" style="display: block; margin: 0px auto 10px; text-align: center; width: 353px; height: 102px;" /><br /><br /><br /><br />Letakkan kode berikut ini diatas ]]></b:skin> :<br /><br /><br /><br /><blockquote>/*- Search -*/<br /><br />.searchform {<br /><br />display: inline-block;<br /><br />zoom: 1; /* ie7 hack for display:inline-block */<br /><br />*display: inline;<br /><br />border: solid 1px <span style="color: rgb(204, 0, 0);">#5e6366</span>;<br /><br />padding: 3px 5px;<br /><br /><br /><br />-webkit-border-radius: 2em;<br /><br />-moz-border-radius: 2em;<br /><br />border-radius: 2em;<br /><br /><br /><br />-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);<br /><br />-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);<br /><br />box-shadow: 0 1px 0px rgba(0,0,0,.1);<br /><br /><br /><br />background: <span style="color: rgb(204, 0, 0);">#71787b</span>;<br /><br />background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));<br /><br />background: -moz-linear-gradient(top, #fff, #ededed);<br /><br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */<br /><br />-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */<br /><br />}<br /><br />.searchform input {<br /><br />font: normal 12px/100% Arial, Helvetica, sans-serif;<br /><br />}<br /><br />.searchform .searchfield {<br /><br />background: <span style="color: rgb(204, 0, 0);">#d5d5d5</span>;<br /><br />padding: 6px 6px 6px 8px;<br /><br />width: 240px;<br /><br />border: solid 1px <span style="color: rgb(204, 0, 0);">#bcbbbb</span>;<br /><br />outline: none;<br /><br /><br /><br />-webkit-border-radius: 2em;<br /><br />-moz-border-radius: 2em;<br /><br />border-radius: 2em;<br /><br /><br /><br />-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);<br /><br />-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);<br /><br />box-shadow: inset 0 1px 2px rgba(0,0,0,.2);<br /><br />}<br /><br />.searchform .searchbutton {<br /><br />color: #fff;<br /><br />border: solid 1px <span style="color: rgb(204, 0, 0);">#494949</span>;<br /><br />font-size: 11px;<br /><br />height: 27px;<br /><br />width: 27px;<br /><br />text-shadow: 0 1px 1px rgba(0,0,0,.6);<br /><br /><br /><br />-webkit-border-radius: 2em;<br /><br />-moz-border-radius: 2em;<br /><br />border-radius: 2em;<br /><br /><br /><br />background: <span style="color: rgb(204, 0, 0);">#555</span>;<br /><br />background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));<br /><br />background: -moz-linear-gradient(top, #9e9e9e, #454545);<br /><br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */<br /><br />-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */<br /><br />}<br /><br /><br /><br /></blockquote>Setalah itu coba kamu pratinjau blog kamu seperti apa tampilannya. Kode CSS diatas tampilannya akan sama persis dengan tampilan yang ada di <a href="http://rudyazhar.blogspot.com"><span style="font-weight: bold;">blog Rudy Azhar</span></a>, kamu bisa merubah warnanya yang saya kasih tanda <span style="color: rgb(204, 0, 0);">merah</span> dengan warna yang disesuaikan dengan template blog kamu.<br /><br /><br /><br />Selamat berkreasi......

Posted by Hii Sekai

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

Kenapa Image di Template Blog tidak Muncul?

<p>Pertanyaan senada kadang terucapkan, saat kita mengetahui ada gambar yang tidak muncul atau gambar yang seharusnya muncul diganti dengan gambar lain (penyedia layanan image hosting) khususnya terjadi pada <i>template</i>.  Terdapat beberapa kemungkinan yang menyebabkannya, antara lain ;  salah alamat, gambar telah berpindah atau dihapus, bandwidth di penyedia layanan telah habis dan sebagainya.</p><blockquote><p style="text-indent:-0.35em;">“Tapi OB aku sudah cek ke alamat penyimpanan gambar-nya dan hasilnya masih memunculkan gambar tersebut.”</p></blockquote><p>Berarti kemungkinan salah alamat dan gambar telah berpindah atau dihapus dapat pula kita sisihkan. Mau tidak mau atau suka tidak suka kita mesti mencari alasan lain, mengapa gambar di template  tidak muncul.  Salah satu kemungkinan lain jatuh kepada bandwidth di penyedia layanan image hosting, seperti ;  <a href="http://photobucket.com/" rel="nofollow" target="_blank">Photobucket</a>, <a href="http://imageshack.us/" rel="nofollow" target="_blank">ImageShack</a>, <a href="http://tinypic.com/" rel="nofollow" target="_blank">TinyPic</a>, de-el-el.</p><blockquote><p style="text-indent:-0.35em;">“Bandwidth sering digunakan sebagai suatu sinonim untuk data transfer rate yaitu jumlah data yang dapat dibawa dari sebuah titik ke titik lain dalam jangka waktu tertentu (pada umumnya dalam detik). Jenis Bandwidth ini biasanya diukur dalam bps (bits per second). Adakalanya juga dinyatakan dalam Bps (bytes per second). Dalam bahasa mudahnya, adalah sebuah takaran lalu lintas data yang masuk dan yang keluar.”</p><p class="author">(<a href="http://id.wikipedia.org/wiki/Lebar_pita#Bandwidth_Komputer">wikipedia</a>).</p></blockquote><p>Bukan menjadi rahasia umum bahwa gambar merupakan salah satu elemen agar <i>template</i> lebih kelihatan asoy geboy aduhay (kata terakhir dipaksain tuh...) dan tidak berasa hambar, sehingga membutuhkan layanan image hosting.  Sekarang kamu menggunakan <i>template</i> dari anu bin anu yang memiliki tampilan menarik dan beberapa elemennya berupa gambar.</p><p>Karena saking menariknya, banyak para blogger yang menggunakan <i>template</i> tersebut. Sedangkan <i>template</i> langsung digunakan secara default. Akibatnya semua pengguna <i></i>akan menggunakan sumber image hosting yang sama.; Ketika pengunjung menyambangi blog kamu, bukan tidak mungkin pengunjung lain juga sedang blog walking ke blog yang menggunakan <i>template</i> sama dengan kamu.</p><p>Coba bayangkan jika puluhan pengunjung mengunjungi blog yang memiliki <i>template</i> sama persis.  Oleh karena banyaknya aktivitas upload gambar menyebabkan jatah bandwidth dari penyedia layanan tersebut habis. Akhirnya kamu pasti tahu, yakni gambar dalam <i>template</i> tidak muncul atau diganti dengan gambar si penyedia layanan.</p><blockquote><p style="text-indent:-0.35em;">“Kalau begitu aku tidak akan menggunakan <i>template</i> pakai gambar, ah?”</p></blockquote><p>Eit, itu bukan merupakan pemikiran yang bijak. Seperti kata OB di atas, gambar merupakan salah satu elemen agar <i>template</i> tidak berasa hambar.  Point pentingnya, kita hanya membutuhkan alternatif jitu untuk memecahkan "telur itu???" (*maksudnya memecahkan masalah itu).  Alternatif jitu tersebut berupa :</p><ul><li>Download gambar-gambar yang disertakan dalam <i>template</i>, kemudian upload gambar <i>template</i> tersebut ke hosting gambar yang biasa kamu pakai. Tidak jarang <i>template</i> yang kamu gunakan (download) telah disisipkan file gambar oleh sang empu-nya.  Jadi tinggal meluangkan waktu sebentar untuk mengupload gambar tersebut ke hosting gambar yang biasa kamu pakai.</li><br /><li>Setelah proses upload selesai, jangan lupa untuk mengganti alamat penyimpanan gambar dalam <i>template</i> tersebut.  Contoh kode yang diganti :</li><br /></ul><div class="code">body {<br /><br />background:#FFFFFF url(<span style="color: red;">http://i647.photobucket.com/albums/uu191/OB//bintang_tujuh_keliling.gif</span>) }<br /><br /><br /><br />.sidebar h2 {<br /><br />background:url(<span style="color: red;">http://i46.tinypic.com/152ff2b.jpg</span>) top left repeat-x; }</div><p>Catatan : Ganti kode yang berwarna merah dengan gambar yang sama/serupa sesuai dengan alamat penyimpanan file gambar kamu yang sebelumnya telah diupload.</p><ul><li>Cek dan ricek <i>template</i>, siapa tahu ada gambar yang tidak sesuai, seperti ; gambar yang seharusnya di header malah ngelayap ke sidebar, icon yang seharusnya untuk komentar malah jadi icon kecantikan (kagak nyambung...).</li><br /></ul><p>Udah cape rasanya megang tuts keyboard, ditambah lagi mata yang rada-rada mau tertutup (bilang aja ngantuk gitu! ha..ha..).  Badan pun udah pengen bertemu sang kekasih di pulau kapuk alias tempat tidur, Bobo yu...</p>

Posted by Hii Sekai

Link Penulis Komentar (Comments Author) Terbuka di Tab Baru

<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Comments Author" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqcGXZlvp5WLDV95xuPR3zHfv_NRNtUaeRwPLfoxbovSxf12dZ8oUAU_zdl56h40sOgXsjxVZloxaXsVNzoP8HqblITlCGDcJXfgXiOiKVScauVRhjMPKtaU6Rrfcev7_270LDSEjMC3k/s200/link+comments+author.gif" width="150" /></div>Coba buka salah satu postingan di blog kamu yang ada komentarnya.  Kalau sudah klik salah satu link komentator (comments author).  What happen?  Tentu saja kamu akan dibawa ke halaman link komentator tersebut, namun terbuka pada tab yang sama. Kecuali kamu melakukan klik kanan dan pilih "Open link in New Tab".  Nah, <i>trik blogger</i> yang akan OB diskusikan kali ini adalah bagaimana jika kita meng-klik link penulis komentar, maka link itu akan langsung terbuka di tab baru.<br /><br /><br /><br /><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Browser Tab" border="0" height="65" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcBOJUkVkYyRpmQqtiwnr4-VQN3OsIxeYw03WVWdnnE4IPKJjChPRPuwrCjlzNlcn8Xncf9H8D0SxApsQOYwly60E2QkVwthsAoO1OYBGCf6dl-wCoojI0mXxeR1LH8140-Bnd-8XtB3Q/s200/tab.gif" width="200" /></div><br /><br />Versi demonya silakan klik salah satu link comments author di blog OB.<br /><br /><br /><br /><ul><li>Sign-in ke akun blogger kamu.</li><br /><li>Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".</li><br /></ul><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Expand Widget Templates" border="0" height="62" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYq5DORu_gDZHHfZsFiKKayOrnAyLCvyi7d5bS5EENnAT8rWIe65yM0u17GTZhH_8J82x1xPgK6hOAL2W6vX_u8EfgwITGcjsPu1Am5vK-eefbtUzufjKlgj0Zma1t5IVED7ZKWgxMJU/s200/expandtw.gif" width="200" /></div><br /><br />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 seperti di bawah ini :</li><br /></ul><div class="code"><b:if cond='data:comment.authorUrl'><br /><br /><div style="color: red;"><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a></div></div>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 /><ul><li>Sisipkan target="_blank" (warna hijau) pada kode yang berwarna merah.</li><br /></ul><div class="code"><b:if cond='data:comment.authorUrl'><br /><br /><a expr:href='data:comment.authorUrl' rel='nofollow' <span style="color: #38761d;">target='_blank'</span>><data:comment.author/></a></div><ul><li>Jangan lupa disimpan.</li><br /></ul>Sekarang buka kembali salah satu posting yang ada komentarnya di blog kamu dan klik link comments author.  Mudah-mudahan telah terbuka di tab baru, kalau ngga...  Maka OB akan pusing dan garuk-garuk kepala sendiri. <h2>Update</h2><p>Trik ini <a href="http://optimasi-blog.blogspot.com/2011/03/informasi-update-posting-terdahulu-1.html">tidak direkomendasikan</a>, silakan telusuri di Google tentang “Link Target” atau “Validitas Link Target”.</p>

Posted by Hii Sekai

Cara Pasang Title dan Meta Tags agar Blog lebih SEO Friendly

Sebenarnya judul di atas sangat berhubungan dengan 2 (dua) posting sebelumnya, yaitu : <a href="http://optimasi-blog.blogspot.com/2009/03/seo-optimasi-judul-blog-dalam-title-tag.html">SEO | Optimasi Judul Blog dalam Title Tag</a> dan <a href="http://optimasi-blog.blogspot.com/2009/03/memasang-meta-tags-dan-manfaatnya.html">Memasang Meta Tags dan Manfaatnya</a>. Cuma mungkin karena uraiannya yang agak menggantung, sehingga kurang/tidak tercover di hati pembaca (wih.., puitis amat). Nah, agar semua terlihat terang benderang, seperti ungkapan dalam sebuah buku "Habis Gelap Terbitlah Terang", maka kembali dihadirkan dalam versi keduanya (emang buku ha..ha..). Pada posting kali ini sengaja dijadikan satu, karena kedua tags tersebut sangat erat sekali hubungannya dan langsung diuraikan melalui Edit HTML. Terutama agar blog kamu kelihatan lebih <b>SEO</b> friendly. Langsung saja kita ke TKP (Tempat Kerjaan Para blogger)...<br /><br /><ul><li>Masuk ke Edit HTML.</li><br /><li>Cari kode (letaknya di atas) berikut :</li><br /></ul><div class="code"><head><br /><br /><b:include data='blog' name='all-head-content'/><br /><br /><div style="color: red;"><title><data:blog.pageTitle/></title></div><b:skin><![CDATA[</div>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 /><ul><li>Ganti kode yang berwarna merah dengan kode di bawah ini :</li><br /></ul><div class="code"><b:if cond='data:blog.pageType == "index"'><br /><br /><title><data:blog.pageTitle/></title><br /><br /><b:else/><br /><br /><title><data:blog.pageName/></title><br /><br /></b:if></div>Catatan :<br /><br />Untuk menambah title, kamu bisa melakukan edit terhadap kode di atas (perhatikan kode yang berwarna biru), contoh :<br /><br /><div class="code"><b:if cond='data:blog.pageType == "index"'><br /><br /><title><data:blog.pageTitle/><span style="color: blue;"> | Tips SEO | Trik Blogger | Blogger Indonesia</span></title><br /><br /><b:else/><br /><br /><title><data:blog.pageName/></title><br /><br /></b:if></div><div style="text-align: center;">atau</div><div class="code"><b:if cond='data:blog.pageType == "index"'><br /><br /><title><span style="color: blue;">Tips SEO | Trik Blogger | Blogger Indonesia | </span><data:blog.pageTitle/></title><br /><br /><b:else/><br /><br /><title><data:blog.pageName/></title><br /><br /></b:if></div><ul><li>Setelah selesai mengganti title tag, sekarang tambahkan kode Meta Tags di bawahnya.</li><br /></ul><div class="code"><meta content="<span style="color: red;">...deskripsi tentang blog kamu...</span>" name="description"/><br /><br /><meta content="<span style="color: red;">keyword1,keyword2,keyword3,...</span>" name="keywords"/><br /><br /><meta content="INDEX, FOLLOW" name="robots"/></div>Catatan :<br /><br />Ganti kode yang berwarna merah dengan deskripsi dan keyword blog kamu (perhatikan kode yang berwarna biru), contoh :<br /><br /><div class="code"><meta content="<span style="color: blue;">Tips dan trik blog optimization melalui Tips SEO dan trik blogger serta berbagai jenis optimasi blog lainnya</span>" name="description"/><br /><br /><meta content="<span style="color: blue;">source code,search engine,SEO,template,templates,ranking,blog optimization,kode HTML,backlink,widget,gadget,blogger stuff,tips seo,kata kunci,tips blogging,free directory,traffic,trafik,trik blogger,optimasi blog,promosi,untuk indonesia</span>" name="keywords"/><br /><br /><meta content="INDEX, FOLLOW" name="ROBOTS"/></div><blockquote>Jadi keseluruhan kodenya akan terlihat seperti ini (diambil dari Blog OB) :<br /><br /><div class="code"><head><br /><br /><b:include data='blog' name='all-head-content'/><br /><br /><br /><br /><b:if cond='data:blog.pageType == "index"'><br /><br /><title><data:blog.pageTitle/> | Tips SEO | Trik Blogger | Blogger Indonesia</title><br /><br /><b:else/><br /><br /><title><data:blog.pageName/></title><br /><br /></b:if><br /><br /><br /><br /><meta content='Tips dan trik blog optimization melalui Tips SEO dan trik blogger serta berbagai jenis optimasi blog lainnya' name='description'/><br /><br /><meta content='source code,search engine,SEO,keyword,template,templates,keywords,ranking,blog optimization,kode HTML,backlink,widget,gadget,blogger stuff,tips seo,kata kunci,tips blogging,free directory,traffic,trafik,trik blogger,optimasi blog,promosi,untuk indonesia' name='keywords'/><br /><br /><meta content='INDEX, FOLLOW' name='ROBOTS'/><br /><br /><br /><br /><b:skin><![CDATA[</div></blockquote><ul><li>Jangan lupa disimpan.</li><br /></ul><br /><br />Sekarang coba klik "Lihat Blog" (dikurung kotak merah) dan perhatikan perubahan judul blog kamu di bagian paling atas browser.<br /><br /><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfN0fR2HnP7ikfAGWUcR9IfgR2X_wKwArmieFpFuwPfi_zIlhy0pzP1XNSfo3QJUNERkGUnbi62zR03Fd2mMi7gAWvCSBb4iBBunBJ5QtgQXTPHuATFnlJPnOT0EXT2A6lGd9n3WU5tA8/s320/view.gif" width="320" /></div><p>Selamat memasang title dan meta tags...</p><p><em>Update :</em></p><p>Sesuai dengan komentar dari Saudara <strong>hans ganteng</strong>, OB sependapat bahwa <code><data:blog.pageTitle/></code> mengandung arti yang luas, sehingga menyebabkan penempatan keyword tidak optimal. Sekarang OB telah mengubah meta tags blog ini, seperti yang disarankan oleh Saudara hans ganteng.</br> Coba perhatikan meta tags di bawah ini :</p><pre><b:if cond='data:blog.pageType == "item"'><br /><title><data:blog.pageName/> | <data:blog.title/></title><br /><b:else/><br /><title><data:blog.title/> | keyword1 | keyword2 | keyword2</title><br /></b:if><br /><br /><meta content="...deskripsi tentang blog kamu..." name="description"/><br /><meta content="keyword1,keyword2,keyword3,..." name="keywords"/><br /><meta content="INDEX, FOLLOW" name="robots"/></pre><p>Contoh penerapannya :</p><pre><b:if cond='data:blog.pageType == "item"'><br /><title><data:blog.pageName/> | <data:blog.title/></title><br /><b:else/><br /><title><data:blog.title/> | Trik Blogger | Tips SEO | Blogger Indonesia</title><br /></b:if><br /><br /><meta content='Tips dan trik blog optimization melalui Tips SEO dan trik blogger serta berbagai jenis optimasi blog lainnya' name='description'/><br /><meta content='source code,search engine,SEO,keyword,template,templates,keywords,ranking,blog optimization,kode HTML,backlink,widget,gadget,blogger stuff,tips seo,kata kunci,tips blogging,free directory,traffic,trafik,trik blogger,optimasi blog,promosi,untuk indonesia' name='keywords'/><br /><meta content='INDEX, FOLLOW' name='ROBOTS'/></pre><p>Terima kasih atas masukannya, untuk posting “Cara Pasang Title dan Meta Tags agar Blog lebih SEO Friendly”.</P>

Posted by Hii Sekai

Trik Blogger | Mengatur Tataletak Link to This Post

<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Jarak Link to This Post" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFWGVVLWsMSy7HO7YdO2J_YwbK8CUq1oyZkUtJDJ8C49I0OMk5FB6L-kJG30WSZTDWxhGgtEvYxW526LeEqz0wXOYfQ3m5O4msJ8-UePwF-zG9d3506GP0-JBqsznEALbj_tH56m8Ep8I/s144/Jarak%20Link%20to%20this%20post.gif" width="150" /></div>Terkadang kita kurang memperhatikan keberadaan fitur Link to This Post (<i>backlink</i>). Yah, mungkin karena dalam penerapannya kurang diminati oleh sebagian blogger mania. Bahkan tidak jarang dengan mudahnya kita menonaktifkan fitur ini. Link to This Post dimaksudkan agar memudahkan pengunjung blog me-link posting yang dibaca dan diminatinya untuk dijadikan bahan referensi atau rujukan dari posting yang akan dia buat. Cara kerjanya sederhana saja, yaitu kamu cukup meng-klik "Buat sebuah Link", maka secara otomatis blogger akan mengarahkan kamu melalui jendela pop-up langsung ke halaman "Entry baru" (dengan syarat kamu telah login ke akun blogger). Selanjutnya kamu bisa mengedit atau disimpan dulu sebagai draft.<br /><br /><br /><br />Secara default link fitur ini terletak di post-footer. Namun akan berpindah letak dan bentuknya ke bawah form komentar, setelah kita menampilkan seluruh isi posting. Nah, tataletak disinilah yang akan bersama-sama kita diskusikan. Apabila jaraknya dengan form komentar terlalu jauh, kamu dapat memperpendeknya dengan melakukan trik yang cukup simple. Eh..., ngomong-ngomong kode Link to This Post yang seperti apa yah? Kodenya setelah isi keseluruhan posting terbuka (jika melalui "Edit HTML", terlebih dulu centang "Expand Widget Templates") lebih kurang seperti di bawah ini :<br /><br /><div class="code"><div id='backlinks-container'><br /><br /><div expr:id='data:widget.instanceId + "_backlinks-container"'><br /><br /><b:if cond='data:post.showBacklinks'><br /><br /><b:include data='post' name='backlinks'/><br /><br /></b:if><br /><br /></div><br /><br /></div></div>Kembali ke pengaturan tataletak Link to This Post. Adapun step by step pengaturannya adalah sebagai berikut :<br /><br /><br /><br /><ul><li>Edit HTML --> Expand Widget Templates.</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 seperti di bawah ini :</li><br /></ul><div class="code"><b:includable id='comment-form' var='post'><br /><br /><div class='comment-form'><br /><br /><a name='comment-form'/><br /><br /><h4 id='comment-post-message'><data:postCommentMsg/></h4><br /><br /><p><data:blogCommentMessage/></p><br /><br /><data:blogTeamBlogMessage/><br /><br /><a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br /><br /><iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='<b><span style="color: red;">210</span></b>' id='comment-editor' name='comment-editor' src='' width='100%'/></div>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 /><ul><li>Atur ketinggian pada kode yang ditandai dengan warna merah, kalau OB sendiri diatur dalam kisaran 240 - 260.</li><br /><li><em>Update</em> : Setelah kamu mengaplikasikan trik ini — untuk komentar yang menggunakan verifikasi — pengunjung tidak bisa melakukan verifikasi. Dengan kata lain “pengunjung tidak akan bisa berkomentar”. <em>So</em>, agar bisa memasukkan kode verifikasi dalam form komentar, maka kita harus menambahkan fungsi ‘scroll’. Tambahkan CSS berikut di atas kode <code><red>]]></b:skin></red></code> : <div class="code" style="margin-top:1.5em;">.comment-form {<br /><br />overflow:auto;<br /><br />}</div></li><br /><li>Jangan lupa disimpan.</li><br /></ul>Catatan :<br /><br />Kamu pun bisa lebih banyak berkreasi dengan melakukan edit atau menambah kode backlinks-container dalam CSS. Contoh kodenya dalam CSS :<br /><br /><div class="code">#backlinks-container {<br /><br />margin: 10px auto 0;<br /><br />padding: 5px 10px 10px;<br /><br />border: 1px solid #E1D4C0; }</div><br /><br />Selamat mengatur tataletak Link to This Post...

Posted by Hii Sekai