PAGE PEEL EFFECT FROM SOHTANAKA.COM

If you often visit my blog, then you aware there is a new thing on the top-right corner of my blog. Now, try to move your mouse over the RSS logo, and you’ll see what happen. The page will peel automatically. This effect called page peel effect. I applied this trick that i’ve got from O-Om.com. According to O-om, this trick is using script made by Sohtanaka.com. And you can see the demo here.
The coding is very simple, i think everyone can apply this code to their blog without any problem. I have tried this trick once and succeed.
So, do you want to have this on your blog? Let’s follow the steps.
Step 1:
Put this jQuery script code above this code <b:skin><![CDATA[

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

Step 2:
Then put this CSS code above this code ]]></b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

Step 3:
Then put this code under <body> tag

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/yourfeedname>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

Don’t forget to change the code “yourfeedname” in red color with your feed name. Save your work and that’s it. You can see the result on your blog. Remember, you can change the image and link to meet your requirement. Good luck!
Source : O-Om.com

Read more..

CARA MEMPOSTING ARTIKEL VIA EMAIL

langkah-langkahnya:

Membuat Alamat Email

• Silahkan anda login terlebih dahulu seperti biasa dengan memakai user name milik anda
• Klik "Pengaturan"
• Pada layar terlihat seperti di bawah ini:

• Klik "Email & Seluler", pada Opsi Pengeposan, tepat di bagian bawahnya terdapat tulisan Alamat Pengeposan via Email dan tersedia kotak kosong yang harus anda isi. Sebagai contoh saya isi dengan freetips, maka alamat email saya adalah eka.freetips@blogger.com.
• Pada opsi di bawahnya, apabila email yang anda kirimkan ingin langsung tampil di blog anda tanpa perlu di-edit lagi, pilih Publikasikan segera email. Bila sebaliknya, pilih Simpan email sebagai entri konsep.

Cara Mengirim Artikel

Sekarang anda sudah memiliki alamat email untuk mengirim artikel. Misalkan anda sudah mempersiapkan artikel dan siap diposting. Langsung saja anda kirim melalui email account anda, misalkan dari yahoo.mail. Kirim artikel anda sebagai attachment. Isi kolom Subyek/Subject dengan judul artikel anda. Lalu klik Send/Kirim.

Melihat dan Mengedit Artikel

Bila pada pengaturan email, anda memilih Publikasikan segera email, maka untuk melihat artikel anda, silakan kunjungi blog anda. Buat yang memilih sebaliknya, mungkin anda perlu untuk meng-edit terlebih dahulu, maka silakan anda login dulu dengan user id anda, kemudian masuk ke Dasbor pada blog anda. Maka akan tampil layar seperti di bawah ini:

Klik Edit Entri, dan akan terlihat seperti di bawah ini:

Pada daftar di atas akan terlihat judul artikel yang telah anda kirim. Silakan klik Edit di samping kiri judul artikel. Selanjutnya, setelah anda selesai meng-edit, klik publish atau publikasikan.

Selesai.

Semoga bermanfaat

Read more..

MENGATUR TULISAN DAN WARNA PADA POSTINGAN

Di bawah adalah langkah-langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan : (ini khusus untuk template "minima")

1. Page Background color --> pengaturan warna background blog. Silahkan klik warna yang ada di sebelah kanan yang di sukai
2. Text Color --> pengaturan warna hurup dari posting-an
3. Link Color --> pengaturan warna hurup yang di link
4. Blog Title Color --> pengaturan warna hurup judul Blog
5. Blog Description Color --> pengaturan warna hurup deskripsi blog
6. Post Title Color --> pengaturan warna hurup judul posting-an
7. Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis pemisah
8. Sidebar Title Color --> pengaturan warna hurup judul yang anda di sidebar (kolom samping)
9. Sidebar Title Color --> pengaturan warna hurup yang ada di sidebar(kolom samping)
10. Visited link Color --> pengaturan warna hurup link ketika pengunjung mengarahkannya ke tulisan yang mengandung link
11. Text Font --> pengaturan jenis hurup,berlaku untuk hurup hasil dari posting-an ataupun hurup yang ada di sidebar
12. Sidebar Title Font --> pengaturan jenis hurup untuk judul yang ada di sidebar serta tanggal postingan
13. Blog Title Font --> pengaturan jenis hurup Judul blog
14. Blog Description Font --> Pengaturan jenis hurup dekripsi blog
15. Post Footer Font --> pengaturan jenis hurup footer (contoh : posted by )
16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai

Untuk template-template selain template "minima", pada dasarnya sama aja, hanya saja ada sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.

Read more..

CARA MEMBUAT TEXT AREA

Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text-text lainnya agar bisa di copy oleh para pengunjung. Untuk membuat text area, silahkan anda Copy kode di bawah ini : <p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p> Sebagai contoh :

<a href="http://kolom-tutorial.blogspot.com" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/animasichicklet.gif" border="0" alt="Blog Tutorial" /></a>

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya. Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya. Text Area dengan memakai HighLight Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah : <div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="10">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form> Sebagai contoh :

<script language="JavaScript"> function clickIE() { if (document.all) { return false; } } function clickNS(e) { if (document.layers(document.getElementById&&!document.all)) { if (e.which==2e.which==3) { return false; } } } if (document.layers) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS; } else{ document.onmouseup=clickNS; document.oncontextmenu=clickIE; } document.oncontextmenu=new Function("return false") </script>

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area. Elemen tombol highlight All :

1. <div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.

2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.

3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

Element text area :

1. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
2. <text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"
3. HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan </HEAD> selesai.

selamat mencoba.

Read more..

TEMPAT UPLOAD GAMBAR DAN FOTO PROFIL

Untuk mempercantik blog biasanya didalamnya terdapat foto-foto yang unik dan lucu, kadang foto profil dibuat sedemikian rupa agar kelihatan lebih narsis tapi tujuan utama dari upload gambar atau foto bukan itu tapi untuk memperjelas suatu bacaan atau postingan, berikut adalah cara-caranya:

1. Login seperti biasa dengan id anda
2. Klik Posts
3. Klik New Post (bila sebelumnya anda telah mempunyai posting-an)
4. Klik toolbar yang bergambar seperti ini
5. Beri tanda tik/cek pada radio button pada pilihan Choose a layout, bila anda menginginkan posisi gambar bisa di tempatkan di mana saja, pilih pada radio button None, bila posisi gambar di sebelah kiri pilih left, bila ingin di tengah pilih Center, bila ingin di kanan pilih Right. Beri tanda tik/cek pada Image size, bila ingin gambar yang di upload hasilnya kecil pilih Small, bila ingin sedang pilih Medium, bila ingin besar pilih Large
6. Beri tanda ceklis di samping tulisan Use this layout every time bila anda menginginkan setiap upload gambar settingnya seperti semula
7. Tekan tombol Browse, lalu masukan gambar dari komputer anda yang ingin di upload.
8. Klik Add another image bila gambar yang ingin di upload lebih dari satu gambar
9. Klik tombol UPLOAD IMAGE, tunggu beberapa saat sampai proses upload selesai
10. Klik Tombol Done untuk mengakhiri proses upload

Setelah proses upload anda selesai, untuk melihat gambar tadi, klik tombol Compose. Nah disini anda bisa melihat gambar yang anda upload tadi sekaligus dapat mengatur kembali ukuran dari gambar ini, caranya yaitu klik gambar tersebut sampai gambar anak panah mouse anda berubah menjadi gambar panah empat penjuru. Arahkan mouse pada garis samping gambar sampai gambar mouse berubah menjadi panah dua arah, tekan tombol mouse lalu tahan dan gerakan kearah kiri atau kanan untuk merubah lebar gambar, bila susah sesuai dengan yang anda inginkan lepas tombol yang anda tahan tadi. Untuk mengatur tinggi gambar, arahkan mouse pada tepi bawah atau atas gambar sampai gambar mouse berubah menjadi anak gambar panah dua arah, tekan mouse lalu tahan kemudian gerakan mouse keatas atau kebawah untuk mengatur tinggi gambar, lepaskan mouse bila ukuran gambar sudah sesuai dengan yang anda inginkan. Nah sekarang bagaimana cara memasukan foto untuk mengisi Profile kita?, caranya sama seperti langkah-langkah di atas, cuma ada sedikit perbedaan yaitu kamu harus menghapus beberapa kode tersebut. Jika foto kamu sudah selesai di upload (langkahnya sama seperti di atas). Tekanlah menu Edit HTML untuk melihat kode HTML dari Foto anda tadi, copy / paste kode HTML tersebut kedalam program notepad (agar lebih mudah) atau bisa juga ditulis di kertas. Kemudian klik publish. Untuk memasukan foto kedalam Profile kita, silahkan ikuti langkah berikut:

1. Setelah upload gambar, klik menu Dasboard
2. Klik menu Edit Profile
3. Di dalam form - form isian profile ada tulisan Photo URL, nah disini paste kode HTML yang telah anda copy tadi ke dalam notepad tapi jangan semuanya, yaitu yang di paste adalah kode setelah tulisan [src="] yaitu link yang di mulai dengan [http://] dan berakhir dengan [.jpg] atau [.jpeg]
4. Klik Save Profile, maka foto anda yang cantik dan ganteng sudah terpampang di blognya dan bisa dilihat oleh seluruh dunia
5. Selesai

Sebenarnya ada cara lain untuk mengisi foto Profile kita, yaitu dengan cara meng-upload (memasukkan) foto kita pada hosting lain, dan baru kemudian link URL foto yang kita dapat dari hosting tersebut di copy/paste ke profile yang ada di blogger/blogspot. Saya ambil contoh, biasanya saya menyimpan foto-foto saya di http://photobucket.com/. jika anda mau silahkan daftarkan diri anda (gratis ko), apabila sudah selesai daftar dan bisa login, silahkan upload photo anda. Setelah proses upload foto selesai, maka secara otomatis foto tersebut akan di beri PHOTO URL, copy alamat link URL foto tersebut lalu paste di Profile Blogger.com pada kolom Photo URL setelah itu tinggal SAVE CHANGES dan REPUBLISH. Selesai.

selamat mencoba.

Read more..

CARA MEMASANG WIDGETS GOOGLE TRANSLATE

Widgets google translate ini sangatlah bermanfaat bagi anda karena pengunjung blog anda tidak hanya orang indonesia saja tapi juga diseluruh dunia, untuk mengantisipasinya agar bisa dibaca oleh banyak orang yang memiliki bahasa yang berbeda-beda maka pasanglah widgets google translate di blog anda, adapun langkah-langkahnya sebagai berikut:

1. Login ke blogger.com
2. Masuk ke halaman dashboard, pilih layout (tata letak)
3. Lalu klik Add Gadget (Tambah Gadget)
4. Lalu pilih HTML/JavaScript.
5. Pada kotak Content (Konten) masukkan kode berikut:
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>
6. Jika sudah klik tombol Save.
7. Tampilan widget translator dari Google seperti gambar di bawah ini. Di dalamnya terdapat lebih dari 30 bahasa yang bisa anda pilih untuk menterjemahkan isi/teks/artikel yang ada dalam blog.

Selamat mencoba

Read more..

CARA MEMASANG STATUS ONLINE YAHOO MESSENGER

Status online yang berupa ikon/gambar yang menunjukkan status apakah kamu sedang online atau tidak di Yahoo Messenger bisa kamu pasang di blog kamu Pada saat kamu sedang online, ikon akan tampak menyala/kelihatan. Sebaliknya pada saat offline, ikon akan tampak seperti ‘tidur’ (berwarna kelabu). Menarik kan?

kali ini saya akan tunjukkan bagaimana cara memasangnya di blog anda. Format dasarnya adalah:

<a href="ymsgr:sendim?idyahoo">

<img border=0 src="http://opi.yahoo.com/online?u=idyahoo&amp;m=g&amp;t=1" /> </a>

Keterangan dari kode tersebut:
· Silakan anda ganti idyahoo dengan id Yahoo! Messenger anda, misalkan id anda adalah juni2508, sehingga kode di atas menjadi :

<a href="ymsgr:sendim?juni2508">

<img border=0 src="http://opi.yahoo.com/online?u=juni2508&amp;m=g&amp;t=1" /> </a>

· t=1, kode ini digunakan untuk memilih ikon/gambar yang akan anda pasang di blog. Angka 1 mewakili tipe dari ikon/gambar. Selengkapnya anda bisa lihat pada tabel di bawah.
Sekarang mari pasang kode tersebut di blog, ikuti langkah-langkah berikut ini:
1. Masuk dan login ke www.blogger.com.
2. Masuklah pada halaman Dasbor.
3. Klik menu Tata Letak.
4. Klik menu Tambah Gadget.
5. Klik pada link menu HTML/JavaScript.
6. Pada bagian Judul, ketikkan judul menu yang dibuat. Misal : Status YM.
7. Pada bagian konten, copy (Ctrl+C) kode yang sudah anda siapkan di atas dan tempel (Ctrl+V) di sini.
8. Klik tombol Simpan jika sudah selesai.
9. Lihat blog anda untuk melihat hasilnya.

Style Id	Online	Offline
t = 0
t = 1
t = 2
t = 3
t = 4
t = 5
t = 6
t = 7
t = 8
t = 9
t = 10
t = 11
t = 12
t = 13
t = 14
t = 15
t = 16

Tabel Tipe Ikon

Read more..

CARA MEMBUAT MENU HORIZONTAL

Lnagkah-langkahnya 
1. kamu harus punya gambar seperti ini:

dan

kalau tidak punya kamu bisa menggunakan gambar di bawah ini.

blackleft.gif	blackright.gif
greenleft.gif	greenright.gif
redleft.gif	redright.gif
unguleft.gif	unguright.gif
yellowleft.gif	yellowright.gif
blueleft.gif	blueright.gif
whiteleft.gif	whiteright.gif

2. Login ke blogger terus pilih Layout --> Edit HTML, kemudian beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
3. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

4. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

5. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
6. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :

<div id="content-wrapper">

untuk memudahkan pencarian copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find. Kalo sudah ketemu copy script yang tadi diatasnya

7. Simpan hasil pengeditan.
8. Lihat hasilnya.
9. kalau hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalau nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu seterusnya sampai ketemu tempat yang cocok.
10. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba kamu drag kebawah sedikit, kemudian simpan dan lihat hasilnya.

Read more..