Tips & Tricks Blogspot | Sambil Belajar & Hobby

Cara memasang emoticon Smiley di comment Blogger/blogspot sebenarnya sudah banyak di posting oleh teman-teman Blogger lainnya, namun saya ingin memajang kembali tips ini disini, siapa tahu ada dari teman-teman Blogger pemula seperti saya, yang kebetulan berkunjung ke Blog ini dan memerlukannya. Namun sebelumnya saya minta maaf jika informasi dari artikel ini kurang informatif..he..he..!
Semua script emoticon ini saya comot dari salah satu template-nya Mas Agus Ramadhani yang bernama OOM Elegant Style Blogger Template.

Biar tidak panjang lebar mari kita mulai praktekkan :

1. Pertama-tama Login dulu ke Blogger >> Dashbord >> Tata Letak >> kemudian pilih >> Edit HTML.

2. Kemudian beri tanda centang pada pilihan "Expand Widget Template", ini tujuannya untuk menampakkan kode-kode HTML yang tersembunyi.

3. Nah sebagai langkah pengamanan (untuk jaga-jaga) lakukan backup terhadap keseluruhan isi kode template anda. Lakukan saja dengan cara klik kanan mouse pada area template >> Select All, setelah terpilih semua klik kanan lagi >> lalu pilih Copy, buka Notepad lalu paste-kan disana >> kemudian simpan.

4. Sekarang kembali ke template, cari kode ini :

</body>

Untuk lebih mudahnya gunakan fasilitas Search dengan cara tekan tombol keybord (Shift + F3).

5. Setelah ketemu selanjutnya copy dan paste kode dibawah ini, dan letakkan tepat di atas kode :
</body>

<script src='http://oom.blog.googlepages.com/smiley.js' type='text/javascript'/>













6. Nah, jika yang diatas sudah beres, sekarang cari dan dapatkan kode ini :

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

7. Setelah ketemu, selanjutnya copy dan paste kode dibawah ini dan letakkan tepat di bawah kode <b:if cond='data:post.embedCommentForm'>


<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>








8. Terakhir, jangan lupa klik (Simpan Template) untuk menyimpan perubahannya.

9. Selesai Deh..!!! :D

Selamat Mencoba!!!

SILAHKAN BERKOMENTAR!!!

Banyak efek yang bisa diberi pada tulisan artikel posting. Salah satunya adalah efek stabilo. Nah, biasanya tulisan yang diberi efek bertujuan untuk mempertegas isi dan arti tulisan tersebut sehingga pembaca diarahan untuk lebih fokus pada tulisan. Efek ini dikenal juga dengan warna latar belakang teks dengan efek stabilo. Nah, efek stabilo adalah tulisan yang diberi latar belakang warna pilihan kita. Bisa warna hijau, kuning, merah dan warna lainnya. Jika tertarik, kamu bisa mengikuti cara berikut.

Contohnya seperti ini :
Efek stabilo warna hijau

Efek stabilo warna pink

Untuk contoh di atas, kode nya yang ditambahkan adalah seperti ini :

efek stabilo warna hijau

Nah, kamu bisa mengganti warna hijau tersebut dengan warna lainnya. Untuk warna lainnya kamu bisa menggunakan kode warna saya. Hampir lupa, untuk menulis kode tersebut di posting blog, kamu harus berada dalam pilihan Edit HTML. Bukan hal yang luar biasa memang, tapi mengasikkan . Oke deh, selamat berkreasi dengan warna latar belakang teks dengan efek stabilo.

Selamat Mencoba !!

Oke new blogger, sekarang akan saya jelaskan cara merubah warna tulisan. Soalnya dulu sih sempet standar aja, iteeeeeeeeeem semua.

Biar lebih menarik, untuk hal-hal yang dianggap penting, atau postingan kita terlihat lebih kinclong…. caranya adalah :

Masuk ke edit HTML tambahkan kode :

<span style=color:red>Isi tulisan artikel kita</span>

maka hasilnya :
Isi tulisan artikel kita

atau ingin membuat teks warna-warni, contoh : Hijau Merah Biru Ungu Abu-abu

maka kode nya adalah :

<span style=color: green>Hijau</span><span style=color: red> Merah</span> <span style=color: blue> Biru</span> <span style=color: purple> Ungu</span> <span style=color: gray> Abu-abu</span>

apabila ingin merubah warna dan ukuran fots, contoh :
ini kecil ini besar

maka kode HTML nya adalah :

<span style=font-size:17px;color:red>ini kecil</span> <span style=font-size:25px;color:green>ini besar</span>

semoga bermanfaat !


SILAHKAN BERKOMENTAR

marquee

Sebenarnya ini bukanlah tips baru. Karena sudah ada pada zaman dahulu kala . Tetapi karena cukup berguna dan sekaligus untuk melengkapi tips di blog ini. Jadi saya posting disini. Saya yakin anda semua pasti sdh tahu apa itu tabel. Jadi saya tidak akan menjelaskan definisnya lagi. Yang akan saya jelaskan disini adalah bagaimana cara membuat tabel pada blog.
Tabel ini sangat berguna untuk membuat laporan seperti laporan keuangan, laporan transaksi, laporan stock ataupun daftar barang. Jadi jika anda ingin membuat sebuah laporan untuk diposting pada blog anda. Maka anda tidak perlu lagi untuk membuatnya diprogram office terlebih dahulu. Tetapi anda bisa langsung membuatnya di blog anda.

Pingin tahu caranya? Silahkan ikuti tutorial berikut ini.

1. Untuk membuat tabel 1x2 (1 baris 2 kolom) maka kode yang digunakan adalah:

<table border="1">

<tr>

<td></td> <td></td>

</tr>

KETERANGAN :
<table> merupakan perintah untuk membuat tabel
<tr> merupakan perintah untuk membuat baris
<td> merupakan perintah untuk membuat kolom
border merupakan perintah untuk mengatur ketebalan garis pinggir. Silahkan ganti nilainya sesuai keinginan


Sebagai contoh jika anda memasukkan kode seperti ini.

<table border="1">

<tr>

<td>Konten 1</td> <td>Konten 2</td>

</tr>

</table>

Maka hasilnya akan menjadi seperti ini: Sebenarnya ini bukanlah tips baru. Karena sudah ada pada zaman dahulu kala . Tetapi karena cukup berguna dan sekaligus untuk melengkapi tips di blog ini. Jadi saya posting disini. Saya yakin anda semua pasti sdh tahu apa itu tabel. Jadi saya tidak akan menjelaskan definisnya lagi. Yang akan saya jelaskan disini adalah bagaimana cara membuat tabel pada blog.

Tabel ini sangat berguna untuk membuat laporan seperti laporan keuangan, laporan transaksi, laporan stock ataupun daftar barang. Jadi jika anda ingin membuat sebuah laporan untuk diposting pada blog anda. Maka anda tidak perlu lagi untuk membuatnya diprogram office terlebih dahulu. Tetapi anda bisa langsung membuatnya di blog anda.

Pingin tahu caranya? Silahkan ikuti tutorial berikut ini.

1. Untuk membuat tabel 1x2 (1 baris 2 kolom) maka kode yang digunakan adalah:

<table border="1">

<tr>

<td></td> <td></td>

</tr>

KETERANGAN :
<table> merupakan perintah untuk membuat tabel
<tr> merupakan perintah untuk membuat baris
<td> merupakan perintah untuk membuat kolom
border merupakan perintah untuk mengatur ketebalan garis pinggir. Silahkan ganti nilainya sesuai keinginan


Sebagai contoh jika anda memasukkan kode seperti ini.

<table border="1">

<tr>

<td>Konten 1</td> <td>Konten 2</td>

</tr>

</table>

Maka hasilnya akan menjadi seperti ini:

Konten 1

Konten 2

2. Membuat tabel 2x2 (2 baris 2 kolom) dengan konten teks dan gambar

<table border="1">

<tr>

<td>Gambar 1</td> <td>Gambar 2</td>

</tr>

<tr>

<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9wvPzAxRz4Yp7wmCkNUl0g4pDbBpi9YVbvRRttSP7rGctb0jtVpn8c5GI81E644zjF7VlOCSqhkp1WWcu21mFPzYwJqwtFda_JdWnZKIGzxHAuOnRw9Q3h3ohyq1Gmg52MRS6QsS5A3OQ/" /></td> <td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwMfBIG20KmzNZjj397Kplt1XHwzw6v2Ocz79z-zFnQOecEH9pNFcfaZYm3apB3dgT42Gyh6GrM_obQKmsIdUFrdn5aB5TVV5M2_QixHvmNz2E-FsHzDhAOwG1fPIbv-ajbl5150Jp25Zq/" /></td>

</tr>

</table>

Maka hasilnya seperti ini:

Gambar 1	Gambar 2

Ok saya rasa itu saja tutorialnya. Selamat mencoba...

Jika masih ada yang kurang jelas silahkan ditanyakan melalui kotak komentar

Tidak jarang dalam sebuah postingan blog, kita ingin menampilkan kode HTML. Dan bukan rahasia lagi, apabila hal tersebut juga dapat menambah daya tarik pengunjung blog. Apalagi kalau blog kamu ber-tema-kan tips dan trik blogger, tutorial blog.

Menampilkan kode HTML dalam postingan tidak seperti menulis kode biasa. Jika dalam postingan kamu memasukkan kode originalnya, maka yang tampil dalam postingan adalah hasil terjemahan bahasa HTML dari kode tersebut. Coba copy kode berikut dan langsung paste dalam entry (postingan) blog kamu :

<b>"Kok, kodenya ngga muncul???"</b>

Hasilnya mungkin seperti ini "Kok, kodenya ngga muncul???"


Di bawah ini merupakan 2 (dua) trik blogger praktis agar kode HTML muncul dalam postingan :

Pertama adalah dengan cara manual, yaitu merubah karakter-karakter kode tertentu. Mari kita lihat karakter-karakter yang perlu diganti :

Kode	Ganti Kode dengan
<	&lt;
>	&gt;
"	&quot;

Kedua adalah dengan memparse kode HTML yang akan kamu masukkan dengan menggunakan layanan situs online. Silakan kamu kunjungi :


Centricle.com (http://www.centricle.com/tools/html-entities)


Masukkan kode yang akan kamu parse, kemudian tekan "Encode" atau jika ingin mengembalikan ke kode semula tekan "Decode".


Blogcrowds (http://www.blogcrowds.com/resources/parse_html.php)


Masukkan kode yang akan diparse, namun kali ini kamu hanya menekan tombol "Parse".


Selamat menampilkan kode HTML dalam postingan...