Kamis, 01 September 2011

Cara membuat komentar admin berbeda dengan komentar pengunjung

Selamat bertemu kembali sobat. Saya berharap sobat semua selalu dalam keadaan sehat dan happy-happy adjah. Langsung saja ya... pada pertemuan kali ini saya coba kembali berbagi dengan sobat semua dimana kita akan mencoba membuat tampilan berbeda antara komentar admin dan komentar pengunjung yang memberikan komentarnya pada blog yang dikunjunginya.

Mengapa kita membuat komentar tersebut menjadi berbeda? hmm... tentu saja supaya kita mengetahui mana komentar admin dan mana komentar pengunjung, terutama untuk komentar yang jumlahnya banyak. Dengan adanya perbedaan tersebut mempermudah kita untuk melihat apakah ada jawaban/tanggapan dari admin selaku pemilik blog atau tidak. Cara membuatnya sebenarnya sederhana saja kita hanya memanipulasi sedikit kode css dan membuat duplikatnya yang kita beri sentuhan modifikasi sedikit sehingga nantinya terlihat perbedaan antara komentar admin dan komentar pengunjung.

Langkah-langkahnya sebagai berikut:

1. Login ke blogger dengan email dan password sobat
2. Klik rancangan, Edit HTML
3. Cari kode .comment-body atau lengkapnya seperti contoh di bawah ini:
.comment-body {
   margin:0 0 1.25em;
   padding-top:0;
   padding-$endSide:0;
   padding-bottom:0;
   padding-$startSide:20px;
}
4. Copy kode tersebut dan pastekan di bawahnya lalu tambahkan kode -user pada .comment-body { atau seperti ini .comment-body-user {
5. Pada kode kedua .comment-body-user { tambahkan kode css yang akan membedakan komentar admin dengan komentar pengunjung sehingga kodenya menjadi seperti ini.
.comment-body-user {
    margin:0 0 1.25em;
    padding-top:0;
    padding-$endSide:0;
    padding-bottom:0;
    padding-$startSide:20px;
    font-weight:bold;
    background:#8B0000;
    border-left:#E9967A solid 1px;
    border-top:#E9967A solid 2px;
    border-bottom:#E9967A solid 2px;
    border-right:#E9967A solid 1px;
    -moz-border-radius:8px;
}
6. Selanjutnya silahkan cari kode <dd class='comment-body'>
7. Pasang kode berikut ini diatasnya
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-user'>
<p><data:comment.body/></p>
</dd>
<b:else/>
8. Jika sudah silahkan cari lagi kode <dd class='comment-footer'> dan tambahkan kode </b:if> diatas kode tadi.
9. Simpan template dan silahkan lihat hasilnya dengan klik postingan yang memiliki komentar dari pengunjung dan komentar admin. Di situ bisa di lihat perbedaan seperti yang telah kita buat seperti langkah-langkah di atas.

Catatan: kode css berwarna merah adalah kode yang ditambahkan supaya terlihat perbedaan komentar admin dan pengunjung, contohnya seperti bisa anda lihat di blog ini. 

Sekian dulu sobat pertemuan kita kali ini, semoga apa yang saya sampaikan berguna dan bermanfaat, salam.
Diposting oleh baby new blog di 18.14 0 komentar
Label:

(Memasang Banner Di Blog Sendiri dan Menyediakan Tag HTML untuk Tukar Link)

Postingan ini atas permintaan http://baby-new.blogspot.com/ yang ingin membuat banner blognya. Karena saya tahu sedikit tentang pembuatan banner blog ini maka saya coba membantu semampu yang saya bisa. Mudah-mudahan bermanfaat untuk para blogger newbie yang ingin membuat banner blog.
Jika kita perhatikan hasil jadi desain banner saya yang sederhana meski kecil tapi cukup bisa menarik perhatian (benarkah?) ^_^ mungkin karena tulisan pada banner kecil tersebut berkedip-kedip. Susah membuatnya? Tidak juga, malahan mudah kok! Syaratnya Anda bisa mengoperasikan dasar-dasar penggunaan Adobe PhotoShop CS2 dan Image Ready. Silahkan ikuti tutorialnya di bawah ini.

Ukuran banner pada tutorial ini disesuaikan dengan postingan saya terdahulu tentang Penyeragaman ukuran Banner Blogger. Jika Anda ingin banner yang lebih besar silahkan saja setelah Anda mempelajari tutorial ini.
Oke, kita langsung saja,
Bagian Pertama (Membuat Bingkai dan Teks):
  1. Buka Adobe Photoshop CS2
  2. Buka file baru dengan mengklik menu File>New. Pada kotak dialog New
a. Name: Beri nama file dengan nama Anda.
b. Width: 81 pixels
c. Height: 16 pixels
d. Resolution: 72 pixels/inch
e. Color mode: RGB 8 bit
f. Background Content: Transparent.(*)
g. Color Profile: Working RGB: sRGB IEC61966-2.1
h. Pixel Aspect Ratio: Square
i. Klik OK
  1. Perbesar ukuran window kanvas dengan menarik ujung bagian bawah.
  2. Perbesar kanvas dalam dengan menggunakan Zoom Tool (Z) (+).
  3. Buatlah background untuk banner Anda dengan menggunakan Rectangle Tool (U). Sesuaikan dengan ukuran kanvas. Jika sudah ubahlah menjadi Shape dengan mengklik menu Layer >Raterized >Shape.Buatlah bidang seleksi berbentuk Marquee (kotak) dengan menggunakan Rectangular Marquee Tool (M) di atas background lalu klik menu Edit >Clear, sehingga background Anda berbentuk list kotak (bingkai) seperti pada banner saya (contoh).
  4. Buatlah teks nama Blog Anda (contoh, Hakimtea) di tengah-tengah bingkai menggunakan Horizontal Type Tool (T). Sesuaikan ukuran teks dengan bingkai menggunakan Move Tool.
  5. Tambahkan efek Bavel and Embos dengan mengklik menu Layer >LayerStyle >Bevel and Embos (tambahkankan pengaturan lain jika Anda mau seperti drop shadow, inner shadow, outer glow, dll) klik OK jika sudah.
  6. Save dahulu pekerjaan Anda bagian pertama ini.
Bagian Kedua (Membuat Animasi Teks Banner “berkedip-kedip”)
  1. Masih di Adobe Photoshop CS2 dengan banner Anda yang sudah setengah jadi pada bagian pertama di atas.
  2. Berpindahlah sekarang ke dalam menu editing Adobe ImageReady CS2 dengan mengklik menu File >Edit in ImageReady (Ctrl+Shift+M). Tunggu sebentar, maka lembar kerja Adobe ImageReady CS2 akan terbuka.
  3. Perhatikan, untuk membuat animasi “teks berkedip” Windows Animasi harus tersedia, jika belum ada, Anda bisa memunculkannya dengan mengklik menu Window>Animation.
  4. Untuk membuat animasi, pertama-tama kita akan bekerja dengan menu Layers. Klik ikon mata pada layer teks nama Anda. Sehingga ikon mata tidak terlihat dan otomatis teks nama Anda pun tidak terlihat. Sedangkan untuk bingkai biarkan saja terlihat.
  5. Pindahlah ke jendela Animation, lalu klik ikon Duplicate Current Frame. Anda sekarang mempunyai dua frame di jendela animation. Klik ikon mata pada layer teks nama Anda sehingga terlihat. Hasilnya frame pertama teks nama Anda tidak terlihat sedangkan pada frame yang kedua teks nama Anda terlihat.
  6. Sekarang aturlah waktu “teks berkedip” pada jendela Animation. Klik pada Selects Frame Delay Time di bawah frame pertama dan kedua di jendela animation. Contoh: Beri waktu 0.5 pada kedua frame.
  7. Untuk mencoba animasi teks Anda klik Plays/Stops Animation masih di jendela animation.
  8. Kalau waktu berkedipnya sudah terasa cukup (tidak terlalu cepat juga tidak terlalu lambat)
  9. Langkah berikutnya, simpan pekerjaan Anda dengan mengklik menu File >Save Optimized (Ctrl+Alt+S). Pada Save as Type Anda pilih extensi Image Only (*.gif) klik Save.
Bagian Ketiga (Ubah File GIF Anda Dalam Bentuk URL):
  1. Untuk mengubah file gif dalam bentuk URL, Anda memerlukan web yang menyediakan layanan tersebut. Dan ternyata banyak sekali web yang menyediakan layanan secara gratisan, free atau orang malay biang ‘percuma’ ^_^ diantaranya Photobucket, servimg, dan layanan gratis lainnya. Atau jika Anda sudah memiliki account gmail Anda bisa mengaktifkan googlepages dan mengupload file photo disana, atau bisa juga dengan menggunakan layanan Picasa dengan menggunakan account gmail juga.
  2. Namun untuk mempermudah saya anjurkan untuk menggunakan layanan dari servimg karena Anda cukup mendaftar dengan account email yang manapun dan tanpa adanya email aktivasi. Cukup mendaftar, login dan Anda bisa langsung mengupload photo.
Bagian Keempat (Memasang Banner Di Blog Sendiri dan Menyediakan Tag HTML untuk Tukar Link)
  1. Diantara keempat bagian ini, rasanya bagian terakhir yang paling menarik dan mendebarkan ^_^. Khususnya untuk saya. (karena salah sedikit saja memberikan tag HTML bisa hancur semuanya)
  2. Ok, setelah mempunyai URL banner, Anda memerlukan Tag HTML agar bisa disimpan pada elemen html yang ditempatkan di sidebar blog sekaligus untuk memudahkan bertukar link. Dan saat seseorang mengklik banner Anda di blog lain (yang telah bertukar link) langsung di arahkan menuju blog Anda, seperti halnya di bawah,

hakimtea.com


Tukeran Link Yuk…!
Silahkan copy kode di atas…!
Saya akan segera link balik…!
Tag HTMLnya sebagai berikut,
<center>
<a href="URL-BLOG-ANDA"><img border="0" alt="NAMA-ANDA.BLOGSPOT.COM" src="URL-GAMBAR-ANDA"/></a><br/>
<textarea rows="3" cols="15" name="code"><a href="URL-BLOG-ANDA"> <img border="0" alt="NAMA-ANDA.BLOGSPOT.COM" src="URL-GAMBAR-ANDA"/> </a>
</textarea><br/>
Tukeran Link Yuk...! <br/>Silahkan copy kode di atas...!<br/>Saya akan segera link balik...!
</center>
Anda tinggal mengganti:
  • URL-BLOG-ANDA: (contoh, URL blog saya yang “dulu” http://hakimtea.blogspot.com)*
  • NAMA-ANDA.BLOGSPOT.COM: (contoh nama blog saya, Hakimtea.Blogspot.Com)*
  • URL-GAMBAR-ANDA: (contoh URL gambar saya, http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif)*
* NOTE: perhatikan pergantiannya 2 kali; satu agar tampil langsung sebagai banner Anda dan yang satu lagi tampil di teks area untuk memudahkan blogger lain mengcopy-paste kode HTML banner Anda.
Sebagai contoh saya masukan URL Blog, Nama blog, dan URL gambar “saya” ke dalam tag HTML di atas, maka kodenya jadi seperti di bawah ini,
<center>
<a href="http://hakimtea.blogspot.com"><img border="0" alt="hakimtea.blogspotcom" src="http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif"/></a><br/>
<textarea rows="3" cols="15" name="code"><a href="http://hakimtea.blogspot.com"> <img border="0" alt="hakimtea.com" src="http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif"/> </a>
</textarea><br/>
Tukeran Link Yuk...! <br/>Silahkan copy kode di atas...!<br/>Saya akan segera link balik...!
</center>
Perhatikan penyimpanan URL BLOG ANDA, NAMA BLOG ANDA dan URL GAMBAR ANDA… silahkan dicoba! Saya rasa cukup mudah dan tidak akan ada masalah! Seandainya ada, tinggalkan komentar di bawah :)
Diposting oleh baby new blog di 16.52 0 komentar
Label:

APLIKASI TULISAN PADA BLOG

Membuat Link Bewarna Pelangi

Kalau anda pernah menjumpai di suatu blog seperti punya saya,maka pada saat anda menempelkan mouse pada link maka akan muncul huruf bewarna-warni seperti pelangi. Ingin tahu caranya ? Mudah kok asal gak nyasar . . :))

Pada Edit HTML kamu cari kode <head>. Kalau udah ketemu letakkan kode ini dibawahnya dan klik SAVE . . jadi dech :D

<script src='http://achmad46.googlepages.com/rainbow.js'>
</script>


Tulisan Coret pada Postingan

Udah tahu belum nih maksudnya ? Itu hlo tulisannya yang dicoret kayak underline tapi hurufnya kecorek. Kalau masih bingung coba lihat contoh ini

Price $5Now Free For You

Untuk caranya:

Anda tinggal menambahkan kode

<strike>(kalimat yang ingin dicoret)</strike>


Tulisan Berkedip (Blink)

Ini adalah trik yang sangat mudah karena anda tinggal menambahkan kode

<blink>(tulisan yang berkedip)</blink>

Mudah kan ? seperti membalikan telapak tangan :))
Diposting oleh baby new blog di 08.37 0 komentar
Label:
Langganan: Postingan (Atom)