Cara memasang Label Animasi/Tag Cloud

Written by RA_Syihan on Friday, October 01, 2010 | Category: Networking, Trick, Tutorial

Ketika melakukan blogwalking, saya menemukan sebuah widget yang cukup menarik yaitu label animasi atau disebut dengan tag cloud. Label animasi ini mempunyai tampilan yang sangat menarik karena ketika kursor mouse disorot ke area tag cloud tersebut maka labelnya akan berotasi seperti orbit. Sehingga membuat blog kita terasa lebih interaktif.

Label animasi ini mempunyai fungsi yang sama dengan label standar dimana setiap kali kita memberi label pada postingan maka label tersebut secara otomatis akan muncul pada area tag cloud.

Nah bagi anda yang tertarik dengan label animasi ini. Berikut cara pemasangannya:

1. Seperti biasa. Login ke Blogger

2. Klik Download Full Template untuk membackup template anda

3. Setelah itu klik Design -> Edit HTML

4. Cari kode <b:section class='sidebar' id='sidebar' preferred='yes'>

5. Kalau sudah ketemu letakkan kode berikut tepat dibawah kode yang diatas

<b:widget id='Label88' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>UnoZoneu by<a href='http://www.unozoneu.co.cc/'>UnoZoneu</a> and <a href='http://www.unozoneu.co.cc'>Herman Blog</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "180", "180", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
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>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Angka 180 menunjukkan panjang tag cloud dan angka 180 menunjukkan tinggi tag cloud. Silahkan diganti nilainya sesuai dengan ukuran sidebar template anda.

Sedangkan kode ffffff menunjukkan warna background dari tag clound. Angka menunjukkan warna teks dan angka 33333312 menunjukkan ukuran teks. Silahkan diganti sesuai keinginan.

6. Jika sudah, Klik Save Template. Selesai

sumber

Cara membuat Energy Saving Mode

Written by RA_Syihan on Thursday, September 30, 2010 | Category: Networking, Tutorial

Waktu saya lagi berkunjung ke blog sobat-sobat, saya menemukan hal yang belum saya ketahui, yaitu "Energy Saving Mode" atau juga bisa disebut "Screen Saver". Sebelum sobat mencobanya, coba tinggalkan blog saya ini (tapi jangan di close, cukup pindah ke tab lain) kira-kira 1 menit, dan lihat kembali blog saya..

dan yg akan anda lihat seperti ini ...

Kita langsung saja ke cara-caranya..

Login terlebih dahulu ke Blogger ID Anda.
Masuk ke Tata Letak/Rancangan.
Pilih tab Edit HTML
Klik Download Full Template, untuk membackup template sobat, jika terjadi kesalahan.
Beri tanda centang pada Expand Template Widget.
Cari kode <head>
Copy paste kode di bawah ini persis di atas kode <head>

<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script>


Lalu klik tombol Save Template, dan tunggu beberapa saat sampai Template tersimpan. Dan silakan melihat hasilnya. Semoga bermanfaat, terima kasih...

sumber

Membuat Label Blog menjadi Berwarna

Written by RA_Syihan on Thursday, September 30, 2010 | Category: Networking, Trick, Tutorial

Blogspot memang tak asing lagi dimata kita. Sudah berapa lama anda ngeblog? Yap.. pertanyaan itu pasti sering kita terima. Lamanya kita ngeblog membuat kita makin handal dalam berkreasi pada blog yang dipunya.

Postingan kali ini saya akan membahas tentang Membuat Label Blogspot Menjadi Berwarna. Seperti ini :

Yap.. biasanya kan label blogspot normalnya berwarna hitam, sekarang kita akan membuat label blogspot menjadi berwarna. Sepertinya ini aman digunakan karena tidak mengganggu widget ataupun elemen yang lain.

ini dia cara Membuat Label Blogspot Menjadi Berwarna :

1). Buka http://blogger.com/home

2). Klik tata letak

3). Klik Edit HTML

4). Salin (copy) kode ini :

.label-size-1 a {

font-size: 12px;

text-decoration: none;

}

.label-size-2 a {

font-size: 14px;

text-decoration: none;

color:#cd9f01;

}

.label-size-3 a {

font-size: 15px;font-family: Arial, Tahoma, Verdana;text-decoration: none;

}

.label-size-4 a {

font-size: 18px;

font-weight:bold;

text-decoration: none;

color:#ea5a04;

}

.label-size-5 a {

font-size: 24px;

text-decoration: none;

}

.label-size-1 a:hover,

.label-size-2 a:hover,

.label-size-3 a:hover,

.label-size-4 a:hover,

.label-size-5 a:hover { text-decoration:underline }

Membuat Label Animasi pada blogger

Written by RA_Syihan on Thursday, September 30, 2010 | Category: Networking, Tutorial

Tutorial ini mungkin telah ditulis beberapa master saya yang ada di luar sana. Yang luar sana? dimana? maksud saya yang ada blog mereka masing-masing.

Bagaimana cara membuat Label Animasi itu?

Perhatikan dan Cermati langkahnya.

1. Login ke Account Blogger anda
2. Klik Rancangan
3. Klik Edit HTML
4. Klik “download template lengkap” supaya template anda aman.
6. Silakan copy kode di bawah dan paste pada Notepate terlebih dahulu

<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’>
<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values=’data:labels’ var=’label’>
<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’ style=’12′><data:label.name/></a>

</b:loop>
</tags>" />
<p>Blogumulus by <a href=’http://www.roytanck.com/’>Roy Tanck</a> and <a href=’http://www.bloggerbuster.com’>Amanda Fazani</a></p>
</object>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>

7. Kemudian cari kode yang mirip seperti di bawah ini. untuk mempermudah mencari klik pada keyboard (CTRL+F) dan ketikkan..

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

8. Setelah ketemu, copy dan pastekan kode yang ada pada Notepate anda tadi dibawah kode diatas.
9. Simpan Template anda.
10. Selesai

NB. Untuk perubahan warna dapat anda rubah sesuai dengan keinginan anda. anda rubah yang berwarna merah.

Jika ingin mengubah lebar pada widget, cari kode “widht” dan ubah sesuai dengan keinginan anda.

Untuk mengubah panjang, silakan anda cari pada kode widget tersebut “height” dan ubah sesuai dengan anda.

sumber

Membuat Form Kontak pada Blog

Written by RA_Syihan on Thursday, September 30, 2010 | Category: Networking, Tutorial

Ingin membuat form kontak email di blogspot yang lebih mudah dan profesional?

——————————————————————–

Ketika kita berkunjung ke sebuah situs profesional penjual product atau jasa, maka disana kita akan menemukan menu contact. Menu “contact” (kontak) tersebut bisa berupa pemberitahuan alamat lengkap situs tersebut baik secara offline ataupun online dengan menyertakan alamat email, tujuannya tentu saja agar pengunjung situs tersebut bisa mencontact atau menghubungi pihak pemilik situs baik dalam rangka pembelian product atau mengirim pesan lainnya.

Dan yang paling memudahkan, kita pun menemukan menu contact yang di dalamnya berisi sebuah form khusus yang tidak hanya menampilkan alamat email yang bisa kita hubungi melainkan form contact yang tinggal kita isi tanpa harus membuka email terlebih dahulu (untuk mengirim pesan). Sangat memudahkan bukan? Bagaimana cara membuatnya di blogger? Nah tips dan tutorial kali ini kita akan membuat form kontak seperti web profesional itu di blogger/blogspot…

Sekedar pemberitahuan, Hakimtea.Com Hakimtea.Blogspot.Com sebenarnya telah menggunakan form contact ini sejak posting perdana disini yang launching pada tanggal 16 Januari 2008 lalu, karena berbagai hal saya tidak hadirkan pada list menu di atas. Namun karena sekarang saya menulis tips ini, maka saya hadirkan kembali form kontak saya di list menu di atas sana. Klik saja menu KONTAK saya di atas untuk melihat contoh contact form…:)

Untuk membuat Contact Form ini kita perlu mendaftar di Bravenet.Com karena bravenet merupakan salah satu yang menyediakan jasa contact form ini, tenang saja its free! Gratisan-Dot-Com ko!

. Oke kita langsung saja,

LANGKAH PERTAMA – FIRST STEP (REGISTER/DAFTAR)

Masuk ke Bravenet, klik disini.
Klik banner “Get Your Email Forms” (Its Free)
Kalau belum punya account bravenet Join Bravenet (daftar gratis)
Isi form pendaftaran yang tersedia.

Username: *nama yang akan digunakan ketika login nanti*

First Name: *Nama depan*

Last Name: *Nama belakang*

Email: *email yang aktif*

Confirm email: *tuliskan lagi alamat email yg aktif*

Password: *ketikan kata sandi, hanya Anda yang tahu*

Confirm Password: *Ketikan lagi kata sandi, harus sama dengan kata sandi pertama*

Masukan karakter (kode verifikasi) yang ada.

Ceklist “I agree to the Bravenet Terms of Service”

Klik join bravenet.

Tunggu sebentar, proses pendaftaran tengah dimasukan database bravenet.

Setelah tampil “Complete Your Bravenet Registration” ada tawaran dari sponshor bravenet, lewati saja, scroll down window ke bawah.

Klik tombol “Proceed to Member’s Area”

Registrasi hampir selesai. Anda akan dikirim email validitas (validation).

Login ke email Anda.

Cari email dari bravenet dengan title “membernotify – “‎Bravenet Account Confirmation”

Email bravenet tersebut mengingatkan username dan password yang Anda gunakan untuk login.

Klik link yang ditunjukkan dibawah kalimat, “Please follow the URL…”

Tampil windows baru dan ucapan selamat (Congratulations!) Anda telah tergabung menjadi member bravenet.

Scrol down window dan klik tombol “Continue to Members Area”

“welcome to your account”

LANGKAH KEDUA – SECOND STEP (MEMBUAT FORM KONTAK)

Masih di member area bravenet
Pada list menu pilih dan klik “web tools”
Pada “Unregistered Services” cari “Email Forms” dan klik. (kalo Anda sama sekali belum menggunakan tools dari bravenet, biasanya email forms berada di list kedua baris kedua dibawah Chat Rooms. Ketemu? Oke klik “Email Forms”
Klik banner “Get Your Email Forms” (Its Free)
Cari “I would like a FREE Email Forms Service” Klik tombol “Continue”
Pada “Start with a template” Pilih “Contact Form” (urutan pertama)
Keluar kotak dialog, beri nama Form Anda (Kalo tidak diberi nama, bravenet secara otomatis memberi nama “Contact Form” klik Ok jika sudah.
Selamat Anda telah mendapatkan “Contact Form” Anda pertama dan cukup sederhana. Biasanya contact form tersebut hanya berisi (1) First and Last Name (2) E-mail Address (3) Message.
Klik “I will edit this form”
Kita akan menambah pertanyaan (Add a new question), agar ketika pengunjung blog kita telah selesai mengisi contact form dan mengklik submit, mereka di arahkan kembali masuk ke homepage blog kita dan tidak masuk ke homepage bravenet.
Oke, klik “Add a new Question”
Pada “Add Question” pilih “Question Type – Thank You URL”
Masukan URL blog Anda pada form yang disediakan. kalo sudah klik tombol “Add Field”.
(Question Type – Thank You URL, tidak terlihat pada form Anda karena telah di setting hidden (tersembunyi) oleh bravenet)

Anda bisa mengedit dan menambahi form yang diperlukan, misalnya menambah dengan “Your Blog” dan sebagainya.

Dalam tips ini kita cukupkan dulu sampai disini karena ini hanya sekedar contoh pembuatan Contact Form sederhana, selanjutnya Anda bisa membuat yang lebih dan sesuai keinginan Anda nanti jika tahap latihan pembuatan dan pemasangan form kontak ini telah selesai.

LANGKAH KETIGA – THIRD STEP (MEMASANG FORM KONTAK PADA POSTINGAN)

Setelah Contact Form di atas selesai dan berisi tiga form isian dengan satu form hidden (nama, email, pesan dan Thank You URL yang tersembunyi dan mengarahkan kembali ke blog kita)
Klik “It’s perfect, let’s see the code”
Copy seluruh code html yang ditunjukkan.
Buat postingan dengan judul “Hubungi saya” atau “Kontak”
Beri muqodimah, kata-kata sambutan pada postingan Anda, misalkan, “Form kontak ini digunakan bagi Anda yang ingin memesan produk kami bla bla bla…”
Paste kode html dari bravenet di bawah muqodimah postingan Anda tersebut.
Simpan/Save postingan Anda.
Lihat postingan “Kontak” Anda dan silahkan dicoba, diisi dan klik submit!

Selamat Anda sudah mempunyai Contact Form

Semoga bermanfaat!

Gambar dari http://www.ontologyworks.com/

sumber