Tips Blog | Tutorial Blog | Belajar Blog

Yahoo! Messenger Emoticons

Yahoo! Messenger Emoticons

Ini dia yang paling seru dalam membuat postingan di blog, kita bisa menambahkan yahoo emoticons ke dalam postingan kita. Yahoo emoticons ini sebenarnya gambar yang bisa mengekspresikan diri kita dalam setiap tulisan yang kita buat, ekspresi senang, marah, lagi nyengir, sampai jatuh cinta juga ada.

Selain bisa membuat tulisan jadi lebih bervariasi, yahoo emoticons ini juga efektif dalam penulisan kata-kata, jadi kita tidak perlu menulis kata - kata yang panjang lebar untuk menunjukkan emosional kita, cukup dengan yahoo messenger emoticons pembaca sudah bisa melihat ekspresi kita.

Saya lagi marah nih : ..... .....

Biar marah tetap nyengir coey..hehe
Berikut beberapa contoh gambar beserta kode HTML nya

:)happy
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif" width=18 height=18 border=0>

:(sad
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif" width=18 height=18 border=0>

:Dbig grin
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" width=18 height=18 border=0>

:-/confused
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif" width=20 height=18 border=0>

;)winking
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" width=18 height=18 border=0>

;;)batting eyelashes
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif" width=18 height=18 border=0>

>:D<big hug
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif" width=42 height=18 border=0>

:">blushing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif" width=18 height=18 border=0>

:xlove struck
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" width=18 height=18 border=0>

:Ptongue
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif" width=18 height=18 border=0>

:-*kiss
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif" width=18 height=18 border=0>

X(angry
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" width=34 height=18 border=0>

:-Osurprise
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif" width=18 height=18 border=0>

=((broken heart
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif" width=18 height=18 border=0>

:>smug
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif" width=18 height=18 border=0>

B-)cool
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif" width=18 height=18 border=0>

#:-Swhew!
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif" width=34 height=18 border=0>

:-Sworried
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif" width=18 height=18 border=0>

>:)devil
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif" width=18 height=18 border=0>

:((crying
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif" width=22 height=18 border=0>

:))laughing
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif" width=18 height=18 border=0>

/:)raised eyebrow
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif" width=18 height=18 border=0>

=))rolling on the floor
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" width=30 height=18 border=0>

O:-)angel
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif" width=30 height=18 border=0>

:-Bnerd
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif" width=24 height=18 border=0>

=;talk to the hand
<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif" width=18 height=18 border=0>

Selamat Mencoba, jadikan postingan sobat lebih berwarna..
Cara membuat Label Cloud

Cara membuat Label Cloud

Untuk membuat tampilan label atau kategori lebih menarik, sobat bisa mencoba menggantinya dengan label yang menyerupai awan atau yang lebih dikenal dengan nama label cloud. Untuk membuatnya, lagi - lagi sobat harus mengotak - atik kode HTML blog sobat, jadi sebaiknya backup terlebih dahulu template sobat ubtuk menghindari kerusakkan pada template sobat.

  1. Login ke Blogger.

  2. Klik Tata Letak--> Edit HTML.

  3. Jangan lupa backup dulu ya template nya.

  4. Kemudian copy paste kode berikut diatas kode ]]></b:skin>

    /* Label Cloud
    ----------------------------------------------- */
    #labelCloud {text-align:center;font-family:arial,sans-serif;}
    #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
    #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
    #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
    #labelCloud a{text-decoration:none}
    #labelCloud a:hover{text-decoration:underline}
    #labelCloud li a{}
    #labelCloud .label-cloud {}
    #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
    #labelCloud .label-cloud li:before{content:"" !important}


  5. Kemudian letakkan kode berikut ini diatas kode </head>

    <script type='text/javascript'>

    // Label Cloud User Variables
    var cloudMin = 1;
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;
    </script>


  6. setelah itu cari kode seperti dibawah ini :

    <b:widget id='Label1' locked='false' title='Labels' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>
    <b:else/>
    <a expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    (<data:label.count/>)
    </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>


  7. Hapus kode tersebut dan ganti dengan kode berikut :

    <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div id='labelCloud'/>
    <script type='text/javascript'>

    // Don't change anything past this point --------------
    // Cloud function s() ripped from del.icio.us
    function s(a,b,i,x){
    if(a&gt;b){
    var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
    }
    else{
    var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
    }
    return v
    }
    var c=[];
    var labelCount = new Array();
    var ts = new Object;
    <b:loop values='data:labels' var='label'>
    var theName = &quot;<data:label.name/>&quot;;
    ts[theName] = <data:label.count/>;
    </b:loop>
    for (t in ts){
    if (!labelCount[ts[t]]){
    labelCount[ts[t]] = new Array(ts[t])
    }
    }
    var ta=cloudMin-1;
    tz = labelCount.length - cloudMin;
    lc2 = document.getElementById('labelCloud');
    ul = document.createElement('ul');
    ul.className = 'label-cloud';
    for(var t in ts){
    if(ts[t] &lt; cloudMin){
    continue;
    }
    for (var i=0;3 &gt; i;i++) {
    c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
    }
    var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
    li = document.createElement('li');
    li.style.fontSize = fs+'px';
    li.style.lineHeight = '1';
    a = document.createElement('a');
    a.title = ts[t]+' Posts in '+t;
    a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
    a.href = '/search/label/'+encodeURIComponent(t);
    if (lcShowCount){
    span = document.createElement('span');
    span.innerHTML = '('+ts[t]+') ';
    span.className = 'label-count';
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    li.appendChild(span);
    }
    else {
    a.appendChild(document.createTextNode(t));
    li.appendChild(a);
    }
    ul.appendChild(li);
    abnk = document.createTextNode(' ');
    ul.appendChild(abnk);
    }
    lc2.appendChild(ul);
    </script>
    <noscript>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>
    <b:else/>
    <a expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    </li>
    </b:loop>
    </ul>
    </noscript>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>


  8. Save Template.

Panjang ya..jangan sampai ada yang ketinggalan dalam proses copy paste kode - kode diatas, karena ketinggalan satu elemen saja label cloud tidak akan berhasil dibuat. Untuk membuat label cloud berputar akan saya bahas selanjutnya. So..selamat memandangi label cloud sobat yang baru..

Pasang Kode Tukaran Link

backlinks Ada beberapa cara untuk meningkatkan rangking blog kita, salah satunya adalah dengan saling bertukar link atau yang biasa disebut tukeran link (link exchange). Sobat bisa tukaran link dengan sesama sahabat blogger, asalkan saling menguntungkan kenapa tidak kita coba pasang kode tukeran link di blog kita dan mencoba bertukar link dengan blogger lain.

Tukeran link ini sangat bermanfaat untuk meningkatkan rangking blog kita di google sekaligus menjalin hubungan yang baik antara sesama blogger. Untuk yang berminat, berikut ada sedikit langkah untuk memasukkan kode tukeran link ke blog sobat.

Pertama, sobat harus membuat banner terlebih dahulu, bisa menggunakan photoshop atau dengan jasa pembuatan banner online yang tersedia di internet. Kemudian sobat upload gambar tersebut ke jasa penyimpanan online, bisa di Google Sites atau Photobucket.

Seperti ini contoh file yang sudah saya upload ke google sites :

http://sites.google.com/site/dodyfarial/image/bloggoblog.jpg


Setelah itu ubah menjadi seperti berikut ini :

<a href="http://kutu-blogspot.blogspot.com" target="_blank"><img src="http://sites.google.com/site/dodyfarial/image/bloggoblog.jpg" border="0" alt="Blogspot Tutorial"></a>


Langkah selanjutnya :
  1. Login ke Blogger dengan ID sobat.

  2. Pilih Tata Letak.

  3. Klik Elemen Halaman.

  4. Klik Tambah Gadget --> pilih yang HTML/Java Script.

  5. Kemudian masukkan kode tukaran link di bawah ini :

    <textarea name="code" rows="4" cols="30"><a href="http://kutu-blogspot.blogspot.com" target="_blank"><img src="http://sites.google.com/site/dodyfarial/image/bloggoblog.jpg" border="0" alt="Blogspot Tutorial"></a></textarea>


    sobat bisa lihat hasilnya dibawah ini :



  6. Untuk melihat hasil banner sobat berada tepat diatas kode tukeran link bisa dicoba memakai tips berikut ini :

    <h2>Link Exchange</h2>
    <br/><br/>
    Copy kode di bawah ke blog sobat, saya akan linkback secepatnya
    <br/><br/>
    <a href="http://kutu-blogspot.blogspot.com" target="_blank"> <img src="http://sites.google.com/site/dodyfarial/image/bloggoblog.jpg" border="0" alt="Blogspot Tutorial"></a>
    <br/><br/>
    <textarea name="code" rows="4" cols="30"><a href="http://kutu-blogspot.blogspot.com" target="_blank"> <img src="http://sites.google.com/site/dodyfarial/image/bloggoblog.jpg" border="0" alt="Blogspot Tutorial"></a></textarea>


    Hasilnya :


    Link Exchange


    Copy kode di bawah ke blog sobat, saya akan linkback secepatnya

    Blogspot Tutorial


 

Lihat hasilnya yang sudah terdapat gambar dari banner kita diatas kode tukeran link. Jika sobat berminat untuk tukeran link dengan saya silahkan copy kode yang terdapat didalam text area diatas kedalam blog sobat, saya akan segera linkback sobat kembali. Thanks..

Cara Membuat Tabel

Topik kita kali ini adalah membuat tabel di blog, sebenarnya sangat mudah hanya membutuhkan sedikit kode HTML sobat sudah bisa membuat sebuah tabel. Lagi-lagi kode HTML, yah begitulah namanya juga blog pasti selalu berhubungan dengan kode ribet yang satu ini. Untuk membuat tabel cukup dengan perintah <table> ..... </table> yang didalamnya terdapat atribut sebagai berikut :
  • bordercolor --> warna dari garis tabel

  • bgcolor --> warna dari background tabel

  • cellpadding --> jarak antara tulisan dengan garis luar tabel

  • cellspacing --> jarak antar tulisan

  • border --> ketebalan garis pinggir tabel

    • dotted --> garis titik putus-putus

    • dashed --> garis datar putus-putus

    • double --> garis rangkap dua
  • align --> posisi dari isi tabel, bisa kiri, tengah, atau kanan

  • width --> lebar tabel

  • height --> tinggi tabel


Bingung ya, begini contoh pertama yang paling simple :

<table width="250" border="1">
<tr>
<td>

Isi Tabel

</td>
</tr>
</table>

Hasilnya :

Isi Tabel


Tampak tulisan rapat kiri dengan dinding garis tabel, sobat bisa merubahnya agar menjadi ke tengah dengan menambahnkan elemen align="center"

Contohnya :

<table width="250" border="1">
<tr>
<td align="center">

Isi Tabel

</td>
</tr>
</table>

Hasilnya :

Isi Tabel


Bagaimana jika bordernya saya ganti dengan angka yang lebih tinggi, misalnya angka 7 dan lihat perubahan yang terjadi pada tabelnya :

<table width="250" border="7">
<tr>
<td align="center">

Isi Tabel

</td>
</tr>
</table>

Hasilnya:

Isi Tabel


Untuk menambah kolom menjadi 2, sobat tinggal menambahkan elemen yang sama dibawahnya, seperti ini contohnya :

<table width="350" border="7">
<tr>
<td align="center">

Kolom 1 Baris 1

</td>
<td align="center">

Kolom 2 Baris 1

</td>
</tr>
</table>

Hasilnya :

Kolom 1 Baris 1
Kolom 2 Baris 1


Sedangkan untuk membuat 3 baris, kira-kira seperti ini kodenya :

<table width="400" border="1">
<tr>
<td align="center">

Kolom 1 Baris 1

</td>
<td align="center">

Kolom 2 Baris 1

</td>
</tr>
<tr>
<td align="center">

Kolom 1 Baris 2

</td>
<td align="center">

Kolom 2 Baris 2

</td>
</tr>
<tr>
<td align="center">

Kolom 1 Baris 3

</td>
<td align="center">

Kolom 2 Baris 3

</td>
</tr>
</table>

Hasilnya :



Kolom 1 Baris 1
Kolom 2 Baris 1
Kolom 1 Baris 2
Kolom 2 Baris 2
Kolom 1 Baris 3
Kolom 2 Baris 3


Untuk menambahkan warna pada border dan background tabel, sobat tinggal menyisipkan kode seperti berikut :

<table width="400" border="1" bordercolor="blue">
<tr bgcolor="yellow">
<td align="center">

Kolom 1 Baris 1

</td>
<td align="center">

Kolom 2 Baris 1

</td>
</tr>
<tr bgcolor="yellow">
<td align="center">

Kolom 1 Baris 2

</td>
<td align="center">

Kolom 2 Baris 2

</td>
</tr bgcolor="yellow">
<tr>
<td align="center">

Kolom 1 Baris 3

</td>
<td align="center">

Kolom 2 Baris 3

</td>
</tr>
</table>

Hasilnya :



Kolom 1 Baris 1
Kolom 2 Baris 1
Kolom 1 Baris 2
Kolom 2 Baris 2
Kolom 1 Baris 3
Kolom 2 Baris 3


Untuk garis tabel yang putus - putus, bisa sobat tambahkan dotted atau dashed.
Bisa kan ? ga bisa ya, oke deh saya kasih contoh satu lagi :

<table width="400" border="1" bordercolor="blue" style="border-style:dashed; border-collapse:collapse">
<tr bgcolor="yellow">
<td align="center">

Kolom 1 Baris 1

</td>
<td align="center">

Kolom 2 Baris 1

</td>
</tr>
<tr bgcolor="yellow">
<td align="center">

Kolom 1 Baris 2

</td>
<td align="center">

Kolom 2 Baris 2

</td>
</tr bgcolor="yellow>
<tr>
<td align="center">

Kolom 1 Baris 3

</td>
<td align="center">

Kolom 2 Baris 3

</td>
</tr>
</table>

Hasilnya :



Kolom 1 Baris 1
Kolom 2 Baris 1
Kolom 1 Baris 2
Kolom 2 Baris 2
Kolom 1 Baris 3
Kolom 2 Baris 3


Selamat Mencoba !! kreasikan sendiri tabelnya ya..

Backlink

Backlink, backlink, dan backlink. Kalau ngobrol masalah SEO, pasti kata tersebut ambil bagian.

 

Banyakin backlink kalau mau dapat ranking bagus di search engine! Submit ke social bookmark untuk dapat backlink!


Namun sebenarnya, makhluk apa sih backlink itu? Sejenis undur-undur-kah? Atau masih ada hubungannya dengan spesies monyet biru? Bagi yang sudah mengenal jauh tentang SEO tentu akan manggut-manggut saja.

 

Tapi bagi newbie, mendengar kata backlink mungkin akan sama membingungkannya dengan pada saat mereka mendengar nama domain �llanfairpwllgwyngyllgogerychwyrndrobwyll-llantysiliogogogoch.com�. Nah supaya gak bingung lagi, mari kita intip bersama sosok sebenarnya dari backlink.

Apa Itu Backlink?
Bahasa sederhananya, backlink atau tautan balik adalah link atau tautan yang didapat oleh situs kita dari situs lain. Misalnya, situs A memberikan link ke situs B, ini berarti situs B baru saja mendapat backlink dari situs A. Berarti pula, situs B saat ini memiliki 1 buah backlink. Tidak susah kan konsepnya?

Macam Backlink

Dari arusnya, backlink dapat dibedakan menjadi 3 bagian:

  • One-way backlink

  • Two-way backlink

  • Three-way backlink

Yang pasti menjadi pertanyaan, mana di antara ketiganya yang paling baik? Jawabannya tergantung dari dua skenario berikut ini:
  • Apabila situs yang memberikan backlink sudah terkenal dan memiliki posisi bagus di mesin pencari, maka backlink yang baik adalah tipe One-Way.
  • Apabila situs yang memberikan backlink belum terkenal dan belum memiliki posisi bagus di mesin pencari (atau termasuk dalam dummy blog), maka backlink yang baik adalah tipe Three-Way.

Natural Backlink
Kondisi Natural Backlink atau backlink alami terpenuhi apabila backlink disisipkan dalam konten atau artikel dan dalam bentuk kalimat sehingga terkesan natural. Kebanyakan pemula mengira bahwa untuk mendapat backlink cukup dengan menyertakan link ke situs yang bersangkutan di bagian sidebar, padahal ini tidak tepat dan kurang optimal hasilnya. Selain itu, rawan dianggap sebagai paid link.

Text vs Banner
Satu lagi yang perlu diperhatikan, yang dihitung sebagai backlink oleh mesin pencari adalah link yang berupa teks (atau text link), bukan link yang ada dalam bentuk banner (banner link).

PageRank vs SERP
Apa sebenarnya tujuan dari mengumpulkan backlink? Menaikkan PageRank? Atau mendapatkan posisi yang baik di mesin pencari? Kedua jawaban tersebut memang benar, namun pada prakteknya ada sedikit perbedaan implementasi.

Untuk menaikkan PageRank, backlink yang kita miliki harus:
  • Berasal dari situs dengan topik sejenis.
  • Berasal dari situs yang PageRank-nya lebih tinggi. Namun tidak ada salahnya mengumpulkan backlink dari situs ber-PR berapapun karena tetap akan diperhitungkan dalam penilaian PageRank.

Sedangkan apabila tujuan kita adalah untuk menaikkan ranking di search engine, maka:
  • Backlink dapat dikumpulkan dari berbagai situs. Tapi tetap saja, utamakan backlink dari situs bertopik sejenis. Backlink usahakan berupa Natural Backlink.
  • Backlink harus menggunakan variasi keyword yang dibidik pada anchor text. Usahakan pula untuk melakukan deep linking atau link ke halaman-halaman lain pada situs yang bersangkutan.


Sumber Backlink

Pokok bahasan terakhir, darimana saja kita bisa mengumpulkan backlink? Atau, bagaimana caranya mendapatkan backlink sebanyak-banyaknya?

  • Submit situs kita ke situs-situs social bookmarking. Yang perlu diingat, tidak semua situs social bookmark sekarang menghasilkan backlink.
  • Membuat artikel menarik yang dapat memancing backlink.

Sebetulnya masih banyak lagi, jadi silahkan berkreasi sendiri saja. Yang jelas, HINDARI menggunakan tool-tool yang mengklaim bisa menghasilkan ribuan backlink bagi situs sobat dalam hitungan jam atau hari. Selain tidak efektif, juga 99% berpotensi dianggap spam oleh mesin pencari. Semoga bermanfaat ..


Artikel ini ditulis oleh Cosa Aranda dan pertama kali dipublikasikan pada tanggal 25 February 2008. Artikel ini disponsori oleh LowonganPekerjaan.Net, situs penyedia informasi lowongan kerja terbaru. Artikel bebas untuk didistribusikan ulang untuk keperluan non-komersil selama mencantumkan nama penulis dan sumber artikel serta tidak merubah isi.