Sebenarnya pembuatan toolbar ini cukup mudah tinggal Continue reading ‘Cara Membuat Toolbar di Bawah Blog (Toolbar Wibiya)’»

Pertanyaan yang sering saya terima adalah, “Bagaimana cara membuat subdomain domain.co.cc?” Membuat sub domain untuk domain.co.cc memang yang paling banyak diminati saat ini mengingat keunggulan domain.co.cc yang cukup sederhana, mudah diingat dan tidak kalah menarik dengan domain berbayar.

Oleh karena itu pada postingan kali ini saya mencoba menulis tutorial lengkap membuat subdomain pada domainco.cc yang dihosting di webhost sedikit mengulas bagaimana membuat sub domain pada domain.co.cc yang telah di hosting pada server gratis webhost.

Catatan: Jika Anda belum mendapatkan nama domain.co.cc gratis, silahkan klik disini. Lalu daftarkan domain.co.cc Anda pada hosting gratis di webhost, silahkan klik disini. Setelah itu ikuti petunjuk bagaimana menginstal mesin wordpress pada domain.co.cc Anda melalui hosting gratis, silahkan klik disini. Dan untuk mengubah struktur permalink agar lebih seo friendly, klik disini.

Membuat subdomain apakah untuk keperluan membuat blog, forum atau yang lainnya. Misalkan domain.co.cc utama Anda telah diinstal wordpress dan ingin membuat subdomain yang digunakan untuk keperluan komunitas blog Anda seperti membuat subdomain untuk forum, maka nama domainnya menjadi forum.domain.co.cc atau sebaliknya domain utama telah diinstal website template atau joomla dan Anda ingin membuat blog dan tidak ingin memilih domain baru dan lebih memilih untuk membuat subdomain pada domain utama Anda misalkan subdomain untuk blog contoh: blog.domain.co.cc.

Kita langsung saja, cara membuat subdomain cukup sederhana saja Anda tinggal login ke account webhost dimana domain utama co.cc telah terdaftar. Kemudian tuju pada control panel (Go to CPanel) Lalu klik Subdomain. Perhatikan Screenshoot di bawah ini,

Catatan: Membuat subdomain untuk domain.co.cc bukan pada account co.cc Anda tapi pada account hosting, dalam hal ini account webhost Anda!

Kemudian ketik subdomain yang Anda inginkan pada kotak yang disediakan contoh: blog.hakimtea.co.cc. jika Anda ingin membuat blog dengan subdomain atau Anda ingin membuat sebuah forum untuk domain utama Anda hingga menjadi forum.domain.co.cc maka ketik forum. Setelah menentukan subdomain lalu klik Create. Lebih jelas perhatikan screenshot dibawah ini,

Sejauh ini Anda telah berhasil membuat subdomain untuk domain.co.cc Anda. dan pada contoh di atas berarti subdomain Anda adalah blog.domainanda.co.cc. Blog sebagai sub domain yang Anda masukan otomatis menjadi sebuah directory (folder) pada Public Html di hosting webhost Anda. Contoh: /home/a5720183/public_html/blog.

Selanjutnya Adalah menginstal software yang diperlukan untuk subdomain tersebut apakah Anda memerlukan sebuah sotware untuk forum, blog, joomla, atau lainnya.

Untuk menginstal software yang diperlukan Anda cukup menggunakan jasa Fantastico Autoinstaller. Caranya kembali ke Cpanel kemudian cari Fantastico Autoinstaller yang berada pada kumpulan Software / Services.

Sejauh ini webhost menyediakan beberapa mesin yang bisa diinstal melalui Fantastico Autoinstaller diantaranya, WordPress, b2evolution, Joomla, Drupal, phpwebsite, phpbb, simplemachines (SMF) atau Coppermine untuk album photo online Anda.

Pilih salah satu software yang Anda perlukan kemudian klik New Installation. Misalkan Anda membuat sebuah forum dan menggunakan SMF simple machines, maka klik New Installation di SMF. Lalu ada 3 yang harus diisi dari 5 langkah, pertama Install in directory, pada Install in directory ketikan subdomain yang Anda buat sebelumnya, pada Admin access data ketika nama Admin untuk login pada software yang akan Anda instal nantinya, pada Password tentu saja ketikan password pilihan Anda. Lebih jauh perhatikan screenshot di bawah ini,

Setelah klik Instal tunggu beberapa saat hingga proses instalasi Fantastico Autoinstaller komplit. Setelah sekitar 2-5 menit lalu klik [Back to Auto-installer] lalu perhatikan software yang tadi di instal dan klik View Installation Details. Disana Anda akan mendapat informasi tentang akses ke software yang diinstal, admin area, admin username dan password.

Selamat Anda telah membuat subdomain! Jika pertama yang Anda lihat subdomainnya adalah http://domain.co.cc/forum jangan khawatir coba akses dengan http://forum.domain.co.cc atau coba percobaan domain.co.cc saya http://forum.hakimtea.co.cc.

Selamat mencoba!

Catatan: Account webhost gratis membatasi 2 software untuk Anda instal, selebihnya diharuskan upgrade ke premium member!
____________
Support me at Busby SEO Test

Panduan ini bagaimana menginstal wordpress ke domain.co.cc dengan hosting gratis webhost dan menggunakan… Klik disini untuk membaca lebih lengkap “Instal WordPress ke Domain CO.CC”

APA ITU FEEDBURNER…?

Feedburner adalah salah satu “LAYANAN GRATIS” penyedia jasa media publikasi dan audience. Layanannya berupa penyebaran content Blog dan RSS Feeds, yang memungkinkan untuk berpromosi baik secara komersil ataupun menambah profit dalam berbisnis melalui internet. Atau “sekedar” ingin mengenalkan blog Anda agar “go international” dan menambah pembaca dari seluruh dunia. Lebih lanjut mengenai feedburner klik disini.

Saya rasa testimoni yang dikatakan Michael Webster dalam blognya sudah cukup mewakili, “Feedburner is an excellent way to publicize your blogsite and has many useful tools to make easier for people to access. To top it off, the customer and technical assistance they provide is absolutely top-notch.”

Baiklah kita langsung saja mendaftar dan mensetting blog kita ke feedburner.

LANGKAH PERTAMA

• Masuk ke situs FeedBurner, klik disini
• Masukan Feed Blog Anda ke tempat yang disediakan *I’m Foodcaster* ga usah di ceklis
• Klik Next

Perhatikan screenshoot berikut,

• username: Nama untuk Anda sig in (masuk ke feedburner nanti)
• password: katasandi yang tentu saja tidak boleh ada yg tahu selain Anda
• password (again): katasandi yg sama seperti di atas
• email address: alamat email yang aktif

Kalo semua sudah, klik “Activate Feed” dan akan melihat halaman baru seperti halnya screenshoot berikut ini, (jika nama feed Anda belum ada yg menggunakan)

Ubah arah feed blogger Anda ke Feedburner! Caranya, copy URL feedburner Anda (warna biru) seperti pada screenshoot di atas masukan ke pengaturan feed blogger Anda. Caranya, login dulu ke account blogger lalu klik PENGATURAN > FEED SITUS dan paste feed dari feedburner ke tempat yang disediakan “Posting URL Pengubahan Arah Feed” perhatikan screenshoot berikut ini,

Sebagai bonus, kembali lihat langkah kedua di atas lalu klik “Skip directly to feed management” untuk langsung menuju ke manajement/pengaturan feed Anda di feedbuner. Kenapa klik “Skip directly to feed management” tidak “Next” karena next akan mengarahkan kita ke “Enhance Your Stats” yang artinya Anda akan mengurus masalah traffic statistik blog Anda agar bisa “melihat” pengunjung blog berasal dari mana dan lewat mana dan hal ini bisa Anda lakukan juga nanti setelah Anda masuk “Skip directly to feed management”. Oke, klik “Skip directly to feed management” dan Anda akan melihat halaman baru sepeti halnya screenshoot berikut ini,

1. Analyze:
   • Berisi, Feed statistic, Site Statistic, dan Headline Animator sedangkan FeedBurner Stats PRO paling bawah sama dengan Site Statistic jika Anda nanti mengaktifkannya.
   • Nah Site Stats ini yang di atas saya bilang tidak mengklik next tapi langsung ke “Skip directly to feed management”
2. Optimize:
   • Berisi banyak sekali tool yang bisa Anda pelajari nanti, diantaranya adalah Summary Burner dan Amazon ID Burner.
   • Summary Burner bisa Anda aktifkan setelah Anda mengaktifkan layanan berlangganan (subscribe) via email kepada pengunjung blog Anda dan melalui Summary Burner ini Anda bisa sedikit bermain “strategi” mempersingkat isi posting blog Anda melalui kiriman email tersebut agar pengunjung Anda penasaran dan membaca lebih jauh isi postingan di Blog Anda. *bukan curang lho tapi strategi bisnis… * dan saya sarankan hanya digunakan untuk blog beradsense untuk blog personal sebaiknya tidak usah mengaktifkan tool ini. *saya sendiri tidak mengaktifkan Summary Burner untuk blog ini.
3. Publicize:
   • Diantaranya ada Headline Animator yang biasa digunakan para blogger yang terdaftar di feedburner contohnya headline animator saya di bagian paling atas menampilkan 5 judul postingan terbaru secara bergantian judul.
   • Lalu ada juga “Email Subscriptions” tool bagi Anda untuk menawarkan jasa berlangganan via email seperti pada tool OptimIze di atas sebelum mengaktifkan Summary Burner Anda harus mengaktifkan “tawaran” berlangganan via email ini pada pengunjung blog Anda.
   • Ada juga “FeedCount” sebuah widget untuk menunjukkan kepada pengunjung blog Anda sudah berapa banyak pembaca blog Anda yang berlangganan; baik melalui feed ataupun via email. Contohnya FeedCount saya di atas, heuheu. *malu*
     Lain2, silahkan pelajari sendiri nanti.
4. Monetize:
   • Bahasa Indonesia yang mudah untuk monetize adalah “menguangkan” atau “mencairkan” *CMIIW* nah jika Anda bekerja sama dengan google adsense maka tool ini bisa Anda pergunakan. Caranya nanti berhubungan dengan edit html blog Anda. Jangan khawatir mudah ko. Setelah Anda ikuti petunjuknya nanti, maka iklan adsense akan muncul di bawah postingan pertama blog Anda.
5. Troubleshootize:
   • Dari namanya saja sudah jelas pa yang terbayang kan! Yupz jika Anda punya masalah dengan account feedburner Anda klik saja tool tersebut dan ada forumnya juga untuk menyampaikan keluh kesah dsbnya. Lagian jika Anda mengklik tool ini maka tampilan pertama kata-kata sambutannya lucu “Oh Dear, What Kind of Trouble?” ^_^

Oke untuk saat *sekali lagi* sebagai “bonus” saya akan memandu untuk memasang 3 widget feedburner pada blog Anda. [1] Email Subscriptions, [2] Headline Animator, dan [3] FeedCount yang kesemuanya ada di tool “Publicize”

1. Memasang Email Subscriptions Feedburner

Untuk mengaktifkan penawaran berlangganan via email kepada pengunjung blog Anda, klik Publicize >Email Subscriptions. ada tiga pilihan penggunaan layanan kiriman email yaitu [1] lewat FeedBurner, [2] FeedBlitz, dan [3] Rmail. Untuk memudahkan biarkan saja pada pilihan standar yaitu melalui FeedBurner. Lalu klik Activate. Ada dua pilihan widget, [1] menyimpan “widget form” berlangganan (subscribe) via email pada page element blog Anda, atau [2] Tekslink yang akan memunculkan popup windows. Katakan saja Anda memilih “widget form” ada dua cara yang bisa Anda lakukan [1] mengcopy paste kode paling atas yang ditunjukkan atau [2] menggunakan fasilitas import halaman “Use as a widget in” dan Anda tinggal memilih digunakan pada blog apa? TypePad, TypePad (Japan) atau Blogger. Pilih blogger jika Anda menggunakan layanan blogger dan klik “GO” lalu ikuti petunjuknya yg mudah.

Lalu Anda bisa mengatur komunikasi email dengan pelanggan Anda, jika blog Anda menggunakan bahasa Indonesia maka komunikasi email atau “Communication Preferences” ini bisa Anda setting dengan bahasa Indonesia. Caranya masih di “Email Subscriptions” pilih “Communication Preferences”. Ada tiga Communication Preferences yang bisa Anda atur; [1] Email “From” Address: menampilkan alamat email Anda sebagai pengirim posting via email. [2] Confirmation Email Subject: Berisi judul email, contoh yang disediakan feedburner “Activate your Email Subscription to: MY-BLOG” Anda bisa menggantinya dengan yang Anda mau, misalkan “Aktifkan email Anda untuk berlangganan blog kami” [3] Confirmation Email Body: Email konfirmasi, silahkan Anda perhatikan dan atur sesuai keinginan Anda berkomunikasi dengan pelanggan baru yang hendak berlangganan postingan blog Anda. Sedangkan untuk waktu pengiriman Anda bisa mengaturnya di “Delivery Options”

Selamat Anda sudah mempunyai widget email Subscriptions

2. Memasang Headline Animator Feedburner

Masih di “Publicize” klik Headline Animator. Lihat pada form “Create a New Headline Animator” ada pilih ukuran dan bentuk headline animator pada “Theme” Title di ceklist jika ingin menampilkan nama blog Anda. Warna dan tanggal silahkan di atur pada form masing-masing. Kalo sudah lihat dulu previewnya di bagian bawah, jika sudah merasa cocok dan ukurannya sesuai dengan sidebar blog Anda klik “Activate” kembali Anda akan melihat preview yang sengaja diperlihatkan feedburner, lalu pada “Add to MySpace, TypePad, etc.” pilih Blogger Blog dan klik next, akan muncul window baru dan klik Add to Blogger lalu ikuti petunjuk selanjutnya yang mudah.

Selamat Anda sudah mempunyai widget Headline Animator

3. Memasang FeedCount (Chicklet) Feedburner

Masih di “Publicize” klik “FeedCount” ada dua pilihan Chicklet; Statis dan Animated. Silahkan pilih berdasarkan selera Anda lalu pilih juga warna body dan textnya. Kalo sudah klik “Activate” Feedburner akan memperlihatkan preview Chicklet Anda (Your Chicklet). Untuki memasangnya pada blog Anda ada dua pilihan, [1] copy kode html yang disediakan atau [2] menggunakan layanan import “Use as a widget in” lalu pilih blog yang Anda gunakan, pilih blogger jika menggunakan blogger dan klik “GO” tunggu sebentar, lalu ikuti petunjuknya yang mudah.

Selamat Anda sudah mempunyai widget Headline Animator

Demikian “selintas” daftar dan setting feed blog Anda ke feedburner dan bonus memasang 3 widget dari feedburner.

Silahkan dicoba! Salam blogging dan berbagi.
____________
Kampanye Damai Pemilu Indonesia 2009

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

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

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

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

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

LANGKAH PERTAMA – FIRST STEP (REGISTER/DAFTAR)

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

• Username: *nama yang akan digunakan ketika login nanti*
• First Name: *Nama depan*
• Last Name: *Nama belakang*
• Email: *email yang aktif*
• Confirm email: *tuliskan lagi alamat email yg aktif*
• Password: *ketikan kata sandi, hanya Anda yang tahu*
• Confirm Password: *Ketikan lagi kata sandi, harus sama dengan kata sandi pertama*
• Masukan karakter (kode verifikasi) yang ada.
• Ceklist “I agree to the Bravenet Terms of Service”
• Klik join bravenet.
• Tunggu sebentar, proses pendaftaran tengah dimasukan database bravenet.
• Setelah tampil “Complete Your Bravenet Registration” ada tawaran dari sponshor bravenet, lewati saja, scroll down window ke bawah.
• Klik tombol “Proceed to Member’s Area”
• Registrasi hampir selesai. Anda akan dikirim email validitas (validation).
• Login ke email Anda.
• Cari email dari bravenet dengan title “membernotify – “‎Bravenet Account Confirmation”
• Email bravenet tersebut mengingatkan username dan password yang Anda gunakan untuk login.
• Klik link yang ditunjukkan dibawah kalimat, “Please follow the URL…”
• Tampil windows baru dan ucapan selamat (Congratulations!) Anda telah tergabung menjadi member bravenet.
• Scrol down window dan klik tombol “Continue to Members Area”
• “welcome to your account”

LANGKAH KEDUA – SECOND STEP (MEMBUAT FORM KONTAK)

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

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

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

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

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

Selamat Anda sudah mempunyai Contact Form

Semoga bermanfaat!

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

_____________

Tips:

• Ubah tanggal postingan Anda agar tidak tampil di homepage (sebagai postingan baru)
• Kosongkan label/Kategori karena nantinya kita akan simpan postingan tersebut di list menu (Jika anda menggunakan list menu seperti blogspot saya disini)

Note: Selain di postingan, Anda juga bisa memasang form pada element html blog.

PS: Kalo ada masalah jangan sungkan contact saya melalui form Kontak…

Lihat juga: Cara Membuat List Menu

*Jadi bagaimana dong om bikin readmore di template lama?*

Caranya cukup mudah tidak seperti readmore baru. Oke kita langsung saja, untuk membuat readmore pada template classic berikut caranya:

1. Login ke blog Anda

2. Klik Template >Edit Html

3. Pada kotak Edit Html cari kode ini

</style>
</head>

4. Kalo sudah ketemu copy kode berikut,

<MainOrArchivePage>
span.fullpost {display:none;}
</MainOrArchivePage>
<ItemPage>
span.fullpost {display:inline;}
</ItemPage>

Simpan/Paste tepat di atas kode </style>

5. Selanjutnya masih di edit html cari kode ini <$BlogItemBody$>

6. Lalu copy kode berikut,

<mainorarchivepage>
<a href="<$BlogItemPermalinkURL$>">Selengkapnya...</a>
</mainorarchivepage>

Simpan/Paste! Tepat dibawah kode <$BlogItemBody$>

Catatan: Kalimat “Selengkapnya…” pada kode di atas bisa Anda ubah dengan kata yang Anda suka, misalnya “Baca lagi donks” atau “Lebih jauh” atau kalo blog Anda berbahasa inggris Anda bisa memberikan kata-kata “readmore” atau cukup “more”.

7. Simpan Perubahan Template atau klik Save.

8. Berpindah dari edit html ke menu Pengaturan/Setting >Formating/Format

9. Pada kolom “Template Posting” copy kode berikut,

<span class="fullpost">

</span>

10. Klik Simpan Pengaturan/Save
11. Edit postingan Anda yang sudah ada dengan menyisipkan kode di atas, <span class="fullpost"> pada postingan atau kalimat yang hendak dipotong lalu copy kode </span> pada akhir postingan/tulisan Anda. Klik Save.

12. Coba lihat hasilnya sekarang…
Bagaimana…?
Selamat ngeblog, keep blogging dan teuteup berbagi ^_^
Kalo mau pasang readmore di blog baru atau layout template baca tutorialnya disini.

________________

Gambar diambil dari http://www.bonfx.com/

Tutorial ini kan sudah ada di jackbook kenapa ga simple saja menunjukkan link kesana? Memang sudah ada tapi itu kan versinya bahasa inggris. Pertimbangan saya dua; Pertama, tadi itu mengingat tidak sedikit yang terjun ke dunia blogger dengan keterbatasan pemahaman bahasa inggris maka saya coba terjemahkan bebas dari Jackbook. Kedua, lumayan buat nambah isi blog, saya kan jarang posting Oke kita langsung saja,

LANGKAH PERTAMA:

login pada account blogger Anda pilih Layout >Edit HTML. Namun sebelum kita mulai lebih baik Anda membackup terlebih dulu template yang sudah ada, seandainya terjadi kesalahan Anda tinggal mengembalikan template Anda semula. Dan blogger memang baik hati selalu mengingatkan jika kita masuk menu Edit HTML,

Backup/Restore Template
Sebelum mengedit template Anda, Anda mungkin ingin menyimpan sebuah salinan dari template tersebut. Download Template Lengkap

Cara membackup mudah saja tinggal klik Download Template Lengkap simpan pada hard drive komputer Anda.

LANGKAH KEDUA:

Pada menu Edit HTML tersebut beri centang/ceklis pada Expand Template Widget Kemudian cari kode HTML berikut ini,

LANGKAH KETIGA:
Ganti kode html tersebut dengan kode ini “Dapatkan kodenya klik disini“

Catatan: Karena kode htmlnya terlalu panjang dan bakal banyak makan tempat di postingan ini, maka saya simpan di googlepages. Untuk membukanya bisa dengan dua cara; pertama klik kanan di “Dapatkan kodenya klik disini” kemudian Save Target as atau Save Link as. Kedua, klik kanan open in new tab (jika Anda menggunakan firefox). Maka Anda akan melihat kode htmlnya yang begitu panjang.

LANGKAH KEEMPAT:

Copy kode html berikut pas berada di bawah </body> di atas </html>. Dengan kata lain diantara keduanya. Kode tersebut berada paling bawah.

LANGKAH KETUJUH:

Pindah ke menu PENGATURAN > KOMENTAR dan pastikan “Tampilkan komentar dalam sebuah window popup?” dalam keadaan contrengannya (ceklis) pada “YA”. Kalo sudah klik SIMPAN PENGATURAN.

Coba lihat hasilnya…! Bagaimana? Keren kan

____________

Gambar dari www.cartoonstock.com

Update: Saya coba petunjuk ini pada blog percobaan saya disini tanpa melihat tutorial aslinya dan…. Sukses! Silahkan Anda coba…

Jika kita perhatikan hasil jadi desain banner saya yang sederhana meski kecil tapi cukup bisa menarik perhatian (benarkah?) ^_^ mungkin karena tulisan pada banner kecil tersebut berkedip-kedip. Susah membuatnya? Tidak juga, malahan mudah kok! Syaratnya Anda bisa mengoperasikan dasar-dasar penggunaan Adobe PhotoShop CS2 dan Image Ready. Silahkan ikuti tutorialnya di bawah ini.

Ukuran banner pada tutorial ini disesuaikan dengan postingan saya terdahulu tentang Penyeragaman ukuran Banner Blogger. Jika Anda ingin banner yang lebih besar silahkan saja setelah Anda mempelajari tutorial ini.

Oke, kita langsung saja,

Bagian Pertama (Membuat Bingkai dan Teks):

1. Buka Adobe Photoshop CS2
2. Buka file baru dengan mengklik menu File>New. Pada kotak dialog New

a. Name: Beri nama file dengan nama Anda.

b. Width: 81 pixels

c. Height: 16 pixels

d. Resolution: 72 pixels/inch

e. Color mode: RGB 8 bit

f. Background Content: Transparent.(*)

g. Color Profile: Working RGB: sRGB IEC61966-2.1

h. Pixel Aspect Ratio: Square

i. Klik OK

3. Perbesar ukuran window kanvas dengan menarik ujung bagian bawah.
4. Perbesar kanvas dalam dengan menggunakan Zoom Tool (Z) (+).
5. Buatlah background untuk banner Anda dengan menggunakan Rectangle Tool (U). Sesuaikan dengan ukuran kanvas. Jika sudah ubahlah menjadi Shape dengan mengklik menu Layer >Raterized >Shape.Buatlah bidang seleksi berbentuk Marquee (kotak) dengan menggunakan Rectangular Marquee Tool (M) di atas background lalu klik menu Edit >Clear, sehingga background Anda berbentuk list kotak (bingkai) seperti pada banner saya (contoh).
6. Buatlah teks nama Blog Anda (contoh, Hakimtea) di tengah-tengah bingkai menggunakan Horizontal Type Tool (T). Sesuaikan ukuran teks dengan bingkai menggunakan Move Tool.
7. Tambahkan efek Bavel and Embos dengan mengklik menu Layer >LayerStyle >Bevel and Embos (tambahkankan pengaturan lain jika Anda mau seperti drop shadow, inner shadow, outer glow, dll) klik OK jika sudah.
8. Save dahulu pekerjaan Anda bagian pertama ini.

Bagian Kedua (Membuat Animasi Teks Banner “berkedip-kedip”)

1. Masih di Adobe Photoshop CS2 dengan banner Anda yang sudah setengah jadi pada bagian pertama di atas.
2. Berpindahlah sekarang ke dalam menu editing Adobe ImageReady CS2 dengan mengklik menu File >Edit in ImageReady (Ctrl+Shift+M). Tunggu sebentar, maka lembar kerja Adobe ImageReady CS2 akan terbuka.
3. Perhatikan, untuk membuat animasi “teks berkedip” Windows Animasi harus tersedia, jika belum ada, Anda bisa memunculkannya dengan mengklik menu Window>Animation.
4. Untuk membuat animasi, pertama-tama kita akan bekerja dengan menu Layers. Klik ikon mata pada layer teks nama Anda. Sehingga ikon mata tidak terlihat dan otomatis teks nama Anda pun tidak terlihat. Sedangkan untuk bingkai biarkan saja terlihat.
5. Pindahlah ke jendela Animation, lalu klik ikon Duplicate Current Frame. Anda sekarang mempunyai dua frame di jendela animation. Klik ikon mata pada layer teks nama Anda sehingga terlihat. Hasilnya frame pertama teks nama Anda tidak terlihat sedangkan pada frame yang kedua teks nama Anda terlihat.
6. Sekarang aturlah waktu “teks berkedip” pada jendela Animation. Klik pada Selects Frame Delay Time di bawah frame pertama dan kedua di jendela animation. Contoh: Beri waktu 0.5 pada kedua frame.
7. Untuk mencoba animasi teks Anda klik Plays/Stops Animation masih di jendela animation.
8. Kalau waktu berkedipnya sudah terasa cukup (tidak terlalu cepat juga tidak terlalu lambat)
9. Langkah berikutnya, simpan pekerjaan Anda dengan mengklik menu File >Save Optimized (Ctrl+Alt+S). Pada Save as Type Anda pilih extensi Image Only (*.gif) klik Save.

Bagian Ketiga (Ubah File GIF Anda Dalam Bentuk URL):

1. Untuk mengubah file gif dalam bentuk URL, Anda memerlukan web yang menyediakan layanan tersebut. Dan ternyata banyak sekali web yang menyediakan layanan secara gratisan, free atau orang malay biang ‘percuma’ ^_^ diantaranya Photobucket, servimg, dan layanan gratis lainnya. Atau jika Anda sudah memiliki account gmail Anda bisa mengaktifkan googlepages dan mengupload file photo disana, atau bisa juga dengan menggunakan layanan Picasa dengan menggunakan account gmail juga.
2. Namun untuk mempermudah saya anjurkan untuk menggunakan layanan dari servimg karena Anda cukup mendaftar dengan account email yang manapun dan tanpa adanya email aktivasi. Cukup mendaftar, login dan Anda bisa langsung mengupload photo.

Bagian Keempat (Memasang Banner Di Blog Sendiri dan Menyediakan Tag HTML untuk Tukar Link)

1. Diantara keempat bagian ini, rasanya bagian terakhir yang paling menarik dan mendebarkan ^_^. Khususnya untuk saya. (karena salah sedikit saja memberikan tag HTML bisa hancur semuanya)
2. Ok, setelah mempunyai URL banner, Anda memerlukan Tag HTML agar bisa disimpan pada elemen html yang ditempatkan di sidebar blog sekaligus untuk memudahkan bertukar link. Dan saat seseorang mengklik banner Anda di blog lain (yang telah bertukar link) langsung di arahkan menuju blog Anda, seperti halnya di bawah,

<a href=”http://hakimtea.com”><img border=”0″ alt=”hakimtea.com” src=”http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif”/></a><br />

Tukeran Link Yuk…!

Silahkan copy kode di atas…!

Saya akan segera link balik…!

Tag HTMLnya sebagai berikut,

<center>
<a href="URL-BLOG-ANDA"><img border="0" alt="NAMA-ANDA.BLOGSPOT.COM" src="URL-GAMBAR-ANDA"/></a><br/>
<textarea rows="3" cols="15" name="code"><a href="URL-BLOG-ANDA"> <img border="0" alt="NAMA-ANDA.BLOGSPOT.COM" src="URL-GAMBAR-ANDA"/> </a>
</textarea><br/>
Tukeran Link Yuk...! <br/>Silahkan copy kode di atas...!<br/>Saya akan segera link balik...!
</center>


Anda tinggal mengganti:

• URL-BLOG-ANDA: (contoh, URL blog saya yang “dulu” http://hakimtea.blogspot.com)*
• NAMA-ANDA.BLOGSPOT.COM: (contoh nama blog saya, Hakimtea.Blogspot.Com)*
• URL-GAMBAR-ANDA: (contoh URL gambar saya, http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif)*

* NOTE: perhatikan pergantiannya 2 kali; satu agar tampil langsung sebagai banner Anda dan yang satu lagi tampil di teks area untuk memudahkan blogger lain mengcopy-paste kode HTML banner Anda.

Sebagai contoh saya masukan URL Blog, Nama blog, dan URL gambar “saya” ke dalam tag HTML di atas, maka kodenya jadi seperti di bawah ini,

<center>
<a href="http://hakimtea.blogspot.com"><img border="0" alt="hakimtea.blogspotcom" src="http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif"/></a><br/>
<textarea rows="3" cols="15" name="code"><a href="http://hakimtea.blogspot.com"> <img border="0" alt="hakimtea.com" src="http://i27.servimg.com/u/f27/11/83/04/92/banner10.gif"/> </a>
</textarea><br/>
Tukeran Link Yuk...! <br/>Silahkan copy kode di atas...!<br/>Saya akan segera link balik...!
</center>


Perhatikan penyimpanan URL BLOG ANDA, NAMA BLOG ANDA dan URL GAMBAR ANDA… silahkan dicoba! Saya rasa cukup mudah dan tidak akan ada masalah! Seandainya ada, tinggalkan komentar di bawah

______________

(*) Transparent: Agar banner Anda bisa menyesuaikan diri (warna) di blog mana saja dia berada.

Edit: 21 Maret 2008 by hakimtea atas usulan dari W15n’U (sorry ma pren baru sempet, kemaren tuh abiz sunat lupa)

Gimana caranya membuat LIST MENU? Oke, langsung saja kita akan buat list menu menggunakan css.maxdesign. Klik Disini kemudian pilih menu seperti apa yang Anda inginkan; vertikal atau horizontal. Apapun pilihan Anda sesuaikan dengan template blog. Misalkan Anda memilih tipe horizontal Dive into Mark Pure CSS Tabs. Klik disana kemudian kita akan diberi dua kode; satu kode HTML dan satu lagi CSS.

Untuk kode CSS copy dan paste di edit html blog anda jangan lupa untuk menceklis EXPAND TEMPLATE WIDGET simpan kode CSS tersebut tepat di atas kode: ]]></b:skin> lalu SAVE.

Untuk kode HTMLnya kita masukan ke ADD PAGE ELEMENT/Elemen Halaman – HTML/JavaScript dan simpan dimana Anda ingin menunya terlihat. Biasanya kode HTML umumnya seperti dibawah ini:

<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

Nah Anda tinggal menyimpannya di page element html Anda dan mengganti tanda kruis (#) dengan link tujuan dan ITEM ONE sampe ITEM FIVE dengan nama link dari tujuan tersebut. Contoh list menu saya di atas:

<div id="navcontainer">
<ul id="navlist">
<li><a href="http://hakimtea.blogspot.com/">HOME</a></li>
<li><a href="http://hakimtea.blogspot.com/2006/01/tentang-saya.
html">TENTANG</a></li>
<li><a href="http://hakimtea.blogspot.com/2006/12/hubungi-saya.
html">KONTAK</a></li>
<li><a href="http://hakimtea.blogspot.com/search/label/Tutorial">
TUTORIAL</a></li>
<li><a href="http://hakimtea.blogspot.com/search/label/Tips">
TIPS</a></li>
</ul>
</div>

Mudahkan?
Silahkan dicoba…!
Kalo masih ada yang kurang dan masih pusing jangan sungkan hubungi sayah atau tinggalkan comment di postingan inih.

Caranya cukup gampang setelah login, klik Layout (template) -> Page Element (Elemen Halaman) -> Klik Add a Page Element (Tambahkan sebuah elemen) dimana menu tersebut akan ditempatkan. -> Pada kotak dialog “Choose a New Page Element” (Pilih elemen baru) pilih “HTML/JavaScript” klik ADD TO BLOG (TAMBAHKAN KE BLOG)-> Setelah muncul kotak dialog “Configure HTML/JavaScript” (Mengkonfigurasi HTML/JavaScript) isi di bagian contentnya dengan kode dibawah ini: (Title biarkan saja kosong)

kita bikin tiga link ajah sebagai contoh.

<select name="menu" onchange="window.open(this.options
[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected> Bagian Ini disi dengan judul arsip Pull Down </option>

<option value=”bagian ini diisi dengan alamat Web/URL 1″>Bagian ini diisi dengan nama 1</option>

<option value=”bagian ini diisi dengan alamat Web/URL 2″>Bagian ini diisi dengan nama 2</option>

<option value=”bagian ini diisi dengan alamat Web/URL 3″>Bagian ini diisi dengan nama 3</option>

Contoh :

<select name="menu" onchange="window.open(this.options
[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected>.: Bandung Link :.</option>

<option value=”http://www.bandung.go.id/”>Web Resmi Pemkot Bandung</option>

<option value=”http://gerbang.jabar.go.id”>Kabupaten Bandung</option>

<option value=”http://www.asiatravel.com/bandinfo.html”>Travel Information</option>

Setelah itu SAVE CHANGES (SIMPAN PERUBAHAN) -> Lihat blog Anda, maka hasilnya akan seperti ini:

Silahkan dicoba.