Tips Blog | Tutorial Blog | Belajar Blog

Membuat Label Cloud Berputar

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.

Membuat Menu Dengan Fungsi Scroll

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://kutu-blogspot.blogspot.com/2009/04/panduan-membuat-blog.html"> Panduan Membuat Blog</a> 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

20.<a href="http://kutu-blogspot.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 !!
Disable Klik Kanan ( Right Click )

Disable Klik Kanan ( Right Click )

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 !!
Kotak Postingan Terpisah

Kotak Postingan Terpisah

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 !!

Pasang Widget Alexa di Blog

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.kutu-blogspot.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.