June 2009

Membagi Dua Kolom Komentar

GIBZET0407 - 9:25 PM

<div style="text-align: justify;">Kenapa harus dibagi dua? Wah, ini pertanyaan yang sulit untuk dijawab, karena berpulang kepada diri pribadi masing-masing. Intinya seperti ini, kalau kamu berkeinginan untuk menambah daya tarik blog, tentu perlu juga meracik beberapa elemen agar tampil beda. Tampil beda bukan berarti tidak ada tujuan ke depan. Betul ngga? Agar kamu tidak bingung yang seperti apa bentuknya komentar dua kolom tersebut dapat dilihat kolom komentar blog OB (sok lue...). Kolom pertama berisikan avatar MyBlogLog yang seterusnya kita sebut "comment_avatar" dan kolom kedua disebut "comment_entry" yang terdiri dari author komentator (comment-author), teks komentar (comment-body), dan tanggal komentar (comment-footer). Trik blogger ini tidak merubah struktur dasar kode yang ada, melainkan perlu menambah kode tertentu yang berfungsi untuk memisahkan antara avatar dengan entri komentar.</div><a name='more'></a> <div style="text-align: justify;">Nah, sekarang mari bersama-sama kita permak kode template (OB ambil kode template minima) komentar agar terbagi menjadi dua kolom. Yang penting untuk ditelaah adalah untuk kode template komentar (khusus HTML) telah ditambahkan <a href="http://optimasi-blog.blogspot.com/2009/06/pasang-avatar-mybloglog-dalam-komentar.html">avatar MyBlogLog</a> dan <a href="http://optimasi-blog.blogspot.com/2009/06/menghilangkan-icon-komentator-default.html">icon komentator default blogger telah dihilangkan</a>. </div> Kode CSS komentar : <pre>/* Comments ===================== */ #comments h4 { background:#EAE9E9; margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: $sidebarcolor; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; border:0px dotted #ccc; } #comments-block .comment-author { color:#808080; margin:.5em 0; border-top:1px dotted #ccc; } #comments-block .comment-body { text-align:justify; margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; border-top:1px dotted #ccc; font-size:9px; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; }</pre> Kode HTML komentar : <pre><dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <div style='border:0;float:left;margin: 0 5px 0 0;'> <script> myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>'); </script> </div> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.id'> <a expr:name='data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </dd> <dd class='comment-footer'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </dd> <div style='clear:both;'/> </b:loop> </dl&gt</pre>Catatan : <div style="text-align: justify;"><ol><li>Kode yang berwarna merah merupakan hasil penambahan avatar MyBlogLog.</li> <li>Kode yang berwarna hijau merupakan modifikasi untuk menghilangkan icon komentator default blogger.</li> </ol></div><ul><li>Login dulu ke account blogger kamu.</li> <li>Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".</li> </ul><div style="text-align: justify;">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. </div><ul><li>Tambahkan kode CSS dalam komentar (Comments).</li> </ul><pre>.comment_avatar { float: left; height: 50px; width: 50px; position: relative; padding-top: 5px; text-align: left; } .comment_entry { float: right; width: 400px; }</pre> Catatan : <div style="text-align: justify;">Silakan rubah kode yang berwarna merah sesuai dengan template blog kamu. </div><ul><li>Cari kode avatar, seperti di bawah ini.</li> </ul><pre><div style='border:0;float:left;margin: 0 5px 0 0;'> <script> myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>'); </script> </div></pre> <div style="text-align: justify;">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. </div><ul><li>Tambahkan kode (warna merah) berikut di antara kode di atas.</li> </ul><pre><div class='comment_avatar'> <div style='border:0;float:left;margin: 0 5px 0 0;'> <script> myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>'); </script> </div> </div></pre> <ul><li>Di bawah kode di atas terdapat kode</li> </ul><pre><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.id'> <a expr:name='data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </dd> <dd class='comment-footer'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </dd></pre> <ul style="text-align: justify;"><li>Tambahkan kembali kode (warna merah) diantaranya, sehingga akan terlihat seperti di bawah ini.</li> </ul><pre><div class='comment_entry'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.id'> <a expr:name='data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <data:comment.body/> <b:else/> <data:comment.body/> </b:if> </dd> <dd class='comment-footer'> <a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </dd> </div></pre><ul><li>Jangan lupa disimpan.</li> </ul> <div style="text-align: justify;">Sekarang lihat komentar blog kamu sudah jadi dua kolom atau belum...!!!??? Selain itu, kamu juga bisa memodifikasi atau menambahkan kode lain (ex: <a href="http://optimasi-blog.blogspot.com/2009/04/trik-blogger-beda-tampilan-komentar.html">beda tampilan komentar pemilik blog</a>) dalam trik blogger ini. </div>Selamat membagi komentar blog menjadi dua kolom...

9:25 PM

Optimasi Widget yang ditampilkan dalam Blog

GIBZET0407 - 1:34 AM

<div style="text-align: justify;">Blog aku berat loadingnya, kenapa ya? Banyak faktor yang mempengaruhinya, antara lain; kebanyakan script, kebanyakan image, koneksi lagi lelet, dan sebagainya. Umumnya script dan image tersebut akan dimuat dalam suatu widget, iya khan? Berkaitan dengan widget tersebut, ada trik agar sedikit-banyaknya dapat mengurangi berat loading suatu blog. Anarkisnya adalah dengan membumi-hanguskan sebagian widget tersebut. Tapi OB script dan image (widget) yang ada masih sangat diperlukan, bagaimana dong? Mau ngga mau dan suka tidak suka harus dibinasakan...!!! Itu jawaban kalau OB lagi meriang oleh amarah. Padahal isu-isunya masih ada cara yang lebih diplomatis agar blog tampil lebih dinamis, harmonis, optimis, "manggis", "kamis", "kayumanis",... (lho...4x, kok jadi keterusan). Singkatnya seperti ini, bagaimana jika widget yang ada, ditampilkan berselang-seling. Pada halaman depan (muka/home) ditampilkan sebagian saja, kemudian jika kamu membuka (klik) halaman lain, maka widget yang sebagian tadi akan tampil tapi widget yang sebagian lainnya (tampil pada halaman depan) ditutup. Maniskan...!!!??? Tujuannya tidak lain dan tidak bukan adalah untuk mengurangi berat loading blog. Supaya rasa penasaran kamu hilang seketika, mari kita ulas trik blogger optimalisasi tampilan widget dalam blog.</div><a name='more'></a> Caranya cukup sederhana yaitu : <ul><li>Widget tampil di halaman depan saja.</li> </ul><div style="text-align: justify;">Sisipkan kode di bawah ini dalam elemen widget yang akan ditampilkan di halaman depan. </div><blockquote style="font-family: courier new; color: rgb(255, 0, 0); font-weight: bold;"><b:if cond="data:blog.url == data:blog.homepageUrl"> </b:if></blockquote> Contoh penggunaannya : <blockquote style="font-family: courier new;"><b:widget id="HTML44" locked="false" title="Tips SEO" type="HTML"> <b:includable id="main"> <b:if cond="data:blog.url == data:blog.homepageUrl">  <b:if cond="data:title != """> </b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2> <div class="widget-content"> <data:content/> </div> <b:include name="quickedit"> </b:if> </b:includable> </b:widget></blockquote> <ul><li>Widget tampil di halaman selanjutnya.</li> </ul><div style="text-align: justify;">Sisipkan kode di bawah ini dalam elemen widget yang akan ditampilkan di halaman selanjutnya. </div><blockquote style="font-family: courier new; color: rgb(255, 0, 0); font-weight: bold;"><b:if cond='data:blog.pageType == "item"'> </b:if></blockquote> Contoh penggunaannya : <blockquote><b:widget id="HTML45" locked="false" title="Trik Blogger" type="HTML"> <b:includable id="main"> <b:if cond='data:blog.pageType == "item"'>  <b:if cond="data:title != """> </b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2> <div class="widget-content"> <data:content/> </div> <b:include name="quickedit"> </b:if> </b:includable> </b:widget></blockquote> Catatan : <ol style="text-align: justify;"><li>Kode di atas dapat dilihat saat kamu melakukan edit template (Tata Letak --> Edit HTML -- > centang "Expand Template Widget").</li> <li>Pilihlah widget yang menurut kamu sesuai untuk ditampilkan dan widget mana yang tidak perlu ditampilkan, baik di halaman depan maupun di halaman selanjutnya.</li> <li>Pemilihan widget diutamakan yang memuat script dan image.</li> </ol> Selamat mengoptimalkan tampilan widget dalam blog...

1:34 AM

Membuat Search dalam Blog

GIBZET0407 - 12:24 AM

Fitur "search" sangat berguna untuk menemukan kata-kata kunci yang ingin dicari. Dalam blog sudah barang tentu memiliki kata kunci tertentu yang terletak dalam postingan. Coba bayangkan ketika kamu berkunjung ke suatu blog, kemudian ingin mencari kata atau frase kata tertentu untuk dibaca. Namun dalam blog tersebut tidak memiliki fasilitas search, terpaksa deh kamu mencari manual dengan membuka postingan satu per-satu. Beruntunglah yang punya blog, apabila kamu termasuk orang yang sabar. Maka dari itu fasilitas "search" sangat bermanfaat bagi kelestarian suatu blog.<a name='more'></a>Nah, dalam trik blogger kali ini, kita akan belajar bersama-sama tentang bagaimana menambahkan fasilitas "search" dalam blog. Kalau kamu jeli, sebenarnya "search" sudah termuat dalam trik <a href="http://optimasi-blog.blogspot.com/2009/05/membuat-menu-horizontal.html">membuat menu horizontal</a> sub divisi #nav-right. Yuk, kita review triknya!Bentuk dasar HTML untuk memunculkan fasilitas "search" adalah sebagai berikut :<pre><code><div id='search'> <form expr:action='data:blog.homepageUrl + "search/"' id='searchform' method='get'> <label class='assistive-text' for='q'>Search:</label> <input class='field' id='q' name='q' placeholder='Search&hellip;' type='text'/> <input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/> </form> </div></code></pre><div id='search1' style="margin-bottom:1.6em;"><form expr:action='data:blog.homepageUrl + "search/"' id='searchform1' method='get'><label for='q'>Search:</label><input class='field' id='q1' name='q' placeholder='Search…' type='text'/><input class='submit' id='searchsubmit1' name='submit' type='submit' value='Search'/></form> </div>Kalau ingin kata "Search…" dalam kotak search menghilang otomatis ketika kamu klik dalam kotak search tersebut, maka kamu perlu merombak kodenya seperti di bawah ini :<pre><code><div id='search'> <form expr:action='data:blog.homepageUrl + "search/"' class='searchform' method='get'> <label class='assistive-text' for='q'>Search:</label> <input class='field' id='q' name='q' onblur='if (this.value == "") {this.value = "Search&hellip;";}' onfocus='if (this.value == "Search&hellip;") {this.value = ""}' type='text' value='Search&hellip;'/> <input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/> </form> </div></code></pre><div id='search1' style="margin-bottom:1.6em;"><form action='/search' class='searchform' method='get'><label class='assistive-text1' for='q'>Search:</label><input class='field' id='q1' name='q' onblur='if (this.value == "") {this.value = "Search…";}' onfocus='if (this.value == "Search…") {this.value = ""}' type='text' value='Search…'/><input class='submit' id='searchsubmit1' name='submit' type='submit' value='Search'/></form> </div>Update (06 Nopember 2012): Untuk kustomisasi lebih lanjut, tinggal membenahi konfigurasi kotak penelusuran dengan menggunakan CSS (Cascading Style Sheets) yang letaknya di antara <code><b:skin><![CDATA[</code> … <code>]]></b:skin></code>. Contoh seperti yang ditunjukkan di bawah ini:<pre><code>#search { margin: 1.5em 0; } #search .assistive-text { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); position: absolute !important; } input#q { color: #666; border: 1px solid #ddd; border-radius: 3px; padding: 6px; } input#q:focus { color: #111; } input#searchsubmit { border: 1px solid #ddd; border-color: #ccc #ccc #bbb #ccc; border-radius: 3px; background: #fafafa; box-shadow: inset 0 2px 1px #fff; color: rgba(0,0,0,.8); cursor: pointer; padding: .45em .75em; text-shadow: 0 1px 0 rgba(255,255,255,.5); } input#searchsubmit:hover { background: #f5f5f5; border-color: #bbb #bbb #aaa #bbb; } input#searchsubmit:focus, input#searchsubmit:active { border-color: #aaa #bbb #bbb #bbb; box-shadow: inset 0 2px 3px rgba(0,0,0,.15); }</code></pre><div id='search1' style="margin-bottom:1.6em;"><form action='/search' class='searchform' method='get'><label class='assistive-text' for='q'>Search:</label><input class='field' id='q1' name='q' onblur='if (this.value == "") {this.value = "Search…";}' onfocus='if (this.value == "Search…") {this.value = ""}' type='text' value='Search…'/><input class='submit' id='searchsubmit1' name='submit' type='submit' value='Search'/></form> </div>Menambahkan gambar dalam <code>input#q</code> dengan mengganti nilai dari properti <code>padding</code> (warna merah) serta tambahan kode gambar (warna hijau).<pre><code>input#q { background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8gJ_qwoY18V8rAaE-8V4fiP-od1UhY-e3TlsLjFmtbMjsjIg_W2kQIb-JD-sGABaQRRCJjUEgsCRENrBBoyySKp7Jdf7VN6aPNmMkMArtFau3suJXubjdV7pR6A85BdqoaZjVOm6_Dw/s800/search.png'); background-repeat: no-repeat; background-position: 6px 7px; padding: 6px 6px 6px 28px; color: #666; border: 1px solid #ddd; border-radius: 3px; }</code></pre><div id='search1' style="margin-bottom:1.6em;"><form action='/search' class='searchform' method='get'><label class='assistive-text' for='q'>Search:</label><input class='field' id='q2' name='q' onblur='if (this.value == "") {this.value = "Search…";}' onfocus='if (this.value == "Search…") {this.value = ""}' type='text' value='Search…'/><input class='submit' id='searchsubmit1' name='submit' type='submit' value='Search'/></form> </div>Menghilangkan tombol search dengan mengganti semua selector yang berhubungan dengan <code>input#searchsubmit</code>.<pre><code>input#searchsubmit { display: none; }</code></pre><div id='search1' style="margin-bottom:1.6em;"><form action='/search' class='searchform' method='get'><label class='assistive-text' for='q'>Search:</label><input class='field' id='q2' name='q' onblur='if (this.value == "") {this.value = "Search…";}' onfocus='if (this.value == "Search…") {this.value = ""}' type='text' value='Search…'/><input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/></form> </div>Atau dapat pula di kustomisasi seperti di bawah ini.<pre><code>input#q { background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8gJ_qwoY18V8rAaE-8V4fiP-od1UhY-e3TlsLjFmtbMjsjIg_W2kQIb-JD-sGABaQRRCJjUEgsCRENrBBoyySKp7Jdf7VN6aPNmMkMArtFau3suJXubjdV7pR6A85BdqoaZjVOm6_Dw/s800/search.png'); background-repeat: no-repeat; background-position: 6px 7px; padding: 6px 6px 6px 28px; color: #666; border: 1px solid #ddd; border-radius: 3px; -webkit-transition-duration: 400ms; -webkit-transition-property: width, background; -webkit-transition-timing-function: ease; -moz-transition-duration: 400ms; -moz-transition-property: width, background; -moz-transition-timing-function: ease; -o-transition-duration: 400ms; -o-transition-property: width, background; -o-transition-timing-function: ease; float: right; width: 72px; } input#q:focus { width: 196px; }</code></pre><div id='search1' style="margin-bottom:1.6em;"><form action='/search' class='searchform' method='get'><label class='assistive-text' for='q'>Search:</label><input class='field' id='q3' name='q' onblur='if (this.value == "") {this.value = "Search…";}' onfocus='if (this.value == "Search…") {this.value = ""}' type='text' value='Search…'/><input class='submit' id='searchsubmit' name='submit' type='submit' value='Search'/></form> </div><div class="clear"></div>Hanya dengan sebuah elemen HTML (HyperText Markup Language), kita dapat membuat bermacam-macam gaya dengan memanfaatkan CSS. Bolehkah saya mengutip kata-kata ini, <q>Kode adalah puisi</q>.<style type="text/css">input#q2{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8gJ_qwoY18V8rAaE-8V4fiP-od1UhY-e3TlsLjFmtbMjsjIg_W2kQIb-JD-sGABaQRRCJjUEgsCRENrBBoyySKp7Jdf7VN6aPNmMkMArtFau3suJXubjdV7pR6A85BdqoaZjVOm6_Dw/s800/search.png');background-repeat:no-repeat;background-position:6px 7px;padding:6px 6px 6px 28px;}input#q3{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8gJ_qwoY18V8rAaE-8V4fiP-od1UhY-e3TlsLjFmtbMjsjIg_W2kQIb-JD-sGABaQRRCJjUEgsCRENrBBoyySKp7Jdf7VN6aPNmMkMArtFau3suJXubjdV7pR6A85BdqoaZjVOm6_Dw/s800/search.png');background-repeat:no-repeat;background-position:6px 7px;padding:6px 6px 6px 28px;-webkit-transition-duration:400ms;-webkit-transition-property:width, background;-webkit-transition-timing-function:ease;-moz-transition-duration:400ms;-moz-transition-property:width, background;-moz-transition-timing-function:ease;-o-transition-duration:400ms;-o-transition-property:width, background;-o-transition-timing-function:ease;width:72px;float:right;}input#q3:focus{width:196px;}</style>

12:24 AM

Menghilangkan Icon Komentator default Blogger

GIBZET0407 - 5:36 PM

<div style="text-align: justify;">Dalam posting sebelumnya "<a href="http://optimasi-blog.blogspot.com/2009/06/pasang-avatar-mybloglog-dalam-komentar.html">pasang avatar mybloglog dalam komentar</a>" telah sedikit disinggung mengenai icon komentator default blogger, seperti <img alt="icon author1" border="0" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/bloggerprofil.jpg" style="display:inline;" /> dan <img alt="icon author2" border="0" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Blogger.jpg" style="display:inline;" />. Kemudian untuk merubah tampilan default icon tersebut, maka ditambahkan avatar mybloglog. Rupanya setelah ditelisik (bak penyidik dalam lab forensik he..he..) lebih mendalam, ternyata ceritanya tidak sampai di situ saja...??? Umumnya kalau template kamu masih menggunakan default bawaan blogger dan langsung ditambahkan avatar mybloglog, maka masih terlihat icon komentator default blogger saat avatar tidak/belum muncul<a name='more'></a>. Artinya avatar mybloglog yang telah dipasang hanya berfungsi untuk menindih icon komentator yang sesungguhnya. Nah, agar avatar mybloglog yang telah kamu aplikasikan dalam blog kamu tampil power-full dan optimal, ini nih trik bloggernya.</div><div class="fullpost"> <div style="text-align: justify;">Trik blogger menghilangkan icon komentator default blogger adalah sebagai berikut : </div><ul><li>Login ke account blogger kamu.</li> <li>Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".</li> </ul><div style="text-align: justify;">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. </div><ul><li>Cari kode (warna merah) seperti di bawah ini.</li> </ul><blockquote style="font-family:courier new;"><b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'> <b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/> </b:if> <a expr:name='data:comment.anchorName'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt></blockquote> <div style="text-align: justify;">Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari. </div><div style="text-align: justify;"><ul><li>Kemudian perhatikan kode yang ditandai dengan warna biru dan hijau. Ubahlah kode yang berwarna biru dengan kode id dan hapus kode yang berwarna hijau, sehingga hasilnya akan tampak seperti di bawah ini.</li> </ul></div><blockquote style="font-family:courier new;"><b:loop values='data:post.comments' var='comment'> <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.id'> <a expr:name='data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> </blockquote> Catatan : <div style="text-align: justify;">Hati-hati dengan pengeditan ini dan harus dilakukan dengan teliti, apalagi terhadap blog dengan karakter kode template yang berbeda. </div><ul><li>Jangan lipa disimpan.</li> </ul> Selamat menghilangkan icon komentator default blogger... </div>

5:36 PM

Pasang Avatar Mybloglog dalam Komentar

GIBZET0407 - 11:03 AM

<div style="text-align: justify;">Biasanya ketika kamu meng-klik link komentar (tentunya posting yang memiliki komentar), kamu akan melihat tampilan icon default blogger, kalau tidak seperti ini <img alt="icon author1" border="0" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/bloggerprofil.jpg" /> (berkomentar sebagai profil account google) atau seperti ini <img alt="icon author2" border="0" src="http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Blogger.jpg" /> (berkomentar sebagai pemilik salah satu blog). Misinya kali ini adalah merubah tampilan icon komentator dengan image/gambar, kita sebut saja dengan "avatar" dalam mybloglog. Avatar yang ditampilkan dalam versi kecilnya dapat kamu lihat dalam widget "Recent Visitor", dalam elemen sidebar di bawah "Follower" blog OB. Trik ini mungkin bukan merupakan trik blogger yang baru, tapi tidak ada salahnya untuk dimasukkan dalam salah satu koleksi optimasi blog. Trik ini juga diperkenalkan oleh Amanda dalam titlenya "<a href="http://www.bloggerbuster.com/2007/11/how-to-add-comment-avatars-to-see-your.html" target="_blank">How to add MyBlogLog comment avatars (author images) to your comments section</a>". Tertarik ingin langsung mengaplikasikannya dalam komentar blog kamu?!? Mari kita ambil satu demi satu buah trik blogger memasang avatar mybloglog.</div><a name='more'></a> <ul><li>Login ke account blogger kamu.</li> <li>Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".</li> </ul><div style="text-align: justify;">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. </div><ul><li>Cari Kode kode </head> dan Copy-Paste (copas) kode berikut di atasnya.</li> </ul><blockquote style="font-family:courier new;"><script type='text/javascript'> //<![CDATA[ /* Merlinox and Napolux MyBlogLog Avatar Creator created by Merlinox (blog.merlinox.com) helped by Napolux (www.napolux.com) version 0.1 (20061214) version 0.2 (20061215) compatible with all blogger blog */ if(typeof(myLayer)!='function'){ function myLayer (x){ //individuo l'oggetto if(document.layers){ // browser="NN4"; lay=document.layers[x]; } if(document.all){ // browser="IE"; lay=eval("document.all." + x); } if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff"; lay=document.getElementById(x); } return lay; } } //lo prendo da blogger function myBlogAvatar(codiceCommento,autore,stile){ //scrivo lo span //var myBlogSpan = "myBlog-" + codiceCommento; //document.write("myBlogLog..."); //metto tutto minuscolo perchè indexOf è case sensitive if (autore != ""){ alt="MyBlogLog: " + autore; myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>"; //myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML; //myLayer(myBlogSpan).innerHTML = myBlog; document.write(myBlog); } } //]]> </script></blockquote> <div style="text-align: justify;">Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari. </div><ul><li>Kemudian cari kode di bawah ini.</li> </ul><blockquote><b:loop values='data:post.comments' var='comment'></blockquote><ul><li>Jika sudah ketemu, paste kode berikut di bawah kode di atas.</li> </ul><blockquote style="font-family:courier new;"><div style='border:0;float:left;margin: 0 5px 0 0;'> <script> myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>'); </script> </div></blockquote> Catatan : Kamu bisa memodifikasi kode yang ditandai dengan warna merah. <ul><li>Jangan lupa disimpan.</li> </ul> Selamat memasang avatar mybloglog...

11:03 AM

Otomatis Readmore

GIBZET0407 - 10:39 AM

<div style="text-align: justify;">Kamu pernahkan mendengar bahkan mungkin telah mengendarai sepeda motor otomatis, seperti mio, vario, atau spin. Jalannya tanpa memasukkan perseneling, langsung ngacir. Ternyata bukan hanya mesin yang bisa otomatis, readmore ada yang otomatis loh! Kalau tidak salah dulu pernah kita membicarakan tentang <a href="http://optimasi-blog.blogspot.com/2009/03/membuat-readmore.html">readmore dengan loading halaman</a>, <a href="http://optimasi-blog.blogspot.com/2009/03/membuat-readmore-tanpa-loading-halaman.html">readmore tanpa loading halaman</a>, dan <a href="http://optimasi-blog.blogspot.com/2009/03/membuat-readmore-diikuti-dengan-judul.html">readmore diikuti dengan judul posting</a>. Sekarang ada trik blogger readmore baru yang otomatis, dimana trik ini OB dapat setelah jalan-jalan ke blog o-om.com tentang <a href="http://www.o-om.com/2009/04/cara-pasang-auto-read-more-terbaru-part.html" target="_blank">cara pasang auto readmore</a>. Singkatnya cara kerja otomatis readmore ini sama seperti readmore dengan loading halaman, tetapi tanpa memasukkan kode dalam kalimat yang akan kamu penggal. Ya... iyalah, namanya saja otomatis. Dan kabarnya lagi, kamu dapat menentukan berapa jumlah karakter yang akan ditampilkan dalam postingan, baik dengan image maupun tanpa image.</div><a name='more'></a> Penting : <div style="text-align: justify;">Sebelum beranjak lebih jauh, pastikan residu-residu readmore yang telah tertanam sebelumnya sudah dibersihkan. Atau diistilahkan dengan mengembalikan kode template seperti semula. Caranya dengan mereview ulang posting readmore yang pernah kamu pasang dalam blog kamu. </div> Berikut trik blogger membuat otomatis readmore dalam postingan : <ul><li>Login ke account blogger kamu.</li> <li>Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".</li> </ul><div style="text-align: justify;">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. </div><ul><li>Cari Kode kode </head> dan Copy-Paste (copas) kode berikut di atasnya.</li> </ul><blockquote style="font-family:courier new;"><script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 450; summary_img = 450; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ /****************************************** Auto-readmore link script, version 2.0 (for blogspot) (C)2008 by Anhvo visit http://en.vietwebguide.com to get more cool hacks ********************************************/ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script></blockquote> <div style="text-align: justify;">Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari. </div>Catatan : <ol><li>Kode var thumbnail_mode = "float" ; diartikan bahwa readmore kamu akan diatur disebelah kiri, kalau kamu ingin tanpa pengaturan float silakan ganti dengan "no-float".</li> <li>Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).</li> <li>Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).</li> <li>Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.</li> <li>Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.</li> </ol><ul><li>Cari kembali kode seperti di bawah ini.</li> </ul><blockquote><data:post.body/></blockquote> atau <blockquote><data:post.body/></blockquote><ul><li>Kalau sudah ketemu, ganti kode tersebut dengan kode berikut.</li> </ul><blockquote style="font-family:courier new;"><b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> left'><a expr:href='data:post.url'>Readmore »» <data:post.title/></a> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if></blockquote> Catatan : <div style="text-align: justify;"><ol><li>Ganti kode yang berwarna merah dengan letak readmore yang kamu inginkan left (kiri) atau right (kanan).</li> <li>Kalau perlu ganti Readmore dengan kata favorit kamu.</li> <li>Hapus kode <data:post.title/>, jika kamu tidak menginginkan readmore diikuti dengan judul posting.</li> </ol></div><ul><li>Jangan lupa disimpan.</li> </ul>Selamat membuat otomatis readmore...

10:39 AM

Parse Your Code

GIBZET0407 - 12:59 AM

Untuk memasukkan markup <abbr title="HyperText Markup Language">HTML</abbr> dalam postingan gunakan gadget di bawah ini :<a name='more'></a><div class="aligncenter"><script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=0&up_conv2=0&up_conv3=0&up_conv4=1&up_conv5=1&synd=open&w=400&h=350&title=Post-Code%3A+code+converter&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"> </script></div>Note: “Copas“ markup HTML dalam kotak form berisi tulisan <q>Paste (or write) here your code,…</q>, kemudian klik button "Convert".Sedangkan jika markup <abbr title="HyperText Markup Language">HTML</abbr> digunakan sebagai widget dalam blog (full parse), contoh: markah feed subscribe via email dalam posting, adsense dalam posting. Silakan gunakan gadget di bawah ini:<div class="aligncenter"><script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=400&h=350&title=Post-Code%3A+code+converter&border=%23ffffff%7C1px%2C1px+solid+black%7C1px%2C1px+solid+black%7C0px%2C1px+black&output=js"> </script></div>Note: “Copas“ markup HTML dalam kotak form berisi tulisan <q>Paste (or write) here your code,…</q>, kemudian klik button "Convert".<style>.aligncenter{margin-bottom:1.6em;}.aligncenter table,td{border:0;}.aligncenter tr,.aligncenter td{padding:0;}</style>

12:59 AM

Budaya Award dan Aksi Reaksinya

GIBZET0407 - 5:39 PM

<div style="text-align: justify;">Memang ngga salah lagi, budaya award mungkin sudah lama menyelinap di antara pori-pori para blogger. Tidak mengenal waktu dan tidak mengenal usia yang newbie atau oldbie. Ssstt.. padahal OB kurang tahu istilahnya, cuman ikut-ikutan ngatain doang. Di dunia <a href="http://optimasi-blog.blogspot.com/">Optimasi blog</a> pandangan untuk semua sobat yang suka nge-blog adalah sama, karena semua termasuk OB sama-sama belajar. Ah.. masa? lho, ngga percaya. Illustrasinya seperti ini kamu pernah makan gula-gula? OB juga pernah. Rasa gula pasti manis! Sorry OB, kemarin gulanya masam kenapa ya? Itu bukan gula sobat, itu namanya cuka (beda huruf konsonan doang). Tapi yang membedakannya hanya masalah waktu, karena antara kamu dan OB kemungkinannya ada yang lebih dulu tahu rasa gula. Betul?!? </div> <div style="text-align: justify;">Intinya sama dengan ilmu, kalau kamu tidak merasakan dan tidak memperdulikannya, jangan harap kamu akan tahu betapa nikmatnya sebuah ilmu. Apabila aksi OB sedikit tahu tentang ilmu optimasi blog, bukan berarti OB lebih pintar dari kamu. Namun hal tersebut direaksikan dari waktu OB belajar optimasi blog yang lebih dulu saja waktunya. Coba kalau kamu duluan yang belajarnya, mungkin OB yang nge-fans berat sama blog kamu. Betul?!?</div><a name='more'></a> <div style="text-align: justify;">Kembali ke award... Budaya award merupakan budaya silaturahim serta linkback bagi para blogger. Silaturahim berarti memberikan perhatian kepada orang lain dengan penuh kasih sayang, sedangkan linkback blog merupakan link yang kita berikan kepada satu atau lebih blog, karena suatu sebab atau keadaan. Nah, award blog ini masuk tuh dalam kategori dua-duanya. Kalau tanggapan OB sih, ngga ada masalah dan legal menurut hukum. Cuman mungkin hati dan perasaan OB saja yang seakan-akan ingin berontak dan sedikit kurang sregggg... </div> <div style="text-align: justify;">Kebetulan pas mau bikin posting budaya award, OB dapat dua award yaitu : Award I dari sobat Bang Del. Awardnya seperti di bawah ini. Kalau kamu punya waktu senggang, silakan kunjungi alamat blog sobat yang satu ini di <a href="http://bangdel.blogspot.com/" rel="nofollow=" target="_blank=">http://bangdel.blogspot.com</a>.</div> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXtwuNfN85Zh8UnrqCMET1PlIIhGSCmLPViJvNi7-ooDQguN8aYgqQbdM_n50-odsutmBHqEXmObyNMZu9N1KWrqb39HpfCR2M1stpxjSi05Ep63kpx9crYc5lQBx-YTa6ykeLeo4FmL4/s1600-h/tutorit+friendship+award.JPG"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5346402329602648178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXtwuNfN85Zh8UnrqCMET1PlIIhGSCmLPViJvNi7-ooDQguN8aYgqQbdM_n50-odsutmBHqEXmObyNMZu9N1KWrqb39HpfCR2M1stpxjSi05Ep63kpx9crYc5lQBx-YTa6ykeLeo4FmL4/s320/tutorit+friendship+award.JPG" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 169px; height: 215px;" /></a> Arti Award: <div style="text-align: justify;">Tutorit Friendship merupakan award yang diberikan untuk blog/web yang kamu anggap paling inspirasi dan sangat friendly. </div>Special Thanks : <a href="http://bangdel.blogspot.com/2009/06/bang-del-bagi-bagi-award.html" rel="nofollow" target="_blank=">Bang Del</a> terima kasih banyak awardnya. Homework to Special Friends : <ul><li>Buatlah postingan yang memuat gambar award ini di blog kamu.</li> <li>Sebutkan siapa yang memberikan award beserta link blognya.</li> <li>Hadiahkan award ini kepada 10 sahabatmu.</li> <li>Kunjungi blognya dan beritahukan kalau ada award dari kamu untuknya.</li> <li>Lakukan hal yang sama seperti yang memberikan award ke kamu.</li> </ul>Special Friends : <ol><li> <a href="http://ad4msan.blogspot.com/" rel="nofollow" target="_blank">AD4M SAN</a> -- http://ad4msan.blogspot.com</li> <li> <a href="http://pandukom.co.cc/" rel="nofollow" target="_blank">F3HRY</a> -- http://pandukom.co.cc</li> <li> <a href="http://pondok-cerita.blogspot.com/" rel="nofollow" target="_blank">W4NZZ</a> -- http://pondok-cerita.blogspot.com</li> <li> <a href="http://butikupalace.blogspot.com/" rel="nofollow" target="_blank">RITZ</a> -- http://butikupalace.blogspot.com</li> <li> <a href="http://blog.bisawang.co.cc/" rel="nofollow" target="_blank">AWANG</a> -- http://blog.bisawang.co.cc</li> <li> <a href="http://fostrock.blogspot.com/" rel="nofollow" target="_blank">DIDIR</a> -- http://fostrock.blogspot.com</li> <li> <a href="http://www.bloggermakemoney.com/" rel="nofollow" target="_blank">BLOGGER MAKE MONEY</a> -- http://www.bloggermakemoney.com</li> <li> <a href="http://kerja-uangpanas.blogspot.com/" rel="nofollow" target="_blank">ISWAN RISWANDI</a> -- http://kerja-uangpanas.blogspot.com</li> <li> <a href="http://warung-bisnis-online.blogspot.com/" rel="nofollow" target="_blank">HILL</a> -- http://warung-bisnis-online.blogspot.com</li> <li> <a href="http://mp3toplus.blogspot.com/" rel="nofollow" target="_blank">NOERTONY</a> -- http://mp3toplus.blogspot.com</li> </ol><div style="text-align: justify;">Award II dari sobat Ad4m San. Awardnya seperti di bawah ini. Kalau kamu punya waktu senggang, kunjungi juga alamat blog sobat OB yang satu ini di <a href="http://ad4msan.blogspot.com/" rel="nofollow" target="_blank">http://ad4msan.blogspot.com</a>. </div> ~~Begin Copy~~ <div style="text-align: center;"><img alt="award" border="0" src="http://i647.photobucket.com/albums/uu191/ariamsi/Other/FavBlogAni3.gif" /></div> <div style="text-align: center;">This seal is called “Favorite Blogs”. This award is given by <a href="http://ad4msan.blogspot.com/" rel="nofollow" target="_blank">http://ad4msan.blogspot.com/</a> (Change to Blogger who gave you the award) This “Favorite Blogs” is awarded to <a href="http://optimasi-blog.blogspot.com/">http://optimasi-blog.blogspot.com/</a> (Put your blog URL here) </div> This is the easy way and the fastest way to: <ul><li>Make your Authority Technorati explode.</li> <li>Increase your Google Page Rank.</li> <li>Get more traffic to your blog.</li> <li>Makes more new friends.</li> </ul> The rules is very simple as follows : <ul><li>Start copy from “Begin Copy” until “End Copy” to your blog.</li> <li>Put your own blog name and link.</li> <li>Tag your friends as much as you can.</li> </ul> Below is the list of my favorite blogs I gave this award because I find their content interesting: <ol><li><a href="http://bangdel.blogspot.com/" rel="nofollow=" target="_blank=">BANG DEL</a> -- http://bangdel.blogspot.com</li> <li><a href="http://pandukom.co.cc/" rel="nofollow" target="_blank">F3HRY</a> -- http://pandukom.co.cc</li> <li>???</li> <li>???</li> <li> ???</li> </ol>(Add list your friends blog here) Please also feel free to grab this Award and pass it to anyone even if they've already received it. Thanks, Aris Asmara (OB) (Your name) ~~End Copy~~ Arti Award : <div style="text-align: justify;">Favorite Blog's Award merupakan award untuk blog yang menjadi favorit kamu. </div>Special Thanks : <a href="http://ad4msan.blogspot.com/2009/06/hore-dapet-award-lagi.html" rel="nofollow" target="_blank">Ad4m San</a> terima kasih banyak awardnya. Homework to Special Friends : <div style="text-align: justify;"><ol><li>Silakan copy dari ~~Begin Copy~~ sampai ~~End Copy~~.</li> <li>Perhatikan teks/link yang perlu kamu ubah dan tambahkan(warna merah).</li> </ol></div>Catatan : <div style="text-align: justify;">Untuk blog sobat mana saja yang akan OB share mendapatkan kedua award tersebut, syaratnya hm..... hm...... hm.... tidak ada syarat-syaratnya. Tunggu aja!!! </div> <div style="text-align: justify;">Cukup 2 (dua) award saja yang dapat OB terima dari best friend dan sobat special. Bukan maksudnya menolak, tapi rasanya blog OB belum pantas menerima award lebih dari ini. Terima kasih...</div>

5:39 PM

Scrolling Element Komentar

GIBZET0407 - 4:46 PM

Sebelumnya pastikan kamu sudah membaca postingan tentang <a href="http://optimasi-blog.blogspot.com/2009/03/memasang-kotak-komentar-di-bawah.html">cara memasang kolom komentar di bawah posting</a>. Belum yah? Buruan gih baca postingannya. Nah, jika postingan blog kamu banyak yang memberikan komentar berarti ... postingannya bagus dan uptodate! Nyeletuk aja. Maksud OB halamannya akan semakin panjang ke bawah. Terus bagaimana cara melakukan <a href="http://optimasi-blog.blogspot.com/">optimasi blog</a> agar halaman komentar tidak menjadi panjang, walaupun dikomentari oleh puluhan pengunjung blog? Apabila kamu berpikir untuk mengembalikan setting komentar ke defaultnya, itu sih bukan konsep jitu untuk memecahkan suatu masalah.<a name='more'></a>Trik blogger ini juga pernah ditanyakan oleh sobat ammadis yang mempunyai alamat blog di <a href="http://www.ammadis.web.id/">http://www.ammadis.web.id</a>, untuk versi demonya silakan klik <a href="http://demo-optimasi-blog.blogspot.com/2011/03/demo-emoticon-dalam-komentar.html">link demo ini</a>. Lho... aku kemarin juga pernah nanya ke optimasi blog tapi belum nongol reviewnya, bahkan mungkin lebih dulu dari ammadis. Wah, kalau sudah gini ramai jadinya ha.. ha..Pertanyaan yang belum OB review dimungkinkan beberapa hal : Pertama, OB belum bisa atau belum tahu; Kedua, struktur peng-kode-annya rumit, sehingga perlu waktu yang tidak sebentar; Ketiga, kodenya sudah dapat/kelar tapi error dalam aplikasinya; Keempat, OB kurang tanggap dengan pertanyaan yang masuk, sehingga terlewati (kelamaan tidak online); dan Kelima, OB benar-benar tidak tahu.Kembali ke trik scrolling elemen komentar,... Yuk! Kita belajar sama-sama cara bikinnya.<ul><li>Login ke account blogger kamu.</li> <li>Pilih tab Tata Letak --> Edit HTML.</li> </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.<ul><li>Cari kode kumpulan kode CSS comments.</li> </ul><pre>/* Comments -------------------------- */ #comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: $sidebarcolor; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; }</pre>Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.<ul><li>Tambahkan kode berikut di atas kode <code >#comments h4</code>.</li> </ul><pre>#comments { height:280px; overflow:auto; }</pre> Catatan : <ol style="text-align: justify;"><li>Ganti nilai kode yang berwarna merah sesuai dengan tinggi elemen scroll yang kamu inginkan.</li> <li>Kode overflow:auto; berarti jika elemen komentar melebihi tinggi yang telah ditentukan (280px), maka fungsi scroll otomatis akan bekerja.</li> </ol><ul><li>Jangan lupa disimpan</li> </ul> Selamat menampilkan elemen komentar dalam model scroll...

4:46 PM

Cara Memasang Kode Warna dalam Blog

GIBZET0407 - 8:15 PM

<div style="text-align: justify;">Kebetulan ada yang tanya tentang bagaimana cara membuat <a href="http://optimasi-blog.blogspot.com/2009/04/optimasi-blog-dengan-kode-kode-warna.html">kode warna</a> dalam blog? Tapi kamu jangan heran apabila kodenya bejibun, bro... Sebab OB belum menguasai script java yang dihostkan untuk menyingkat kode dalam template blogger. Posting trik blogger ini didedikasikan untuk teman-teman yang pada haus sama yang namanya widget. Dan OB tidak menjamin kalau loading blog kamu nantinya akan tambah lelet. Rekomendasinya, lebih baik widget atau gadget ini diletakkan dalam postingan kamu supaya loading blog dapat diminimalisir. Kemudian buat link khusus ke postingan kode warna.</div><a name='more'></a> <div style="text-align: justify;">Daripada nyerocos melulu, yuk kita mulai trik memasang <a href="http://optimasi-blog.blogspot.com/2009/04/optimasi-blog-dengan-kode-kode-warna.html">kode warna</a> dalam blog. </div><ul><li>Login dulu ke account blogger kamu.</li> <li>Pilih tab Tata Letak --> Edit HTML.</li> </ul><div style="text-align: justify;">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. </div><ul><li>Silakan copas script berikut di atas kode </head></li> </ul><blockquote style="font-family:courier new;"><script language='javascript'> function Barva(koda) { document.getElementById("vzorec").bgColor=koda; document.hcc.barva.value=koda.toUpperCase(); document.hcc.barva.select(); } function BarvaDruga(koda) { document.getElementById("vzorec2").bgColor=koda; document.hcc.Barva2.value=koda.toUpperCase(); document.hcc.Barva2.select(); } </script> <script type='text/javascript'> var hue; var picker; //var gLogger; var dd1, dd2; var r, g, b; function init() { if (typeof(ygLogger) != "undefined") ygLogger.init(document.getElementById("logDiv")); pickerInit(); //ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1" //ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1" } // Picker --------------------------------------------------------- function pickerInit() { hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180); hue.onChange = function(newVal) { hueUpdate(newVal); }; picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180); picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); }; hueUpdate(); dd1 = new YAHOO.util.DD("pickerPanel"); dd1.setHandleElId("pickerHandle"); dd1.endDrag = function(e) { // picker.thumb.resetConstraints(); // hue.thumb.resetConstraints(); }; } executeonload(init); function pickerUpdate(newX, newY) { pickerSwatchUpdate(); } function hueUpdate(newVal) { var h = (180 - hue.getValue()) / 180; if (h == 1) { h = 0; } var a = YAHOO.util.Color.hsv2rgb( h, 1, 1); document.getElementById("pickerDiv").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; pickerSwatchUpdate(); } function pickerSwatchUpdate() { var h = (180 - hue.getValue()); if (h == 180) { h = 0; } document.getElementById("pickerhval").value = (h*2); h = h / 180; var s = picker.getXValue() / 180; document.getElementById("pickersval").value = Math.round(s * 100); var v = (180 - picker.getYValue()) / 180; document.getElementById("pickervval").value = Math.round(v * 100); var a = YAHOO.util.Color.hsv2rgb( h, s, v ); document.getElementById("pickerSwatch").style.backgroundColor = "rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")"; document.getElementById("pickerrval").value = a[0]; document.getElementById("pickergval").value = a[1]; document.getElementById("pickerbval").value = a[2]; var hexvalue = document.getElementById("pickerhexval").value ='#'+ YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]); ddcolorposter.initialize(a[0], a[1], a[2], hexvalue) if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select(); } </script></blockquote><ul><li>Simpan template kamu.</li> </ul> Cara I menambahkan dalam postingan. <ol><li>Buat Posting --> Copas kode warna.</li> <li>Berikan judul posting kamu, ex: Kode Warna.</li> <li>Tambahkan label yang sesuai.</li> <li>Terbitkan Entri.</li> </ol> Cara II menambahkan dalam elemen blog kamu : <ol><li>Tata Letak --> Element Halaman --> Tambah Gadget.</li> <li>Tambahkan "HTML/Javascript" --> Copas kode warna.</li> </ol> Kode warna : <blockquote style="font-family:courier new;"><center><form name="hcc" id="hcc"> <table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b40404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df0101"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f78181"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#61380b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df7401"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#faac58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907"> </td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#868a08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907"> </td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#38610b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#74df00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#bef781"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a08"> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b404"> </td><td onclick="Barva(this.bgColor)" bgcolor="#01df01"> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f781"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbef"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138"> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f"> </td><td onclick="Barva(this.bgColor)" bgcolor="#01df74"> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58faac"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec"> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#088a85"> </td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae"> </td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861"> </td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0174df"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe"> </td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa"> </td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61"> </td><td onclick="Barva(this.bgColor)" bgcolor="#08088a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0101df"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719"> </td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#380b61"> </td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#7401df"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa"> </td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb"> </td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39"> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb"> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24"> </td><td onclick="Barva(this.bgColor)" bgcolor="#610b38"> </td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f"> </td><td onclick="Barva(this.bgColor)" bgcolor="#df0174"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f781be"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec"> </td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5"> </td></tr><tr height="10"><td> </td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000"> </td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b"> </td><td onclick="Barva(this.bgColor)" bgcolor="#151515"> </td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c"> </td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#424242"> </td><td onclick="Barva(this.bgColor)" bgcolor="#585858"> </td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e"> </td><td onclick="Barva(this.bgColor)" bgcolor="#848484"> </td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4"> </td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd"> </td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8"> </td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6"> </td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2"> </td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff"> </td></tr></tbody></table></td></tr></tbody></table> <table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24"> </td><td valign="bottom">Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></td></tr></tbody></table> </form></center></blockquote> <div style="text-align: justify;">Demikian trik blogger untuk memasang Kode Warna dalam Blog... </div>

8:15 PM

Menghilangkan Garis Bintik-Bintik Jejak Link

GIBZET0407 - 4:15 PM

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAAhSbHmG8gaPnGxrCZ0QjUxTeeDzvIauoI9PRfG347AkhF6ZW2uvTmRuZMhUyhpH143RykIFyy-8yDBD6N9BPj2OmpzejMpPXNdy61jeX7pPNvYNWZTL9hgsWWiTgK8PZjsZ6gHHuLtA/s1600-h/Jejaklink.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5345636017731574482" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAAhSbHmG8gaPnGxrCZ0QjUxTeeDzvIauoI9PRfG347AkhF6ZW2uvTmRuZMhUyhpH143RykIFyy-8yDBD6N9BPj2OmpzejMpPXNdy61jeX7pPNvYNWZTL9hgsWWiTgK8PZjsZ6gHHuLtA/s200/Jejaklink.jpg" style="cursor: pointer; float: right; height: 97px; margin: 0pt 0pt 10px 10px; width: 103px;" /></a>OB mau nanya nih, pernah ngga kamu waktu meng-klik sebuah link di firefox? Ya, jelas pernah dong.<a name='more'></a> Itu hanya sekedar pertanyaan basa-basi pembuka posting ini. Agar lebih jelas coba lihat gambar di samping kanan posting ini (gambaran saja dan jangan diprotes lho...). Nah, maksud gambar tersebut adalah ketika kamu melakukan klik terhadap sebuah link dan sebelum menuju ke alamat link yang bersangkutan, ada semacam garis bintik-bintik yang melingkupi teks/image link yang bersangkutan. Apabila itu tidak terjadi dalam blog kamu, berarti it's OK dan no problem. Ah... OB ngomong terus kaya burung beo? Loh, kok OB disamain ama burung beo. Langsung ke trik blogger menghilangkan garis bintik-bintik jejak link.<ul><li>Login dulu ke account blogger kamu.</li> <li>Pilih tab Tata Letak --> Edit HTML.</li> </ul>Tips : Ngga perlu backup template segala (mending ngga usah dimasukin tips-nya ha..ha..).Cari kode ]]></b:skin> dan copas kode berikut diatasnya. <pre>a:active { outline: none; } a:focus { -moz-outline-style: none; }</pre>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.<ul><li>Jangan lupa disimpan.</li> </ul><h2>Update</h2>Trik ini <a href="http://optimasi-blog.blogspot.com/2011/03/informasi-update-posting-terdahulu-1.html">tidak direkomentasikan</a>, silakan telusuri di Google tentang “link focus”.

4:15 PM

Menambah Lokasi Link Post (Breadcrumbs Trail)

GIBZET0407 - 3:35 PM

<div style="text-align: justify;">Ketika pengunjung membuka suatu halaman posting dalam blogger, mungkin dia belum tahu posisi link posting kamu itu ada dimana. Ia hanya menduga bahwa link posting yang ditampilkan berada dalam label tertentu. Yang apabila label tersebut di klik, maka akan menampilkan posting dalam label/kategori yang sama dengan jumlah tertentu. Dalam blogspot hal tersebut di atas mungkin tidak terlalu dipermasalahkan, karena posting disusun berdasarkan satu halaman saja. Tapi bagaimana seandainya kalau kamu menggunakan web blog yang mempunyai halaman posting/content yang dapat ditambah. Example: Halaman utama (beranda) yang memiliki anak-anak halaman lain (<a href="http://sites.google.com/">Google Site</a>).</div> <div style="text-align: justify;">Namun bukanlah merupakan sesuatu yang tidak boleh, jika kamu juga ingin menambah variasi tampilan blogger agar halaman posting lebih terdefinisi. Nah, trik blogger yang satu ini dinamakan "Breadcrumbs Trail" dan diperkenalkan oleh <a href="http://hoctrointro.blogspot.com/2008/09/archived-post-adding-breadcrumb-trail.html" target="_blank">Hoctro's</a>. Demo penggunaannya dapat kamu lihat di atas tiap title post <a href="http://optimasi-blog.blogspot.com/">optimasi blog</a> ini, setelah kamu mengklik judul posting (dalam full posting). Tertarik dengan review breadcrumbs trail di atas, mari kita bersama-sama memulai triknya.</div><a name='more'></a><li>Login dulu ke account blogger kamu.</li> <li>Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".</li> </ul><div style="text-align: justify;">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.</div><ul><li>Tambahkan kode CSS berikut, di atas kode ]]></b:skin></li> </ul><blockquote style="font-family:courier new;">.breadcrumbs { border-bottom:1px dotted #000; margin:0.5em 0 0.5em; padding:0 0 0.5em;}</blockquote>Catatan: Silahkan rubah margin (khususnya yang berwarna merah), jika kamu ingin memodifikasi jarak breadcrumbs agar sesuai dengan keinginan kamu. <ul><li>Cari kode di bawah ini.</li> </ul><blockquote style="font-family:courier new;"><b:includable id='main' var='top'></blockquote><div style="text-align: justify;">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.</div><ul><li>Kemudian copas kode dari Hoctro's berikut, diatas kode tersebut.</li> </ul><blockquote style="font-family:courier new;"><b:includable id='breadcrumbs' var='post'>  <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.labels'> Kamu ada disini: <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> > <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> <a expr:href='data:label.url' rel='tag'> <data:label.name/></a> </b:if> </b:loop> <b:if cond='data:post.title'> > <data:post.title/> </b:if> </b:if> </b:if>  </b:includable></blockquote>Catatan : <div style="text-align: justify;">Silakan hapus atau ganti teks yang berwarna merah dengan teks favorit kamu. Dan jika kamu tidak suka dengan penggalan lokasi dengan kode > (warna merah juga), silakan ganti dengan kode favorit kamu. </div><ul><li>Selanjutnya cari kode berikut.</li> </ul><blockquote style="font-family:courier new;"><b:if cond='data:post.dateHeader'></blockquote><ul><li>Kalau sudah ketemu, copas kembali kode berikut diatasnya</li> </ul><blockquote style="font-family:courier new;"><b:include data='post' name='breadcrumbs'/></blockquote>Catatan: <blockquote>Untuk template yang berkarakter mirip dengan "Minima" (belum dimodifikasi), cara peletakkan kode <b:include data='post' name='breadcrumbs'/> adalah sebagai berikut. <ul><li>Cari kode di bawah ini.</li> </ul><blockquote style="font-family:courier new;"><b:includable id='post' var='post'> <div class='post hentry uncustomized-post-template'></blockquote><ul><li>Dan letakkan kode <b:include data='post' name='breadcrumbs'/> dibawahnya.</li> </ul></blockquote><blockquote>Pastikan postingan kamu sudah memiliki label atau kategori, agar breadcrums trail tampil optimal.</blockquote><ul><li>Jangan lupa disimpan</li> </ul>Selamat menampilkan link postingan kamu dalam breadcrumbs trail...

3:35 PM

Modifikasi Widget Mybloglog

GIBZET0407 - 6:28 PM

<div style="text-align: justify;">Seperti biasa, apabila ada pertanyaan atau masukkan dari sobat OB, maka OB akan bikin dalam satu atau beberapa posting. Nah, trik blogger kali ini adalah respon dari pertanyaan F3hry yang lagi asyik ber-blogger ria di Panduan Berkomputer. Jika kamu punya waktu senggang, kunjungi blog sobat OB yang satu ini di <a href="http://pandukom.blogspot.com/" rel="nofollow" target="_blank">http://pandukom.blogspot.com</a>. Pertanyaannya lebih kurang seperti ini :</div><blockquote>Mas OB,bikin posting tentang gimana cara bikin recent visitor mybloglog yg ky punya mas OB donk...</blockquote><a name='more'></a> <div style="text-align: justify;">Agar lebih terdefinisi tampilan default dari widget recent visitor dari <a href="http://pandukom.blogspot.com/" target="_blank">MyBlogLog (MBL)</a> lebih kurang seperti image di bawah ini.</div> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLm8UOxd2_chdSSOHYIjBgyp6VfNPbTfY9mTu6Eav4ku2v4kQtQa6SZz4hU8JRtwcCscYsWg0_nMJEBmTaV71wxGAG_EXfPZYiQlRi8B2Lw9JdYvBs75nRZyI0L-5blL0dYp0YCUuxksc/s1600-h/Recent+Visitor.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="MBL Recent Visitor" border="0" id="BLOGGER_PHOTO_ID_5343706869417827474" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLm8UOxd2_chdSSOHYIjBgyp6VfNPbTfY9mTu6Eav4ku2v4kQtQa6SZz4hU8JRtwcCscYsWg0_nMJEBmTaV71wxGAG_EXfPZYiQlRi8B2Lw9JdYvBs75nRZyI0L-5blL0dYp0YCUuxksc/s320/Recent+Visitor.jpg" style="cursor: pointer; display: block; height: 136px; margin: 0px auto 10px; text-align: center; width: 200px;" /></a> <div style="text-align: justify;">Untuk memodifikasi widget tersebut seperti punya OB, kamu perlu melakukan langkah-langkah sebagai berikut :</div><div style="text-align: justify;"><ul><li>Pada Tata Letak Blogger pilih Edit-HTML, masukan kode di bawah ini di atas kode ]]></b:skin>.</li> </ul></div><div class="code">td.mbl_fo_hidden{display:none;}td.mbl_join_img{}td.mbl_join{}tr#tr0{display: none}th.mbl_h{display:none;}</div><ul><li>Simpan dulu template kamu.</li> <li style="text-align: justify;">Kemudian pilih Elemen Halaman dan tambahkan gadget (posisinya tergantung template blog kamu).</li> <li style="text-align: justify;">Dalam jendela tambahkan gadget, klik tanda "+" pada HTML/JavaScript.</li> <li>Copas kode berikut.</li> </ul><div class="code"><script src="http://pub.mybloglog.com/comm2.php?mblID=2009031009262523&c_width=330&c_sn_opt=n&c_rows=1&c_img_size=h&c_heading_text=&c_color_heading_bg=eeeddf&c_color_heading=111&c_color_link_bg=eeeddf&c_color_link=c13a10&c_color_bottom_bg=ffffff" type="text/javascript"></script> Gabung dalam komunitas MBL-OB [ <a target="_blank" href="http://www.mybloglog.com/buzz/community/blogoptimizationoptimasiblog/">View</a> | <a target="_blank" href="http://www.mybloglog.com/buzz/join_comm.php?ref_id=2009031009262523">Join</a> ]</div><ul><li>Beri judul untuk widget ini, ex: Recent Visitors, Pengunjung Blog, de-el-el. </li> </ul>Catatan : <div style="text-align: justify;"><ol><li>Silakan ganti kode yang berwarna merah dengan MBL ID kamu.</li> <li>Atur lebar (width) widget MBL sesuai dengan ukuran elemen kamu dan tampilan baris image/photo visitor yang diinginkan (rows) yang ditunjukkan dengan warna biru.</li> <li>Ganti kode yang berwarna hijau dengan nama MBL yang kamu inginkan dan alamat community blog kamu di MBL.</li> </ol></div><ul><li>Selanjutnya "Lihat Blog".</li> </ul> Sumber : <a href="http://www.o-om.com/2008/06/modifikasi-tampilan-mybloglog-recent.html" target="_blank">Modifikasi Tampilan Mybloglog Recent Readers</a> by o-om.com Demo : <div align="center"><script src="http://pub.mybloglog.com/comm2.php?mblID=2009031009262523&c_width=330&c_sn_opt=n&c_rows=1&c_img_size=h&c_heading_text=&c_color_heading_bg=eeeddf&c_color_heading=111&c_color_link_bg=eeeddf&c_color_link=c13a10&c_color_bottom_bg=ffffff" type="text/javascript"> </script></div>Sudahkah kamu bergabung dalam MBL-OB, Gabung dalam komunitas MBL-OB [ <a href="http://www.mybloglog.com/buzz/community/blogoptimizationoptimasiblog/">View</a> | <a href="http://www.mybloglog.com/buzz/join_comm.php?ref_id=2009031009262523">Join</a> ] Update: Sekarang widget ini sudah tidak berlaku lagi — selain memberatkan loading blog — pihak Yahoo juga telah menghentikan layanan mybloglog.

6:28 PM

Widget Update

GIBZET0407 - 3:06 AM

3:06 AM

Kejutan untuk Sobat OB

GIBZET0407 - 7:49 PM

<div style="text-align: justify;">Seperti yang telah OB posting sebelumnya dalam title <a href="http://optimasi-blog.blogspot.com/2009/05/trik-menjadikan-blog-kamu-dofollow.html">akhirnya OB kebagian pagerank</a>, bahwa akan ada perubahan mendasar dalam blog "<a href="http://optimasi-blog.blogspot.com/">Optimasi Blog</a>". Yah, boleh dianggap suatu <a href="http://optimasi-blog.blogspot.com/2009/06/kejutan-untuk-sobat-ob.html">kejutan...</a> Singkatnya begini, silakan buka salah satu posting yang memiliki komentar. Kemudian klik kanan dan pilih properties. Dalam kotak properties, kamu akan melihat "Address" dan "Will open in". Cuma itu doang!!! </div> <div style="text-align: justify;">Artinya Optimasi Blog telah menjadi blog "<a href="http://optimasi-blog.blogspot.com/2009/04/optimasi-blog-dofollow.html">DoFollow</a>". Jadi yang kemaren-kemaren masih <a href="http://optimasi-blog.blogspot.com/2009/04/optimasi-blog-nofollow.html">NoFollow</a>? Ya iyalah... Tapi teman-teman jangan merasa tertipu, karena pasti ada alasan yang mungkin tidak dapat diungkapkan sebelumnya. Nah, rahasianya sekarang akan OB buka. Sebentar OB buka tirainya dulu, maklum kerja sendiri he..he..</div><a name='more'></a> <div style="text-align: justify;">Kenapa DoFollownya baru sekarang? Karena OB dulunya takut jika backlink yang teman-teman tinggalkan kurang berpengaruh dengan blognya masing-masing. Hal ini tentu berkaitan dengan rank blog OB. Coba bayangkan jika rankingnya terus menurun, blog teman-teman OB juga kena imbasnya. Lain ceritanya kalau blog OB mengalami peningkatan, tentu akan sangat membantu untuk mendongkrak blog teman-teman. Jadi sekarang OB yakin dong, <a href="http://optimasi-blog.blogspot.com/">optimasi blog</a> akan meningkat ranknya? Masalah yakin atau tidak tergantung owner blog masing-masing, apabila terus berkreasi, baik dari segi konten (posting), pelayanan yang ramah terhadap pengunjung serta SEO friendly, InsyaAllah ranking blog akan meningkat. Jangan lupa disimpan ... ups ... maksudnya jangan lupa dilampiri dengan Do'a. </div><div style="text-align: center;">Usaha tanpa Do'a, tiada berkah berbalas Do'a tanpa Usaha, berarti malas </div> Catatan penting: <div style="text-align: justify;"><ol><li>Agar backlink teman-teman berjalan serasi dan selaras dengan blog DoFollow, ketika berkomentar pilih beri komentar sebagai "Name/URL".</li> <li>Riset blog Dofollow ini mungkin dilakukan hanya untuk beberapa bulan, sebab OB ingin tahu seberapa besar pengaruh aliran DoFollow terhadap search engine, terutama Google.</li> </ol></div>Update: Sekarang blog “Optimasi Blog” tidak dofollow.

7:49 PM

GIBZET0407