Cara Membuat Dan Memasang Favicon Blog Di Blogspot Blogger

Membuat Logo Favicon Blog -  Membuat gambar favicon (favorite icon) pada blog dapat kita lakukan dengan menggunakan aplikasi editing gambar seperti misalnya inkscape, gimp, corel draw atau photoshop (windows). Selain itu, kita juga dapat memanfaatkan tools online untuk melakukan edit gambar sekaligus membuat format gambar sesuai dengan standard favicon untuk blog (generate).

Gambar favicon blog yaitu logo yang terlihat ketika kita membuka halaman blog, logo ini terletak di tab browser, berdampingan dengan judul blog saat kita membuka halaman home / beranda blog. Proses pembuatan gambar favicon relatif mudah dan ukurannya memang cukup kecil. Khusus untuk gambar/logo favicon ini memang harus berbentuk persegi (bujur sangkar). Membuat gambar favicon blog tidak memerlukan waktu yang lama, kecuali bila anda ingin membuat sebuah logo favicon yang kreatif dan unik, mungkin akan menyita waktu untuk membuatnya.

• Cara Menyimpan Gambar dan Foto di Google Photos 
• Cara Menambah dan Memasang Gadget Di Blogspot Blogger
• Cara Screenshot Di Mozilla Firefox Tanpa Aplikasi

baca-juga

Secara default, gambar favicon blog dengan platform blogspot berupa logo blogger yang berupa huruf b yang sudah dimodifikasi dengan bingkai khas blogger. Kita dapat mengganti logo tersebut dengan menggunakan gambar yang kita buat sendiri, atau kita bisa juga tidak perlu membuat gambar favicon sendiri, cukup download gambar ikon di internet lalu beri sedikit modifikasi menggunakan aplikasi pengolah gambar. Dengan demikian, blog tidak lagi menggunakan logo blogger.com sehingga lebih mengidentifikasikan si empunya blog.

Membuat Gambar Favicon Blog Sendiri

Banyak tersedia tools gratis untuk membuat objek gambar dalam berbagai format. Pengguna distro linux dapat menggunakan aplikasi inkscape dan gimp untuk membuat gambar favicon blog. Sementara untuk sistem windows dapat menggunakan aplikasi photoshop dan corel draw.

inkscape dan gimp juga dapat di install di sistem windows dan mac os x

Silahkan gunakan cara yang paling mudah atau paling anda sukai untuk membuat gambar logo favicon. Selain tools offline, kita juga dapat menggunakan tools online untuk membuat objek gambar.

 

Merubah Format Dan Ukuran Gambar Favicon Blog

Setelah membuat gambar favicon blog (dalam format .png, .jpg atau yang lain) menggunakan aplikasi pembuat /editing gambar, selanjutnya kita dapat merubah format dan ukuran gambar tersebut menggunakan tools online. Cara ini lebih direkomendasikan karena, kita akan memperoleh gambar favicon dengan ukuran dan format yang tepat.

Banyak web site yang menyediakan layanan untuk melakukan hal tersebut, anda dapat memanfaatkan google search engine untuk mencari web site yang menyediakan layanan untuk membuat gambar favicon. Gambar yang sudah kita buat sebelumnya akan diproses sedemikian rupa sehingga menghasilkan format dan ukuran gambar khusus untuk favicon blog.

Misalnya:
Situs web yang akan saya pakai untuk membuat gambar favicon yaitu http://www.favicon.cc/. Proses pembuatan gambar favicon di situs web ini cukup simpel, kita tinggal upload gambar lalu download hasil generate dengan ukuran gambar 16x16 pixel dalam format .ico (favicon.ico)

1. Setelah selesai membuat gambar logo untuk favicon , jalankan web browser lalu kunjungi alamat situs web http://www.favicon.cc/
2. Pertama klik pada tombol Import image lalu pada jendela import image klik tombol Browse dan pilih file gambar favicon yang akan kita ubah
3. Selanjutnya lihat pengaturan di atas tombol upload, pilih keep dimension bila bentuk gambar sudah persegi (bujur sangkar) atau  pilih shrink to square icon  bila bentuk gambar yang kita upload berupa persegi panjang. Setelah itu klik pada tombol Upload
4. Setelah itu kita akan melihat tampilan gambar ikon pada palet favicon.cc, sampai disini kita sudah berhasil upload gambar yang akan kita ubah format dan ukurannya dalam bentuk favicon.ico. Bila diperlukan silahkan lakukan beberapa polesan pada gambar menggunakan tools yang tersedia
5. Setelah itu, klik pada tombol Download favicon lalu simpan di hardisk komputer. File hasil download memiliki format favicon.ico dengan ukuran 16x16 pixel (standard gambar favicon)

Install / Pasang Gambar Favicon Di Blog

Setelah selesai membuat gambar/logo favicon blog, selanjutnya kita dapat memasang gambar favicon tersebut di blog untuk mengganti favicon default blogger. Ada dua cara untuk memasang atau install gambar favicon di blog platform blogspot, pertama melalui menu tata letak (layout) di dashboard blogger.com dan yang kedua, kita dapat menggunakan kode html khusus untuk memasang gambar favicon blog.

A. Memasang Favicon Melalui Menu Tata Letak Blogger.com

1. Jalankan web browser lalu sign in ke blogger.com
2. Setelah itu, lihat pada menu tata letak di dashboard blog dan klik tombol Edit pada element favicon
3. Pada jendela konfigurasi ikon favorit (favicon) klik pada tombol Browse lalu pilih gambar logo favicon yang akan kita pasang di blog, terakhir klik pada tombol Simpan

Gunakan ukuran file gambar favicon tidak lebih dari 100kb

B. Memasang Favicon Menggunakan Kode HTML

1. Pertama upload gambar logo favicon ke google photos atau media penyimpanan awan yang lain
2. Sign in ke blogger.com, pada dashboard blog, pilih menu tema → edit html
3. Setelah itu letakan kode html berikut ini di antara kode <head>...</head> : <link href='url file gambar' rel='icon' type='image/x-icon'/>
4. Terakhir klik pada tombol Simpan

Setelah kita pasang gambar favicon di blogspot, gambar favicon mungkin tidak akan langsung muncul saat itu juga, tidak lama setelahnya kita dapat melihat logo favicon yang baru kita pasang sudah terlihat di addres bar web browser. Sebaiknya gunakan ukuran file yang kecil (di bawah 100kb) saat memasang gambar favicon blog sehingga tidak terlalu membebani loading blog.

Bila anda sudah dapat melihat logo favicon blog, berarti anda telah berhasil memasang gambar favicon dengan baik dan benar. Selanjutnya, kita dapat mengamati gambar favicon tersebut, bila memang kurang cocok atau pas dengan selera, kita dapat menggantinya kapanpun kita mau dengan cara dan proses yang sama untuk membuat dam memasang gambar favicon di blogspot blogger.com.

Mengganti logo blogger.com pada favicon blog sebaiknya kita lakukan untuk identitas blog. Biasanya mereka yang mengunjungi blog/web site akan membuka beberapa tab browser, dengan adanya logo favicon yang unik ini akan memudahkan pengunjung dalam melakukan identifikasi terhadap sebuah blog atau situs web.

Kesimpulan

Gunakanlah gambar favicon yang unik dan belum pernah digunakan oleh situs web atau blog lain. Kita dapat menggunakan simbol, huruf atau gambar benda dengan desain yang unik dan khas. Favicon akan menjadi salah satu element idetitas sebuah blog atau web site. Demikian cara membuat gambar favicon blog di blogspot blogger.

Cara Menambah Atau Memasang CSS Di Blogspot Blogger

Menambah CSS Di Blog - CSS (Cascading Style Sheet) merupakan bahasa pemrograman untuk mempercantik tampilan web / blog. Kita dapat menambahkan CSS di blogspot melalui menu desainer tema blogger atau menu edit html blog. Dengan CSS inilah blog atau web site akan memiliki tampilan yang jauh lebih menarik dan tentunya hal ini dapat membuat pengunjung blog betah berlama-lama mengunjungi blog yang kita miliki.

Karena kita akan menambahkan CSS ke blog, tentu kita harus tahu dan menguasai bahasa pemrograman CSS. Dalam membuat atau membangun sebuah web site atau blog, sebaiknya kita menguasai bahasa pemrograman html, CSS dan java script (ecma script).

• Cara menulis artikel postingan di blogspot
• Cara edit template blog melalui menu desainer tema blogger
• Cara menambahkan gadget/widget di blogspot blogger

baca juga

Bahasa pemrograman html digunakan untuk membuat kerangka web site, CSS digunakan untuk mempercantik tampilan dari web site dan java script berfungsi untuk membuat web site menjadi lebih interaktif dengan penggunanya (pengunjung).

Cara Menambah Atau Memasang CSS Di Blogspot Blogger

Untuk memasang CSS di sebuah blog atau web site, terdapat beberapa teknik pemasangan, diantaranya yaitu : Embedded (melekatkan), Inline (berderet), External (dari luar blog) dan import (dari luar blog). Secara umum cara yang paling sering digunakan yaitu Inline dan Embedded.

Bila CSS yang akan kita tambahkan tidak terlalu panjang, lebih baik gunakan cara Embedded atau Inline , karena lebih simpel dan tidak perlu menyimpan file .CSS di media penyimpanan daring. Namun, bila kita akan menggunakan CSS yang cukup panjang, menyimpan CSS dalam sebuah file bisa kita lakukan supaya terlihat lebih rapi.

Untuk menambahkan CSS pada blog dengan platform blogspot (blogger.com), dapat kita lakukan dengan cara sebagai berikut :

1. Menu Desainer Tema Blogger (cara pertama)

• Sign in ke blogger.com
• Lihat pada menu Tema (themes), pilih “Sesuaikan” atau “Customize”
• Klik menu “Lanjutan”
• Klik menu “Tambahkan CSS”, dari sinilah kita dapat menambahkan CSS di blogger.com
• Setelah selesai, klik tombol “Terapkan ke Blog”

2. Menu HTML (cara ke dua)

• Sign in ke blogger.com
• Lihat pada menu Tema (themes), pilih “Edit html”
• Cari kode berikut ini  ]]></b:skin> , gunakan tombol “Ctrl + F” untuk mencari teks di html blogger.com
• Letakan kode CSS di atas kode  ]]></b:skin> tersebut
• Setelah selesai, klik tombol “Simpan tema”

Cara menambahkan CSS di blog dengan platform blogspot tidaklah terlalu sulit. Bila anda ingin mahir dalam merancang tampilan blog, anda harus menguasai bahasa pemrograman CSS dengan baik dan rajin dalam melakukan dan menyusun rancangan tampilan blog.

Teknik Memasang CSS Di Blog atau Web site

Setelah mengetahui cara menambah atau memasang CSS di blogspot, saya akan menguraikan sedikit mengenai teknik atau tata cara pemasangan CSS pada blog / web site.

1. Embedded (Melekatkan)

Cara ini banyak digunakan oleh para bloger dalam menambahkan CSS di blog. Bila anda baru mengenal bloging, dapat menggunakan cara seperti ini dalam menambahkan CSS di blog. Teknik embedded yaitu menambahkan CSS langsung di blog, tidak menggunakan file eksternal sama seperti inline CSS.

Contoh :

Sidebar-right-1 {

background-color : white;

}

Letakan kode CSS tersebut di atas  ]]></b:skin> html blogger.com

2. Inline CSS

Hampir sama seperti Embedded, Inline CSS merupakan teknik menambahkan CSS langsung di blog tanpa perlu link eksternal. Hanya model penulisannya saja yang berbeda dengan embedded.

Contoh :

<span style='color: green'>ini warna hijau</span>

Bila kita menulis artikel postingan menggunakan menu teks warna atau penyorot, kita dapat melihat Inline CSS ini di mode html. Cara ini digunakan khusus untuk element diantara kode , kita dapat menggunakannya saat menulis artikel postingan.

3. External CSS

Cara ini berbeda dengan Inline dan Embedded, kita memerlukan file eksternal yang nantinya akan di panggil di blog melalui sebuah link yang kita tulis di html blog.

Contoh :

<link href="url_file.CSS" media="all" rel="stylesheet" type="text/CSS"></link>

4. Imported CSS

Hampir sama dengan External CSS, hanya model penulisannya saja yang berbeda.

Contoh :

@import ‘url_file.CSS’;

Bila anda ingin belajar lebih jauh mengenai bahasa pemrograman CSS anda dapat belajar melalui media blog / web site, buku, e-book, mengikuti bimbingan pelatihan membangun web site (kursus) atau melanjutkan pendidikan dengan mengambil jurusan yang berhubungan dengan membangun web site.

Banyak web site / blog yang mengulas tutorial CSS baik dalam Bahasa Indonesia maupun Bahasa Asing. Silahkan gunakan metode terbaik dalam mempelajari bahasa pemrograman CSS sesuai dengan keinginan anda masing-masing.

Kesimpulan

Menambahkan CSS di blog berfungsi untuk mempercantik tampilan blog supaya terlihat lebih menarik. Tampilan web site / blog yang menarik tentu saja akan memberi daya tarik kepada para pengunjung blog. Demikian cara menambah atau memasang CSS di blogpsot blogger.com semoga bermanfaat dan menambah pengetahuan kita semuanya, terutama bagi anda yang baru mengenal blogger.com.

Cara Menambah Atau Memasang Gadget/Widget Di Blogspot Blogger

Memasang Gadget Di Blog - Menambahkan gadget atau widget di blog platform blogspot (blogger) dapat kita lakukan dengan cukup mudah. Blogger sendiri menyediakan menu Tata Letak (Layout) yang menampilkan desain tata letak dari setiap gadget blog. Kita tinggal klik pada tombol menu “Add Gadget” dan setelah itu pilih salah satu gadget yang akan kita tambahkan ke dalam layout blog.

Gadget merupakan salah satu element blog yang letaknya dapat dipindah-pindah sesuai dengan selera kita masing-masing. Sebaiknya gunakan gadget yang memang diperlukan saja pada blog sehingga tidak memenuhi ruang halaman beranda blog.

• Cara menulis artikel postingan di blogspot
• Cara edit template blog melalui menu desainer tema blogger

baca juga

Blogger menyediakan banyak macam gadget yang bisa kita tambahkan di blog tanpa perlu edit html. Tidak hanya itu saja, blogger.com juga menyediakan gadget html/javascript untuk kita isi dengan bahasa pemrograman html atau javascript.

Cara Menambah Atau Memasang Gadget/Widget Di Blogspot Blogger

Memasang atau menambah gadget di blogspot dapat kita lakukan dengan cara sebagai berikut :

1. Menambahkan Gadget

• Sign in ke blogger.com
• Lihat menu Tata Letak (Layout) di dashboard blog
• Lihat pada layout gadget blog, kita dapat menambahkan gadget blog melalui menu Tata Letak ini
• Klik pada tombol “Tambahkan Gadget” , pada element blog yang akan kita tambahkan gadget/widget
• Setelah itu akan muncul jendela “Tambahkan Gadget” berisi semua gadget yang tersedia di blogspot
• Pilih salah satu gadget yang akan kita tambahkan ke dalam blog
• Beberapa gadget mungkin memerlukan pengaturan terlebih dahulu, silahkan atur setiap gadget yang akan kita tambahkan sesuai dengan gadget tersebut.
• Terakhir, klik tombol Simpan (Save)

2. Memindahkan Gadget

Setelah berhasil memasang atau menambahkan gadget di blog, kita masih dapat memindahkan gadget tersebut ke sisi (tempat) lain dalam Tata Letak blog. Caranya adalah sebagai berikut :

Klik Gadget > Tahan > Geser ke tempat lain > Lepaskan

Proses memindahkan Gadget di blogspot tidaklah terlalu sulit, kita dapat melihat dengan jelas tempat untuk gadget yang akan di pindahkan, berbentuk kotak persegi dengan garis tepi berupa titik.

3. Menghapus Gadget

Gadget yang tidak terpakai sebaiknya dihapus saja, meskipun sebenarnya dapat disembunyikan melalui setelan html. Cara menghapus gadget adalah sebagai berikut :

Pilih gadget > Klik tombol Edit > Pilih Hapus

Kita dapat menambahkan banyak gadget pada setiap bagian blog. Namun, sebaiknya pasang gadget yang diperlukan saja. Selain melalui menu Tata Letak, kita juga dapat mengatur gadget dengan mengedit html blog. Secara umum proses menambahkan gadget pada blogspot relatif mudah, bahkan oleh mereka yang baru mengenal blogspot. Biasanya, para bloger menambahkan CSS untuk mempercantik tampilan gadget di blog.

• Cara Menambahkan CSS Di Blogspot

baca juga

Bila anda baru pertama kali mengenal blog, sebaiknya pelajari juga bahasa pemrograman html dan css untuk mempercantik tampilan blog. Sedangkan untuk menambah sentuhan blog supaya lebih interaktif, anda dapat menggunakan bahasa pemrograman java script (ecma script).

Demikian cara menambahkan atau memasang gadget di blogspot, semoga bermanfaat.