Mempersingkat Nama Domain Blog

Jika kita membuat blog secara gratis, baik di blogger atau di wordpress kita akan memperoleh nama/domain blog kita seperti ini http://blabla.blogspot.com atau http://blabla.wordpress.com. Bagi yang punya banyak uang mungkin bisa langsung membayar dan bisa memiliki nama domain dot.com. Namun bagi kita yang miskin ini :D pasti malas jika harus merogoh uang jajan kita demi mendapatkan domain yang lebih simple yaitu http://blabla.com. Tapi jangan khawatir bos, saya punya tips menarik supaya nama web/blog kita menjadi lebih pendek, dan juga tidak perlu bayar. mau tahu caranya?

Ada beberapa layanan di internet yang yang bisa mempersingkat nama domain blog kita. Disini akan saya sebutkan tiga saja yang menjadi favorit saya, karena selain gratis, cara daftarnya juga gampang, dan tidak ada iklannya. Berikut ini adalah layanannya:
1. co.cc nama blog kita akan menjadi http://nama.co.cc
2. co.nr nama blog kita akan menjadi http://nama.co.nr
3. uni.cc nama blog kita akan menjadi http://nama.uni.cc

Nha jadi lumayan pendek kan? mau tahu caranya? gampang kok, tinggal kunjungi situs tersebut terus daftarkan web/blog kita.
Pengen dijelasin caranya? OK deh
kali ini saya akan menjelaskan satu aja yang menjadi paling favorit saya dari ketiga layanan tersebut yaitu co.cc

1. Buka website ini http://co.cc
2. Isikan nama domain untuk blog/web kamu sesuai yang kamu inginkan di kotak yang disediakan, terus klik tombol cek
3. Jika domain yang kamu minta ternyata sudah dimiliki orang lain maka kamu akan diminta memasukkan kembali nama dimain yang lain, namun jika belum ada yang punya maka kamu bisa langsung mendaftarkannya dengan meng-klik tombol Continue to Registration lalu klik link Create Account
4. Setelah itu akan muncul form pendaftaran, isilah form tersebut trus klik tombol Submit
5. Jika berhasil maka akan muncul halaman baru lagi, lalu klik tombol Set up Domain, trus muncul lagi halaman baru dan klik pada tombol Please Set up
6. Kemudian isikan alamat blog kamu, misalnya http://trik-tips.blogspot.com pada kotak Target URL dan isikan title dari blog kamu pada kotak Title
7. Jika kamu pingin nama asli blog kamu tidak kelihatan di addressbar maka klik pada link URL Hiding
8. Jika sudah lalu klik tombol Setup Domain
9. Web/blog kamu akan diperiksa dulu oleh tim dari co.cc. masa tunggunya paling lama 24 jam, jika sudah di approve atau disetujui maka kamu akan langsu bisa memakai nama domain kamu yang baru. Oh ya, domain yang lama masih tetep bisa di akses.
Trus, catatan lagi nih, disini tidak menerima website yang mengandung unsur pornografi, spam, dan sesuatu yang ilegal.
Selamat Mencoba

Read more »

Cara Mengganti Tullisan Posting Baru, Posting Lama Dan Beranda Dengan Icon Pada Blog

Mengganti Tulisan Posting Baru, Posting Lama dan Beranda sebenarnya bukanlah suatu hal yang harus dilakukan. Tapi bagi Anda yang ingin agar tampilan blog lebih bervariasi bisa mengganti tulisan dengan icon gambar. Caranya cukup mudah.

Langkah-langkah menggantinya seperti di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Ganti beberapa kode seperti di bawah ini :

• Untuk mengganti tulisan Posting Baru (Newer Post) cari kode berikut: <data:newerPageTitle/>

Untuk mengganti tulisan Posting Baru (Newer Post) cari kode berikut:
Ganti kode tersebut dengan kode ini

<img border='0' src='http://cdn.iconfinder.net/data/icons/musthave/48/Previous.png'/>

• Untuk mengganti tulisan Posting Lama (Older Post) cari kode berikut: <data:olderPageTitle/>

Ganti kode tersebut dengan kode ini:

<img border='0' src='http://cdn.iconfinder.net/data/icons/musthave/48/Next.png'/>

• Untuk mengganti tulisan Home (Home Page) cari kode berikut: <data:homeMsg/>

Ganti kode tersebut dengan kode ini:

<img border='0' src='http://cdn.iconfinder.net/data/icons/sphericalcons/48/home.png'/>

4. Untuk icon silahkan di ganti dengan selera masing-masing .
5. Jika sudah tinggal klik Save Templates.

Read more »

Script Efek Salju Berbagai Warna

Inilah beberapa script efek salju dengan berbagai warna yang bisa anda gunakan untuk menghias blog anda. Untuk menggunakan script cukup dengan cara tambah gadget, pilih HTML/Javascript dan masukkan scriptnya, simpan dan letakkan dimana saja.

1. Efek salju merah

<script language="javascript"src="http://rikz.mobie.in/script/snow/redsnow.js"type="text/javascript">
</script>

2. Efek salju biru
<script language="javascript"src="http://rikz.mobie.in/script/snow/bluesnow.js"type="text/javascript">
</script>

3. Efek salju hitam
<script language="javascript"src="http://rikz.mobie.in/script/snow/blacksnow.js"type="text/javascript">
</script>

4. Efek salju cyan
<script language="javascript"src="http://rikz.mobie.in/script/snow/cyansnow.js"type="text/javascript">
</script>

5. Efek salju emas
<script language="javascript"src="http://rikz.mobie.in/script/snow/goldsnow.js"type="text/javascript">
</script>

6. Efek salju abu-abu
<script language="javascript"src="http://rikz.mobie.in/script/snow/graysnow.js"type="text/javascript">
</script>

7. Efek salju hijau
<script language="javascript"src="http://rikz.mobie.in/script/snow/greensnow.js"type="text/javascript">
</script>

8. Efek salju fuchsia
<script language="javascript"src="http://rikz.mobie.in/script/snow/fuchsiasnow.js"type="text/javascript">
</script>

9. Efek salju khaki
<script language="javascript"src="http://rikz.mobie.in/script/snow/khakisnow.js"type="text/javascript">
</script>

10. Efek salju lime
<script language="javascript"src="http://rikz.mobie.in/script/snow/limesnow.js"type="text/javascript">
</script>

11. Efek salju navy
<script language="javascript"src="http://rikz.mobie.in/script/snow/navysnow.js"type="text/javascript">
</script>

12. Efek salju maroon
<script language="javascript"src="http://rikz.mobie.in/script/snow/maroonsnow.js"type="text/javascript">
</script>

13. Efek salju olive
<script language="javascript"src="http://rikz.mobie.in/script/snow/olivesnow.js"type="text/javascript">
</script>

14. Efek salju orange
<script language="javascript"src="http://rikz.mobie.in/script/snow/orangesnow.js"type="text/javascript">
</script>

15. Efek salju pink
<script language="javascript"src="http://rikz.mobie.in/script/snow/pinksnow.js"type="text/javascript">
</script>

16. Efek salju ungu
<script language="javascript"src="http://rikz.mobie.in/script/snow/purplesnow.js"type="text/javascript">
</script>

17. Efek salju silver
<script language="javascript"src="http://rikz.mobie.in/script/snow/silversnow.js"type="text/javascript">
</script>

18. Efek salju teal
<script language="javascript"src="http://rikz.mobie.in/script/snow/tealsnow.js"type="text/javascript">
</script>

19. Efek salju kuning
<script language="javascript"src="http://rikz.mobie.in/script/snow/yellowsnow.js"type="text/javascript">
</script>

20. Efek bunga sakura
<script language="javascript"src="http://rikz.mobie.in/script/sakura.js"type="text/javascript">
</script>

Read more »

Layout Blog dengan Photoshop

Pada artikel ini akan diuraikan langkah-langkah membuat layout blog dengan Photoshop 7.0. Maka pastikan software tersebut sudah terinstal di komputer yang akan digunakan untuk tutorial kali ini. Dan kemudian mengenal lembar kerjanya, yang secara sederhana dapat dilihat disini.

Setiap layer diberi nama dengan maksud memudahkan penunjukan objek dalam editing. Dan pastikan layer yang akan diubah dalam keadaan aktif (diklik atau dipilih).

Berikut langkah-langkah lengkapnya
1 - New Layout
Jalankan program Photoshop dan buat layout.
Klik menu File -> pilih New atau langsung Ctrl+N.

2 - Setting Layout
Pada jendela New yang tampil, setting/ubah bagian Preset Size dengan Custom,
Width 730 pixel, Height 500 pixel, Resolution 72 pixel/inchi, Mode RGB Color
dan Contents White.

3 - Aktifkan Perangkat
Setelah Editing Area baru muncul, pastikan Toolbox, Layers Pallet, Options dan
Rulers aktif. Jika tidak, aktifkan dengan cara klik Menu Windows lalu pilih
Tools, Options dan Layers. Untuk Rules tekan Ctrl+R.

4 - Ganti Warna
Ubah warna Contens yang semula putih menjadi warna biru dengan kode warna #2B4C8D. Caranya klik Set Foreground Color di Toolbox sehingga muncul jendela Color Picker. Disini bisa dipilih warna sesuai selera, namun pada turorial kali ini langsung masukkan kode warna tadi (2B4C8D tanpa ‘#’) pada bagian box bawah yang di depannya bertanda ‘#’ lalu enter atau klik OK.

5 - Warna Background
Aktifkan icon Paint Bucket Tool (gambar ember cat) di Toolbox. Jika tidak terlihat, klik tahan icon Gradient Tool di Toolbox hingga muncul icon dimaksud lalu pilih. Setelah kursor berganti icon Paint Bucket Tool, arahkan ke Editing Area yang masih berwarna putih kemudian klik sekali sampai warna biru menggantikannya. Klik dua kali pada nama layer background untuk mengubah nama layer menjadi ‘back’.

6 - Layer Baru
Buat layer baru berwarna putih dengan cara klik icon Create a New Layer di bagian bawah Layers Pallet. Ubah nama ‘Layer 1′ menjadi ‘main back’ dengan klik dua kali pada Layer 1 dan ketik nama penggantinya.

Kemudian pilih Menu Edit lalu klik Fill untuk memberi warna putih pada ‘main back’. Di bagian contens jendela Fill yang muncul, pilih ‘white’ lalu enter atau OK.

7 - Mengubah Ukuran Objek
Main back akan diperkecil pada bagian kanan dan kirinya sedikit untuk membedakan background atau area body yakni warna biru dan background atau area main yang berwarna putih. Pastikan layer ‘main back’ aktif (klik layer dimaksud untuk mengaktifkannya), lalu tekan Ctrl+T. Tarik sedikit ke bagian dalam kotak kecil resize untuk bagian kanan dan kiri, hingga back biru terlihat. Setelah dirasa cukup, tekan enter untuk mengakhiri resize.

8 - Style Outer Glow
Layer ‘main back’ masih aktif, pilih Menu Layer lalu Layer Style dan klik Outer
Glows. Style ini akan memberikan kesan berkilau pada kanan dan kiri background putih (main back). Jendela Layer Style terbuka, klik kotak kuning di bagian Structure dan pilihlah warna putih lalu OK. Masih di bagian Structure, Opacity 100% dan Noise 0%. Pada bagian Elements, Technique Softer, Spread 2% dan Size 9%.

Berexplorasilah pada setiap bagian untuk mencoba mendapatkan hasil atau tampilan yang berbeda. Setelah yakin dengan hasil akhir tekan enter atau OK.

9 - Retangle Tool
Klik icon Retangle Tool pada Toolbox lalu klik box color di bagian Options untuk menset warna biru muda (D8E3FA). Kemudian buat kotak persegi panjang untuk header dengan cara tempatkan pointer yang berbentuk plus (+) di sudut awal persegi panjang yang akan dibuat, lalu klik tahan dan drag ke ujung sudut persegi panjang. Ukuran lebar bisa sesuai selera. Terlihat di Layers Pallet terbentuk layer baru bernama ‘Shape 1′. Ubah nama layer menjadi ‘h-top’ untuk menandakan kotak header bagian atas.

10 - Duplikasi Layer
Dengan ukuran panjang dan warna yang sama, akan dibuat retangle tool di bagian bawah untuk footer. Bisa saja dilakukan cara yang sama seperti langkah ke-9, namun dengan cara lain yang lebih cepat bisa dilalukan duplikasi layer. Aktifkan layer ‘h-top’ lalu klik tahan dan drag/tarik ke arah icon Create a New Layer di bagian bawah Layers Pallet.

Layer baru bernama ‘Shape h-top copy’ ubah namanya menjadi ‘h-bot’. Pastikan
layer ‘h-bot’ aktif dan pointer ganti bentuk icon Move Tool di Toolbox, lalu
tarik atau pindahkan shape ‘h-bot’ ke bagian bawah pada posisi footer. Perkecil
ukuran tingginya dengan cara Ctrl+T dan resize atas atau bawah secukupnya lalu
akhiri enter atau OK.

11 - Custom Shape Tool
Photoshop menyediakan berbagai bentuk simbol atau ornamen yang bisa digunakan untuk mempercantik layout atau keperluan visual lainnya. Tepatnya menyediakan 12 katagori Custom Shape seperti animal, nature, ornaments dan sebagainya. Koleksi bentuk-bentuk tadi bisa didapat melalui fasilitas icon Custom Shape Tool pada Toolbox.

Klik tahan icon Retangle Tool dan klik icon Custom Shape yang bergambar bintang. Atau cara lain, klik langsung icon Custom Shape ini pada Options dengan catatan icon Retangle Tool aktif.

Pada Options terdapat pilihan ‘Shape’, klik panah dropdown untuk melihat koleksi bentuk Costum Shape. Bentuk tapak kaki pada contoh tutorial ini tidak ditemukan?. Ok, setting standar memang hanya terdapat empat baris dan enam kolom bentuk dari Custom Shape. Untuk menampilkan semua atau 12 katagori Custom Shape caranya klik menu dropdown pada bagian Shape di Options, lalu klik panah kanan kecil yang terdapat pada pilihan bentuk. Kemudian pilih ‘All’ untuk sekaligus menampilkan Custom Shape. Pada pertanyaan yang muncul, jawab OK. Cari dan pilihlah bentuk tapak kaki kanan.

12 - Pengulangan
Sebelum membuat tapak kaki kanan pada editing area, ganti warna pada Color di bagian Options dengan warna biru tua senada background (2B4C8D). Setelah itu drag bentuk tapak kaki kanan pada posisi header area atau di atas ‘h-top’. Ukuran bisa diubah dengan cara Ctrl+T dan resize sesuai keinginan.

Ganti nama ‘Layer 1′ untuk bentuk tapak kaki kanan yang baru saja dibuat dengan nama ‘foot-a’. Lalu duplikasi layer ‘foot-a’ dan ganti nama layer ‘foot-a copy’ menjadi ‘foot-b’. Masih aktifkan layer ‘foot-b’, tarik/pindahkan ke arah kanan bawah pada bagian footer (lihat gambar). Perkecil ukurannya yang disesuaikan tinggi ‘h-bot’.

13 - Text
Membuat text ‘MY BLOG’ sebagai background penghias header. Klik icon Horizontal Type Tool (gambar letter ‘T’) pada Toolbox lalu klik pada Editing Area hingga kursor berganti garis panjang berkedip. Tuliskan MY BLOG lalu akhiri dengan klik icon Move Tool pada Toolbox.

Untuk memformat jenis font, ukuran, warna dan sebagainya, klik lagi gambar
letter ‘T’ pada Toolbox. Lihat bar Options, ubahlah jenis font dan ukuran sesuai
selera dan warna text sama dengan back (2B4C8D) lalu lihat perubahannya (Tutorial menggunakan Verdana uk.166pt).

Pindahkan text ‘MY BLOG’ ke bagian header area dengan mengaktifkan icon Move Tool terlebih dahulu. Kemudian sesuaikan ukurannya atau resize lebar dan tinggi) dengan ukuran ‘h-top’. Setelahnya, buat warna text menjadi sangat tipis (sedikit saja berbeda dari warna h-top) dengan cara klik box Opacity di Layers Pallet yang semula tertera 100%. Ganti angkanya menjadi 3%. Semakin kecil setting angkanya semakin transparant warna objek.

Ulangi langkah di atas untuk membuat judul blog pada header. Tutorial ini menggunakan judul ‘JEJAK LANGKAH’ dengan font Impact uk.30pt, warna #2B4C8D, Opacity 80%.

14 - Simpan File
Sebenarnya menyimpan file untuk layout ini jangan benar-benar dilakukan pada langkah akhir, tapi setiap saat perubahan layout. Kecewa sekali jika susah payah layout dibuat tapi sebelum disimpan terjadi mati listrik atau komputer bermasalah seperti hang misalnya. Simpanlah file dengan format PSD atau standar file Photoshop agar dilain waktu bisa dilakukan perubahan.

Tutorial selanjutnya adalah memotong-motong (slice-cut) layout yang sudah dibuat berdasarkan bagian-bagian blog seperti main, header dan footer.

Read more »

Membuat Tepi Gambar Bershadow Dengan CSS 3

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :

1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.

Read more »

Mengganti Background Blog Dengan CSS

Background atau latar belakang pada blog adalah bagian yang paling dasar pada blog, banyak template blog yang sama yang banyak dipakai, maka untuk memberi ciri khas pada blog Anda hal yang paling dasar dan yang paling mudah adalah mengganti warna background pada blog Anda atau dengan tambahan gambar pada background blog Anda.
Kali ini Saya akan menulis tutorial singkat blogspot tentang mengganti background dengan CSS, Mau tau caranya?
perhatikan dibawah ini.

Langkah pertama adalah masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Lalu cari CSS dari body seperti dibawah ini

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Kalau mau mencari CSS diatas perhatikan code yang berwarna hijau saja.

perhatikan Code CSS background diatas
$bgcolor adalah variabel definisi, jika Anda ingin menggantinya bisa dengan code warna misalnya ganti dengan warna putih code warnanya adalah : #FFFFFF atau warna hitam #000000. Atau warna yang lain bisa dilihat disini.


Mengganti background blog dengan gambar :

untuk membuat background gambar kita perlu sebuah gambar yang sudah diupload di hosting. Atau Anda bisa mencari di google image search dan copy URL gambarnya.
Kalu sudah tersedia gambar yang mau dijadikan background perhatikan dibawah ini.

background:#FFFFFF url(URL_GAMBAR) ;

URL_GAMBAR ini bisa Anda ganti dengan URL gambar yang Anda pilih misalnya gambar :



URLnya : http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg

Mengantur Background Gambar

background:#FFFFFF url(URL_GAMBAR) no-repeat top left;

no-repeat : berarti gambar didak akan mengulang, Bisa Anda ganti dengan

repeat : Mengulang-ulang gambar
repeat-x : mengulang secara horizontal
repeat-y : Mengulang secara vertikal

top left : Adalah posisi background bisa anda ganti misalnya bottom right

sedikit tambahan jika Anda mau mencari koleksi background

http://www.patterncooler.com/
http://www.bgpatterns.com/
http://patterns.ava7.com/

Nah sekian tutorial mengganti background blog, sedikit semoga membantu Anda.

Read more »