Membuat Kolom Komentar

Kadang kolom komentar kamu tidak muncul, tentu disebabkan oleh beberapa faktor yang turut mempengaruhinya. Seperti ; pernah malakukan modifikasi template, kemudian tidak sengaja kode di dalam komentar juga ikut terhapus; menggunakan kolom komentar lain (pihak ketiga), selain dari blogger; modifikasi kode komentar; dan sebagainya. Nah, bagaimana cara mengembalikan kolom komentar tersebut. Walaupun tidak semirip kolom komentar semula, tetapi masih menggunakan kolom komentar defaultnya blogger. Ayo kita keroyok rame-rame, trik blogger membuat kolom komentar plus beda tampilan komentar pemilik blog.

• Login ke account blogger kamu.


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

• Cari kode CSS berikut.

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

}

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.

• Ganti dengan kode CSS di bawah ini.

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

}



.owner-Body {

background:#808080;

margin-left:20px;

color:#000000;

}

.owner-Body p {

text-align:justify;

margin:0 0 .75em;

padding-left:10px;

background:#E3F6CE;

border-left:3px dotted #6E6E6E;

}

• Cari kembali kode HTML berikut.

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

<div class='comments' id='comments'>

<a name='comments'/>

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

<h4>

<b:if cond='data:post.numComments == 1'>

1 <data:commentLabel/>:

<b:else/>

<data:post.numComments/> <data:commentLabelPlural/>:

</b:if>

</h4>



<dl id='comments-block'>

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



<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

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

</b:if>

</dd>

</b:if>

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

</b:loop>

</dl>



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

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>



<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>



<data:post.commentRangeText/>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>

</span>

</b:if>



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

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>

<data:post.oldestLinkText/>

</a>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>

<data:post.olderLinkText/>

</a>



<data:post.commentRangeText/>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>

<data:post.newerLinkText/>

</a>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

<data:post.newestLinkText/>

</a>

</span>

</b:if>



<p class='comment-footer'>

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

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

<b:else/>

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

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

</b:if>

</b:if>



</p>

</b:if>

• Kemudian ganti dengan kode di bawah ini.

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

<div class='comments' id='comments'>

<a name='comments'/>

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

<h4>

<b:if cond='data:post.numComments == 1'>

1 <data:commentLabel/>:

<b:else/>

<data:post.numComments/> <data:commentLabelPlural/>:

</b:if>

</h4>



<dl id='comments-block'>

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



<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

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



<b:if cond='data:comment.author == data:post.author'>

<dd class='owner-Body'>

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

</dd>

<b:else/>



<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

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

</b:if>

</dd>

</b:if>

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

</b:loop>

</dl>



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

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>



<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>



<data:post.commentRangeText/>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>

</span>

</b:if>



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

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>

<data:post.oldestLinkText/>

</a>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>

<data:post.olderLinkText/>

</a>



<data:post.commentRangeText/>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>

<data:post.newerLinkText/>

</a>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

<data:post.newestLinkText/>

</a>

</span>

</b:if>



<p class='comment-footer'>

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

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

<b:else/>

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

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

</b:if>

</b:if>



</p>

</b:if>

• Jangan lupa disimpan.

Selamat membuat kolom komentar...

Membuat Kolom Komentar

Posted by rike No comments

Kadang kolom komentar kamu tidak muncul, tentu disebabkan oleh beberapa faktor yang turut mempengaruhinya. Seperti ; pernah malakukan modifikasi template, kemudian tidak sengaja kode di dalam komentar juga ikut terhapus; menggunakan kolom komentar lain (pihak ketiga), selain dari blogger; modifikasi kode komentar; dan sebagainya. Nah, bagaimana cara mengembalikan kolom komentar tersebut. Walaupun tidak semirip kolom komentar semula, tetapi masih menggunakan kolom komentar defaultnya blogger. Ayo kita keroyok rame-rame, trik blogger membuat kolom komentar plus beda tampilan komentar pemilik blog.

• Login ke account blogger kamu.


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

• Cari kode CSS berikut.

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

}

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.

• Ganti dengan kode CSS di bawah ini.

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

}



.owner-Body {

background:#808080;

margin-left:20px;

color:#000000;

}

.owner-Body p {

text-align:justify;

margin:0 0 .75em;

padding-left:10px;

background:#E3F6CE;

border-left:3px dotted #6E6E6E;

}

• Cari kembali kode HTML berikut.

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

<div class='comments' id='comments'>

<a name='comments'/>

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

<h4>

<b:if cond='data:post.numComments == 1'>

1 <data:commentLabel/>:

<b:else/>

<data:post.numComments/> <data:commentLabelPlural/>:

</b:if>

</h4>



<dl id='comments-block'>

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



<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

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

</b:if>

</dd>

</b:if>

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

</b:loop>

</dl>



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

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>



<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>



<data:post.commentRangeText/>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>

</span>

</b:if>



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

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>

<data:post.oldestLinkText/>

</a>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>

<data:post.olderLinkText/>

</a>



<data:post.commentRangeText/>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>

<data:post.newerLinkText/>

</a>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

<data:post.newestLinkText/>

</a>

</span>

</b:if>



<p class='comment-footer'>

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

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

<b:else/>

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

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

</b:if>

</b:if>



</p>

</b:if>

• Kemudian ganti dengan kode di bawah ini.

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

<div class='comments' id='comments'>

<a name='comments'/>

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

<h4>

<b:if cond='data:post.numComments == 1'>

1 <data:commentLabel/>:

<b:else/>

<data:post.numComments/> <data:commentLabelPlural/>:

</b:if>

</h4>



<dl id='comments-block'>

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



<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

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



<b:if cond='data:comment.author == data:post.author'>

<dd class='owner-Body'>

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

</dd>

<b:else/>



<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'><data:comment.body/></span>

<b:else/>

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

</b:if>

</dd>

</b:if>

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

</b:loop>

</dl>



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

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>



<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>



<data:post.commentRangeText/>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>

</span>

</b:if>



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

<span class='paging-control-container'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>

<data:post.oldestLinkText/>

</a>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>

<data:post.olderLinkText/>

</a>



<data:post.commentRangeText/>



<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>

<data:post.newerLinkText/>

</a>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

<data:post.newestLinkText/>

</a>

</span>

</b:if>



<p class='comment-footer'>

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

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

<b:else/>

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

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

</b:if>

</b:if>



</p>

</b:if>

• Jangan lupa disimpan.

Selamat membuat kolom komentar...

Search Engine Baru dari Microsoft

Entah ini merupakan kabar baik atau buruk, OB juga belum tahu. Sekarang Google dan Yahoo mendapat saingan dari sebuah perusahaan search engine baru, namanya Bing.com. Dan hanya dalam beberapa hari, Microsoft yang biasanya menggunakan search engine dari MSN (Live Search) telah bermigrasi ke Bing. So, ntinya semua pencarian dari MSN dan Live akan diarahkan ke Bing. Namun suka atau tidak, hasil pencarian dengan search engine yang satu ini tidak sama dengan search engine Microsoft yang lama. Berita migrasi ini dapat kamu baca dari press release resmi Microsoft di sini.

Apakah ini akan memberikan perubahan terhadap situs/blog kamu yang sebelumnya telah di submit di MSN (Live Search)? Kalau dari diri pribadi OB sih, kamu perlu melakukan submit ulang ke Bing. Hal ini dilakukan agar blog kamu terdeteksi lebih awal (tidak ketinggalan) oleh search engine Bing, sehingga trafik atau lalu lintas ke blog kamu tetap tercover oleh Microsoft melalui Bing.

Berikut cara mendaftar blog kamu ke Bing.com :

• Kunjung site Bing.com di sini


• Cara men-submit-nya hampir sama dengan waktu kamu melakukan submit di MSN. Silakan lihat gambar di bawah.

• Ketik karakter huruf/angka yang tampak dalam kotak verifikasi.


• Masukkan alamat blog kamu.


• Submit URL.

Selamat mendaftar di search engine Bing.com...

Search Engine Baru dari Microsoft

Posted by rike No comments

Entah ini merupakan kabar baik atau buruk, OB juga belum tahu. Sekarang Google dan Yahoo mendapat saingan dari sebuah perusahaan search engine baru, namanya Bing.com. Dan hanya dalam beberapa hari, Microsoft yang biasanya menggunakan search engine dari MSN (Live Search) telah bermigrasi ke Bing. So, ntinya semua pencarian dari MSN dan Live akan diarahkan ke Bing. Namun suka atau tidak, hasil pencarian dengan search engine yang satu ini tidak sama dengan search engine Microsoft yang lama. Berita migrasi ini dapat kamu baca dari press release resmi Microsoft di sini.

Apakah ini akan memberikan perubahan terhadap situs/blog kamu yang sebelumnya telah di submit di MSN (Live Search)? Kalau dari diri pribadi OB sih, kamu perlu melakukan submit ulang ke Bing. Hal ini dilakukan agar blog kamu terdeteksi lebih awal (tidak ketinggalan) oleh search engine Bing, sehingga trafik atau lalu lintas ke blog kamu tetap tercover oleh Microsoft melalui Bing.

Berikut cara mendaftar blog kamu ke Bing.com :

• Kunjung site Bing.com di sini


• Cara men-submit-nya hampir sama dengan waktu kamu melakukan submit di MSN. Silakan lihat gambar di bawah.

• Ketik karakter huruf/angka yang tampak dalam kotak verifikasi.


• Masukkan alamat blog kamu.


• Submit URL.

Selamat mendaftar di search engine Bing.com...

Penjelasan Perintah DOS COPY dalam Jaringan

Mohon maaf apabila pada postingan tentang perintah COPY menggunakan dos prompt kali lalu belum begitu jelas sehingga sengaja saya melengkapi postingan kali ini untuk memperjelas postingan perintah COPY pada kesempatan sebelumnya.

Pada postingan pertama itu sebenarnya adalah menjelaskan perintah copy pada komputer yang berada dalam jaringan dan komunikasi pada jaringan tersebut berjalan dengan

Penjelasan Perintah DOS COPY dalam Jaringan

Posted by rike No comments

Mohon maaf apabila pada postingan tentang perintah COPY menggunakan dos prompt kali lalu belum begitu jelas sehingga sengaja saya melengkapi postingan kali ini untuk memperjelas postingan perintah COPY pada kesempatan sebelumnya.

Pada postingan pertama itu sebenarnya adalah menjelaskan perintah copy pada komputer yang berada dalam jaringan dan komunikasi pada jaringan tersebut berjalan dengan

Merubah Tanggal Posting menjadi Icon Kalender

Setelah sekian lama istirahat memposting tentang tips seo atau trik blogger, ternyata banyak pertanyaan dan masukkan dari teman-teman OB melalui kolom komentar. Satu-persatu OB simak dan "duaarrr" tiba-tiba meletus balon hijau (becanda...). Salah satu pertanyaan yang sementara ini dapat OB posting adalah dari sobat Ad4m San. Memang sobat OB yang satu ini rada-rada ganjil. Kadang kalau tidak/belum dipenuhi keinginannya, bisa-bisa waktu ketemu di jalan abis ini kepala pada benjol semua. Dan kalau kamu punya waktu senggang kunjungi juga blognya Ad4m San di sini. Pertanyaannya seperti ini :

"Mas numpang tanya lagi hehehe klo mau buat tanggal disamping judul post kaya di http://www.faizoi.co.cc, gmn mas???"

Ayo kita belajar bersama-sama mengupas trik blogger merubah tanggal posting menjadi icon kalender.

Langkah I :

• Login ke account blogger kamu.


• Pilih Pengaturan --> Format


• Dalam halaman Format, ganti Format Header Tanggal menjadi seperti ini mm.dd.yyyy (bulan.hari.tahun), ex: 6.02.2009.


• Simpan Setelan

Langkah II:

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

• Cari kode CSS di bawah ini, letaknya antara <head> ... </head>.

h2.date-header {

...

}

atau

.date-header {

...

}

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.

• Kalau sudah ketemu, copas kode berikut tepat dibawah kode CSS di atas.

.dateblock {

background: url("http://i647.photobucket.com/albums/uu191/ariamsi/Icon/bluecalend3.gif") no-repeat;

margin: 0 10px 0 0;

font-weight: bold;

width: 33px;

height: 36px;

/*position: absolute;

top: 0;

left: 0;*/

float: left;

text-align: center;

}



.month {

font-size: 8px;

width: 34px;

margin: 0 auto;

padding-top: 2px;

text-transform: uppercase;

color: #fff;

}



.day {

color:#3366CC;

font-size: 12px;

width: 34px;

margin: 0 auto;

padding-top: 2px;

}

Catatan:

1. Silakan ganti kode yang berwarna merah dengan kode warna di sini.


2. Silakan pilih image background untuk icon kalender kamu dengan mengganti kode yang berwarna hijau dengan nama file di bawah image berikut.

greencalend3.gif	yellowcalend3.gif	orangecalend3.gif
pinkcalend3.gif	ungucalend3.gif	redcalend3.gif

• Kemudian lakukan copas kode di bawah ini dan letakkan di atas kode </head>.

<script type='text/javascript'>

//<![CDATA[

function date_replace(date) {

var da = date.split('.');

var day = da[1], mon = da[0], year = da[2];

var month =

['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep', 'Oct','Nov','Dec'];

document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");

}

//]]>

</script>

• Terakhir cari kode di bawah ini.

<data:post.dateHeader/>

• Dan ganti dengan kode berikut.

<div class='dateblock'>

<script>date_replace('<data:post.dateHeader/>');</script>

</div>

• Jangan lupa disimpan.

Catatan Penting :

Apabila menggunakan trik blogger ini, tanggal posting (date header) dalam template blog kamu harus berada di atas judul posting (post title) atau posting (post).

Jika 1 atau 2 baris paragraf postingan kamu ikut masuk kmenjorok ke dalam, maka perlu penambahan kode pada CSS .post-body. Kode tambahannya adalah padding-top:10px; (ubah nilainya sampai baris paragraf postingan kamu berada di bawah icon tanggal).

Sumber : Cara Mengganti Tanggal Posting dg Icon Calender by Bang Kendhin.





Selamat merubah tampilan tanggal posting...

Merubah Tanggal Posting menjadi Icon Kalender

Posted by rike No comments

Setelah sekian lama istirahat memposting tentang tips seo atau trik blogger, ternyata banyak pertanyaan dan masukkan dari teman-teman OB melalui kolom komentar. Satu-persatu OB simak dan "duaarrr" tiba-tiba meletus balon hijau (becanda...). Salah satu pertanyaan yang sementara ini dapat OB posting adalah dari sobat Ad4m San. Memang sobat OB yang satu ini rada-rada ganjil. Kadang kalau tidak/belum dipenuhi keinginannya, bisa-bisa waktu ketemu di jalan abis ini kepala pada benjol semua. Dan kalau kamu punya waktu senggang kunjungi juga blognya Ad4m San di sini. Pertanyaannya seperti ini :

"Mas numpang tanya lagi hehehe klo mau buat tanggal disamping judul post kaya di http://www.faizoi.co.cc, gmn mas???"

Ayo kita belajar bersama-sama mengupas trik blogger merubah tanggal posting menjadi icon kalender.

Langkah I :

• Login ke account blogger kamu.


• Pilih Pengaturan --> Format


• Dalam halaman Format, ganti Format Header Tanggal menjadi seperti ini mm.dd.yyyy (bulan.hari.tahun), ex: 6.02.2009.


• Simpan Setelan

Langkah II:

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

• Cari kode CSS di bawah ini, letaknya antara <head> ... </head>.

h2.date-header {

...

}

atau

.date-header {

...

}

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.

• Kalau sudah ketemu, copas kode berikut tepat dibawah kode CSS di atas.

.dateblock {

background: url("http://i647.photobucket.com/albums/uu191/ariamsi/Icon/bluecalend3.gif") no-repeat;

margin: 0 10px 0 0;

font-weight: bold;

width: 33px;

height: 36px;

/*position: absolute;

top: 0;

left: 0;*/

float: left;

text-align: center;

}



.month {

font-size: 8px;

width: 34px;

margin: 0 auto;

padding-top: 2px;

text-transform: uppercase;

color: #fff;

}



.day {

color:#3366CC;

font-size: 12px;

width: 34px;

margin: 0 auto;

padding-top: 2px;

}

Catatan:

1. Silakan ganti kode yang berwarna merah dengan kode warna di sini.


2. Silakan pilih image background untuk icon kalender kamu dengan mengganti kode yang berwarna hijau dengan nama file di bawah image berikut.

greencalend3.gif	yellowcalend3.gif	orangecalend3.gif
pinkcalend3.gif	ungucalend3.gif	redcalend3.gif

• Kemudian lakukan copas kode di bawah ini dan letakkan di atas kode </head>.

<script type='text/javascript'>

//<![CDATA[

function date_replace(date) {

var da = date.split('.');

var day = da[1], mon = da[0], year = da[2];

var month =

['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep', 'Oct','Nov','Dec'];

document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");

}

//]]>

</script>

• Terakhir cari kode di bawah ini.

<data:post.dateHeader/>

• Dan ganti dengan kode berikut.

<div class='dateblock'>

<script>date_replace('<data:post.dateHeader/>');</script>

</div>

• Jangan lupa disimpan.

Catatan Penting :

Apabila menggunakan trik blogger ini, tanggal posting (date header) dalam template blog kamu harus berada di atas judul posting (post title) atau posting (post).

Jika 1 atau 2 baris paragraf postingan kamu ikut masuk kmenjorok ke dalam, maka perlu penambahan kode pada CSS .post-body. Kode tambahannya adalah padding-top:10px; (ubah nilainya sampai baris paragraf postingan kamu berada di bawah icon tanggal).

Sumber : Cara Mengganti Tanggal Posting dg Icon Calender by Bang Kendhin.





Selamat merubah tampilan tanggal posting...

Mengubah Warna dan Huruf Blog

Warna template blog pada saat pembuatan kadang kurang sesuai dengan keinginan sang pemilik blog, sehingga para pemilik blog sering meng-utak-atik warna blog dan juga warna teks atau fonts yang sudah menjadi bawaan standard templatenya.

Warna-warna maupun bentuk font standard bawaan template tertentu ini masih bisa diubah dan bisa disesuaikan dengan keinginan pemilik blog, dan apa sajakah yang

Mengubah Warna dan Huruf Blog

Posted by rike No comments

Warna template blog pada saat pembuatan kadang kurang sesuai dengan keinginan sang pemilik blog, sehingga para pemilik blog sering meng-utak-atik warna blog dan juga warna teks atau fonts yang sudah menjadi bawaan standard templatenya.

Warna-warna maupun bentuk font standard bawaan template tertentu ini masih bisa diubah dan bisa disesuaikan dengan keinginan pemilik blog, dan apa sajakah yang

Akhirnya OB Kebagian Pagerank Juga

Rasanya 5 hari seperti setahun!!! Ya, betul sekali. Setelah 5 hari OB berkencan dengan pekerjaan di salah satu perusahaan swasta tanpa ada kesempatan untuk membuka-buka blog, akhirnya hari ini terbitlah posting perdana di bulan Juni 2009. Maklum di tempat kerja OB membutuhkan mobilitas tinggi untuk memperoleh penghasilan yang lumayan. Kali ini OB tidak mengulas tentang tips seo atau trik blogger, melainkan hanya sekedar mengucapkan "Assalamu'alaikum wr. wb." dan "hallo" kepada teman-teman semua. Dan yang terpenting, setelah membolak-balik optimasi blog yang pertama di bulan Juni ini, OB mendapat satu kabar yang mungkin menjadi salah satu idaman para blogger mania. Apaan tu...? he...he... kaya iklan bang Jaja Miharja aja. Kabar baiknya seperti ini nih.

Alhamdulillah, ternyata optimasi blog mendapat perhatian juga dari Google. Yap, blog OB kebagian "pagerank" juga walau cuma satu. Hampir-hampir OB melonjak kegirangan, kalau ngga ada cewek cantik nongkrong dekat OB ngenet (malu...u...u.. bro). Namun OB sadar bahwa semua tidak akan dicapai jika tidak didukung oleh teman-teman OB semua. Jadi nantikan posting optimasi blog selanjutnya dan yang terpenting ada sedikit kejutan untuk teman-teman para blogger. Apa dong kejutannya? Kalau dibilang sekarang bukan kejutan namanya.



Terima kasih OB haturkan pada teman-teman yang selalu setia memberikan komentar di blog ini, serta senantiasa mengunjungi blog OB walau isinya hanya berupa kata atau kalimat yang membuat kepala dikelilingi oleh bintang-bintang (puyeng...).





Selamat ngeblog dan jangan pernah menyerah, sebab masih ada langit di atas langit serta masih ada tanah di bawah tanah...

Akhirnya OB Kebagian Pagerank Juga

Posted by rike No comments

Rasanya 5 hari seperti setahun!!! Ya, betul sekali. Setelah 5 hari OB berkencan dengan pekerjaan di salah satu perusahaan swasta tanpa ada kesempatan untuk membuka-buka blog, akhirnya hari ini terbitlah posting perdana di bulan Juni 2009. Maklum di tempat kerja OB membutuhkan mobilitas tinggi untuk memperoleh penghasilan yang lumayan. Kali ini OB tidak mengulas tentang tips seo atau trik blogger, melainkan hanya sekedar mengucapkan "Assalamu'alaikum wr. wb." dan "hallo" kepada teman-teman semua. Dan yang terpenting, setelah membolak-balik optimasi blog yang pertama di bulan Juni ini, OB mendapat satu kabar yang mungkin menjadi salah satu idaman para blogger mania. Apaan tu...? he...he... kaya iklan bang Jaja Miharja aja. Kabar baiknya seperti ini nih.

Alhamdulillah, ternyata optimasi blog mendapat perhatian juga dari Google. Yap, blog OB kebagian "pagerank" juga walau cuma satu. Hampir-hampir OB melonjak kegirangan, kalau ngga ada cewek cantik nongkrong dekat OB ngenet (malu...u...u.. bro). Namun OB sadar bahwa semua tidak akan dicapai jika tidak didukung oleh teman-teman OB semua. Jadi nantikan posting optimasi blog selanjutnya dan yang terpenting ada sedikit kejutan untuk teman-teman para blogger. Apa dong kejutannya? Kalau dibilang sekarang bukan kejutan namanya.



Terima kasih OB haturkan pada teman-teman yang selalu setia memberikan komentar di blog ini, serta senantiasa mengunjungi blog OB walau isinya hanya berupa kata atau kalimat yang membuat kepala dikelilingi oleh bintang-bintang (puyeng...).





Selamat ngeblog dan jangan pernah menyerah, sebab masih ada langit di atas langit serta masih ada tanah di bawah tanah...

Menu Turunan dalam Horizontal Navigasi Kode CSS

Lagi-lagi menu horizontal, sampai-sampai bosan nih!!! Yah, mungkin karena sudah terlanjur cinta sama yang namanya menu horizontal dengan menggunakan kode CSS dibandingkan menu horizontal pakai javascript, jadi OB mau ngga mau menerbitkan posting ini (ha...ha...ha...). Sorry, yang merasa disentil berarti mendapat perhatian khusus dari OB. Memang kalau dipikir-pikir yang namanya trik blogger tidak akan pernah habis-habisnya, kecuali tidak ada lagi orang yang nge-blog di blogger. Dalam kesempatan ini OB akan sedikit menambahkah tentang "bagaimana membuat menu turunan dalam horizontal navigasi CSS, terutama menu turunan yang kedua?". Jangan kedipkan mata kamu dan mari kita mulai trik bloggernya.

Bagi yang belum kebagian baca posting menu horizontal menggunakan kode CSS, silakan baca di menu horizontal ini.

• Login dulu ke account blogger kamu.


• 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 berikut di bawah kode CSS menu horizontal yang ada.

#nav li ul a {

width: 100px;

}

#nav li ul ul {

position: absolute;

margin: -30% 0 0 95%;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left:-999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left:auto;

}

#nav li li li.sfhover ul {

left:auto;

}

#nav li:hover, #nav li.sfhover {

position:static;

}

• Cari kode HTML <div id='navleft'>.

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 tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a>

<ul>

<li><a href='URL sub 1'>teks kamu</a></li>

<li><a href='URL sub 2'>teks kamu</a></li>

<li><a href='URL sub 3'>teks kamu</a>



<ul>

<li><a href='URL sub 3.1'>teks kamu</a></li>

<li><a href='URL sub 3.2'>teks kamu</a></li>

</ul>

</li>



</ul>

</li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

</ul>

</div>

</div>

Catatan :

1. Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode berwarna hijau.


2. Perhatikan pula peletakkan kode untuk menambah menu turunan kedua, ditandai dengan kode yang berkedap-kedip.


3. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

• Jangan lupa disimpan.

Selamat menambah sub sub menu dalam sub menu horizontal navigasi kode CSS...

Menu Turunan dalam Horizontal Navigasi Kode CSS

Posted by rike No comments

Lagi-lagi menu horizontal, sampai-sampai bosan nih!!! Yah, mungkin karena sudah terlanjur cinta sama yang namanya menu horizontal dengan menggunakan kode CSS dibandingkan menu horizontal pakai javascript, jadi OB mau ngga mau menerbitkan posting ini (ha...ha...ha...). Sorry, yang merasa disentil berarti mendapat perhatian khusus dari OB. Memang kalau dipikir-pikir yang namanya trik blogger tidak akan pernah habis-habisnya, kecuali tidak ada lagi orang yang nge-blog di blogger. Dalam kesempatan ini OB akan sedikit menambahkah tentang "bagaimana membuat menu turunan dalam horizontal navigasi CSS, terutama menu turunan yang kedua?". Jangan kedipkan mata kamu dan mari kita mulai trik bloggernya.

Bagi yang belum kebagian baca posting menu horizontal menggunakan kode CSS, silakan baca di menu horizontal ini.

• Login dulu ke account blogger kamu.


• 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 berikut di bawah kode CSS menu horizontal yang ada.

#nav li ul a {

width: 100px;

}

#nav li ul ul {

position: absolute;

margin: -30% 0 0 95%;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left:-999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left:auto;

}

#nav li li li.sfhover ul {

left:auto;

}

#nav li:hover, #nav li.sfhover {

position:static;

}

• Cari kode HTML <div id='navleft'>.

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 tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a>

<ul>

<li><a href='URL sub 1'>teks kamu</a></li>

<li><a href='URL sub 2'>teks kamu</a></li>

<li><a href='URL sub 3'>teks kamu</a>



<ul>

<li><a href='URL sub 3.1'>teks kamu</a></li>

<li><a href='URL sub 3.2'>teks kamu</a></li>

</ul>

</li>



</ul>

</li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

<li><a href='http://Link_yang_dituju'>teks kamu</a></li>

</ul>

</div>

</div>

Catatan :

1. Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode berwarna hijau.


2. Perhatikan pula peletakkan kode untuk menambah menu turunan kedua, ditandai dengan kode yang berkedap-kedip.


3. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

• Jangan lupa disimpan.

Selamat menambah sub sub menu dalam sub menu horizontal navigasi kode CSS...

Varian Menu Horizontal menggunakan Javascript

Menu Horizontal yang bagaimana lagi nih OB? Kalau sebelumnya OB telah memposting trik blogger cara membuat menu horizontal dengan kode CSS, maka di posting ini kita akan membuat menu horizontal menggunakan javascript. Kamu silakan memilih, apakah memakai menu horizontal yang menggunakan kode CSS atau dirombak ke javascript. Dan kalau OB ditanya "mana yang lebih baik?" Semua berpulang kepada penilaian masing-masing individu, karena tiap menu horizontal memiliki kelebihan serta kekurangannya.

Supaya keingintahuan tak lekang dimakan waktu dan ruang, berikut :

• Login dulu ke account blogger kamu.


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

• Cari Kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

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.

/* navbar

================== */



#bg_nav

{

background: #ffffff;

width: 660px;

height:29px;

margin:0;

padding:0;

border:1px solid #333;

}

#navright

{

width: 200px;

float: right;

margin: 0px;

padding: 3px 5px 0 0;

}

#navright a img

{

border: none;

margin: 0px;

padding: 3px 5px 0 0;

}

#navleft

{

width: 440px;

float: left;

margin: 1px;

padding: 0px;

}

ul.MenuBarHorizontal

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

cursor: default;

width: auto;

}

ul.MenuBarActive

{

z-index: 1000;

}

ul.MenuBarHorizontal li

{

margin: 0;

padding: 0;

list-style-type: none;

font: bold 12px Arial, Helvetica, sans-serif;

position: relative;

text-align: left;

cursor: pointer;

width: 100px;

float: left;

text-transform: uppercase;

border-right: 1px solid #333;

}

ul.MenuBarHorizontal ul

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

z-index: 1020;

cursor: default;

width: 100px;

position: absolute;

left: -1000em;

}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

{

left: auto;

}

ul.MenuBarHorizontal ul li

{

width: 100px;

border: 1px solid #CCC;

}

ul.MenuBarHorizontal ul ul

{

position: absolute;

margin: -5% 0 0 95%;

}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

{

left: auto;

top: 0;

}





ul.MenuBarHorizontal ul

{

border: 1px solid #FFF;

}

ul.MenuBarHorizontal a

{

display: block;

cursor: pointer;

background-color: #FFF;

padding: 0.5em;

color: #000;

text-decoration: none;

}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

{

background-color: #c06000;

color: #FFF;

}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

{

background-color: #c06000;

color: #FFF;

}





ul.MenuBarHorizontal a.MenuBarItemSubmenu

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAXkaWbCpcrsWaYv2TyG076AbTDNmSBG6zTUyqbW9eFkEk3ZWXaBAh_30LMDUQOTYUkOkbC3u7klMqedICsXHoGJOJ5GFbEW95-96vrEzRIFfMXEPMqH-Q6_tU2cHbsrqnMLscfGec1G0/s800/SpryMenuBarDown.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDq7vn-kJ90oKp2kOwLJ1TwbMzWjDdDsrlsDyzV41rA47NqAohqj6iVSQYC8hM_GSNyjlo6-itgB9ZlDbHBv-RvaZXg61MIGRjn6YT2Uj-NM3eWyfUSXJhdpaSV2XVGBSpLrFWkgZz2JY/s800/SpryMenuBarRight.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMf-U9uc6rpkgL-3BDWxj6Zd4L1WEplB_rDRZdtAasx_5ZFvD2NvSceax6k-KssfKWn2tVDSx-YbZmEIo7B6Hqv5fQyy2S9dB4Bz8_px5u5p07JXtpWMpxxqo86xYwF7yTxflGNe-2BE/s800/SpryMenuBarDownHover.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiQUz-6g89cgyl76olE31MsiS49xTR4K06BLIAOVskSxus-AOVjQ7ANfrqZE6wJGGINEahfASzb8C24WBulWl27VM9bDVIL6YCUfYu2TNgajUS1FI-u28fkJW6_RozY9WvI6SITgHADc/s800/SpryMenuBarRightHover.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}





ul.MenuBarHorizontal iframe

{

position: absolute;

z-index: 1010;

filter:alpha(opacity:0.1);

}



@media screen, projection

{

ul.MenuBarHorizontal li.MenuBarItemIE

{

display: inline;

f\loat: left;

background: #FFF;

}

}

Catatan :

1. Sesuaikan terlebih dulu kode yang berwarna hijau kedap-kedip dengan lebar (width) template kamu.


2. Kemudian sesuaikan lebar (width) pada #navright dan #navleft agar menu horizontal kamu tidak berantakan.


3. Ganti kode yang berwarna merah dengan kode warna sesuai template blog kamu.


4. Kode warna biru merupakan lebar tiap menu dalam navigasi horizontal. Ex : jika lebar (width) #navleft 440px berarti bisa memuat 4 buah menu yang memiliki lebar 100px (warna biru).

• Kemudian cari lagi kode </head>, dan copas kode berikut di atasnya.

<script src='http://blogoptimization.googlecode.com/files/SpryMenuBar.js' type='text/javascript'/>

• Untuk ketiga kalinya cari kode di bawah ini.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1'

showaddelement='no'>

<b:widget id='Header1' locked='true' title='test

(Header)' type='Header'/>



... dan seterusnya ...



</b:section>

</div>

• Kalau sudah ketemu, copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='bg_nav'>

<div id='navleft'>

<ul class='MenuBarHorizontal' id='MenuBar1'>

<li><a href='http://alamat blog kamu'>Home</a></li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 2</a>

<ul>

<li><a href='Edit me'>Item 2.1</a></li>

<li><a href='Edit me'>Item 2.2</a></li>

<li><a href='Edit me'>Item 2.3</a></li>

</ul>

</li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 3</a>

<ul>

<li><a href='Edit me'>Item 3.1</a></li>

<li><a href='Edit me'>Item 3.2</a></li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 3.3</a>

<ul>

<li><a href='Edit me'>Item 3.3.1</a></li>

<li><a href='Edit me'>Item 3.3.2</a></li>

</ul>

</li>

</ul>

</li>

<li><a href='Edit me'>Item 4</a></li>

</ul>

<script type='text/javascript'>

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMf-U9uc6rpkgL-3BDWxj6Zd4L1WEplB_rDRZdtAasx_5ZFvD2NvSceax6k-KssfKWn2tVDSx-YbZmEIo7B6Hqv5fQyy2S9dB4Bz8_px5u5p07JXtpWMpxxqo86xYwF7yTxflGNe-2BE/s800/SpryMenuBarDownHover.gif", imgRight:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiQUz-6g89cgyl76olE31MsiS49xTR4K06BLIAOVskSxus-AOVjQ7ANfrqZE6wJGGINEahfASzb8C24WBulWl27VM9bDVIL6YCUfYu2TNgajUS1FI-u28fkJW6_RozY9WvI6SITgHADc/s800/SpryMenuBarRightHover.gif"});

</script>

</div>



<div id='navright'>

<form action='http://alamat blog kamu/search' id='searchform' method='get' name='searchform'>

<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Search'/> </form>

</div>



</div><!-- akhir bg_nav -->

Catatan :

1. Ganti kode yang berwarna merah dengan alamat yang akan kamu tuju.


2. Kode yang berwarna hijau merupakan kode tambahan jika kamu ingin membuat menu turunan pertama.


3. Sedangkan kode yang berwarna biru adalah struktur kode HTML apabila kamu ingin menambahkan menu turunan, baik pertama (warna biru saja) maupun kedua (warna biru kedap-kedip).


4. Ganti juga yang ada tulisan "Item plus angka-angka" dengan teks kamu sendiri.


5. Jika kamu telah menggunakan trik menu horizontal menggunakan kode CSS terdahulu, silakan ganti semua kode CSS, masukkan javascript, dan rombak kode HTML-nya.
   
   

• Jangan lupa disimpan.

Sumber : SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1, Copyright (c) 2006. Adobe Systems Incorporated.

Selamat membuat menu navigasi horizontal menggunakan javascript...

Varian Menu Horizontal menggunakan Javascript

Posted by rike No comments

Menu Horizontal yang bagaimana lagi nih OB? Kalau sebelumnya OB telah memposting trik blogger cara membuat menu horizontal dengan kode CSS, maka di posting ini kita akan membuat menu horizontal menggunakan javascript. Kamu silakan memilih, apakah memakai menu horizontal yang menggunakan kode CSS atau dirombak ke javascript. Dan kalau OB ditanya "mana yang lebih baik?" Semua berpulang kepada penilaian masing-masing individu, karena tiap menu horizontal memiliki kelebihan serta kekurangannya.

Supaya keingintahuan tak lekang dimakan waktu dan ruang, berikut :

• Login dulu ke account blogger kamu.


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

• Cari Kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

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.

/* navbar

================== */



#bg_nav

{

background: #ffffff;

width: 660px;

height:29px;

margin:0;

padding:0;

border:1px solid #333;

}

#navright

{

width: 200px;

float: right;

margin: 0px;

padding: 3px 5px 0 0;

}

#navright a img

{

border: none;

margin: 0px;

padding: 3px 5px 0 0;

}

#navleft

{

width: 440px;

float: left;

margin: 1px;

padding: 0px;

}

ul.MenuBarHorizontal

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

cursor: default;

width: auto;

}

ul.MenuBarActive

{

z-index: 1000;

}

ul.MenuBarHorizontal li

{

margin: 0;

padding: 0;

list-style-type: none;

font: bold 12px Arial, Helvetica, sans-serif;

position: relative;

text-align: left;

cursor: pointer;

width: 100px;

float: left;

text-transform: uppercase;

border-right: 1px solid #333;

}

ul.MenuBarHorizontal ul

{

margin: 0;

padding: 0;

list-style-type: none;

font-size: 100%;

z-index: 1020;

cursor: default;

width: 100px;

position: absolute;

left: -1000em;

}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

{

left: auto;

}

ul.MenuBarHorizontal ul li

{

width: 100px;

border: 1px solid #CCC;

}

ul.MenuBarHorizontal ul ul

{

position: absolute;

margin: -5% 0 0 95%;

}

ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

{

left: auto;

top: 0;

}





ul.MenuBarHorizontal ul

{

border: 1px solid #FFF;

}

ul.MenuBarHorizontal a

{

display: block;

cursor: pointer;

background-color: #FFF;

padding: 0.5em;

color: #000;

text-decoration: none;

}

ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

{

background-color: #c06000;

color: #FFF;

}

ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

{

background-color: #c06000;

color: #FFF;

}





ul.MenuBarHorizontal a.MenuBarItemSubmenu

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAXkaWbCpcrsWaYv2TyG076AbTDNmSBG6zTUyqbW9eFkEk3ZWXaBAh_30LMDUQOTYUkOkbC3u7klMqedICsXHoGJOJ5GFbEW95-96vrEzRIFfMXEPMqH-Q6_tU2cHbsrqnMLscfGec1G0/s800/SpryMenuBarDown.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenu

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDq7vn-kJ90oKp2kOwLJ1TwbMzWjDdDsrlsDyzV41rA47NqAohqj6iVSQYC8hM_GSNyjlo6-itgB9ZlDbHBv-RvaZXg61MIGRjn6YT2Uj-NM3eWyfUSXJhdpaSV2XVGBSpLrFWkgZz2JY/s800/SpryMenuBarRight.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMf-U9uc6rpkgL-3BDWxj6Zd4L1WEplB_rDRZdtAasx_5ZFvD2NvSceax6k-KssfKWn2tVDSx-YbZmEIo7B6Hqv5fQyy2S9dB4Bz8_px5u5p07JXtpWMpxxqo86xYwF7yTxflGNe-2BE/s800/SpryMenuBarDownHover.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}

ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover

{

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiQUz-6g89cgyl76olE31MsiS49xTR4K06BLIAOVskSxus-AOVjQ7ANfrqZE6wJGGINEahfASzb8C24WBulWl27VM9bDVIL6YCUfYu2TNgajUS1FI-u28fkJW6_RozY9WvI6SITgHADc/s800/SpryMenuBarRightHover.gif);

background-repeat: no-repeat;

background-position: 95% 50%;

}





ul.MenuBarHorizontal iframe

{

position: absolute;

z-index: 1010;

filter:alpha(opacity:0.1);

}



@media screen, projection

{

ul.MenuBarHorizontal li.MenuBarItemIE

{

display: inline;

f\loat: left;

background: #FFF;

}

}

Catatan :

1. Sesuaikan terlebih dulu kode yang berwarna hijau kedap-kedip dengan lebar (width) template kamu.


2. Kemudian sesuaikan lebar (width) pada #navright dan #navleft agar menu horizontal kamu tidak berantakan.


3. Ganti kode yang berwarna merah dengan kode warna sesuai template blog kamu.


4. Kode warna biru merupakan lebar tiap menu dalam navigasi horizontal. Ex : jika lebar (width) #navleft 440px berarti bisa memuat 4 buah menu yang memiliki lebar 100px (warna biru).

• Kemudian cari lagi kode </head>, dan copas kode berikut di atasnya.

<script src='http://blogoptimization.googlecode.com/files/SpryMenuBar.js' type='text/javascript'/>

• Untuk ketiga kalinya cari kode di bawah ini.

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1'

showaddelement='no'>

<b:widget id='Header1' locked='true' title='test

(Header)' type='Header'/>



... dan seterusnya ...



</b:section>

</div>

• Kalau sudah ketemu, copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='bg_nav'>

<div id='navleft'>

<ul class='MenuBarHorizontal' id='MenuBar1'>

<li><a href='http://alamat blog kamu'>Home</a></li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 2</a>

<ul>

<li><a href='Edit me'>Item 2.1</a></li>

<li><a href='Edit me'>Item 2.2</a></li>

<li><a href='Edit me'>Item 2.3</a></li>

</ul>

</li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 3</a>

<ul>

<li><a href='Edit me'>Item 3.1</a></li>

<li><a href='Edit me'>Item 3.2</a></li>

<li><a class='MenuBarItemSubmenu' href='Edit me'>Item 3.3</a>

<ul>

<li><a href='Edit me'>Item 3.3.1</a></li>

<li><a href='Edit me'>Item 3.3.2</a></li>

</ul>

</li>

</ul>

</li>

<li><a href='Edit me'>Item 4</a></li>

</ul>

<script type='text/javascript'>

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPMf-U9uc6rpkgL-3BDWxj6Zd4L1WEplB_rDRZdtAasx_5ZFvD2NvSceax6k-KssfKWn2tVDSx-YbZmEIo7B6Hqv5fQyy2S9dB4Bz8_px5u5p07JXtpWMpxxqo86xYwF7yTxflGNe-2BE/s800/SpryMenuBarDownHover.gif", imgRight:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiQUz-6g89cgyl76olE31MsiS49xTR4K06BLIAOVskSxus-AOVjQ7ANfrqZE6wJGGINEahfASzb8C24WBulWl27VM9bDVIL6YCUfYu2TNgajUS1FI-u28fkJW6_RozY9WvI6SITgHADc/s800/SpryMenuBarRightHover.gif"});

</script>

</div>



<div id='navright'>

<form action='http://alamat blog kamu/search' id='searchform' method='get' name='searchform'>

<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Search'/> </form>

</div>



</div><!-- akhir bg_nav -->

Catatan :

1. Ganti kode yang berwarna merah dengan alamat yang akan kamu tuju.


2. Kode yang berwarna hijau merupakan kode tambahan jika kamu ingin membuat menu turunan pertama.


3. Sedangkan kode yang berwarna biru adalah struktur kode HTML apabila kamu ingin menambahkan menu turunan, baik pertama (warna biru saja) maupun kedua (warna biru kedap-kedip).


4. Ganti juga yang ada tulisan "Item plus angka-angka" dengan teks kamu sendiri.


5. Jika kamu telah menggunakan trik menu horizontal menggunakan kode CSS terdahulu, silakan ganti semua kode CSS, masukkan javascript, dan rombak kode HTML-nya.
   
   

• Jangan lupa disimpan.

Sumber : SpryMenuBar.js - version 0.13 - Spry Pre-Release 1.6.1, Copyright (c) 2006. Adobe Systems Incorporated.

Selamat membuat menu navigasi horizontal menggunakan javascript...

Menambah Smiley Galery dalam Shoutmix

Kamu pasti tahu shoutmix. Itu..tu.. kotak chatting yang biasa nangkring di blog yang berguna untuk menyampaikan pesan, baik dari pengunjung maupun dari pemilik blog sendiri. Nah, dalam shoutmix terdapat smiley yang akan tampil jika kamu meng-klik tanda "+" atau mengetik . Memang shoutmix atau shout box lain sudah menyertakan icon smiley secara default, namun tidak menutup kemungkinan bagi user shoutmix untuk menambah smiley lain. Trik blogger kali ini kita akan membicarakan tentang menambah smiley di shoutmix.

Agar tak padam smiley dalam hati shoutmix kamu, langsung kita review trik menambah icon smiley dalam shoutmix :

• Kunjungi terlebih dulu website Get Smiley Face atau website lain yang menyediakan fasilitas smiley.


• Pilih link smiley dan kamu bisa melihat image dari link smiley tersebut. Kalau OB pilih yang smiley aja, seperti yang ditunjuk panah kuning dalam gambar berikut :

• Pada jendela yang baru kamu pilih akan muncul pilihan smiley dan "Click on the smiley to see the code" di dropdown ke [image]

• Kemudian pilih smiley yang kamu inginkan dan secara otomatis linknya akan muncul di "Click on the smiley to see the code". Di bawah ini merupakan contoh link-link image smiley yang OB masukkan dalam shoutmix :

http://www.getsmileyface.com/new/smileys/20.gif

http://www.getsmileyface.com/new/smileys/18.gif

http://www.getsmileyface.com/new/smileys/15.gif

http://www.getsmileyface.com/new/smileys/5.gif

http://www.getsmileyface.com/new/smileys/11.gif

http://www.getsmileyface.com/new/smileys/12.gif

http://www.getsmileyface.com/new/smileys/19.gif

http://www.getsmileyface.com/new/smileys/7.gif

http://www.getsmileyface.com/new/smileys/33.gif

http://www.getsmileyface.com/new/smileys/9.gif

• Copy-paste (Copas) link smiley tersebut dalam notepad, ingat pilih 10 smiley aja.


• Selanjutnya Login ke shoutmix, Jika kamu belum punya akun silakan sign-up dulu.


• Klik tab "Setting". Kamu akan melihat empat kotak pilihan yang terdiri dari Quick Start, General, Display, dan Security.


• Karena pokok bahasan kita adalah smiley, maka kamu harus memilih kotak Display --> Smiley


• Akan muncul icon smiley default dan perhatikan dibawahnya pada "Custom Smiley", seperti yang ditunjukkan oleh gambar berikut :

• Copas satu persatu link smiley dalam notepad ke dalam box "Smiley image URL", jangan lupa klik "Add" (sampai 10 kali).


• Setelah ke 10 smiley sudah di "Add", tambahkan kode ke dalam box code (kodenya terserah kamu, asal ngga sama)


• Save settings.


• Klik back to settings (pojok kanan atas) --> login di kotak shoutmix. Hasilnya akan langsung diaplikasikan ke dalam kotak shoutmix dalam blog kamu.

Catatan :

Bagi yang baru akan menambahkan shoutmix ke dalam blog, cukup dengan meng-klik "Get codes" dalam kotak "Quick Start". Kemudian Copas kodenya ke salah satu elemen dalam blog kamu.

Selamat menambah smiley dalam shoutmix...

Menambah Smiley Galery dalam Shoutmix

Posted by rike No comments

Kamu pasti tahu shoutmix. Itu..tu.. kotak chatting yang biasa nangkring di blog yang berguna untuk menyampaikan pesan, baik dari pengunjung maupun dari pemilik blog sendiri. Nah, dalam shoutmix terdapat smiley yang akan tampil jika kamu meng-klik tanda "+" atau mengetik . Memang shoutmix atau shout box lain sudah menyertakan icon smiley secara default, namun tidak menutup kemungkinan bagi user shoutmix untuk menambah smiley lain. Trik blogger kali ini kita akan membicarakan tentang menambah smiley di shoutmix.

Agar tak padam smiley dalam hati shoutmix kamu, langsung kita review trik menambah icon smiley dalam shoutmix :

• Kunjungi terlebih dulu website Get Smiley Face atau website lain yang menyediakan fasilitas smiley.


• Pilih link smiley dan kamu bisa melihat image dari link smiley tersebut. Kalau OB pilih yang smiley aja, seperti yang ditunjuk panah kuning dalam gambar berikut :

• Pada jendela yang baru kamu pilih akan muncul pilihan smiley dan "Click on the smiley to see the code" di dropdown ke [image]

• Kemudian pilih smiley yang kamu inginkan dan secara otomatis linknya akan muncul di "Click on the smiley to see the code". Di bawah ini merupakan contoh link-link image smiley yang OB masukkan dalam shoutmix :

http://www.getsmileyface.com/new/smileys/20.gif

http://www.getsmileyface.com/new/smileys/18.gif

http://www.getsmileyface.com/new/smileys/15.gif

http://www.getsmileyface.com/new/smileys/5.gif

http://www.getsmileyface.com/new/smileys/11.gif

http://www.getsmileyface.com/new/smileys/12.gif

http://www.getsmileyface.com/new/smileys/19.gif

http://www.getsmileyface.com/new/smileys/7.gif

http://www.getsmileyface.com/new/smileys/33.gif

http://www.getsmileyface.com/new/smileys/9.gif

• Copy-paste (Copas) link smiley tersebut dalam notepad, ingat pilih 10 smiley aja.


• Selanjutnya Login ke shoutmix, Jika kamu belum punya akun silakan sign-up dulu.


• Klik tab "Setting". Kamu akan melihat empat kotak pilihan yang terdiri dari Quick Start, General, Display, dan Security.


• Karena pokok bahasan kita adalah smiley, maka kamu harus memilih kotak Display --> Smiley


• Akan muncul icon smiley default dan perhatikan dibawahnya pada "Custom Smiley", seperti yang ditunjukkan oleh gambar berikut :

• Copas satu persatu link smiley dalam notepad ke dalam box "Smiley image URL", jangan lupa klik "Add" (sampai 10 kali).


• Setelah ke 10 smiley sudah di "Add", tambahkan kode ke dalam box code (kodenya terserah kamu, asal ngga sama)


• Save settings.


• Klik back to settings (pojok kanan atas) --> login di kotak shoutmix. Hasilnya akan langsung diaplikasikan ke dalam kotak shoutmix dalam blog kamu.

Catatan :

Bagi yang baru akan menambahkan shoutmix ke dalam blog, cukup dengan meng-klik "Get codes" dalam kotak "Quick Start". Kemudian Copas kodenya ke salah satu elemen dalam blog kamu.

Selamat menambah smiley dalam shoutmix...

Pasang Script Kursor Ular-Ularan

Sebenarnya banyak sekali rupa serta bentuk animasi kursor yang mungkin kamu dapatkan, baik melalui website penyedia layanan javascript atau saat kamu blog walking. Ceritanya pas jalan-jalan ke Optimasi Blog dan menggerakkan kursor, tiba-tiba muncul serangkaian kata atau kalimat yang selalu mengikuti kursor tersebut. Bentuknya seperti ular-ularan meliuk dan melingkar, tapi anehnya tidak mematuk. Ia cuma mengikuti saja atau istilah kerennya "follow". Eh.. ngomong-ngomong follow, kamu sudah ikut mem-follow OB apa belum?

Kembali ke trik blogger kursor ular-ularan...

Nah, kamu pasti penasaran tentang cara membuatnya. Ngga, tuh!!! Ha.. ha.. gitu aja manyun. OK, ini dia triknya.

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

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.

• Cari kode </head>

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.

• Kalau sudah ketemu, copas kode berikut diatasnya.

<style type='text/css'>

/* Circle Text Styles */

#outerCircleText {

/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #000;

/* End Optional */



/* Start Required - Do Not Edit */

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

/* End Required */

/* End Circle Text Styles */

</style>

<script type='text/javascript'>

//<![CDATA[

/* Circling text trail- Tim Tilton

Website: http://www.tempermedia.com/

Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts

Modified Here for more flexibility and modern browser support

Modifications as first seen in http://www.dynamicdrive.com/forums/

username:jscheuer1 - This notice must remain for legal use

*/



;(function(){



// Your message here (QUOTED STRING)

var msg = "Masukkan teks kamu disini";



/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */



// Set font's style size for calculating dimensions

// Set to number of desired pixels font size (decimal and negative numbers not allowed)

var size = 24;



// Set both to 1 for plain circle, set one of them to 2 for oval

// Other numbers & decimals can have interesting effects, keep these low (0 to 3)

var circleY = 0.75; var circleX = 2;



// The larger this divisor, the smaller the spaces between letters

// (decimals allowed, not negative numbers)

var letter_spacing = 5;



// The larger this multiplier, the bigger the circle/oval

// (decimals allowed, not negative numbers, some rounding is applied)

var diameter = 10;



// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)

var rotation = 0.4;



// This is not the rotation speed, its the reaction speed, keep low!

// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)

var speed = 0.3;



////////////////////// Stop Editing //////////////////////



if (!window.addEventListener && !window.attachEvent || !document.createElement) return;



msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :



document.body,



mouse = function(e){

e = e || window.event;

ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},



makecircle = function(){ // rotation/positioning

if(init.nopy){

o.style.top = (b || document.body).scrollTop + 'px';

o.style.left = (b || document.body).scrollLeft + 'px';

};

currStep -= rotation;

for (var d, i = n; i > -1; --i){ // makes the circle

d = document.getElementById('iemsg' + i).style;

d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +



'px';

d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

};

},



drag = function(){ // makes the resistance

y[0] = Y[0] += (ymouse - Y[0]) * speed;

x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

for (var i = n; i > 0; --i){

y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

x[i] = X[i] += (x[i-1] - X[i]) * speed;

};

makecircle();

},



init = function(){ // appends message divs, & sets initial values for positioning arrays

if(!isNaN(window.pageYOffset)){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

} else init.nopy = true;

for (var d, i = n; i > -1; --i){

d = document.createElement('div'); d.id = 'iemsg' + i;

d.style.height = d.style.width = a + 'px';

d.appendChild(document.createTextNode(msg[i]));

oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

};

o.appendChild(oi); document.body.appendChild(o);

setInterval(drag, 25);

},



ascroll = function(){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

window.removeEventListener('scroll', ascroll, false);

};



o.id = 'outerCircleText'; o.style.fontSize = size + 'px';



if (window.addEventListener){

window.addEventListener('load', init, false);

document.addEventListener('mouseover', mouse, false);

document.addEventListener('mousemove', mouse, false);

if (/Apple/.test(navigator.vendor))

window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

window.attachEvent('onload', init);

document.attachEvent('onmousemove', mouse);

};



})();

//]]>

</script>

Catatan :

1. Ganti kode yang berwarna merah berturut-turut dengan gaya teks, tebal tidaknya teks (bold atau normal), jenis font (arial, times new roman, verdana, georgia, de-el-el), dan warna teks


2. Ganti tulisan yang berwarna merah dan berkedap-kedip dengan teks yang akan kamu tampilkan (mengikuti kursor).


3. Ganti kode yang berwarna hijau, apabila kamu ingin merubah ukuran teks.

• Jangan lupa disimpan.

Selamat main ular-ularan...

Pasang Script Kursor Ular-Ularan

Posted by rike No comments

Sebenarnya banyak sekali rupa serta bentuk animasi kursor yang mungkin kamu dapatkan, baik melalui website penyedia layanan javascript atau saat kamu blog walking. Ceritanya pas jalan-jalan ke Optimasi Blog dan menggerakkan kursor, tiba-tiba muncul serangkaian kata atau kalimat yang selalu mengikuti kursor tersebut. Bentuknya seperti ular-ularan meliuk dan melingkar, tapi anehnya tidak mematuk. Ia cuma mengikuti saja atau istilah kerennya "follow". Eh.. ngomong-ngomong follow, kamu sudah ikut mem-follow OB apa belum?

Kembali ke trik blogger kursor ular-ularan...

Nah, kamu pasti penasaran tentang cara membuatnya. Ngga, tuh!!! Ha.. ha.. gitu aja manyun. OK, ini dia triknya.

• Login ke account blogger kamu.


• Pilih Tata Letak --> Edit HTML.

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.

• Cari kode </head>

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.

• Kalau sudah ketemu, copas kode berikut diatasnya.

<style type='text/css'>

/* Circle Text Styles */

#outerCircleText {

/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */

font-style: italic;

font-weight: bold;

font-family: 'comic sans ms', verdana, arial;

color: #000;

/* End Optional */



/* Start Required - Do Not Edit */

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

/* End Required */

/* End Circle Text Styles */

</style>

<script type='text/javascript'>

//<![CDATA[

/* Circling text trail- Tim Tilton

Website: http://www.tempermedia.com/

Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts

Modified Here for more flexibility and modern browser support

Modifications as first seen in http://www.dynamicdrive.com/forums/

username:jscheuer1 - This notice must remain for legal use

*/



;(function(){



// Your message here (QUOTED STRING)

var msg = "Masukkan teks kamu disini";



/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */



// Set font's style size for calculating dimensions

// Set to number of desired pixels font size (decimal and negative numbers not allowed)

var size = 24;



// Set both to 1 for plain circle, set one of them to 2 for oval

// Other numbers & decimals can have interesting effects, keep these low (0 to 3)

var circleY = 0.75; var circleX = 2;



// The larger this divisor, the smaller the spaces between letters

// (decimals allowed, not negative numbers)

var letter_spacing = 5;



// The larger this multiplier, the bigger the circle/oval

// (decimals allowed, not negative numbers, some rounding is applied)

var diameter = 10;



// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)

var rotation = 0.4;



// This is not the rotation speed, its the reaction speed, keep low!

// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)

var speed = 0.3;



////////////////////// Stop Editing //////////////////////



if (!window.addEventListener && !window.attachEvent || !document.createElement) return;



msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :



document.body,



mouse = function(e){

e = e || window.event;

ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},



makecircle = function(){ // rotation/positioning

if(init.nopy){

o.style.top = (b || document.body).scrollTop + 'px';

o.style.left = (b || document.body).scrollLeft + 'px';

};

currStep -= rotation;

for (var d, i = n; i > -1; --i){ // makes the circle

d = document.getElementById('iemsg' + i).style;

d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +



'px';

d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

};

},



drag = function(){ // makes the resistance

y[0] = Y[0] += (ymouse - Y[0]) * speed;

x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

for (var i = n; i > 0; --i){

y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

x[i] = X[i] += (x[i-1] - X[i]) * speed;

};

makecircle();

},



init = function(){ // appends message divs, & sets initial values for positioning arrays

if(!isNaN(window.pageYOffset)){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

} else init.nopy = true;

for (var d, i = n; i > -1; --i){

d = document.createElement('div'); d.id = 'iemsg' + i;

d.style.height = d.style.width = a + 'px';

d.appendChild(document.createTextNode(msg[i]));

oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

};

o.appendChild(oi); document.body.appendChild(o);

setInterval(drag, 25);

},



ascroll = function(){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

window.removeEventListener('scroll', ascroll, false);

};



o.id = 'outerCircleText'; o.style.fontSize = size + 'px';



if (window.addEventListener){

window.addEventListener('load', init, false);

document.addEventListener('mouseover', mouse, false);

document.addEventListener('mousemove', mouse, false);

if (/Apple/.test(navigator.vendor))

window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

window.attachEvent('onload', init);

document.attachEvent('onmousemove', mouse);

};



})();

//]]>

</script>

Catatan :

1. Ganti kode yang berwarna merah berturut-turut dengan gaya teks, tebal tidaknya teks (bold atau normal), jenis font (arial, times new roman, verdana, georgia, de-el-el), dan warna teks


2. Ganti tulisan yang berwarna merah dan berkedap-kedip dengan teks yang akan kamu tampilkan (mengikuti kursor).


3. Ganti kode yang berwarna hijau, apabila kamu ingin merubah ukuran teks.

• Jangan lupa disimpan.

Selamat main ular-ularan...