Search

Membuat Label Cloud Berputar

Posted by Kimberly on Friday, May 22, 2009

blogumulus Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label cloud berputar. Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog


Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template sobat, jadi saran saya nanti sebelum mengedit template, ada baiknya backup terlebih dahulu template sobat.


I. Langkah Pertama

 

  1. Login ke Blogger dengan ID sobat.

     

  2. Klik Tata Letak

     

  3. Klik tab Edit HTML

     

  4. Download dahulu template sobat dengan mengklik Download Template Lengkap

     

  5. Kemudian klik button Expand Template Widget dan cari kode yg seperti ini : 

     

    <b:section class='sidebar' id='sidebar' preferred='yes'>

     

  6. Copy kode berikut ini setelah kode diatas :

     

    <b:widget id='Label99' 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'>
    <script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
    <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
    <script type='text/javascript'>
    var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
    // uncomment next line to enable transparency
    //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
    so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
    so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
    so.addVariable(&quot;distr&quot;, &quot;true&quot;);
    so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
    so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
    so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
    so.write(&quot;flashcontent&quot;);
    </script>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>

     

  7. Kemudian Simpan Template.


II. Langkah Kedua 

  • Mengubah lebar dan tinggi kolom serta warna background 

     

    Angka "240" adalah lebar kolom

    Angka "300" adalah tinggi kolom

    Sedangkan #ffffff adalah kode untuk backgroud

     

  • Merubah warna font, untuk kode warna bisa sobat lihat disini

     

    so.addVariable("tcolor", "0x333333");

     

  • Merubah ukuran font

     

    so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

 

Jika dalam membuat label cloud ini tidak berfungsi, silahkan sobat ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

 

image

 

Hanya itu ilmu yang bisa saya bagi-bagi, terima kasih buat roytanck dan amanda fazani yang telah menyediakan javascript untuk label cloud ini. Jika ada pertanyaan silahkan isi di kolom komentar.

More aboutMembuat Label Cloud Berputar

Membuat Menu Dengan Fungsi Scroll

Posted by Kimberly on Monday, May 18, 2009

menu scroll Bagi blogger pemula seperti saya, membuat menu dengan fungsi scroll ini awalnya saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika sobat mempunyai daftar menu yang sangat panjang, menu dengan fungsi scroll ini bisa menjadi solusi yang tepat selain menggunakan marquee atau text berjalan.

 

Dan pembuatan menu ini tidak menggunakan kode HTML yang banyak dan ribet, yup hanya sedikit kode HTML, sobat sudah bisa membuat menunya. Menu ini bisa juga sobat menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang sobat miliki.

 

Untuk membuat menunya sobat hanya membutuhkan kode HTML seperti ini :

 

<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee"> 

ISI MENU 

</div>

 

 

Keterangan :

  • width --> lebar menu

  • height --> tinggi menu

  • padding --> jarak antar tulisan dengan garis pinggir

  • border --> ketebalan garis pinggir


Tinggal sobat kreasikan sendiri sesuai dengan blog sobat.

Contoh kode HTML untuk menu yang saya punya :

 

<div style="overflow:auto;width:310px;height:200px;padding:10px;border:1px solid #eee">

1.<a href="http://newalltutorial.blogspot.com/2009/04/panduan-membuat-blog.html"> Panduan Membuat Blog</a> 

2.<a href="http://newalltutorial.blogspot.com/2009/04/mengganti-template-blogspot.html"> Mengganti Template Blogspot</a> 

3.<a href="http://newalltutorial.blogspot.com/2009/04/cara-membuat-label-kategori.html"> Cara Membuat Label</a>

4.<a href="http://newalltutorial.blogspot.com/2009/04/untuk-membuat-tampilan-tulisan-atau.html"> Upload Gambar ke Dalam Postingan</a>

5.<a href="http://newalltutorial.blogspot.com/2009/04/cara-pasang-banner-di-blog.html"> Cara Pasang Banner</a>

6.<a href="http://newalltutorial.blogspot.com/2009/04/tutorial-membuat-text-area.html"> Tutorial Membuat Text Area</a>

7.<a href="http://newalltutorial.blogspot.com/2009/04/membuat-favicon.html"> Tips Membuat Favicon</a> 

8.<a href="http://newalltutorial.blogspot.com/2009/04/trik-membuat-read-more.html"> Trik Membuat Read More</a>

9.<a href="http://newalltutorial.blogspot.com/2009/04/cara-pasang-search-engine-di-blog.html"> Cara Pasang Search Engine</a>

10.<a href="http://newalltutorial.blogspot.com/2009/04/menyimpan-file-di-geocitiesyahoocom.html"> Menyimpan File di Yahoo! Geocities</a>

11.<a href="http://newalltutorial.blogspot.com/2009/04/kode-html-tampil-di-postingan.html"> Kode HTML Tampil di Postingan</a>

12.<a href="http://newalltutorial.blogspot.com/2009/04/cara-pasang-meta-tag.html"> Cara Pasang Meta Tag</a>

13.<a href="http://newalltutorial.blogspot.com/2009/04/daftarkan-blog-ke-search-engine.html"> Daftarkan Blog ke Search Engine</a>

14.<a href="http://newalltutorial.blogspot.com/2009/04/alexa-rank.html"> Alexa Rank</a>

15.<a href="http://newalltutorial.blogspot.com/2009/04/tips-membuat-efek-marquee.html"> Tips Membuat Efek Marquee</a>

16.<a href="http://newalltutorial.blogspot.com/2009/05/pasang-kode-tukaran-link.html"> Pasang Kode Tukaran Link</a>

17.<a href="http://newalltutorial.blogspot.com/2009/05/backlink.html"> Backlink</a>

18.<a href="http://newalltutorial.blogspot.com/2009/05/yahoo-messenger-emoticons.html"> Yahoo Emoticons</a>

19.<a href="http://newalltutorial.blogspot.com/2009/04/link-berkelip-warna-warni.html"> Link Berkelip Warna-Warni</a>

20.<a href="http://newalltutorial.blogspot.com/2009/05/tips-membuat-menu-dropdown.html"> Membuat Menu Dropdown</a>

</div>


Hasilnya :

 

 

 

Sedikit keterangan tentang elemen diatas :

  • overflow:auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
  • width:310px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
  • height:200px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
  • padding:10px adalah jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px.
  • border:1px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu.

Selamat Mencoba !!
More aboutMembuat Menu Dengan Fungsi Scroll

Disable Klik Kanan ( Right Click )

Posted by Kimberly

Sudah sering kita jumpai sebuah website atau blog yang menonaktifkan klik kanan atau right click pada halaman blog tersebut. Berarti blog tersebut sangat hati - hati dalam menjaga privasi agar page source tidak dapat di lihat oleh orang lain. Sobat pun bisa membuat blog sobat menjadi disable klik kanan.

Sebuah website atau blog pasti ada yang mengandung konten privasi, seperti gambar yang kiranya sangat riskan untuk di copy oleh orang lain dan untuk keperluan yang bisa sangat merugikan sobat. Untuk itu di perlukan teknik men-disable klik kanan pada blog, maka gambar - gambar yang sangat privasi tidak akan bisa di copy dan di salahgunakan oleh orang lain.

Berikut langkah - langkahnya :
  1. Login ke Blogger dengan ID sobat.

  2. Klik Tata Letak --> Elemen Halaman.

  3. Pilih yang HTML/JavaScript.

  4. Copy kode dibawah ini ke dalam kolom kosong yang tersedia :


<script>
var message="Maaf, Klik Kanan Tidak Diperbolehkan !";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

kemudian Save, dan lihat hasilnya.
Mudah - mudahan dengan disable klik kanan pada blog sobat, gambar atau file privasi milik sobat akan aman dari tangan - tangan orang yang tidak bertanggung jawab.
Oke..selamat mencoba !!
More aboutDisable Klik Kanan ( Right Click )

Kotak Postingan Terpisah

Posted by Kimberly on Friday, May 15, 2009

Perhatikan blog ini, terlihat kolom postingan blog saya terpisah antara satu postingan dengan postingan yang lain.

Kolom postingan terpisah seperti ini juga terlihat lebih enak dipandang dan lebih memudahkan pengunjung blog dalam membedakan isi artikel yang kita tulis, daripada kolom postingan yang menyatu atau dalam 1 kotak saja.

Jika sobat ingin blog sobat tampilannya seperti ini, berarti sobat benar telah membaca artikel ini..

Untuk pemasangan kolom yang seperti ini, sobat hanya memerlukan sedikit tambahan kode HTML saja yang nantinya akan disisipkan ke blog sobat.

Berikut langkah - langkahnya :
  1. Silahkan login dahulu ke Blogger dengan ID sobat tentunya.

  2. Klik Tata Letak.

  3. Klik tab Edit HTML.

  4. Setelah itu cari kode yang seperti ini

    .post {


  5. Kemudian tambahkan kode berikut ini tepat setelah kode tersebut


    Padding:15px; /* Jarak text post dengan garis pinggir */

    Border-top: 2px solid #000000; /* warna garis pinggir atas */

    Border-bottom: 2px solid #000000; /* warna garis pinggir bawah */

    Border-left: 2px solid #000000; /* warna garis pinggir kiri */

    Border-right: 2px solid #000000; /* warna garis pinggir kanan */

    Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */



  6. Save Template.

Sekarang coba sobat lihat hasilnya, jika sobat benar meletakkan kode HTML nya Insya Allah pasti akan berhasil dan sama seperti punya saya. Tapi masih dalam bentuk kotak kaku alias lancip pada ujung - ujungnya. Nanti jika sempat akan saya tulis postingan tentang membuat garis melengkung pada sudut kolom.

Selamat mencoba !!
More aboutKotak Postingan Terpisah

Pasang Widget Alexa di Blog

Posted by Kimberly on Thursday, May 14, 2009

Dalam artikel saya sebelumya yang membahas tentang Alexa Rank, maka postingan kali ini khusus membahas bagaimana cara pasang widget Alexa di blog.

Pada bahasan sebelumya, sudah saya jelaskan manfaat dari memasang toolbar Alexa di blog, nah sama dengan memasang toolbar Alexa, memasang widget Alexa juga fungsinya tidak lain adalah untuk meningkatkan traffic blog kita.

Alexa rank membuat peringkat berdasarkan banyaknya pengunjung blog kita, semakin banyak pengunjung blog atau web maka alexa rank akan tinggi nilainya. Darimana alexa mengetahui jumlah kunjungan suatu web atau blog? alexa akan mengetahui jumlah kunjungan terhadap suatu web atau blog berdasarkan informasi dari komputer yang browser internetnya memasang alexa toolbar.alexa widget pada blog atau web untuk mendapatkan data yang akurat tentang banyaknya kunjungan. Dengan memasang alexa widget di blog, maka mesin alexa akan mengetahui secara akurat berapa pengunjung serta Page view (halaman yang di lihat) pada web atau blog sobat.


^^^ Langkah Pertama
  1. Klik disini untuk login ke Alexa

  2. Masukkan alamat blog sobat pada kolom yang tersedia, contoh --> www.newalltutorial.blogspot.com kemudian klik tombol "Build Widget"



  3. Kemudian akan ada halaman yang memperlihatkan 3 ukuran dan bentuk widget yang berbeda, silahkan pilih sesuai selera sobat. Copy kode HTML yang terdapat didalam kolom kedalam notepad atau word.



^^^ Langkah Kedua

  1. Login ke Blogger dengan ID sobat tentunya.

  2. Klik Tata Letak

  3. Klik tab Elemen Halaman

  4. klik Tambah Gadget

  5. Kemudian klik yang HTML/Java Script.



  6. Paste kode HTML yang tadi sobat simpan di notepad kedalam kolom yang tersedia.

  7. Klik Simpan.

  8. Selesai.

    Selamat Mencoba !! mudah-mudahan dengan terpasangnya widget Alexa, blog sobat jadi semakin tinggi peringkatnya di Alexa.
More aboutPasang Widget Alexa di Blog

Tips Membuat Menu Dropdown

Posted by Kimberly on Monday, May 11, 2009

Untuk menghindari arsip blog yang menumpuk atau berderet kebawah terlalu panjang, kita bisa menggunakan menu dropdown agar terlihat lebih efisien. Karena semakin banyak dan semakin lama kita ngeblog maka arsip blog kita akan bertambah panjang daftarnya. Seperti yang kita ketahui, blog di arsip setiap bulan. Bagaimana kalau sobat ngeblog bertahun-tahun, tentu akan semakin panjang kan daftar bulan arsip blog sobat.
Berikut ada sedikit tips untuk membuat menu dropdown, tapi saya hanya akan menjelaskan cara membuat menu dropdown untuk yang memakai template baru, karena saya sendiri juga menggunakan template baru.
  • Login ke Blogger dengan ID sobat tentunya.
  • Klik Tata Letak.
  • Kemudian klik Elemen Halaman.
  • Klik tambah Gadget --> kemudian pilih menu yang bertulikan Arsip Blog
  • Disamping tulisan style, pilih radio button yang bertuliskan Dropdown Menu --> kemudian contreng kotak radio button tersebut.
  • Klik Simpan.
  • Itu tadi menu dropdown untuk Arsip Blog sobat, lantas bagaimana cara membuat menu dropdown yang didalamnya terdapat link. Seperti ini kode HTML nya :

    <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected>judul menu</option>
    <option value="isi dengan addres yang ingin di tuju">judul link disini</option> </select></form>

  • Contohnya seperti berikut :

    <form><select name="menu"  onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>
    <option>Blogspot Tutorial</option>
    <option value="http://newalltutorial.blogspot.com/2009/05/yahoo-messenger-emoticons.html">Yahoo! Emoticons</option>
    <option value="http://newalltutorial.blogspot.com/2009/04/tips-membuat-efek-marquee.html">Membuat Efek Marquee</option>
    <option value="http://newalltutorial.blogspot.com/2009/04/cara-membuat-label-kategori.html">Cara Membuat Label</option>
    <option value="http://newalltutorial.blogspot.com/2009/04/tutorial-membuat-text-area.html">Membuat Teks Area</option>
    <option value="http://newalltutorial.blogspot.com/2009/04/membuat-favicon.html">Tips Membuat Favicon</option>
    <option value="http://newalltutorial.blogspot.com/2009/04/trik-membuat-read-more.html">Tips Membuat Read more</option>
    </select></form>
  • Hasilnya :

Sangat mudah bukan, silahkan dicoba !
More aboutTips Membuat Menu Dropdown

Yahoo! Messenger Emoticons

Posted by Kimberly on Tuesday, May 5, 2009

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..
More aboutYahoo! Messenger Emoticons

Cara membuat Label Cloud

Posted by Kimberly on Sunday, May 3, 2009

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..
More aboutCara membuat Label Cloud

Pasang Kode Tukaran Link

Posted by Kimberly

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://newalltutorial.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://newalltutorial.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://newalltutorial.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://newalltutorial.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..

More aboutPasang Kode Tukaran Link

Cara Membuat Tabel

Posted by Kimberly on Saturday, May 2, 2009

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..
More aboutCara Membuat Tabel
Related Posts Plugin for WordPress, Blogger...