Cara Menampilkan Icon Smile Di Postingan Blog

Pengguna blogger pasti udah mengetahui icon smile yang banyak digunakan oleh pengguna Blogspot atau pengguna blog lain, dimana setiap ada kode teks icon smile maka kode tersebut akan berganti dengan icon smile secara visual. Namun sayangnya blogger tidak support untuk icon smile ini..Ups jangan berkecil hati..banyak jalan menuju roma, semua pasti ada solusinya.

Coba lihat contohnya di blog ini, setiap ada penulisan text yang mengacu kepada code smile pasti akan berubah secara visual. Sebagai contoh, saya mengetikan icon senyum :) dan tertawa :D dan ketika saya tersipu malu :$ yang jelas Icon smile ini akan tampil pada semua text yang ada pada blog kita di manapun letaknya (Nb: bukan dalam shoutbox, link dan gambar), yang paling menguntungkan icon smile ini dapat memberikan keterangan emoticon pengujung ketika sedang memberikan komentar :o.


1. Masuk ke Template > Edit HTML > Expand Widget Templates dan cari kode dibawah ini:

]]></b:skin>

2. Jika sudah ketemu copy code javascript di bawah, dan letakan dibawah kode ini ]]></b:skin>

<script src='http://louislim2.googlepages.com/addSmiley.js ' type='text/javascript'/>

3. Simpan dan lihat hasilnya.

Icon smile ini akan tampil secara otomatis pada blog kita setiap kali kita mengetikan standar kode dari icon tersebut.

Standar kode smile yang bisa digunakan :

:) or :-)
:D or :-D
:$ or :-$
:( or :-(
:p or :-p
;) or ;-)
:k or :-k
:@ or :-@
:# or :-#
:x or :-x
:o or :-o

Read more »

Cara Membedakan Icon Setiap Widget Di Blog

Sebagian besar template blogspot memiliki icon yang sama untuk judul sidebar pada setiap widget/gadget. Agar tampilan blog anda menjadi makin menarik, kita bisa mengubah icon tersebut menjadi berbeda pada setiap widget.

Bagaimana Meningkatkan Kemampuan SEO Kita?

Jika anda ingin melakukannya, anda harus melakukan beberapa persiapan. Langkah awal persiapan adalah, pastikan bahwa design dan tata letak dari widget anda sudah benar dan tidak berubah-ubah lagi. Jika nanti akan melakukan perubahan, bisa menyesuaikan kemudian.

langkah berikutnya anda silahkan mencari icon yang sesuai dengan widget anda, bisa dicari pada situs-situs berikut ini :

•     http://www.iconfinder.com

•     http://www.iconspedia.com

•     http://www.freeiconsweb.com

•     http://www.vistaicons.com

•     dan di Google image.

Icon yang digunakan sebaiknya berukuran sekitar 16×16 atau 32×32 pixel dengan format PNG. Simpan icon-icon tersebut ditempat penyimpanan gambar anda.

Bagaimana cara menambahkannya ?

1. Lakukan pengeditan pada salah satu widget yang ingin diubah, dengan mengklik tulisan edit. Misalnya pada widget “Labels”

2. Hasilnya akan menampilkan halaman popup. Lalu lihat ID dari widget yang anda gunakan.

Seperti yang terlihat pada gambar diatas, Widget Label yang saya gunakan memiliki ID “Label1”. ID ini akan kita gunakan untuk melakukan editing CSS pada template blog.

3. Langkah berikutnya adalah masuk ke menu Design > Edit HTML. Backup template anda terlebih dahulu. Karena dalam pengeditan membutuhkan kejelian dalam membaca kode. Jika salah pengeditan bisa dikembalikan lagi.

4. Tambahkan kode dibawah ini sebelum tag ]]></b:skin> :

    #Label1 h2 {
      margin: 0 0 1em 0;
      font: $(widget.title.font);
      color: $(widget.title.text.color);
      text-transform: uppercase;
      background:url(http://alamat-icon-anda) no-repeat scroll left center;
      padding:10px 0px 5px 38px;
    }

Keterangan :

• #Label1 : diambil dari nama widget ID yang anda gunakan.

• h2 : biasanya template menggunakan tag h2 untuk judul widget/gadget.

• http://alamat-icon-anda Ganti dengan alamat icon yang telah telah di buat

5. Simpan template anda, dan lihat hasilnya. Jika belum muncul, berarti ada CSS lain yang mempengaruhi Style anda. Karena pembuat template memiliki cara penulisan berbeda untuk templatenya.

Read more »

Cara Mudah Memasang Favicon Di Blog

Blogger baru saja memperkenalkan fitur baru "Blogger Custom Favicon" yang akhirnya memberi kemudahan baru bagi anda pengguna Blogger/Blogspot untuk membuat favicon pribadi blog. Kita tidak perlu repot-repot lagi mengupload file .ico ke hosting lain dan memasang script-nya melalui edit HTML. Cukup siapkan file ico sebagai favicon yang telah dibuat dan dipersiapkan untuk favicon blog blogger anda, dan upload melalui fitur "edit favicon".

Cara mengakses dan membuat "Blogger Custom Favicon":
 

Note:

Jika belum memiliki gambar favicon berformat .ico, convert terlebih dahulu file gambar (jpg/png) secara online dengan menggunakan ICO converter. Download file ico yang telah terbuat di komputer.
 

1. (update: fitur ini sekarang sudah dapat diakses langsung melalui dashboard Blogger)
2. Klik Design/Rancangan.
3. Di halaman page elements, di bagian atas editor akan ditemui fitur Edit favicon, dengan default favicon bergambar logo Blogger di sebelah kiri:
4. Klik "edit" di sebelah kanan tulisan "Favicon".
5. Kemudian akan muncul pop-up window:
6. Klik Browse dan cari folder dimana anda menyimpan file .ico yang telah dipersiapkan, klik open. Tunggu sampai favicon terupload.
7. Setelah favicon terupload, klik save.
8. Di bagian design/page elements, favicon akan muncul menggantikan favicon berlogo Blogger:
9. Custom Favicon telah tampil di Blog anda.
10. Done!

Note:
Paling tidak butuh waktu 1 hari untuk Blogger melakukan generating favicon. Jadi, sobat akan melihat hasil tampilan favicon baru di browser setelah proses itu.

Read more »

Situs Upload Favicon Untuk Blog

Seperti kita ketahui Blogger/blogspot tidak mengijinkan penggunanya untuk mengupload dan menghosting gambar favicon berformat ico. Jadi bagi anda yang ingin memasang favicon harus agak ribet diperlukan hosting eksternal untuk memuat file ico tersebut. Bagi anda yang ingin mengetahui langkah-langkah memasang favicon silakan kunjungi "cara membuat/memasang favicon dan animated favicon" terlebih dahulu

Namun, sayangnya tidak semua situs hosting gambar juga mensupport format gambar .ico. Memang gampang-gampang susah sih mencarinya. But don't worry, akhirnya saya dapat mengumpulkan dan mendapatkan beberapa situs yang dapat mensupport ico maupun gif (untuk animated favicon). Semuanya telah dites dan memiliki kualitas yang baik alias servernya tidak lemot dan file cepat terdownload oleh browser.

Berikut listnya:

1. Picturestack.Support: jpg, jpeg, tiff, png, gif, bmp, tiff, ico. Max: 4092 Kb. 
2. HostAnyImage. Support: jpg, jpeg, gif, ico, bmp, png. Max: 10420 Kb. 
3. HostAnyPic. Support: jpg, jpeg, bmp, gif, tiff, tif, png, ico, psd, swf. Max: 10420 Kb. 
4. Qfqy. Support: jpg, jpeg, gif, png, ico. Max: 2048 Kb. 
5. MyImageHost. Support: jpeg, jpg, gif, bmp, ico, png. Max: 25600 Kb. 
6. ImageHosting.gr. Support: jpeg, jpg, bmp, png, gif, ico, tif, tiff, psd, swf. Max: 2355 Kb. 
7. MyUpload.org. Support: jpg, jpeg, gif, png, ico. Max: 10240 Kb. 
8. image.computersteroids.com. Support: jpeg, jpg, bmp, png, gif, ico, tif, tiff, psd, swf, psp, art. Max: 10240 Kb.
9. FreeImageHosting.in. Support: jpeg, jpg, gif, png, ico. Max: 2048.

Give it a try then, mates.

Update:
Blogger kini telah memiliki fitur Blogger Custom Favicon yg dapat menambahkan Favicon secara otomatis dengan cara yg lebih mudah. Silahkan coba

Read more »

Cara Membuat Favicon Di Blog

Favicon adalah logo yang ditampilkan di sebelah kiri domain url maupun di tab browser. Pengguna blogspot tentu saja memiliki favicon default bawaan dari blogger. Hal ini tidak sama dengan wordpress dimana favicon secara otomatis dapat digenerasikandi ubahsuaikan. Favicon menjadi identitas dari suatu blog karena merupakan ciri khas dan bisa dibilang sebagai brand.

Gambar yang digunakan sebagai favicon berformat .ico seperti halnya format icon-icon yang biasa kita temui sebagai icon file ataupun folder di dalam PC. Format ini unik karena dimanapun dia ditampilkan, gambar aslinya akan langsung terlihat tanpa membuka filenya (dan ini bukan preview seperti yang kita lihat di format lain misalnya jpg, tif, dan lain-lain ketika ditampilkan di dalam folder). Untuk animated favicon  anda dapat menggunakan file gambar berformat gif.

Berikut langkah-langkah pembuatannya: 

1. Siapkan gambar yang hendak anda jadikan favicon, atau anda dapat mencarinya di situs-situs yang menyediakan gambar icon gratis. Anda dapat pula mencari gambar favicon maupun animated favicon gratis. Gunakan keyword "free favicon/animated favicon image" di Google.
2. Untuk membuat file ico, anda dapat menggunakan photoshop atau gunakan jasa situs generator ico gratis seperti: www.favicon.cc, www.favicongenerator.com, atau www.favicon.co.uk. Untuk animated favicon anda (gif) anda dapat membuat animasinya di situs www.animatedfavicon.com. Upload file anda ke situs-situs tersebut, ikuti beberapa langkahnya, dan download file hasilnya.
3. Upload file favicon anda ke situs hosting gambar yang mensupport gambar ico karena Blogger tidak mensupport upload gambar berformat ico. Lihat list situs terbaik untuk hosting gambar ico dan gif  ini untuk mengupload favicon anda.
4. Copy terlebih dahulu direct link dari gambar yang telah diupload.
5. Kemudian masukkan url-nya ke script tag berikut ke bagian antara <head> dan </head> di template HTML anda. Saya sarankan untuk dimasukkan setelah meta tag agar cepat termuat oleh browser namun tidak mengganggu meta.
   Untuk favicon file ico:
   
   <link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
   
   Untuk animated favicon file gif:
   
   <link href='url gambar gif anda' rel='icon' type='image/gif'/>
   
   Untuk menggunakan kedua-duanya dan berjaga apabila file gif gagal dimuat oleh koneksi yang sangat lambat, gunakan kedua file ico dan gif anda. Masukkan kedua tag dengan urutan sebagai berikut:
   
   <link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/> <link href='url gambar gif anda' rel='icon' type='image/gif'/>
   
   
6. Preview dan save.
7. Done!

Update:

Blogger kini telah memiliki fitur Blogger Custom Favicon yg dapat menambahkan Favicon secara otomatis dengan cara yg lebih mudah. Silahkan coba.

Read more »