Membuat Background Komentar Admin Berbeda dengan Komentar Pengunjung

Akhirnya nemu juga cara menandai komentar blog kita sendiri dengan background yang berbeda dengan komentar pengunjung blog kita yang ditulis oleh amatullah. Walau sebenarnya saya sendiri telah menulis bagaimana cara menandai komentar kita sendiri (Highligth author comment). Dan tulisan itu sudah bisa dipraktekan dan berhasil, tapi ada tempalte yang berbeda yang kode-kodenya berbeda letaknya, seperti komentar salah satunya seperti ini
sudah coba tapi beLum berhasiL nih, kode scrip pada tempLate saya agak berbeda, mungkin penempatannya kurang tetap.
terima kasih.

Kita sebagai pemilik blog tentu juga sebagai moderator dala diskusi tulisan yang kita terbitkan, sehingga penting kiranya jika harus eksklusiv, berbeda warna backgroung komentar kita dengan komentar pengunjung yang lainnya. Ini salah satu alternatif untuk membuat komentar admin berbeda dengan yang lain.

Cara Membuat Background Komentar Admin Berbeda dengan Komentar Pengunjung
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Copy paste kode di bawah sebelum kode ]]></b:skin>

.author-comments {
background: #333333;
border: 2px solid #666666;
padding: 5px;
}

Untuk yang berwarna merah adalah kode warna background komentar, kita dapat menggantinya sesuai dengan blog kita.

6. Cari kode seperti di bawah:

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + 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>
said...
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<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='"#comment-" + data:
comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Kode warna merah yang di tulis tebal (bold) adalah kode baru yang harus di sisipkan di antara kode di atas.

7. Simpan Template jika sudah selesai.
*)saat berkomentar kita harus dalam posisi login (sign in) di akun blogger kita.
selengkapnya>>

Membuat Search Engine di Multiply

Kali ini sedikit menyimpng, walau sebenarnya tidak jauh berbeda. Karena sekarang akan memberikan tutorial untuk para pengguna blog di multiply, yang banyak digunakan emak-emak untuk berjualan. Yang punya blog multiply, kali ini kita akan belajar bagaimana membuat dan menambahkan atau mesin pencari di blognya. Karena kodenya ini berbeda dengan search engine yang untuk blogger.

Dengan searh engine akan memudahkan pengunjung blog kita untuk menemukan kata kunci yang diinginkan, atau kalau di multiply mungkin barang yang dicari dan ingin dibeli.  Langsung saja cara membuat search engine di multiply. :)

1. Login ke Multiply lalu saat kita ada dalam situs (blog) kita, pilih Customize My Site yang ada di bawah photo profil.
2. Setelah klik Customize My Site klik Edit kotak bagian sidebar (di bawah tulisan photo profil.
3. Setelah muncul kotak, lalu copy paste kode ini di dalamnya.

<center><form name="form" method="get" action="http://www.google.com/search" class="searchinput"><input value=" " title="Type for search and Enter" size="17" framewidth="1" name="q" type="text" height="2"><input value="http://kurniasepta.multiply.com" name="sitesearch" checked="checked" type="hidden"><input value="search" name="sa" type="submit"></form></center>

5. Ganti http://kurniasepta.multiply.com dengan alamat (URL) blog multiplymu sendiri. Setelah itu klik Save. Selanjutnya klik Done (pada halaman paling atas)
selengkapnya>>

Membuat Page Peel Effect

Apa seh Page Peel Effect itu? Page Peel Effect adalah efek yang jika didekatkan mouse akan terlihat seperti halaman yang terbuka, atau juga seperti kertas yang tergulung di pojok. Dengan membuat Page Peel Effect yaitu dimana ketika kita mengarahkan mouse pada area Page Peel ini, maka akan terlihat halaman menggulung layaknya anda membuka selembar kertas dan menemukan halaman lain dilembar sebaliknya

Untuk membuat page peel efek ini ternyata tdak sulit, kita tinggal memasukan kode yang tidak rumit dan mengganti beberapa kode misalnya url gambar atau urla yang dituju. Yuk,,, langsung aja kita belajar bersama membuat Page Peel Effect :)


Cara Membuat Page Peel Efek
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Taruh (copy paste) kode berikut ini diatas kode <b:skin><![CDATA[

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

6. Kemudian letakan kode CSS dibawah ini diatas kode ]]></b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

7. Letakan kode ini dibawah tag <body>

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedkamu'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

8. Lihat Hasilnya (pratinjau) dan Simpan jika sudah selesai.
 Kita dapat mengganti URL FEED blog kita atu URL gambar, kita dapat memodifikasinyasesuai dengan keinginn dan kreatifitas kita. Selamat mencoba :)
selengkapnya>>

Menambahkan Google Translate dengan Icon Bendera

Pernah saya menulis cara menambahakan goole translate yang dulu saya guna adalah google translate yang berbentuk drop down menu. Yang tulisan dan cara menambahakannya dapa kalian baca di sini. Widget penerjemah blog kita ke berbagai bahasa ini memang lebih menarik lagi jika berbentuk gambar.

Google translate dengan icon gambar blog akan terlihat menarik, dengan memilih bahasa yang ingin diterjemahkan dengan mengklik bendera negara yang ingin diterjemahkan ke bahasanya. Sekarang akan lebih mempermudahkan pengunjung blog kita untuk memilih bahasa yang diinginkan. Langsung saja kita belajar bersama, dengan mengikuti langkah-langkah berikut.

Cara Menambahkan Google Translate dengan Icon Bendera
1. Login ke blogger.com
2. Pilih Tata Letak --> Tambah Gadget
3. Selanjutnya pilih HTML/JavaScript
4. Masukan (copy paste) hode di bawah ini


<center><a style="cursor: pointer;" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/inggris.gif" height="20" title="English" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/francis.gif" height="20" title="French" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/jerman.gif" height="20" title="German" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/spnyol.gif" height="20" title="Spain" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cit&amp;hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/italia.gif" height="20" title="Italian" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cnl&amp;hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/belanda.gif" height="20" title="Dutch" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/rusia.gif" height="20" title="Russian" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cpt&amp;hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/brazilia.gif" height="20" title="Portuguese" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/jepang.gif" height="20" title="Japanese" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cko&amp;hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/koreautara.gif" height="20" title="Korean" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/saudiarabia.gif" height="20" title="Arabic" align="absbottom"/></a> <a style="cursor: pointer;" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;" src="http://i708.photobucket.com/albums/ww86/andiskapati/cina.gif" height="20" title="Chinese Simplified" align="absbottom"/></a></center><br/>

5. Simpan kalau sudah selesai
selengkapnya>>