Efek Teks Beku Menggunakan Photoshop

Sebelum mulai buka Photoshopnya dulu. Oke, jika sudah mari kita mulai.

1. Klik New File, ukurannya terserah anda. Kalau saya biasa pake ukuran 800x600 untuk coba-coba.
2. Beri warna Background hitam menggunakan Paint Bucket.
3. Ketik teks dengan warna putih.
4. Beri efek Bevel and Emboss (size:25), cara memberi efeknya klik kanan pada layer, Blending Options, beri checklist di pilihan Bevel and Emboss, klik tulisan Bevel and Embossnya untuk mengeditnya.
5. Buat New Layer dan taruh di bawah Layer Text.
6. Klik Layer Text, tekan Ctrl + E untuk merge down.
7. Tekan Ctrl+M (Curves).
8. Atur seperti gelombang longitudinal. Caranya, beri 3 titik di garis yg lurus. Atur titik-titiknya menjadi :
titik A : 65 dan 191
titik B : 126 dan 81
titik C : 192 dan 221
Untuk contohnya lihat gambar dibawah ini.


9. Untuk Hue/Saturation tekan Ctrl+U dan tandai Colorize (Hue:200, Saturation:40, Lighting:0)
10. Beri efek Inner Glow (Warna biru, size:8).
11. Ctrl+klik di Layer Teks.
12. Klik Channel, klik Save Selection as Chanel, ada di pilihan tombol yg dibawah yg berbentuk lingkaran. Jika sudah akan muncul chanel Alpha 1.
13. Klik Alpha 1, lalu Ctrl+D.
14. Klik Filter, lalu Brush Stroke, Spatter (16,7).
15. Klik Filter, Artistic, Paint Daubs (8,7).
16. Ctrl+Klik di Alpha 1.
17. Klik Select, Modify, Contract (5 pixel).
18. Save selection as Chanel seperti tadi, akan muncul Alpha 2.
19. Klik Alpha 2, lalu Ctrl+D.
20. Klik Filter, lalu Brush Stroke, Spatter (16,7).
21. Klik Filter, Artistic, Paint Daubs (8,7).
22. Ctrl+klik di Alpha 2.
23. Klik Alpha 1, tekan delete, kemudian Ctrl+D.
24. Klik Image, Rotate Canvas, 90* CW.
25. Klik Filter, Stylize, Wind (From the Right). Lalu tekan Ctrl+F.
26. Klik Filter, Sketch, Plaster (20,2).
27. Klik Filter, Stylize, Wind (From the Right).
28. Klik Image, Rotate Canvas, 90* CCW.
29. Tekan Ctrl+klik di Alpha 1
30. Klik Layers, Create a new layer dan tekan Alt+Del.
31. Tekan Ctrl+D dan beri nama layer "Beku".
32. Tekan Ctrl+J (Duplicate Layer) dengan opacity 50 %.
33. Klik layer Beku.
34. Beri efek Drop Shadow. Hilangkan tanda Use Global Light, Angle:90, Distance:5, Spread:0, Size:0
35. Beri efek Bevel and Emboss. Size:7, Angle:90, beri warna abu-abu pada palette warna paling bawah.

Happy Blogging

Baca Selengkapnya »

Cara Mengubah/Mengganti Jenis Font di Blog Blogger (CSS Styling)

Terkadang, jenis font (font-family) bawaan template blog dirasa kurang sesuai dengan keinginan, sehingga kita harus mengubahnya dengan jenis-jenis font lain agar tampilan blog lebih bagus atau setidaknya sesuai dengan konteks/tema blog.

Pada kesempatan ini, saya terlebih dahulu akan membahas tentang penggantian jenis Font dengan CSS dan bukan dengan Custom Font, yang menggunakan javascript dan biasanya bersumber dari API Google. Penggantian font dengan CSS, meskipun sederhana tampilannya, namun cukup aman dan cepat di load, karena Browser dan Computer telah memiliki database font-font tersebut (disebut "Web Safe Fonts").

Sekilas Tentang Jenis Font (font family) dalam CSS

Jenis font dalam CSS dinyatakan dengan properti font-family. sehingga dalam penulisannya, deskripsi CSS font-family dituliskan seperti contoh berikut:

p {font-family: "Times New Roman";....;}

atau dipersingkat dengan shorthand (dituliskan dengan font saja):

p {font: "Times New Roman";....;}

Ada dua kategori jenis font:

a. Font family: Nama-nama utama (root name) font, misalnya "times", "arial", courier", dll.

b. Generic family: Nama-nama font turunan, misalnya "serif", "sans serif", "cursive", dll.

Penulisan font-family yang sering kita jumpai dalam CSS terdiri dari font-family dan generic family. Keduanya dituliskan berurutan dengan tujuan apabila sebuah font tidak tersedia dalam database suatu browser, maka browser akan merujuk pada jenis font lain yang telah dituliskan di belakangnya.

Contoh:

p {font-family:  "Times New Roman",Georgia,Serif;...;}

Note: perhatikan tanda kutip pada Times New Roman. Tanda kutip digunakan pada nama font yang memiliki jarak spasi kosong (white space). 

Selalu tuliskan CSS jenis font dengan aturan seperti di atas untuk berjaga-jaga apabila browser yang digunakan pengunjung tidak memiliki database font yang diinginkan, sehingga browser dapat langsung melompat ke jenis font lainnya.

Font Pada Template Blogger

Pada dasarnya font di dalam template Blogger ditentukan dengan CSS styling, sehingga jika harus mengubah jenis font, maka jelas perubahan dilakukan pada CSS-nya. Ada dua cara yang biasanya digunakan untuk membuat default font pada template Blogger:

1. Menuliskan variable CSS font untuk bagian-bagian (elements) tertentu, misalnya judul blog, deskripsi blog, judul posting, footer posting, footer, judul sidebar, dan seterusnya. Kemudian menuliskan variable tersebut pada font-family masing-masing elemen. Variable terletak di bagian atas CSS, biasanya setelah/dekat <b:skin><![CDATA[. Contoh variable-variable-nya:

.......................
<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 117% Arial, sans-serif" value="italic normal 80% Arial, sans-serif"
 >
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 180% Georgia, Times, serif" value="normal bold 142% Trebuchet, Trebuchet MS, Arial, sans-serif"
 >
.......................

Sebagai contoh, jika saya ingin untuk menyatakan jenis font yang dipakai dalam judul posting (header posting), saya menggunakan nama variable (name=) postTitleFont sebagai perwakilan jenis font pada properti font family nama blog yang telah dituliskan pada variable. Nama variable yang digunakan sebagai deklarator dituliskan dengan diawali tanda $:

.post h3 {font-family:  $postTitleFont;}

2. Menuliskan langsung jenis Font pada property-nya (font-family atau font). Contoh:
 .post h3 {font-family: "Georgia, times, serif;...;}

Dengan demikian poin serta cara untuk mengubah/mengganti jenis font di Blogger begitu mudah. Lanjut!

Mengubah Jenis Font di template Blogger/Blogspot

Sesuai dengan dua cara untuk menentukan font pada template Blogger di atas, maka pastinya cara untuk menggantinya pun ada 2, yaitu mengubah font pada variable atau langsung mengubah property font-family di setiap elemen. Mengubah variable sangat riskan karena ada nilai default dan value yang merupakan aturan general pada elemen-elemen utama blog.. Oleh karenanya, lebih baik ganti font langsung pada properti font family-nya. 

Cara mencari dan mengubah jenis font family pada setiap elemen CSS:

1. Buka Edit HTML/Template Blogger.

2. Cari elemen CSS yang ingin di ubah, letaknya antara <b:skin><![CDATA[ dan ]]></b:skin>.

3. Setiap elemen CSS di template Blogger memiliki nama berbeda sesuai yang telah diberikan oleh pembuatnya, tapi secara umum, nama-nama itu hampir mirip dan memiliki deklarator umum yang sama:

Misalnya: Untuk elemen judul posting, biasanya dituliskan dengan .post h3, .post h2, #post h3, #post h2, .h3, .h2, (h menyatakan header atau judul/title, berlaku pula untuk judul sidebar, dll), dan masih banyak lagi. Untuk isi posting biasanya dinyatakan dengan .post. Demikian dengan sidebar, ada banyak variasi namun dapat dipastikan semua mengandung kata yang sama: sidebar.

3. Setelah menemukan element yang dicari, selanjutnya cari property font-family atau font yang di belakangnya ada definisi font atau nama variable seperti contoh variable diatas. Ganti dengan jenis-jenis font baru pada bagian tersebut. Contoh:

.post h3 {font-family: Georgia, times, serif;...;}

Ganti bagian font yang berwarna biru dengan font-font lain.

atau biasanya juga ditampilkan dengan nama variable:

.post h3 {font-family:  $postTitleFont;}

Ganti bagian font yang berwarna biru dengan font-font lain.

4. Anda juga dapat menambahkan jenis font baru pada elemen yang belum memiliki aturan font-family.

Misalnya. bagian comment blog saya belum memiliki aturan jenis font khusus, maka saya dapat menambahkan font-family/font di dalam aturan CSS-nya:

Sebelumnya: 

#comments {margin: 0px 0px 0px 0px; padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; border: 1px solid #ccc;background:#fff;}

Sesudahnya:

#comments {margin: 0px 0px 0px 0px;padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; font: "Times New Roman", Trebuchet, Serif; border: 1px solid #ccc; background:#fff;}

5. Untuk mengetahui jenis-jenis font, cek CSS Web Safe Fonts.
6. Setelah selesai mengubah atau menambah font, save template.

Jika ada problem atau pertanyaan lebih lanjut mengenai font, pengubahan font, serta elemen CSS blog yang belum diketahui, feel free to use the comment form below.

Happy Blogging

Baca Selengkapnya »

Cara Membuat Template di Blogger

Yak akhirnya jadi juga, seperti yang aku janjikan kemarin yaitu "Cara Membuat Template Blogger". Mulai dari mana ya? nnnngg.. :t ohya, tak jelasin dulu deh tentang artikel ini. Gini, dalam trik berikut, kita akan mencoba membuat template yang paling sederhana dan paling mudah. Sebenarnya dalam mebuat template di blogger harus mengerti tentang CSS dan HTML, tapi untuk kali ini kita hanya memerlukan sedikit kemampuan tersebut karena kita akan membuat template yang paling sederhana, tapi jangan salah walaupun caranya sederhana tapi hasilnya bisa sangat luar biasa, tergantung dari desainernya. Ok deh mulai aja deh ya, kayaknya udah pada nggak sabar nih.

Gini, cara termudah dalam membuat template blogger yaitu dengan mendownload sebuah template kemudian kita otak-atik sendiri, jadi kita tidak perlu membuat dari awal. Untuk bahan praktek kali ini kita coba memakai template yang aku dah pernah aku buat, downlad disini bahannya. Sebelum kita mulai gue saranin lo buat blog baru aja biar gak ngerusak blog asli kamu.

Tahap Desain

Template yang akan kita buat disini memiliki empat komponen utama yaitu Background, Header, Main dan Footer.

Jadi kamu harus membuat keempat komponen tersebut. Cara buatnya gimana? kamu harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
1. Buat desain seperti gambar diatas
2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
4. Kemudian potong-potong perbagian.
5. Untuk bagian Header motongnya harus full.
6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
7. Desain diatas kalo dipotong-potong akan menjadi seperti ini :

background
header
main
footer

8. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya di geocities atau Photobucket dll.

Nha modeng po ra?

Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. Ohya udah di download belum tadi bahanya, kalo belum download dulu diatas itu. Ok kita mulai:
1. Kembali ke blogger dan ke menu "Edit HTML".
2. Trus klik tombol "Brows" untuk mengupload template yg udah kamu donwload tadi.
3. Kemudian Cari kode seperti ini:

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://daltrikblog.co.cc/template/bg.jpg') repeat-x top left; }
4. Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
5. Cari kode seperti ini :

#center {background: #ffffff url('http://daltrikblog.co.cc/template/main.jpg') repeat-y top center;}

6. Ganti text yang dicetak tebal dengan lokasi gambar main kamu.
7. Cari kode seperti ini:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://daltrikblog.co.cc/template/head.jpg') no-repeat top center; }

8. Ganti text yang dicetak tebal dengan gambar header.
9. Cari kode seperti ini:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://daltrikblog.co.cc/template/foot.jpg') repeat-y top center; }

10. Ganti text yang dicetak tebal dengan gambara foter.
11. Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://daltrikblog.co.cc/template/head.jpg') no-repeat top center; }

kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://daltrikblog.co.cc/template/foot.jpg') no-repeat top center; }

kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
13. Kalo sudah di Save.

:f akhirnya selesai juga aku buat artikel tentang pembuatan template, capek ya? tapi ingat sekali lagi ini adalah metode membuat template yang mudah dan sederhana, jadi sebenrnya isi dari template lebih rumit lagi, munkin kapan-kapan akan kita bahas detail dari bagian-bagina template tersebut.
OK SELAMAT BERJUANG......

Happy Blogging

Baca Selengkapnya »

Cara membuat game sendiri | game maker download

Apakah kamu suka bermain game dan salah satu penggila berat game-game, jika ya pernahkah berfikir bagaimana membuat game sendiri dan kemudian memainkannya? Sulit da repot ya apalagi bagi seorang yang buta akan bahasa pemograman seprti saya, tapi sekarang semua itu bisa teratasi jika memang ada kemauan bahkan tanpa harus mengerti bahasa pemograman, jawabannya yaitu Game maker! 

ya...game maker yaitu suatu software untuk membuat game dengan mudah kita tinggal menentukan settting dan jenis game terserah yang kita mau mulai 2D, 3D, Petualangan, strategi dan lainnya,

Jika kamu tertarik membuat game sendiri silahkan download softwarenya dibawah ini!
Download Game Maker gratis

Versi : 08
Ukuran file : 9.5 mb

• dengan game maker kamu bisa membuat game petualangan sendiri 3D ataupun 2D
• cocok untuk kamu yang berjiwa seni
• ada banyak sampel game yang disediakan seperti 1945 sudoku dan yang lain
• dengan sistim pengoprasian yang mudah
• download dan install kemudian jalankan programnya untuk segera membuat game sendiri.
• mainkan game buatan kamu dan nikmati hasilnya karya kamu sendiri

Happy Blogging

Baca Selengkapnya »

cari uang mudah gan,,

ga nyangka kemaren bener2 gw dpet program internet berhasil ngasih duit beneran cuma dengan isi survey mereka,,coba deh gw recomended bgt program ini,,belum dapet banyak c,tapi gw uda ketarik 50rb dalam 2 hari,cuma modal online,kalo ada pertanyaan gw bantu,daftar via gw ya,bener dah 2 hari doang dapet 50rb,cuma isi2 survey.. daftar disini ya,gw bantu juga kalo bingung narik duitnya 
 http://id.ipanelonline.com/register.html?inviter_id=1146342
setelah daftar,aktivasi email anda(dalam email),lalu lihat indonesia survey center,kerjakan salah satu,,,lalu poin sudah anda dapatkan...
ingat habis kerjakan jangan lagsung ditutup,tp coment dahulu 
ane jelasin disini agan cuma isi - isi survey doank trus ntar kita dapet point dari tiap survey yang kita lakukan. nah point itu lah yang nantinya kita tuker jadi duit.

mudahkan. untuk join langsung http://id.ipanelonline.com/register.html?inviter_id=1146342
berikut ane jelasin sedikit tentang IPANELONLINE :

1.ipanelonline merupakan perusahaan jasa survey. Kl ada perusahaan besar yg mau cek tingkat kepuasan konsumen terhadap barang yg mereka jual, mereka minta bantuan iPanel Online untuk survey.

2. iPanelonline bukan perusahaan MLM dan tidak memungut bayaran sepersen pun.

3.kita cukup mengisi survey yang ada di dalam ipanelonline dan akan mendapatkan poin. jumlah poin ini berbeda-beda tergantung kebijakan dari ipanelonline sendiri. poin mulai dari 5-500

4. kalau poinnya sudah mencapai minimal transfer, kita bisa transfer poin menjadi uang. kriteria poinnya
220 =20rb
520 = 50rb
1020 = 100rb
gampang cara nariknya gannn 

Happy Blogging

Baca Selengkapnya »

Tutorial Membuat Background Pada Flashdisk atau Folder Drive

Anda pernah melihat Salah satu drive milik komputer teman anda memiliki background yang unik dengan gambar gambar yang menarik,…?
atau juga pada flash disk teman yang anda pinjam???
Tentu kita bertanya bagaimana sih caranya…..?
enak kalo teman kita itu mau kasih tau …klo gak bete sekali bukan….
Sebenarnya mudah sekali caranya untuk membuatnya…
klo teman kita ntuh gak mao kasih tau yah udah nih saya kasih tau caranya….

Langkah-langkah yang harus dilakukan :
1. Siapkan gambar yang paling kamu suka buat dipajang, contoh seperti : bunga.jpg
klo bisa ubah namanya menjadi lebih pendek biar tidak terlalu panjang nulisnya.
2. Letakkan file gambar tadi di root harddisk kamu atau flashdisk seperti c:\ atau namaflashdiskmu:\
3. buka editor teks yang paling kamu suka, kayak notepad (disaranin pake ini deh), Wordpad, Word, Notepad++ de el el.
4. klo sudah ketikkan kode ini di editor kamu :
[{BE098140-A513-11D0-A3A4-00C04FD706EC}]
IconArea_Text=0×000000
IconArea_Image=namafilegambarkamu.jpg
Catatan:
IconArea_Image= ini diisi dengan nama file gambar kamu seperti: bunga.jpg / bunga.gif / bunga.png / bunga.bmp
disarankan pake yg format *.jpg saja, karena kompresi lebih baik tanpa mengurangi kualitas gambar.
contoh : disini penulis menggunakan bunga.jpg
[{BE098140-A513-11D0-A3A4-00C04FD706EC}]
IconArea_Text=0×000000
IconArea_Image=bunga.jpg
IconArea_Text= ini biarkan saja, ini diubah jika kamu mau ganti warna huruf nya nanti.
5. Simpan kode tadi dengan nama desktop.ini dan letakkan pada root folder flashdisk atau harddisk kamu yang mau kamu ubah nantinya.
6. Selesai….coba refresh deh….wala jadi deh…….
Ini skren syut nya ….yang udah jadi


Untuk mengganti warna huruf dapat mengubah kode dari :
IconArea_Text=0x000000
Silahkan kamu ubah nilai yang berwarna merah tersebut sesuka hati kamu deh, sambil bereksperimen, tapi jangan lupa backup dulu kode sebelumya, biar gak jadi berantakan hehehehe .
Penulis belum pernah mengubah 0x karena klo diubah sama saja kayaknya.
Klo kamu males nih saya kasih deh kode warnanya, silakan kopas (kopi paste) 6 buah nilai ini ke kode tadi:
CATATAN
——–
O = Huruf O
0 = Angka nol
Jangan salah OKe!!
IconArea_Text=0x____ (pilih salah satu warna pilihan ini,ingat “0x” jangan dihapus,kecuali untuk nilai angka baru dihapus)
FF00FF = Jingga / ungu
FF33FF = ungu terang
FF91FF = Ungu muda
FF62EE = Ungu sedang
d800e6 = Ungu gelap
9900cc
FFFF4B = Biru muda
FFFF81 = bIRU muda
33FF = Merah
33FFF4 = Kuning
00FFFF = Kuning sedang
51B11B = Hijau gelap
10BB61 = Hijau gelap2
00cc33
80FCA4 = Hijau muda
00FF00 = Hijau terang
DF280F = Biru tua
ff4321 = Biru terang
FF0000 = Biru
FFOOOO = Merah terang (O = BUKAN NOL)
8CCBDD = Coklat muda
140,203,221 = Coklat tua
Sebenarnya masih banyak lagi sih kodenya, tapi ini warna dasar saja, silakan kamu coba ubah sendiri ntar juga bisa. Saya menggunakan program Dot Color 3.0 untuk mencari kode warna, kamu bisa gunain color picker yang kamu suka , tergantung kesukaan anda deh…hehehe


Happy Blogging

Baca Selengkapnya »

Cloning Hard Disk

Cloning hard disk berbeda dengan cloning PC. Proses cloning hard disk dilakukan dengan menduplikasi data secara utuh dari satu hard disk ke hard disk yang lain. Misanya harddisk A telah berisi program lengkap dan hardisk B masih kosong. Dengan melakukan cloning, isi harddisk B akan sama persis dengan hardisk A. Adapun 3 Cara dalam mencloning hardisk sebagai berikut :

1. Melalui Command Prompt

a) Partisi dan format hardisk tujuan yang akan anad isi. Membuat partisi dan memformat hardisk baru. Ini merupakan langkah awal sebelum melakukan prosess duplikat hardisk.

b) Pasang kedua hardisk dan set status kedua hardisk tersebut. Atur jumper yang berda di bagian belakang kedua hardisk tersebut. Satu hardisk padda posisi master (hardisk sumber) dan harddisk baru sebgai slave hardisk target.

c) Masuk ke command Prompt dengan mengklik Start > All Program > Accessories > Command Prompt.

d) Ketikan XCOPY c: d: /c /h /r /s /k dikikuti dengan menekan Enter.

2. Melalui Windows Explorer

a) Partisi dan format hardisk tujuan yang kan anda isi.

b) Pasang kedua hardisk dan atur status kedua hardisk tersebut sperti di atas.

c) Jalnkan Windows Explorer dan tampilkan semua file yang tersembunyi pada Windows Explorer dengan mengkilk menu Tools > Folder Options. Kklik tombol View, beri tanda pada pilihan Show pada Hidden Files Adn Folders. Klik Apply > OK.

d) Pilih seluruh file dan folder pada hardisk sumber kecuali folder windows. Klik Edit . Copy.pindah ke harddisk kedua (target) dan pilih Edit > Paste.

e) Buat Folder baru dengan nama Windows pada hardisk target. Buka folder Windows pada hardisk sumber, kemudian pilih semua file dan folder kecuali File Win386.swp.

3. Melalui Norton Ghost 2003

Happy Blogging

Baca Selengkapnya »

Register | Login | Logout Script

Saya yakin teman-teman sekalian pasti sudah tahu tentang Register, login, dan logout. Atau
mungkin juga ada sebagian teman yang belum terlalu paham. Baiklah, Saya akan menjelaskan secara
singkat saja yah.. Biasanya pada saat kita memasuki sebuah situs, kita diwajibkan untuk login
terlebih dahulu. Tetapi sebelum login, kita harus mendaftar dulu nama, email, dan password yang
kita inginkan untuk login nantinya. Baiklah, saya akan langsung menjelaskan scriptnya.
Dalam contoh kali ini, saya membuat register, login, dan logout dalam 6 buah script.

Yakni :

1. Index.php
2. Config.php
3. Daftar.php
4. Daftar2.php
5. Login.php
6. Dan logout.php

Pertama -tama yang harus dilakukan tentu saja adalah membuat database-nya terlebih dahulu.
Buatlah database dengan nama ?reglog?. Lalu buat table dengan nama ?members?. Lalu masukkan
field berikut:
?Id? type = bigint(20)
?nama? type = varchar(50)
?email? type = varchar (50)
?password? type = varchar(8)
Jika sudah, masukkan script berikut :
Ini untuk mengkoneksikan dengan database…

Config.php

<?php
$host = “localhost”;
$user = “root”;
$pass = “”;
$db = “reglog”;
$table = “members”;
$connect = mysql_connect($host,$user,$pass) or die(“Gagal konek”);
$pilih_db = mysql_select_db($db) or die(“Database tidak ada”);
$cookie_nama = $_COOKIE['nama'];
?>

Index.php

<?php
include(“config.php”);
?>
<?php
if($_GET['register'])
{
include(“daftar.php”);
exit;
}
?>
<?php
if($_GET['register2'])
{
include(“daftar2.php”);
exit;
}
?>
<?php
if($_GET['login'])
{
include(“login.php”);
exit;
}
?>
<style type=”text/css”>
<!–
.style1 {color: #FFFFFF}
.style2 {color: #0000FF}
–>
</style>
<p>
<?php
if($_GET['logout'])
{
print “Anda telah berhasil logout !<p>”;
}
?>Welcome
<?php
$cookie_nama = $_COOKIE['nama'];
print “$cookie_nama”;
?> [<a href="logout.php" class="style2">Logout</a>] </p>
<p>Klik <a
href=”index.php?register=masukkan%20nama,email,dan%20password%20untuk%20daftar”
class=”style2″>disini</a> untuk register </p>
<form name=”form1″ method=”post” action=”index.php?login=success”>
<table width=”400″ border=”0″>
<tr bgcolor=”#999999″>
<td colspan=”2″><span class=”style1″>Login</span></td>
</tr>
<tr bgcolor=”#CCCCCC”>
<td>User : </td>
<td><input name=”user” type=”text” id=”user”></td>
</tr>
<tr bgcolor=”#CCCCCC”>
<td>Password : </td>
<td><input name=”password” type=”password” id=”password”></td>
</tr>
<tr>
<td colspan=”2″> </td>
</tr>
<tr>
<td colspan=”2″><input type=”submit” name=”Submit” value=”Login !”
style=”background -color:#CCCCCC “></td>
</tr>
</table>
</form>
<p> </p>
<?php mysql_close($connect); ?>

Daftar.php

<style type=”text/css”>
<!–
.style3 {font-size: 24px}
–>
</style>
<form name=”form1″ method=”post” action=”index.php?register2=success”>
<table width=”400″ border=”0″>
<tr>
<td colspan=”2″><span class=”style3″>Register</span></td>
</tr>
<tr>
<td>Nama : </td>
<td><input name=”nama” type=”text” id=”nama”></td>
</tr>
<tr>
<td>Email : </td>
<td><input name=”email” type=”text” id=”email”></td>
</tr>
<tr>
<td>Password : </td>
<td><input name=”password” type=”password” id=”password”></td>
</tr>
<tr>
<td >Confirm Password : </td>
<td><input name=”c_password” type=”password” id=”c_password”></td>
</tr>
<tr>
<td colspan=”2″> </td>
</tr>
<tr>
<td colspan=”2″><input type=”submit” name=”Submit” value=”Register”></td>
</tr>
</table>
</form>
<?php mysql_close($connect); ?>

Daftar2.php

<?php
$nama = $_POST['nama'];
$email = $_POST['email'];
$password = $_POST['password'];
$c_password = $_POST['c_password'];
if($password != $c_password)
{
print “<script>alert(‘Konfirmasi password harus sama dengan password !’);
javascript:history.go(-1);</script>”;
exit;
}
if((!empty($nama)) && (!empty($email)) && (!empty($password)))
{
$query = mysql_query(“INSERT INTO $table (nama,email,password)
values (‘$nama’,'$email’,'$password’);”);
print “Registrasi success<br><a href=index.php><font color=blue>Back to
Home</font></a>”;
}
else
{
print “<script>alert(‘Maaf, tidak boleh ada field yang kosong !’);
javascript:history.go(-1);</script>”;
}
?>
<?php mysql_close($connect); ?>

Login.php

<?php
$user = $_POST['user'];
$password = $_POST['password'];
$query = mysql_query(“SELECT * FROM $table where nama=’$user’”);
$result = mysql_fetch_array($query);
$row = mysql_num_rows($query);
if(($user == “”) && ($password == “”))
{
print “<center>Anda belum memasukkan username dan password !”;
exit;
}
if($row != 0)
{
if($password != $result['password'])
{
print “<center>Password salah !”;
}
else
{
setcookie(“nama”,$user);
print “<center>Anda telah berhasil login dengan nama
$user<br><a href=index.php><font color=blue>Back to home</a>”;
}
}
else
{
print “<center>Maaf, Username tidak terdaftar !<br>Silahkan daftar dulu
<a href=’index.php?register=masukkan nama,email,dan password untuk daftar’><font
color=blue>disini</a></font>”;
}
?>
<?php mysql_close($connect); ?>

Logout.php

<?php
setcookie(“nama”,”");
header(“Location: index.php?logout=success”);
?>

Notes :
Bila anda berhasil, maka pada saat anda telah mendaftar dan login sebagai nama yang anda daftarkan,
maka pada halaman index akan tampil nama anda disamping teks welcome.
Happy Blogging

Baca Selengkapnya »

Membuat Judul Blog Berjalan (Marquee Title)

Pada postingan kali ini mencoba membuat judul blog berjalan, mungkin tema kali ini bukan hal asing buat para blogger, namun saya mencoba menghadirkannya untuk menambah referensi para blogger pemula, maklumlah saya juga pemula di dunia blogger ini.

Oke langsung ke TKP, adapun cara membuat judul blog berjalan ( marquee ) seperti ini :
- Login ke Blogger
- Masuk ke Layout/Tata Letak
- Terus menuju Edit HTML
- Cari code ini <head>
- Copy code dibawah ini dan letakkan dibawah code <head>

<script language='JavaScript'>

var txt="...::: www.dalmgl.com :::...";
var kecepatan=300;var segarkan=null;function bergerak() { document.title=txt;

txt=txt.substring(1,txt.length)+txt.charAt(0);

segarkan=setTimeout("bergerak()",kecepatan);}bergerak();

</script>

- Ganti Tulisan berwarna merah dengan Judul Blog anda
- Ganti Angka berwarna merah sesuai kecepatan yg anda inginkan
- Simpan hasil kerja anda
- Lihat hasilnya

Semoga bermanfaat
Terima Kasih
 
Happy Blogging

Baca Selengkapnya »

Cara Menggunakan Gambar Latar Belakang Untuk Blog Anda

Alih-alih warna latar belakang yang sederhana, Anda bisa menggunakan gambar latar belakang untuk blog Anda. Hal ini dapat ditata untuk melihat seperti wallpaper, bisa mengulang hanya secara vertikal maupun horizontal, dan bahkan dapat berada dalam posisi tetap di mana ia tetap di tempat sementara sisa gulungan halaman bawah!

Dalam posting ini, saya akan menjelaskan bagaimana Anda dapat menggunakan gambar latar belakang untuk blog Anda menggunakan metode yang berbeda, dengan contoh untuk menunjukkan bagaimana berbagai efek dapat dicapai.

Anda dapat menggunakan hampir semua gambar sebagai latar belakang untuk blog Anda. Biasanya gambar latar belakang dalam format JPEG, meskipun Anda juga bisa menggunakan itu GIF, atau BMP. Namun, Anda harus dapat host gambar pada server eksternal, seperti Blogger hanya host gambar yang terkandung dalam widget atau posting.

Sebelum Anda mulai menambahkan foto ke latar belakang Anda, mencari gambar yang ingin Anda gunakan, dan membuat catatan dari url mana host.

Seperti yang saya sebutkan dalam pengantar, ada beberapa cara yang berbeda Anda dapat menggunakan gambar latar belakang. Di sini saya akan menjelaskan:

Cara membuat mengulang gambar di seluruh halaman (seperti wallpaper)
Bagaimana membuat latar belakang mengulang secara vertikal ke bawah halaman
Bagaimana membuat latar belakang mengulang horizontal di halaman
Cara membuat gambar latar yang tetap (yang tidak gulir dengan sisa halaman

Semua metode yang mungkin dalam Blog Blogger, dan cukup sederhana untuk mencapainya.

Bagaimana membuat membuat mengulang gambar di seluruh halaman (seperti wallpaper)

Ini adalah sederhana dari semua efek latar belakang untuk mencapai. Kebanyakan orang memilih untuk menggunakan gambar kecil yang ubin mulus. Hal ini memastikan bahwa beban halaman lebih cepat, karena gambar memiliki ukuran file kecil.
Anda dapat dengan mudah menemukan gambar tersebut untuk latar belakang Anda dengan melakukan pencarian Google untuk latar belakang tileable , atau bahkan bisa membuat sendiri.
Saya membuat gambar ini sederhana untuk digunakan sebagai contoh, meskipun Anda bisa saja dengan mudah menggunakan gambar lainnya:

Untuk membuat gambar ini latar belakang keramik untuk blog Anda, pergi ke template> edit html dan mencari properti styling untuk tubuh dari blog Anda, yang harus terlihat seperti contoh di bawah ini:

   body {
   latar belakang: $ bgcolor;
   margin: 0;
   warna: $ textcolor;
   font: x-kecil Arial sans-serif;
   font-size / * */:/**/ kecil;
   font-size: / ** / kecil;
   text-align: center;
   }

Kita perlu mengedit garis disorot dalam huruf tebal, yang mana kita mendeklarasikan properti latar belakang blog. Untuk menambahkan gambar mengulangi ke latar belakang, kita hanya menambahkan berikut (disorot dalam warna merah) untuk sifat tubuh:

   body {
   background: url (http://www.imagehost.com/yourimage.jpg);
   margin: 0;
   warna: $ textcolor;
   font: x-kecil Arial sans-serif;
   font-size / * */:/**/ kecil;
   font-size: / ** / kecil;
   text-align: center;
   }

Dimana URL gambar sesuai dengan lokasi URL gambar Anda latar belakang.
Ini akan membuat gambar latar belakang mengulang di seluruh halaman,

Cara membuat gambar latar belakang mengulang secara vertikal ke bawah halaman.

Hal ini melibatkan penambahan sedikit berbeda dari kode pada template Anda, tetapi pada dasarnya prinsip yang sama. Sekali lagi Anda harus menemukan "tubuh" deklarasi gaya dalam template Anda dan menambahkan url untuk gambar latar belakang Anda. Juga, Anda perlu menyatakan bahwa latar belakang akan mengulangi pada "y" (vertikal)

   body {
   background: url (http://www.imagehost.com/yourimage.jpg) repeat-y;
   margin: 0;
   warna: $ textcolor;
   font: x-kecil Arial sans-serif;
   font-size / * */:/**/ kecil;
   font-size: / ** / kecil;
   text-align: center;
   }

Cara membuat mengulangi gambar latar belakang horizontal di halaman.

Hal ini sangat mirip dengan metode yang kita digunakan untuk ubin gambar vertikal. Namun, kali ini kita memberitahu browser untuk mengulang gambar pada "X" (horisontal).

   body {
   background: url (http://www.imagehost.com/yourimage.jpg) repeat-x;
   margin: 0;
   warna: $ textcolor;
   font: x-kecil Arial sans-serif;
   font-size / * */:/**/ kecil;
   font-size: / ** / kecil;
   text-align: center;
   }

Cara membuat gambar latar tetap .

Biasanya gambar yang lebih besar digunakan untuk metode ini, jadi untuk contoh ini kita akan menggunakan gambar berikut dari.

Untuk memastikan hal ini gambar latar belakang tidak mengulang, kita perlu menambahkan "tidak mengulang-" deklarasi ke properti latar belakang. Juga, kita perlu menambahkan pernyataan bahwa lampiran latar belakang tetap, sehingga latar belakang tidak bergerak dengan halaman. Di sini sekali lagi adalah contoh dari apa yang kode Anda harus terlihat seperti, dengan perubahan disorot dalam warna merah:

body {
background: url (http://www.imagehost.com/yourimage.jpg) no-repeat;
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;

background-attachment: fixed}

Untuk memastikan hal ini gambar latar belakang tidak mengulang, kita perlu menambahkan "tidak mengulang-" deklarasi ke properti latar belakang. Juga, kita perlu menambahkan pernyataan bahwa lampiran latar belakang tetap, sehingga latar belakang tidak bergerak dengan halaman. Di sini sekali lagi adalah contoh dari apa yang kode Anda harus terlihat seperti, dengan perubahan disorot dalam warna merah:

body {
background: url (http://www.imagehost.com/yourimage.jpg) no-repeat;
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;
background-attachment: fixed}

Anda dapat menambahkan warna juga!

Kecuali Anda ubin gambar latar belakang Anda di seluruh halaman, Anda akan ditinggalkan dengan daerah putih kosong. Untuk mengisi bidang ini dengan warna pilihan Anda, Anda juga harus menambahkan warna pada properti background.
Jika Anda sudah memiliki "$ bgcolor" variabel dalam template blog Anda, Anda hanya dapat menambahkan variabel ini ke properti latar belakang, seperti ini:

background: $ bgcolor url (http://imagehost.com/yourimage.jpg) repeat-x;

Namun, jika Anda tidak memiliki variabel ini dalam template Anda, atau malah lebih memilih untuk menyatakan warna sendiri, Anda dapat melakukannya dengan menggunakan nilai Hex untuk warna yang Anda ingin ditampilkan. Ada sebuah kalkulator warna berguna dalam bagian alat yang dapat menghasilkan nilai-nilai hex membutuhkan. Berikut adalah contoh bagaimana Anda dapat mendeklarasikan nilai hex untuk warna di latar belakang Anda:

background: # ff0000 url (http://imagehost.com/yourimage.jpg) repeat-x;

Cara membuat mengulangi gambar latar belakang horizontal di halaman

Hal ini sangat mirip dengan metode yang kita digunakan untuk ubin gambar vertikal. Namun, kali ini kita memberitahu browser untuk mengulang gambar pada "X" (horisontal) sumbu, seperti ini:

   body {
   background: url (http://www.imagehost.com/yourimage.jpg) repeat-x;
   margin: 0;
   warna: $ textcolor;
   font: x-kecil Arial sans-serif;
   font-size / * */:/**/ kecil;
   font-size: / ** / kecil;
   text-align: center;
   }

Untuk memastikan hal ini gambar latar belakang tidak mengulang, kita perlu menambahkan "tidak mengulang-" deklarasi ke properti latar belakang. Juga, kita perlu menambahkan pernyataan bahwa lampiran latar belakang tetap, sehingga latar belakang tidak bergerak dengan halaman. Di sini sekali lagi adalah contoh dari apa yang kode Anda harus terlihat seperti, dengan perubahan disorot dalam warna merah:

body {
background: url (http://www.imagehost.com/yourimage.jpg) no-repeat;
margin: 0;
warna: $ textcolor;
font: x-kecil Arial sans-serif;
font-size / * */:/**/ kecil;
font-size: / ** / kecil;
text-align: center;

background-attachment: fixed}

Dan di sini adalah contoh dari apa properti ini mencapai ( gunakan link ini untuk preview halaman penuh ):

Anda dapat menambahkan warna juga!

Kecuali Anda ubin gambar latar belakang Anda di seluruh halaman, Anda akan ditinggalkan dengan daerah putih kosong. Untuk mengisi bidang ini dengan warna pilihan Anda, Anda juga harus menambahkan warna pada properti background.

Jika Anda sudah memiliki "$ bgcolor" variabel dalam template blog Anda, Anda hanya dapat menambahkan variabel ini ke properti latar belakang, seperti ini:

background: $ bgcolor url (http://imagehost.com/yourimage.jpg) repeat-x;

Namun, jika Anda tidak memiliki variabel ini dalam template Anda, atau malah lebih memilih untuk menyatakan warna sendiri, Anda dapat melakukannya dengan menggunakan nilai Hex untuk warna yang Anda ingin ditampilkan. Ada sebuah kalkulator warna berguna dalam bagian alat yang dapat menghasilkan nilai-nilai hex membutuhkan. Berikut adalah contoh bagaimana Anda dapat mendeklarasikan nilai hex untuk warna di latar belakang Anda:

background: # ff0000 url (http://imagehost.com/yourimage.jpg) repeat-x;

Menggunakan gambar pertama sebagai contoh, ini akan menghasilkan latar belakang seperti ini:

Untuk Posisi gambar latar belakang .

Secara default, gambar latar belakang akan mulai di pojok kiri atas halaman, terlepas dari bagaimana Anda ingin gambar latar belakang untuk mengulangi (atau tidak) di halaman. Namun, Anda dapat menentukan di mana Anda ingin gambar yang akan ditempatkan dengan menambahkan beberapa variabel tambahan untuk spesifikasi latar belakang.

Berikut adalah contoh dari properti latar belakang bldy untuk menunjukkan di mana Anda dapat menempatkan variabel posisi:

background: # ffff00 url (http://imagehost.com/yourimage.jpg) posisi-variabel-di sini tidak mengulangi-;

Dan di sini adalah daftar dari variabel posisi yang dapat anda gunakan:
kiri atas
atas pusat
kanan atas
tengah kiri
pusat pusat
kanan tengah
kiri bawah
bawah pusat
kanan bawah

Jika Anda ingin posisi gambar tetap pada bagian tengah atas halaman misalnya, Anda bisa menggunakan kode berikut:

latar belakang; url (http://imagehost.com/yourimage.jpg) tidak mengulang-top center;

Hal ini juga memungkinkan untuk mengatur posisi awal dari gambar latar belakang menggunakan persentase pada sumbu X atau Y, atau dengan menentukan jarak dalam pixel dari atas atau kiri halaman. Namun, ini bisa agak rumit, dan karena orang menggunakan browser yang berbeda banyak dan resolusi layar saat browsing internet, ini dapat menyebabkan masalah serius untuk desain blog! Jika Anda masih ingin tahu lebih banyak tentang ini, saya akan merekomendasikan membaca informasi pada halaman latar belakang CSS di W3 sekolah .

Saya harap tutorial ini telah membantu Anda memahami cara menggunakan gambar latar belakang dalam blog Anda, dan mencakup seluruh aspek dari bagaimana efek yang berbeda dapat dicapai.
Selamat Mencoba....

Happy Blogging

Baca Selengkapnya »

MEMBUAT DROP CAP

Anda pasti sering melihat atau membaca sebuah artikel dimana huruf pertama pada awal artikel berupa huruf besar. Seperti huruf A pada kata Anda di awal artikel ini. Terlihat lebih menarik bukan? Fasilitas ini dinamakan Drop Cap. Ingin menerapkan pada postingan di blog anda? Ikuti langkah-langkah di bawah ini:

1. Login di blogger.com dengan user id anda
2. Masuk ke menu Layout atau Tata Letak, lalu pilih Edit HTML
3. Cari skrip seperti di bawah ini: .post {margin:0 0 ...;}
4. Ketik kode HTML di bawahnya .dropcaps { float:left; color:red; font-size:70px; line head:100px: padding-top:25px; padding-right:2px; }
5. Lalu klik SAVE TEMPLATE

Setelah itu, di dalam postingan, di depan huruf yang ingin anda perbesar, anda ketik: <span class="dropcaps"> </span> Contoh: <span class="dropcaps">A</span>nda pasti sering melihat atau membaca sebuah artikel dimana huruf pertama pada awal artikel berupa huruf besar... Setelah dipublish hasilnya seperti pada awal artikel ini. Mudah bukan? Selamat mencoba. 


Happy Blogging

Baca Selengkapnya »

Cara Mengubah/Mengganti Jenis Font di Blog Blogger (CSS Styling)

Terkadang, jenis font (font-family) bawaan template blog dirasa kurang sesuai dengan keinginan, sehingga kita harus mengubahnya dengan jenis-jenis font lain agar tampilan blog lebih bagus atau setidaknya sesuai dengan konteks/tema blog.

Pada kesempatan ini, saya terlebih dahulu akan membahas tentang penggantian jenis Font dengan CSS dan bukan dengan Custom Font, yang menggunakan javascript dan biasanya bersumber dari API Google. Penggantian font dengan CSS, meskipun sederhana tampilannya, namun cukup aman dan cepat di load, karena Browser dan Computer telah memiliki database font-font tersebut (disebut "Web Safe Fonts").

Sekilas Tentang Jenis Font (font family) dalam CSS

Jenis font dalam CSS dinyatakan dengan properti font-family. sehingga dalam penulisannya, deskripsi CSS font-family dituliskan seperti contoh berikut:

p {font-family: "Times New Roman";....;}

atau dipersingkat dengan shorthand (dituliskan dengan font saja):

p {font: "Times New Roman";....;}

Ada dua kategori jenis font:

a. Font family: Nama-nama utama (root name) font, misalnya "times", "arial", courier", dll.

b. Generic family: Nama-nama font turunan, misalnya "serif", "sans serif", "cursive", dll.

Penulisan font-family yang sering kita jumpai dalam CSS terdiri dari font-family dan generic family. Keduanya dituliskan berurutan dengan tujuan apabila sebuah font tidak tersedia dalam database suatu browser, maka browser akan merujuk pada jenis font lain yang telah dituliskan di belakangnya.

Contoh:

p {font-family:  "Times New Roman",Georgia,Serif;...;}

Note: perhatikan tanda kutip pada Times New Roman. Tanda kutip digunakan pada nama font yang memiliki jarak spasi kosong (white space). 

Selalu tuliskan CSS jenis font dengan aturan seperti di atas untuk berjaga-jaga apabila browser yang digunakan pengunjung tidak memiliki database font yang diinginkan, sehingga browser dapat langsung melompat ke jenis font lainnya.

Font Pada Template Blogger

Pada dasarnya font di dalam template Blogger ditentukan dengan CSS styling, sehingga jika harus mengubah jenis font, maka jelas perubahan dilakukan pada CSS-nya. Ada dua cara yang biasanya digunakan untuk membuat default font pada template Blogger:

1. Menuliskan variable CSS font untuk bagian-bagian (elements) tertentu, misalnya judul blog, deskripsi blog, judul posting, footer posting, footer, judul sidebar, dan seterusnya. Kemudian menuliskan variable tersebut pada font-family masing-masing elemen. Variable terletak di bagian atas CSS, biasanya setelah/dekat <b:skin><![CDATA[. Contoh variable-variable-nya:

.......................
<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 117% Arial, sans-serif" value="italic normal 80% Arial, sans-serif"
 >
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 180% Georgia, Times, serif" value="normal bold 142% Trebuchet, Trebuchet MS, Arial, sans-serif"
 >
.......................

Sebagai contoh, jika saya ingin untuk menyatakan jenis font yang dipakai dalam judul posting (header posting), saya menggunakan nama variable (name=) postTitleFont sebagai perwakilan jenis font pada properti font family nama blog yang telah dituliskan pada variable. Nama variable yang digunakan sebagai deklarator dituliskan dengan diawali tanda $:

.post h3 {font-family:  $postTitleFont;}

2. Menuliskan langsung jenis Font pada property-nya (font-family atau font). Contoh:
 .post h3 {font-family: "Georgia, times, serif;...;}

Dengan demikian poin serta cara untuk mengubah/mengganti jenis font di Blogger begitu mudah. Lanjut!

Mengubah Jenis Font di template Blogger/Blogspot

Sesuai dengan dua cara untuk menentukan font pada template Blogger di atas, maka pastinya cara untuk menggantinya pun ada 2, yaitu mengubah font pada variable atau langsung mengubah property font-family di setiap elemen. Mengubah variable sangat riskan karena ada nilai default dan value yang merupakan aturan general pada elemen-elemen utama blog.. Oleh karenanya, lebih baik ganti font langsung pada properti font family-nya. 

Cara mencari dan mengubah jenis font family pada setiap elemen CSS:

1. Buka Edit HTML/Template Blogger.

2. Cari elemen CSS yang ingin di ubah, letaknya antara <b:skin><![CDATA[ dan ]]></b:skin>.

3. Setiap elemen CSS di template Blogger memiliki nama berbeda sesuai yang telah diberikan oleh pembuatnya, tapi secara umum, nama-nama itu hampir mirip dan memiliki deklarator umum yang sama:

Misalnya: Untuk elemen judul posting, biasanya dituliskan dengan .post h3, .post h2, #post h3, #post h2, .h3, .h2, (h menyatakan header atau judul/title, berlaku pula untuk judul sidebar, dll), dan masih banyak lagi. Untuk isi posting biasanya dinyatakan dengan .post. Demikian dengan sidebar, ada banyak variasi namun dapat dipastikan semua mengandung kata yang sama: sidebar.

3. Setelah menemukan element yang dicari, selanjutnya cari property font-family atau font yang di belakangnya ada definisi font atau nama variable seperti contoh variable diatas. Ganti dengan jenis-jenis font baru pada bagian tersebut. Contoh:

.post h3 {font-family: Georgia, times, serif;...;}

Ganti bagian font yang berwarna biru dengan font-font lain.

atau biasanya juga ditampilkan dengan nama variable:

.post h3 {font-family:  $postTitleFont;}

Ganti bagian font yang berwarna biru dengan font-font lain.

4. Anda juga dapat menambahkan jenis font baru pada elemen yang belum memiliki aturan font-family.

Misalnya. bagian comment blog saya belum memiliki aturan jenis font khusus, maka saya dapat menambahkan font-family/font di dalam aturan CSS-nya:

Sebelumnya: 

#comments {margin: 0px 0px 0px 0px; padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; border: 1px solid #ccc;background:#fff;}

Sesudahnya:

#comments {margin: 0px 0px 0px 0px;padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; font: "Times New Roman", Trebuchet, Serif; border: 1px solid #ccc; background:#fff;}

5. Untuk mengetahui jenis-jenis font, cek CSS Web Safe Fonts.
6. Setelah selesai mengubah atau menambah font, save template.

Jika ada problem atau pertanyaan lebih lanjut mengenai font, pengubahan font, serta elemen CSS blog yang belum diketahui, feel free to use the comment form below.

Happy Blogging

Baca Selengkapnya »

Menbuat Efek Gitar sendiri

Selain main gitarnya sudah karatan, rupanya keterampilanku berelektronikaku pun sudah karatan. Sudah tidak seteliti, secermat & sesabar dulu lagi. Maklum, kedua hobi ini sudah kutinggalkan selama belasan tahun.
Bermula ketika daku menemukan skema efek gitar yang tidak terlalu rumit dan semua komponennya tersedia di pasaran (tepatnya toko elektronika di Tangerang), yaitu MXR Distortion Plus yang bila dimodif sedikit bisa menjadi DOD 250. Wah menarik sekali. Dan kurasa daku bisa membuatnya. Langsung saja daku belanja semua keperluan untuk membangunnya.

Komponen MXR+

Namun ternyata apa yang nampaknya sederhana itu tidak selamanya mudah untuk direalisasikan. Apalagi saat daku memilih cara hacker alias jalan pintas, yaitu membangunnya dengan menggunakan Perf Board (perforated board). Sekedar informasi, Perf Board ini adalah PCB yang sudah berlubang-lubang tapi tidak memiliki sambungan antar komponen. Untuk menyambungnya, kita perlu membuatnya sendiri, bisa menggunakan kawat kecil, kabel, atau sejenisnya.
Dan walau pun komponennya sedikit, tapi menyambungkannya tidak mudah. Apalagi jika tata letak komponennya berdekatan, misalnya untuk kaki-kaki IC. Ironisnya semua itu kulakukan saat diriku sudah tidak muda lagi, sudah tidak teliti dan secermat dulu lagi. Tentu sudah bisa ditebak, proyek kecil-kecilanku tidak berhasil. Hihihi…
Sudah gitu daku sudah males ngoprek untuk memperbaikinya. Soalnya solderannya pun berantakan. Belum lagi kabelnya yang sliwar-sliwer. Ruwet. Seharusnya sih dicek pakai multimeter. Tapi multimeterku waktu jaman SD sudah hilang entah dimana. Beli lagi? Hem… kayaknya bulan depan saja. Maklum, budget untuk hobi sudah habis. Malah sudah menggerus budget yang dialokasikan untuk lain-lain. Hihihi…

Bener-bener heboh. Ada flying board-nya segala. Hahaha...

Membangun dengan Perf Board memang amat-sangat tricky. Jadi kemarin daku memutuskan untuk membuat PCB beneran dengan menggunakan teknik sablon. Dalam bayanganku, semuanya sangat sederhana. Lha wong tinggal fotocopy dan disetrika ke papan board polos. Beda dengan jaman daku SD-SMP dulu dimana daku harus pakai karbon atau menggambarnya secara manual dengan spidol permanen.
Kali ini daku dibantu oleh Bro Yus dalam mengerjakan prakarya ini.
Dan lagi-lagi daku meleset. Ternyata beda antara bayangan dengan kenyataan. Lagi-lagi semuanya tidak semudah itu.
Bermula dari mengikuti petunjuk dari sebuah situs yang menyarankan penggunaan kertas biasa untuk menyablon. Ternyata gagal total walau pun sudah disetrika lama banget. Mungkin saja daku salah menggunakan kertas, soalnya kertas yang kupakai memang agak tebal. Atau bisa saja karena setrikanya kurang panas atau malah kurang lama menyetrikanya? Tapi sudah nyaris 1 jam setrika yang diset pada posisi terpanas itu meniduri PCB+kertas. Namun gambarnya belum nempel di PCB. Mungkin seharusnya sampai gosong ya? Berapa jam tuh?
Seandainya pun bisa, rasanya tidak masuk akal jika untuk menyablonnya saja butuh waktu selama itu. Padahal tugas lain menanti. Untunglah di dekat rumah Bro Yus ada tukang foto copy. Langsung saja daku memfotocopy layout ke plastik (kertas transparan atau biasa disebut transparansi) seperti yang biasa dipakai untuk presentasi.
Dan ternyata memang lebih mudah menyablon pakai kertas transparan ini karena layout cepat menempel di board walau pun menyetrikanya tidak lama. Tapi karena belum pengalaman, kami tetap saja gagal melakukannya. Pertama kertas transparannya bergeser sehingga miring. Upaya kedua juga gagal karena garis-garis pinggiran tidak tersablon sempurna alias putus-putus. Upaya ketiga berhasil dengan baik. Hore…
Board ke-2 yang beberapa jalurnya terputus itu bisa ditebalkan dengan spidol permanen. Sedangkan board ke-3 yang sukses perlu ditebalkan juga di beberapa jalur yang tipis, terutama di bagian lubang komponen.
Yang unik adalah karena kami tidak punya FeCl (ferri cloride) untuk melunturkan PCB. Sebelumnya daku nyari di toko elektronik tapi tidak ada. (Hem… aneh) Dan kebetulan daku sudah kemalaman dan tidak menemukan toko bangunan yang masih buka. Jadi proses pelunturannya terpaksa tertunda. Padahal semangatnya pas menggelora. Hiks…
Tapi proses pembelajaran telah berlangsung. Kalau pun daku tidak tahu malu menuliskan semua pengalaman tsb di blog (terutama yg gagal-gagal), itu karena proses pembelajaran yang kulalui ada baiknya dicatat supaya jika kelak bertahun-tahun kemudian daku ingin mengulanginya lagi, daku bisa membaca & mempelajarinya lagi. Hehehe…


Happy Blogging

Baca Selengkapnya »

Cara Parse

Mungkin selama ini jika teman2 ingin menampilkan kode-kode HTML didalam postingan Blog untuk memberikan sebuah tips kepada pengunjung blog kamu, yang didalamnya terdapat kode-kode html yang harus di otak-atik, biasanya anda mengganti (<) dengan (& lt;) dan untuk ( >) dengan (& gt;), jika kodenya sedikit mungkin tidak terlalu melelahkan, namun bagaimana jika kodenya seabrek-brek? Tentulah bikin capek tenaga dan mata. Memang sih ada trik copy-paste, namun tetap saja anda harus melakukannya satu-satu. Nah tinggalkanlah cara lama seperti itu, untuk menghemat waktu, tenagamu dan menyelamatkan mata dari kelelahan.Misalkan kamu ingin menampilkan kode berikut ini pada postinganmu:

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1&#8242; locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’/>
</div>

<!– spacer for skins that want sidebar and main to be the same height–>
<div class=’clear’> </div>

</div> <!– end content-wrapper –>

<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>

Tentulah mengganti satu-satu untuk tiap tag < atau > dengan & lt; atau gt; adalah urusan yang melelahkan. stop!!!! Sekarang tidak perlu lagi teman,... kamu cukup “copy” seluruh kode diatas dan kesini http://www.blogcrowds.com/resources/parse_html.php atau langsung kesini kemudian kamu “paste” seluruh kode tersebut dilembar yang telah tersedia,
Kemudian tekan tombol ‘parse’ yang terletak di bawah lembar (kotak parse).

Nanti semua < akan menjadi & lt; dan > menjadi & gt;.
dan tulisan kamu sudah dapat kamu posting di blog kesayanganmu tanpa ada masalah html lagi...

Oke cukup sampai disini tipsnya, semoga bermanfaat, mo breakfast dulu ne..dah laper...

Happy Blogging

Baca Selengkapnya »

Cara memasang Widget Kamera CCTV di Blog

Yang ingin pasang widget kamera cctv disini tempatnya ,biar gak ada yang mencuri postingan wkwkwkwkwk,langsung aja :

Cara Pasang nya :

1. Login ke Blogger
2. Masuk ke Rancangan
3. Pilih Elemen Laman
4. Klik Tambah Gadget
5. Pilih HTML/JavaScript
6. Dan terakhir, copy script yg ada di abwah ini dan paste kan di HTML/JavaScript. Lalu simpan, dan lihat hasilnya.

 <script language="JavaScript" src="http://daljs.googlecode.com/files/dcctv.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("http://i1237.photobucket.com/albums/ff478/dalganteng/animasi/cctv.gif")</script>

Happy Blogging

Baca Selengkapnya »

Memperbaiki Kerusakan Sistem Komputer akibat Virus

Re-Enable merupakan software gratisan dimana software ini berfungsi untuk memperbaiki kerusakan komputer akibat virus. Komputer yang sudah di bersihkan dari virus atau malware (worm, trojan dan sebagainya), tidak berarti komputer sudah normal kembali. Biasanya dampak setelah komputer terkena virus cukup banyak sehingga beberapa setting windows tidak bisa diakses, misalnya Task Manager, Registry Windows, Folder Options dan sebagainya. Untuk memperbaiki setting-setting itu kita bisa menggunakan software gratis tersebut .
Dengan hanya satu klik saja, maka berbagai setting windows yang tidak bisa diakses karena dampak virus akan dikembalikan ke keadaan semula (normal). Penggunaan Re-Enable sangat mudah, karena hampir tidak perlu kemampuan ahli untuk menggunakannya. Re-Enable dibuat untuk mengembalikan berbagai setting windows yang biasanya diubah oleh virus, seperti :

* Registry Editor “regedit”
* Command console / prompt “cmd”
* System Restore
* Start Menu, Run Command
* Task Manager
* Task Scheduler
* Safe Mode, jalankan dari menu Tools
* Restore F8 Safe mode “xp only” jika “NTLDR has been modified”
* Menu Klik kanan (contect menu)
* My Computer Properties
* Search di Folder Options windows Explorer dan menu
* MS Config (khusus win xp)
* Restore key registry explorer
* dan berbagai fitur lainnya

Pastikan bahwa komputer sudah sudah bebas dari virus untuk mendapatkan hasil yang di inginkan. Karena jika komputer masih terkena virus (virus masih aktif), setelah di aktifkan dengan Re-Enable, kemungkinan setting akan di ubah lagi oleh virus.

Re-Enable dikembangkan dengan Microsoft .Net Framework, sehingga untuk menjalankannya di komputer harus terinstall Microsoft .NET Framework 4 sp1 atau diatasnya. Tetapi bagi yang belum ada .net, tersedia juga versi yang sudah menyertakan .net didalamnya, hanya saja ukurannya cukup besar (sekitar 22.8 MB)

Jika di komputer sudah terinstall .Net 3.5 sp1, maka kita tinggal download Re-Enable Lite yang ukurannya sekitar 773 KB saja. Untuk mendapatkan software ini silahkan langsung mengunjungi Halaman download here

Happy Blogging

Baca Selengkapnya »

Background Pada Flashdisk atau Folder Drive

 Here’s some Tutorial tentang bagaimana cara membuat background folder di flashdisk bagian depan. Well, saya akan membuat ini short saja.
Sekilas info buat yang belum tau....yang ingin variasi tampilan desktop FlashDisk nya ada gambar atau foto nya...!!!

1.Siapkan gambar atau foto yang ingin di pakai menjadi background. (yang formatnya JPG ya..! Terus kasih nama file nya dengan nama cover

2.Copy kode di bawah ini dan paste di Notepad..:

[ExtShellFolderViews]
{BE098140-A513-11D0-A3A4-00C04FD706EC}=
{BE098140-A513-11D0-A3A4-00C04FD706EC}
[{BE098140-A513-11D0-A3A4-00C04FD706EC}]
Attributes=1
IconArea_Image=cover.jpg
IconArea_Text=0xcc00aa
[.ShellClassInfo]
ConfirmFileOp=0
3. lalu Save As..dengan nama desktop.ini

4.Copy 2 file tadi (cover.jpg + desktop.ini) ke FlashDisk anda.

5.selesai.

Note: Bila 2 file itu anda copy dan paste ke halaman desktop folder atau drive di explorer windows anda maka akan menciptakan efek yang sama seperti di flashdisk tadi. 

Happy Blogging

Baca Selengkapnya »

Cara Membuat Efek Lipatan Kertas Pada Gambar Menggunakan Photoshop

Sebenarnya efek ini termasuk mudah bagi para pemula dan sering kita lihat di beberapa desain foto, mungkin beberapa dari para reader ada yang belum tahu cara membuat efek ini, maka saya buat sajalah tutorialnya, mari kita mulai.


1. Pertama buka Adobe Photoshop
2. Open gambar yang ingin anda edit.
3. Buat New Layer dengan menekan Ctrl+Shift+N.
4. Klik Pen Tool, buat 3 titik sehingga membentuk segitiga di pojok gambar (terserah dipojok mana aja, sebagai tutorial ini saya menggunakan yang pojok kanan bawah).
5. Klik kanan didalam segitiga yang anda buat. Klik Make Selection, langsung klik OK aja.
6. Klik Gradient Tool, gunakan warna hitam putih, geser dari ujung kertas sampai pojok.
7. Tekan Ctrl+D, klik Elliptical Marquee Tool, buat lingkaran di sebagian kertasnya, tekan delete.
8. Klik kanan pada layer kertas lipatan, klik Blending Option, klik Drop Shadow. Atur kira-kira seperti dibawah ini, anda bisa saja mengubah angka-angkanya sesuai selera, tidak harus terpaku dengan tutorial ini.

9. Klik layer background, klik Brush Tool, gunakan warna putih, hapus bagian yang menurut efek sudah terlipat.
10. Dibawah ini beberapa petunjuknya.

Hasilnya :

Semoga berhasil ! Selamat mencoba ! :)

Happy Blogging

Baca Selengkapnya »

Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition

Jika sampeyan mencermati beberapa box widget di blog ini, maka akan terlihat beberapa box widget akan terlihat terang hanya ketika cursor berada di atasnya. Opacity effect menjadi kunci terjadinya perubahan box gelap ke terang.

Opacity effect sebenarnya sebuah CSS property yang berfungsi untuk menciptakan efek transparansi atau sering disebut juga efek blur. Semua browser sudah support terhadapnya, hanya untuk Internet Explorer harus digunakan kode yang berbeda dari yang lain. Memanfaatkan opacity property dalam sebuah desain sangat mudah dilakukan, hanya agar supaya ketika cursor diarahkan di atasnya keadaan berubah menjadi terang/gelap maka harus ditambahkan sebuah hover effect. Secara sederhana penulisan opacity effect dalam sbuah kode CSS adalah sebagai berikut:

Penulisan opacity property di kode CSS

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
}

Penulisan opacity property dan hover effects di kode CSS

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

• Opacity di Internet Explorer dituliskan dalam bentuk kode:
  filter:alpha(opacity=...);
• Nilai opacity (tanda titik-titik) sebesar 0 s/100.
• Nilai opacity di browser yang lain menggunakan nilai 0 s/d 1.0
• Semakin kecil nilai opacity maka akan semakin gelap, demikian pula sebaliknya, semakin besar maka akan semakin terang/jelas.

Menggabungkan opacity property dan CSS3 Transition

Saat ini banyak browser sudah support terhadap CSS3 hingga berbagai efek baru dapat ditambahkan dalam sebuah desain termasuk saat kita mendayagunakan opacity property. Penggunaan CSS3 transition akan mampu menciptakan sebuah transisi dalam waktu yang bisa diatur saat terjadi perubahan efek gelap menjadi terang atau terang menjadi gelap. Transisi ini tentunya akan membuat efek transparansi yang tercipta menjadi semakin menarik, karena kecepatan waktunya bisa diatur sesuai selera.

Kode CSS: Efek Gabungan opacity dan CSS3 Transition

.efekblur {
      opacity: 0.7;
      filter: alpha(opacity=70);
     -o-transition:opacity ease-in 700ms;
     -moz-transition: opacity ease-in 700ms;
     -webkit-transition: opacity ease-in 700ms;
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Jika beberapa efek lain masih ingin di tambahkan, maka penulisan dituliskan dalam bentuk:

.efekblur {
      opacity: 0.7;
      filter:alpha(opacity=70);
     -o-transition: all ease-in 700ms;
     -moz-transition: all ease-in 700ms;
     -webkit-transition: all ease-in 700ms;
}
.efekblur:hover {
      opacity: 1.0;
      filter:alpha(opacity=100);
}

Kode CSS di atas karena menggunakan CSS3, maka hanya akan bekerja secara sempurna di browser yang sudah support CSS3 seperti Mozilla, Opera, Safari dan Google Chrome serta beberapa browser tertentu yang lain.

Box dengan Efek Gelap Terang

Di bawah ini adalah contoh kode sebuah box yang telah dilengkapi dengan efek opacity, CSS3 transition dan beberapa kode lain.

.boxwidget {
      height: 250px;
      overflow: auto;
      margin: 20px 4px 10px;   
      padding: 15px 8px;
      background: #111;
      color: #666; 
      border: 2px solid #555;
      border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
      opacity: 0.4;
      filter:alpha(opacity=40);
     -o-transition: all ease-in 1.2s;
     -moz-transition: all ease-in 1.2s;
     -webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
      background: #660000;
      color: #eee;
      opacity: 1.0;
      filter: alpha(opacity=100);
}

Untuk menggunakan box tersebut, sampeyan harus menggunakan kode xHTML seperti di bawah ini:

<div class="boxwidget">
Di sini widget atau Teks diletakkan!
</div>

• Simpan kode CSS di atas kode ]]></b:skin>
• Simpan xHTML melalui Add a Gadget/Tambah Gadget atau di antara tag pembuka <body> dan tag penutup <body>.

Happy Blogging

Baca Selengkapnya »

Tips Menggunakan link jQuery - jquery.1.3.2.min.js

02

Nov 2010

Dari sekian banyak javascript, jquery merupakan satu javascript yang paling banyak digunakan blogger. Beberapa desain memanfaatkan berbagai jenis jquery yang telah tersedia, namun yang terbanyak digunakan sebagai dasar pembuatan desain adah jquery 1.3.2.js atau jquery.1.3.2.min.js. Sekalipun edisi terbaru telah direlease dalam bentuk jquery.1.4.2.js, dengan penambahan beberapa fungsi baru yang belum ada di jquery.1.3.2.js, jquery yang luar biasa (1.3.2.js) ini tetaplah menjadi javascript terfavorit. Disamping beban yang lebih enteng, jquery.1.3.2.js sudah sangat memenuhi syarat untuk dikembangkan dalam usaha menciptakan berbagai desain baru pelengkap blog, terlebih untuk blog yang bersifat umum yang tidak memerlukan desain khusus sebagai pelengkap tampilan.

Saat kita menggunakan sebuah desain dengan jquery, kita harus memahami fungsi yang tercipta. Banyak desain lama dan baru juga menggunakan jquery.1.2.6.js misalnya. Banyak desain yang memanfaatkan jquery.1.2.6.js sebenarnya bisa berfungsi sama dengan menggantinya dengan jquery.1.3.2.js. Jadi ketika anda harus menambahkan jquery.1.2.6.js, sementara blog sudah memasang jquery.1.3.2.js atau jquery.1.3.2.min.js, maka kenapa pula harus menambahkan jquery.1.2.6.js. Penambahan jquery baru seperti di atas sebenarnya sudah tidak diperlukan lagi karena fungsi sudah tercover melalui jquery.1.3.2.js. Demikian juga saat sebuah desain baru menggunakan jquery.1.4.2.js. Akan lebih baik seandainya anda coba dulu dengan memanfaatkan jquery.1.3.2.js yang sudah dimanfaatkan/terpasang. Jika cukup dengan jquery.1.3.2.js dan desain berjalan sempurna, maka jquery baru tidak diperlukan lagi. Menambah jquery baru sama artinya dengan menambah beban tak perlu yang akan semakin memperberat beban dan loading blog. Hal-hal yang seperti ini teramat sering terjadi dan umumnya disebabkan masih terbatasnya pemahaman blogger terhadap kode HTML, atau javascript. Satu hal yang wajar dan dapat dimaklumi karena 99% blogger tumbuh dan berkembang dari basic pengetahuan diluar desain blog.

Beberapa catatan di bawah ini mungkin bisa anda manfaatkan ketika menggunakan jquery, terutama jquery.1.2.6.js, jquery.1.3.2.js, jquery.1.4.1.js dan jquery.1.4.2.js.

• jquery.js (tanpa min) dan jquery.min.js (menggunakan min), keduanya mempunyai kegunaan dan fungsi sama. Penggunaan "min" menandakan bahwa jquery tersebut telah di kompres (compress) hingga muatan atau bebannya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan dengan menghilangkan beberapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan pengguna saat membuat desain baru dengan memanfaatkan jquery. Kesimpulannya jika anda hanya sekedar pengguna lebih baik menggunakan jquery.min.js agar loading blog lebih cepat.
• Saat sebuah desain baru ingin anda gunakan, dimana desain tersebut menggunakan jquery.1.2.6.js (atau min), jquery.1.4.1.js (atau min), dan jquery.1.4.2.js (atau min), maka lebih baik coba dulu menggunakan jquery.1.3.2.min.js. Apabila desain bisa bekerja secara sempurna dengan jquery.1.3.2.min.js, maka jquery dalam desain baru tersebut dapat di cover dengan menggunakan jquery.1.3.2.min.js.
• Sebaliknya, bila ada sebuah desain baru hanya dapat berfungsi menggunakan jquery.1.4.2.js, maka sebaiknya seluruh desain yang menggunakan jquery.1.2.6.js, jquery.1.3.2.js atau jquery.1.4.1.js di coba dengan jquery.1.4.2.min.js. Apabila bisa berfungsi baik maka anda cukup gunakan jquery.1.4.2.min.js untuk meng-cover seluruh kebutuhan penggunaan jquery.
• Demi lancarnya (mengurangi trouble) penggunaan jquery, sebaiknya gunakan link:
  http://ajax.googleapis.com/ajax/libs/jquery/....../jquery.min.js
• Pasanglah link jquery di atas tag pembuka <head> atau di bawahnya dengan posisi paling atas dibandingkan javascript yang lain. Jadi setelah link jquery baru diikuti link-link javascript yang lain.
  Contoh:
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="jqhorizaontal.js" type="text/javascript"></script>
  <script src="jqtabcontent.js" type="text/javascript"></script>
  ......
  ......
  dst
• Jika sudah cukup memahami cara pencarian kode html dalam template dan pemasangan kode di luar penggunaan "Add a Gadget", sebaiknya simpan link jquery di atas atau di bawah kode <head> karena jika sebuah desain menggunakan jquery sebagai dasar pembuatan desain maka script desain baru harus selalu berada di bawah link jquery. Jika jquery sudah berada di atas atau di bawah kode <head>, maka secara otomatis semua script yang dibuat untuk sebuah desain baru akan selalu berada di bawah jquery yang link-nya terpasang di bagian teratas blog (dekat <head>).

Semoga bermanfaat!

Happy Blogging

Baca Selengkapnya »