Bisnis Kecil Modal Kecil: June 2009

Cara Membuat Blog dengan Wordpress

Ada banyak situs yang menyediakan domain gratis seperti co.cc, blogspot dan juga wordpress dan masih banyak situs penyedia domain gratis lainnya, pada domain gratis ini kita bisa membuat sebuah website gratis dengan isi atau konten yang sesuai dengan kehendak si pemilik website atau blog itu sendiri.

Berikut ini panduan untuk membuat sebuah blog dengan wordpress.com

Langkah pertama adalah klik

Membagi Dua Kolom Komentar

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.

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 avatar MyBlogLog dan icon komentator default blogger telah dihilangkan.

Kode CSS komentar :

/* 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; }

Kode HTML komentar :

<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'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

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

<div style='clear:both;'/>
</b:loop>
</dl&gt

Catatan :

Kode yang berwarna merah merupakan hasil penambahan avatar MyBlogLog.

Kode yang berwarna hijau merupakan modifikasi untuk menghilangkan icon komentator default blogger.

Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

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.

Tambahkan kode CSS dalam komentar (Comments).

.comment_avatar {
float: left;
height: 50px;
width: 50px;
position: relative;
padding-top: 5px;
text-align: left;
}

.comment_entry {
float: right;
width: 400px;
}

Catatan :

Silakan rubah kode yang berwarna merah sesuai dengan template blog kamu.

Cari kode avatar, seperti di bawah ini.

<div style='border:0;float:left;margin: 0 5px 0 0;'>

<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

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.

Tambahkan kode (warna merah) berikut di antara kode di atas.

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

Di bawah kode di atas terdapat kode

<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'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

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

Tambahkan kembali kode (warna merah) diantaranya, sehingga akan terlihat seperti di bawah ini.

<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'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>

Jangan lupa disimpan.

Sekarang lihat komentar blog kamu sudah jadi dua kolom atau belum...!!!??? Selain itu, kamu juga bisa memodifikasi atau menambahkan kode lain (ex: beda tampilan komentar pemilik blog) dalam trik blogger ini.

Selamat membagi komentar blog menjadi dua kolom...

Optimasi Widget yang ditampilkan dalam Blog

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.

Caranya cukup sederhana yaitu :

Widget tampil di halaman depan saja.

Sisipkan kode di bawah ini dalam elemen widget yang akan ditampilkan di halaman depan.

<b:if cond="data:blog.url == data:blog.homepageUrl">

</b:if>

Contoh penggunaannya :

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

Widget tampil di halaman selanjutnya.

Sisipkan kode di bawah ini dalam elemen widget yang akan ditampilkan di halaman selanjutnya.

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

</b:if>

Contoh penggunaannya :

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

Catatan :

Kode di atas dapat dilihat saat kamu melakukan edit template (Tata Letak --> Edit HTML -- > centang "Expand Template Widget").

Pilihlah widget yang menurut kamu sesuai untuk ditampilkan dan widget mana yang tidak perlu ditampilkan, baik di halaman depan maupun di halaman selanjutnya.

Pemilihan widget diutamakan yang memuat script dan image.

Selamat mengoptimalkan tampilan widget dalam blog...

Membuat Search dalam Blog

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.

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 membuat menu horizontal sub divisi #nav-right. Yuk, kita review triknya!

Bentuk dasar HTML untuk memunculkan fasilitas "search" adalah sebagai berikut :

<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><!-- #search -->

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 :

<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><!-- #search -->

Update (06 Nopember 2012): Untuk kustomisasi lebih lanjut, tinggal membenahi konfigurasi kotak penelusuran dengan menggunakan CSS (Cascading Style Sheets) yang letaknya di antara <b:skin><![CDATA[ … ]]></b:skin>. Contoh seperti yang ditunjukkan di bawah ini:

#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);
}

Menambahkan gambar dalam input#q dengan mengganti nilai dari properti padding (warna merah) serta tambahan kode gambar (warna hijau).

input#q {
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSNh49mtHwAe5HtUNGYEJz9xx_Bm6cQ9TXk5dYAha_H-Vnuq8pa4K7gzU98fwSnXFPn9wiu1Op2u_a3nkQhOqhCCPPqNR8vro_cxaUMV8TCHgM-wPU6Pgx5yuyyvFc3cW8M5kRIbL9Zp8/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;
}

Menghilangkan tombol search dengan mengganti semua selector yang berhubungan dengan input#searchsubmit.

input#searchsubmit {
  display: none;
}

Atau dapat pula di kustomisasi seperti di bawah ini.

input#q {
  background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSNh49mtHwAe5HtUNGYEJz9xx_Bm6cQ9TXk5dYAha_H-Vnuq8pa4K7gzU98fwSnXFPn9wiu1Op2u_a3nkQhOqhCCPPqNR8vro_cxaUMV8TCHgM-wPU6Pgx5yuyyvFc3cW8M5kRIbL9Zp8/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;
}

Hanya dengan sebuah elemen HTML (HyperText Markup Language), kita dapat membuat bermacam-macam gaya dengan memanfaatkan CSS. Bolehkah saya mengutip kata-kata ini, Kode adalah puisi.

Menghilangkan Icon Komentator default Blogger

Dalam posting sebelumnya "pasang avatar mybloglog dalam komentar" telah sedikit disinggung mengenai icon komentator default blogger, seperti icon author1

dan

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

Trik blogger menghilangkan icon komentator default blogger adalah sebagai berikut :

Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Cari kode (warna merah) seperti di bawah ini.

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

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.

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.

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

Catatan :

Hati-hati dengan pengeditan ini dan harus dilakukan dengan teliti, apalagi terhadap blog dengan karakter kode template yang berbeda.

Jangan lipa disimpan.

Selamat menghilangkan icon komentator default blogger...

Belajar Membuat Website dengan Joomla

Pada awal tahun 2008 tepatnya di bulan mei saya memulai belajar tentang membuat blog, mempercantik blog hingga satu tahun sudah bergelut dengan blog dan pada akhirnya sudah tiba saatnya untuk belajar tentang website.

Pada awalnya memang tidak terbayangkan bagaimana caranya membuat sebuah website seperti yang sering saya lihat di dunia internet. Dengan adanya matakuliah pemrograman web yang

Pasang Avatar Mybloglog dalam Komentar

Biasanya ketika kamu meng-klik link komentar (tentunya posting yang memiliki komentar), kamu akan melihat tampilan icon default blogger, kalau tidak seperti ini icon author1

(berkomentar sebagai profil account google) atau seperti ini icon author2

(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 "How to add MyBlogLog comment avatars (author images) to your comments section". Tertarik ingin langsung mengaplikasikannya dalam komentar blog kamu?!? Mari kita ambil satu demi satu buah trik blogger memasang avatar mybloglog.

Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Cari Kode kode </head> dan Copy-Paste (copas) kode berikut di atasnya.

<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("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");

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

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.

Kemudian cari kode di bawah ini.

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

Jika sudah ketemu, paste kode berikut di bawah kode di atas.

<div style='border:0;float:left;margin: 0 5px 0 0;'>

<script>

myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');

</script>

</div>

Catatan : Kamu bisa memodifikasi kode yang ditandai dengan warna merah.

Jangan lupa disimpan.

Selamat memasang avatar mybloglog...

Otomatis Readmore

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 readmore dengan loading halaman, readmore tanpa loading halaman, dan readmore diikuti dengan judul posting. Sekarang ada trik blogger readmore baru yang otomatis, dimana trik ini OB dapat setelah jalan-jalan ke blog o-om.com tentang cara pasang auto readmore. 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.

Penting :

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.

Berikut trik blogger membuat otomatis readmore dalam postingan :

Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Cari Kode kode </head> dan Copy-Paste (copas) kode berikut di atasnya.

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

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

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.

Catatan :

Kode var thumbnail_mode = "float" ; diartikan bahwa readmore kamu akan diatur disebelah kiri, kalau kamu ingin tanpa pengaturan float silakan ganti dengan "no-float".

Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).

Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).

Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.

Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.

Cari kembali kode seperti di bawah ini.

<data:post.body/>

atau

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

Kalau sudah ketemu, ganti kode tersebut dengan kode berikut.

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

<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Readmore �� <data:post.title/></a></span>

</b:if>

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

Catatan :

Ganti kode yang berwarna merah dengan letak readmore yang kamu inginkan left (kiri) atau right (kanan).

Kalau perlu ganti Readmore dengan kata favorit kamu.

Hapus kode <data:post.title/>, jika kamu tidak menginginkan readmore diikuti dengan judul posting.

Jangan lupa disimpan.

Selamat membuat otomatis readmore...

Parse Your Code

Untuk memasukkan markup HTML dalam postingan gunakan gadget di bawah ini :

Note: “Copas“ markup HTML dalam kotak form berisi tulisan Paste (or write) here your code,…, kemudian klik button "Convert".

Sedangkan jika markup HTML digunakan sebagai widget dalam blog (full parse), contoh: markah feed subscribe via email dalam posting, adsense dalam posting. Silakan gunakan gadget di bawah ini:

Note: “Copas“ markup HTML dalam kotak form berisi tulisan Paste (or write) here your code,…, kemudian klik button "Convert".

Budaya Award dan Aksi Reaksinya

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 Optimasi blog 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?!?

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

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

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 http://bangdel.blogspot.com.

Arti Award:

Tutorit Friendship merupakan award yang diberikan untuk blog/web yang kamu anggap paling inspirasi dan sangat friendly.

Special Thanks :

Bang Del terima kasih banyak awardnya.

Homework to Special Friends :

Buatlah postingan yang memuat gambar award ini di blog kamu.

Sebutkan siapa yang memberikan award beserta link blognya.

Hadiahkan award ini kepada 10 sahabatmu.

Kunjungi blognya dan beritahukan kalau ada award dari kamu untuknya.

Lakukan hal yang sama seperti yang memberikan award ke kamu.

Special Friends :

AD4M SAN -- http://ad4msan.blogspot.com

F3HRY -- http://pandukom.co.cc

W4NZZ -- http://pondok-cerita.blogspot.com

RITZ -- http://butikupalace.blogspot.com

AWANG -- http://blog.bisawang.co.cc

DIDIR -- http://fostrock.blogspot.com

BLOGGER MAKE MONEY -- http://www.bloggermakemoney.com

ISWAN RISWANDI -- http://kerja-uangpanas.blogspot.com

HILL -- http://warung-bisnis-online.blogspot.com

NOERTONY -- http://mp3toplus.blogspot.com

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 http://ad4msan.blogspot.com.

~~Begin Copy~~

This seal is called �Favorite Blogs�. This award is given by

http://ad4msan.blogspot.com/

(Change to Blogger who gave you the award)

This �Favorite Blogs� is awarded to

http://optimasi-blog.blogspot.com/

(Put your blog URL here)

This is the easy way and the fastest way to:

Make your Authority Technorati explode.

Increase your Google Page Rank.

Get more traffic to your blog.

Makes more new friends.

The rules is very simple as follows :

Start copy from �Begin Copy� until �End Copy� to your blog.

Put your own blog name and link.

Tag your friends as much as you can.

Below is the list of my favorite blogs I gave this award because I find their content interesting:

BANG DEL -- http://bangdel.blogspot.com

F3HRY -- http://pandukom.co.cc

(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 :

Favorite Blog's Award merupakan award untuk blog yang menjadi favorit kamu.

Special Thanks :

Ad4m San terima kasih banyak awardnya.

Homework to Special Friends :

Silakan copy dari ~~Begin Copy~~ sampai ~~End Copy~~.

Perhatikan teks/link yang perlu kamu ubah dan tambahkan(warna merah).

Catatan :

Untuk blog sobat mana saja yang akan OB share mendapatkan kedua award tersebut, syaratnya hm..... hm...... hm.... tidak ada syarat-syaratnya. Tunggu aja!!!

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

Scrolling Element Komentar

Sebelumnya pastikan kamu sudah membaca postingan tentang cara memasang kolom komentar di bawah posting. 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 optimasi blog 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.

Trik blogger ini juga pernah ditanyakan oleh sobat ammadis yang mempunyai alamat blog di http://www.ammadis.web.id, untuk versi demonya silakan klik link demo ini. 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.

Pilih tab Tata Letak --> Edit HTML.

Cari kode kumpulan kode CSS comments.

/* 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;
}

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.

Tambahkan kode berikut di atas kode #comments h4.

#comments {
height:280px;
overflow:auto;
}

Catatan :

Ganti nilai kode yang berwarna merah sesuai dengan tinggi elemen scroll yang kamu inginkan.

Kode overflow:auto; berarti jika elemen komentar melebihi tinggi yang telah ditentukan (280px), maka fungsi scroll otomatis akan bekerja.

Jangan lupa disimpan

Selamat menampilkan elemen komentar dalam model scroll...

Cara Memasang Kode Warna dalam Blog

Kebetulan ada yang tanya tentang bagaimana cara membuat kode warna 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.

Daripada nyerocos melulu, yuk kita mulai trik memasang kode warna dalam blog.

Pilih tab Tata Letak --> Edit HTML.

Silakan copas script berikut di atas kode </head>

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

Simpan template kamu.

Cara I menambahkan dalam postingan.

Buat Posting --> Copas kode warna.

Berikan judul posting kamu, ex: Kode Warna.

Tambahkan label yang sesuai.

Terbitkan Entri.

Cara II menambahkan dalam elemen blog kamu :

Tata Letak --> Element Halaman --> Tambah Gadget.

Tambahkan "HTML/Javascript" --> Copas kode warna.

Kode warna :

<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"><p>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"></p></td></tr></tbody></table>

</form></center>

Demikian trik blogger untuk memasang Kode Warna dalam Blog...

Menghilangkan Garis Bintik-Bintik Jejak Link

OB mau nanya nih, pernah ngga kamu waktu meng-klik sebuah link di firefox? Ya, jelas pernah dong. 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.

Pilih tab Tata Letak --> Edit HTML.

Tips : Ngga perlu backup template segala (mending ngga usah dimasukin tips-nya ha..ha..).

Cari kode ]]></b:skin> dan copas kode berikut diatasnya.

a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}

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.

Jangan lupa disimpan.

Update

Trik ini tidak direkomentasikan, silakan telusuri di Google tentang “link focus”.

Menambah Lokasi Link Post (Breadcrumbs Trail)

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 (Google Site).

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 Hoctro's. Demo penggunaannya dapat kamu lihat di atas tiap title post optimasi blog ini, setelah kamu mengklik judul posting (dalam full posting). Tertarik dengan review breadcrumbs trail di atas, mari kita bersama-sama memulai triknya.

Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tambahkan kode CSS berikut, di atas kode ]]></b:skin>

.breadcrumbs {

border-bottom:1px dotted #000;

margin:0.5em 0 0.5em;

padding:0 0 0.5em;}

Catatan:

Silahkan rubah margin (khususnya yang berwarna merah), jika kamu ingin memodifikasi jarak breadcrumbs agar sesuai dengan keinginan kamu.

Cari kode di bawah ini.

<b:includable id='main' var='top'>

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.

Kemudian copas kode dari Hoctro's berikut, diatas kode tersebut.

<b:includable id='breadcrumbs' var='post'>



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

<p class='breadcrumbs'>

<span class='post-labels'>

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

> <b><data:post.title/></b>

</b:if>

</b:if>

</span>

</p>

</b:if>



</b:includable>

Catatan :

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.

Selanjutnya cari kode berikut.

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

Kalau sudah ketemu, copas kembali kode berikut diatasnya

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

Catatan:

Untuk template yang berkarakter mirip dengan "Minima" (belum dimodifikasi), cara peletakkan kode <b:include data='post' name='breadcrumbs'/> adalah sebagai berikut.

Cari kode di bawah ini.

<b:includable id='post' var='post'>

<div class='post hentry uncustomized-post-template'>
Dan letakkan kode <b:include data='post' name='breadcrumbs'/> dibawahnya.

Pastikan postingan kamu sudah memiliki label atau kategori, agar breadcrums trail tampil optimal.

Jangan lupa disimpan

Selamat menampilkan link postingan kamu dalam breadcrumbs trail...

Modifikasi Widget Mybloglog

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 http://pandukom.blogspot.com. Pertanyaannya lebih kurang seperti ini :

Mas OB,bikin posting tentang gimana cara bikin recent visitor mybloglog yg ky punya mas OB donk...

Agar lebih terdefinisi tampilan default dari widget recent visitor dari MyBlogLog (MBL) lebih kurang seperti image di bawah ini.

Untuk memodifikasi widget tersebut seperti punya OB, kamu perlu melakukan langkah-langkah sebagai berikut :

Pada Tata Letak Blogger pilih Edit-HTML, masukan kode di bawah ini di atas kode ]]></b:skin>.

td.mbl_fo_hidden{display:none;}td.mbl_join_img{}td.mbl_join{}tr#tr0{display: none}th.mbl_h{display:none;}

Simpan dulu template kamu.

Kemudian pilih Elemen Halaman dan tambahkan gadget (posisinya tergantung template blog kamu).

Dalam jendela tambahkan gadget, klik tanda "+" pada HTML/JavaScript.

Copas kode berikut.

Beri judul untuk widget ini, ex: Recent Visitors, Pengunjung Blog, de-el-el.

Catatan :

Silakan ganti kode yang berwarna merah dengan MBL ID kamu.

Atur lebar (width) widget MBL sesuai dengan ukuran elemen kamu dan tampilan baris image/photo visitor yang diinginkan (rows) yang ditunjukkan dengan warna biru.

Ganti kode yang berwarna hijau dengan nama MBL yang kamu inginkan dan alamat community blog kamu di MBL.

Selanjutnya "Lihat Blog".

Sumber : Modifikasi Tampilan Mybloglog Recent Readers by o-om.com

Demo :

Sudahkah kamu bergabung dalam MBL-OB, Gabung dalam komunitas MBL-OB [ View | Join ]

Update: Sekarang widget ini sudah tidak berlaku lagi — selain memberatkan loading blog — pihak Yahoo juga telah menghentikan layanan mybloglog.

Mengenal Jenis Kabel Jaringan Twisted Pair

Kabel twisted pair adalah jenis kabel yang digunakan dalam jaringan yang mana didalam kabel tersebut terdapat pasangan kabel yang saling berlilitan sehingga biasa disebut dengan twisted pair. Bagi kita yang belum mengenal mana yang disebut dengan kabel twisted pair, bisa diperhatikan kabel telpon rumah, dilihat dari bentuk fisiknya hampir sama dengan kabel twisted pair untuk jaringan Local Area

Widget Update

Update: 30 Oktober 2012 — Widget Update Twitter menggunakan embedded script

Tweets by @Optimasi_Blog

Kejutan untuk Sobat OB

Seperti yang telah OB posting sebelumnya dalam title akhirnya OB kebagian pagerank, bahwa akan ada perubahan mendasar dalam blog "Optimasi Blog". Yah, boleh dianggap suatu kejutan... 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!!!

Artinya Optimasi Blog telah menjadi blog "DoFollow". Jadi yang kemaren-kemaren masih NoFollow? 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..

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, optimasi blog 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.

Usaha tanpa Do'a, tiada berkah berbalas

Do'a tanpa Usaha, berarti malas

Catatan penting:

Agar backlink teman-teman berjalan serasi dan selaras dengan blog DoFollow, ketika berkomentar pilih beri komentar sebagai "Name/URL".

Riset blog Dofollow ini mungkin dilakukan hanya untuk beberapa bulan, sebab OB ingin tahu seberapa besar pengaruh aliran DoFollow terhadap search engine, terutama Google.

Update: Sekarang blog “Optimasi Blog” tidak dofollow.

Pages

Update