membuat logo blog jadi makin kereen...

Tampilan logo blog pada header yang khas dan memiliki desain yang bagus pasti menjadi dambaan setiap blogger. Logo blog biasanya ditampilkan sebagai bagian dari header yang berupa paduan gambar dan gambar teks yang berisi nama atau ciri dari suatu blog.  Umumnya, logo blog digunakan untuk menggantikan teks pada bagian title dan deskripsi header. Tentu saja, membuat logo blog, meskipun hanya berupa logo text, bukanlah perkara mudah bagi setiap orang. Keahlian setidaknya dibutuhkan untuk membuat teks logo dengan menggunakan software image editing semacam Correl Draw maupun Photoshop.

Pengen punya logo teks blog yang seperti ini?

 Atau yang seperti ini?

Kabar baiknya, saat ini ada banyak layanan situs online logo creator and generator yang dapat memudahkan pekerjaan membuat logo blog. Siapa saja dapat dengan mudah membuat teks logo blog maupun logo blog untuk header dengan hasil yang lumayan baik dan tidak mengecewakan. Telah saya pilihkan 6 online logo generator/creator yang mudah untuk digunakan sebagai berikut:

1. www.textspace.net

Memiliki berbagai jenis text generator sesuai dengan bentuk design-nya, misalnya patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.

2. www.flamingtext.com

FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview dari hasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.

3. cooltext.com

Sama halnya dengan flamingtext, cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.

4. www.simwebsol.com

Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.

5. www.logomatik.net

Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yang dihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.

6. www.thelogoshop.info

Cukup sederhana, atau bisa dibilang sangat sederhana, selain karena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo.

Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog. Read more

Percepat Loading Blog dengan Optimalisasi/Kompres CSS

Apa hubungan CSS dengan load time (waktu muat) halaman blog???
Yang paling sederhana, ukuran file CSS menentukan berapa banyak bagian yang harus dibaca oleh browser. Semakin besar ukuran file, tentu saja bahasa perintahnya semakin banyak, dengan demikian 'waktu baca' yang dibutuhkan oleh browser semakin panjang. Anda dapat menggunakan website/blog speed test tool di blog ini untuk mengetahui kecepatan loading blog anda.

Setelah ganti template beberapa waktu yang lalu, masalah loading blog yang cenderung lebih lama daripada template yangsebelumnya muncul. Tentu saja hal ini berefek tidak baik. Yang pertama efeknya adalah ketidaknyamanan pengunjung. Terlebih lagi apabila muncul ketidaksabaran dan  kemudian diwujudkan dalam aksi "Tutup aja aaaaah, males gw, lo-la bangeeetzz!". Yang kedua, Google saat ini telah melakukan penalti bagi website/blog yang memiliki waktu load yang terlalu lama. Walhasil, peringkat dalam indeks pencarian bisa turun, dengan kata lain SEO lemah.

Salah satu usaha yang saya lakukan adalah dengan mengkompres gambar PNG dengan PngGauntlet. Hasilnya lumayan untuk mengurangi besar gambar tanpa mengurangi kualitasnya. Selain itu, dilakukan pula  beberapa langkah lain, salah satunya: melakukan perampingan CSS. Mudah-mudahan saat ini loadtime sudah berkurang meskipun belum maksimal (mudah-mudahan ga kelamaan ya).

Kembali ke CSS. File CSS adalah seluruh isi aturan style CSS yang ada di dalam template HTML, XML, maupun yang lainnya. Seluruh aturan tersebut kemudian dirangkum menjadi satu sebagai sebuah file yang dibaca oleh browser. Nah, pada bagian ini, ada banyak aturan tidak perlu yang bisa kita hapus agar tidak mengambil space karena semakin banyak space semakin besar ukuran file.

Lalu bagaimana cara mengurangi ukuran file CSSnya?

1. Lakukan Editing CSS Secara Manual.

Ada beberapa contoh aturan berikut ini:

Misalnya aturan pada header-wrapper,

#header-wrapper {

background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}

Contoh di atas adalah penataan CSS secara standar, dimaksudkan agar browser dapat membaca aturan dengan baik dan urut. Namun pada saat ini, semua browser telah memiliki kecepatan dan kemampuan baca yang tinggi (anda sudah tidak pake IE 6 yang kuno itu lagi kan?), sehingga aturan seperti di atas tidak menjadi hal wajib. Aturan di atas memiliki white space (sisa ruang) dan juga spasi. Kita dapat melakukan perampingan pada ruang-ruang tersebut. Contoh:

#header-wrapper{background:url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}

Pada contoh styling berikut:

{Margin-top: 15px;
Margin-right: 10px;
Margin-bottom: 15px;
Margin-left: 15px; }

Style margin di atas dapat kita rampingkan dengan CSS short-hand dan mengurangi spacenya:

{Margin:15px 10px;}

Karena nilai margin atas dan bawah sama serta nilai kanan dan kiri sama, kita dapat merampingkan dengan cara di atas, dimana 15px mewakili ukuran atas-bawah dan 10px mewakili kanan-kiri. Jika semua nilai margin sama, misalnya 15px, kita tinggal tuliskan: {margin:10px}. Perhatikan bahwa semua aturan nilai dimulai dari atas dan berjalan searah jarum jam: atas, kanan, bawah, dan kiri.

Ehm, sudah mulai pusingkah? Tidak kan? Bukankah belajar itu menyenangkan?  Untuk melakukan cara-cara lain dan jika tertarik anda dapat mengunjungi W3 School.

2. Gunakan Layanan Situs-situs Penyedia Tool Kompres CSS Secara Online

Nah ini bagian yang lebih mudah. Anda dapat menggunakan beberapa tool layanan kompresi CSS dan dalam sekejap anda langsung mendapat hasilnya. Silahkan kunjungi:

-CSS Drive Gallery

-CSS Compressor

-Online CSS Optimiser/Optimizer
-Minify CSS

-CSSTidy Online

Atau anda dapat mencari situs lainnya melalui googling dengan keyword "css compression tool".

Langkah-langkahnya:

a. Copy semua aturan CSS dari template HTML/XML.

b. Setelah masuk ke situs layanan kompresi CSS yang anda pilih, paste semua kode tersebut dan klik 'compress', 'optimize', dan lains ebagainya.

c. Tunggu beberapa saat dan hasilnya akan keluar lengkap dengan hasil ukuran file terakhir setelah kompresi dan perbandingannya. Perbedaan yang kecil sekalipun akan sangat berpengaruh terhadap berkurangnya loadtime halaman.

d. Download backup template terlebih dahulu pada halaman edit HTML.

e. Hapus bagian dimana anda mengkopi aturanCSS tadi dan masukkan hasil kompresi ke bagian tersebut.

f. Preview dan jika tidak ada masalah lagi, save.

Clue: 

Seluruh code CSS terletak di bagian head. Lebih tepatnya, semua code CSS pengatur tampilan terletak di antara <b:skin> dan ]]></b:skin>.

Pilih jenis/opsi kompresi 'standard'  atau sejenisnya pada tool kompresi CSS yang anda gunakan.

Semoga bermanfaat dan Good luck.

Read more

Tips Mengganti Judul Blog dengan foto

sore ini saya sedang baring smbil baca-baca berita di internet tentang Internet marketing dan berita-berita lainnya yang berhubungan dengan internet marketing dan tiba-tiba saya kedatangan tamu seorang rekan blogger yang menanyakan sesuatu kepada saya, isi pertanyaannya adalah bagaimana caranya agar judul blog saya bisa di ganti dengan foto-foto daerah wisata agar kelihatan lebih bagus dan lebih informatif, saya lalu bertanya apa produk apa yang anda publikasikan di blog anda, jawabnya tentang wisata.

 

Menurut saya suatu keputusan yang bagus bila mengganti judul blog dengan gambar atau foto daerah wisata seperti foto patung Catur Muka yang berada di tengah kota Denpasar atau Pura di Tanah Lot Tabanan yang merupakan salah satu daerah tujuan wisata Bali yang sudah sangat terkenal di mata dunia.

Singkatnya rekan ini meminta saya agar saya bisa membantunya untuk mengubah ukuran gambar pada adobe photoshop agar sesuai dengan lebar judul blognya.

Untuk itu saya mencoba postingan kali ini untuk membantu rekan-rekan yang sedang ngeblog untuk mengubah tampilan judul blog mereka menjadi lebih informatif (sekalipun blog saya tidak seindah yang diharapkan, maklum saya bukan orang seni).

 

Mari kita mulai pelajaran kita hari ini dengan topik mengubah judul blog.

Langkah pertama yang harus diperhatikan adalah mengetahui lebar dari judul blog kita, ini penting agar kita bisa membuat lebar image atau gambar pada adobe photoshop sesuai dengan lebar blog kita.

Untuk mengetahui lebar blog kita ikuti langkah berikut ini

Langkah pertama, login/sign in terlebih dahulu ke blogger dengan akun anda kemudian klik layout dan klik edit html.

Langkah selanjutnya pada edit html carikan code outer wrapper seperti berikut :

perhatikan pada tanda panah berwarna merah ada format width : 744px;, angka 744 inilah yang dijadikan untuk menentukan lebar image yang akan anda buat pada adobe photoshop.

Sedangkan untuk tinggi rendahnya itu tergantung dari kehenedak anda sendiri.

Setelah mengetahui lebar dari judul blog sekarang kita kembali ke adobe photoshop dan buat dokumen baru dengan klik menu File - New.

perhatikan gambar di atas lebah width ditentukan berdasarkan ukuran dari lebar blog yang sudah kita lihat tadi, selanjutnya tekan OK.

Selanjutnya masukan foto yang hendak anda jadikan background judul (title) blog anda dan olah sedemikian rupa sehingga menjadi lebih indah dan informatif kemudian simpanlah dengan format yang lebih kecil seperti JPG atau GIF agar tidak terlalu membebani blog kita saat dibrowsing oleh pengunjung blog kita.

Sampai disini pekerjaan kita belum selesai, nah terus bagaimana caranya agar gambar yang sudah di buat tadi bisa terpasang di blog kita ? oke mari kita mulai ya...

Setelah gambar/image yang sudah dibuatkan tadi selesai maka lengkah selanjutnya adalah menempatkan gambar tersebut ke sebuah website yang menyediakan layanan upload image misalnya googlepages kemudian upload gambar anda di sana dan catat alamat URLnya.

Setelah upload gambar, maka sekarang kita kembali ke edit blog kita pada edit html carikan code seperti berikut :

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background : url("http://hendrypiran.googlepages.com/belajarilmukomputer-2.gif") no-repeat;

pada tulisan yang berwarna merah gantilah dengan alamat URL gambar anda yang sudah tersimpan di googlepages tadi kemudian simpan/save template blog anda dan preview/pratinjau.

Sekian tips kali ini dari belajar ilmu komputer semoga bisa membantu Read more