Category: blog

Cara mengganti atau memasang favicon pada blog

Cara mengganti favicon di blog. Logo favicon standar pada blog yang kita buat dibloger adalah dengan menggunakan logo bloger, nah bagaimana caranya agar logo favicon tersebut kita ganti dengan logo blog kita sendiri agar kelihatan lebih keren hehe. Coba ikuti langkah-langkah yang akan saya jabarkan dibawah ini.

Sebelumnya buatlah terlebih dahulu logo favicon yang diinginkan dapat berupa format jpeg atau format png. Setelah membuat logo tersebut, kunjungi website layanan untuk menggenerate logo agar menjadi favicon contohnya pada web favicon generator

Pada contoh gambar diatas, klik pilih file kemudian pilih logo yang telah dibuat, disini saya membuat logo blog saya dengan format .png. klik create favicon untuk membuat icon favicon dengan secara otomatis icon favicon akan dibuat dengan ukuran 16×16 pixel.

Selanjutnya klik download the generator favicon untuk mendownload favicon yang telah dibuat.

Untuk menerapkanya di blog, ada dua cara, yaitu langsung pada menu layout yang ada di dasbor atau dengan memasang code html baru untuk favicon pada menu template edit html.

Cara pertama masuk pada dasbor bloger sobat, kemudian pilih menu layout kemudian klik edit pada favicon dan upload favicon yang telah di download tadi kemudian save. kemudian lakukan refresh pada blog dan lihat hasilnya.

Jika cara ini masih belum berhasil, selanjutnya gunakan cara kedua yaitu dengan menambahkan code html untuk membuat favicon. Masuk pada dasbor bloger anda, kemudian pilih menu template dan edit html. Cari code dibawah dengan menggunakan CTRL + F jika tidak ada, copy code dibawah dan tempatkan di bawah tag <head> ataupun di atas tag </head>

<link href=’URL-FAVICON’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/> </link>

Ganti code merah dengan alamat ulr favicon blog anda, save dan coba lakukan refresh pada blog.

Mungkin bagi pemula bingung dan bertanya dimana kita mendapatkan alamat url favicon blog, untuk mendapatkan alamat url favicon pada blog, kita harus mengupload favicon tersebut kesalah satu website penyedia upload foto, seperti photo bucketatau web-web lain yang sekarang sudah banyak di internet. Namun kita juga bisa upload favicon ke dalam blog pada saat kita membuat sebuah artikel. Nah pada saat di upluad kita tidak perlu menempatkannya pada artikel namun kita hanya mengambil alamat url favicon tersebut yang telah di upload, sebagai contoh lihat gambar dibawah :

Klik kanan pada favicon yang telah di upload dan pilih salin url gambar, nah kemudian paste url gambar tersebut kedalam code html yang berwarna merah seperti contoh diatas.

Semoga membantu J

July 4, 2021
Cara mudah modifikasi tema blog atau web dengan menggunakan firebug

Belajar modifikasi tema template blog. Kali ini saya akan share sebuah addson browser yang berfungsi untuk membantu kita dalam modifikasi tampilan blog. Kadang beberapa tema blog yang kita gunakan ada sedikit yang tidak sesuai dengan keinginan kita. Dan ketika merubahnya langsung dari dasbor bloger kita harus melakukan penyimpanan untuk melihat hasil modifikasi tersebut pada blog.

Dengan menggunakan add ons firebug yang ada pada browser, kita dapat langsung melihat hasil dari modifikasi tampilan blog tanpa harus menyimpannya terlebih dahulu. Keuntungan menggunakan add ons ini adalah kita tidak perlu takut akan tampilan blog yang salah di modifikasi karena pada saat menggunakan add ons ini code hasil modifikasi belum tersimpan dalam blog sebelum kita melakukan penyimpanan terlebih dahulu. Ketika menggunakan firebug setiap code css yang kita rubah, akan langsung dilihat hasilnya pada browser.

Baca Juga : Memasang Meta Tag Deskripsi dan Keyword di Blog

Menginstal firebug pada browser sama halnya dengan cara menginstal add ons wappalyzer yang pernah saya bahas, jadi saya akan bahas cara penggunaannya saja. Untuk menggunakan firebug cukup dengan klik icon firebug yang ada pada browser sampai muncul jendela firebug pada bagian bawah browser seperti contoh dibawah :

Ketika jendele firebug telah muncul klik icon inspect no 1 pada gambar diatas, lalu klik bagian template yang akan di modifikasi. Sebagai contoh saya akan merubah Judul blog saya yang sebelumnya berwarna putih menjadi warna merah. Ketika kita klik judul blog makan akan muncul file code css disebelah kanan yang menunjukan style dari judul blog (no 3).

Pada gambar diatas setelah kita klik judul blog, selanjutnya kita klik tag <a href…….. </a> (no 1) dan perhatikan disebelah kanan yang saya tandai dengan angka 2, terdapat code css yang menunjukan style dari h1 atau judul blog. Disitu dilihat bahwa color warna dari header h1 sudah saya ganti menjadi #ff0000 (warna merah) yang sebelumnya adalah #ffffff (warna putih).

Baca Juga : Membuat Artikel Terkait Atau Related Post di Blog

Dari contoh diatas penggunaan firebug sangatlah mudah, sehingga jika kita sudah yakin akan style yang kita terapkan tadi kita dapat langsung menggantinya di menu edit html pada blog. Sebaiknya kita juga harus paham sedikit tentang bahasa pemograman css dan html sehingga sangat mudah dalam mendesain sendiri tampilan blog kita.

Itulah cara mudah modifikasi blog dengan menggunakan firebug

July 4, 2021
Memasang Comment Facebook Pada Postingan Blogger

Cara membuat kotak komentar facebook di blogger – kali ini saya akan membahas bagaimana cara menambahkan komentar facebook pada postingan di blogger. Komentar facebook pada postingan ini sebenarnya agar mempermudah pengunjung memberikan komentar pada postingan blog kita. Karena rata-rata pengguna internet sudah memiliki account facebook.

Selain mempermudah pengunjung untuk memberikan komentar, kotak komentar juga ini dapat menambahkan traffic pada blog yang berasal dari facebook, dimana di ketahui pengguna facebook sudah sangat banyak.

Saya pernah mencari referensi di google tentang bagaimana cara menambahkan kotak komentar facebook pada tiap postingan blog, namun saya merasa kesulitan dalam penerapannya walaupun pada akhirnya selesai juga. Oke dari pada banyak basa basi mendingan kita langsung saja mulai langkah langkahnya J sebagai contoh lihat gambar dibawah, saya memasang kotak komentar facebook tepat diatas kotak komentar standar bloger

jika sobat ingin membuat komentar facebook yang berdampingan dengan komentar blog seperti yang ane gunakan di blog ini dapat lihat tutorialnya disini

Masuk ke akun bloger anda, kemudian klik blog yang akan dipasangkan kotak komentar facebook. Pilih menu template dan klik edit html. Karena disini saya memasang kotak komentar facebook tepat diatas kotak komentar bloger dan dibawah postingan, maka saya akan menempatkan code comment facebook tepat ditengah-tengah antara postingan blog dan komentar standar blog, caranya tekan CTRL + F kemudian ketikan <data:post.body/>. Kita akan menemukan beberapa tag <data:post.body/> namun di template saya, saya mencari tag <data:post.body/> yang paling bawah, nah pada awalnya disini saya selalu gagal dalam penempatan code comment facebook hingga akhirnya saya memilih tag <data:post.body/> yang berada paling bawah. Awalnya saya menempatkan codenya pas dibawah tag <data:post.body/> namun tampilan kotak komentar facebook berada diatas artikel terkait dan tombol share button (lihat no 1 pada gambar dibawah). Yang saya inginkan adalah komentar facebook tersebut tepat diatas komentar standar bloger, sehingga tampilannya lebih menarik (no 3 pada gambar)

Nah agar tampilan komentar facebook berada di no 3 contoh gambar diatas, saya menempatkan code comment facebook dibawah tag <data:post.body/> tapi lebih tepatnya diatas code komentar standar bloger, copy code comment facebook dibawah ini
<!–Comment FB–><b:if cond=’data:blog.pageType == “item”‘></p><br /> <div><fb:comments expr:href=’data:post.url’ expr:title=’data:post.title’ expr:xid=’data:post.id’ num_posts=’1′ width=’450’/></div><br /> <p></b:if><!–End of Comment FB–>
lihat contoh gambar dibawah ini

Pada gambar yang diatas angka 1 menunjukan no 4 pada gambar pertama yang diatas yaitu home dan older post, jadi saya menempatkan code commentar facebook tepat dibawah no 1 yaitu pada no 2. Sehingga kotak komentar facebook tepat berada antara navigasi home older post dan komentar standar bloger.

Contoh diatas merupakan contoh pada template blog saya , tetapi mudah-mudahan bisa menjadi referensi bagi sobat bloger untuk menambahkan komentar facebook pada postingan artikel. Pada saat saya mencoba cara diatas, sebenarnya saya sempat mengalami beberapa kegagalan, namun saya mencoba memindahkan code facebook comment diatas sehingga pas diatas komentar standar bloger.

Lihat tutorialnya di youtube

Selamat mencoba CMIIW

July 4, 2021
Membuat Efek Berputar pada Icon atau Logo Blog

Tutorial cara membuat logo atau icon berputar pada blog dengan menggunakan css3 – Pada kesempatan kali ini saya akan membahas tentang bagaimana membuat efek berputar pada icon atau logo blog. Sebagai contoh saya akan membuat icon social media berputar yang ada pada blog. Ketika mouse berada diatas icon tersebut, maka icon tersebut akan berputar 360 derajat. Yah lumayan untuk mempercantik tampilan blog kita sehingga nyaman dilihat. Untuk melihat contohnya silahkan tempatkan mouse anda berada diatas icon social media yang ada pada blog freezon.

Untuk melakukannya kita cukup menambahkan icon css transition pada properti tag atau selector css social media tersebut dengan cara mencari tag social media yang ada pada template blog kita. Pertama-tama masuk ke akun bloger anda kemudian pilih menu template dan klik edit html. Tekan CTRL + F untuk mencari tag css social media tersebut. Contoh code css social media yang ada pada template blog saya :

CLASS CSS ICON SOCIAL MEDIA :

Code css Sebelum dipasangkan efek berputar pada icon :

.social-profiles-widget img { margin:0 4px 0 0; }

Kemudian tambahkan code css3 untuk efek berputar pada image sehingga Nampak seperti contoh dibawah ini

Code css Sesudah dipasangkan efek berputar pada icon :

margin:0 4px 0 0; transition:all 0.8s ease-in-out 0s; -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; }

CLASS CSS ICON SOCIAL MEDIA KETIKA MOUSE BERADA DIATASNYA

Code css Sebelum dipasangkan efek berputar pada icon :

.social-profiles-widget img:hover { opacity:0.8; }

Code css Sesudah dipasangkan efek berputar pada icon :

.social-profiles-widget img:hover { opacity:0.8; transform:rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg);-ms-transform: rotate(360deg); }

Jika anda sudah menambahkan code diatas, tinggal melakukan penyimpanan. Refresh browser anda dan coba tempatkan mouse pada icon social media yang ada pada blog dan lihat hasilnya. Jika tidak terjadi efek berputar berarti ada kesalahan pemasangan code css pada tag social media. Pastikan agar tag yang dipasangkan efek berputar merupakan tag css dari icon social media tersebut.

July 4, 2021
Cara merubah atau menghapus menu bawaan template blogger

Kali ini saya akan share sedikit tentang bagaimana mengganti , menghapus atau merubah menu pada template blogger. Mungkin sebagian blogger sudah tau cara ini, tapi bagi pemula hal ini mungkin agak sedikit kurang dipahami.

Sebelumnya download template blogger di btemplates.com, situs penyedia template blogger. Pada situs itu terdapat beberapa template blogger dengan berbagai variasi. Terapkan pada blog anda dan lihat apakah ada menu-menu bawaaan dari template tersebut. Jika ada, kita dapat merubahnya sendiri dan disesuaikan dengan menu dari blog kita. Yang ingin belajar modifikasi tema template blog dapat mengikuti panduan Cara mudah modifikasi tema blog atau web dengan menggunakan firebug

Sebagai contoh berikut menu standar template yang saya download dan akan saya ganti sesuai dengan menu pada blog saya.

pada gambar disamping terdapat menu bawaan template yang saya gunakanan. namun saya ingin menghapus sebagian menu yang tidak sesuai dengan blog saya.

pertama-tama masuk pada blogger dan pilih menu template lalu klik edit html seperti gambar dibawah ini

kemudian tekan Ctrl + F untuk mengaktifkan search pada file xml, masukkan nama menu yang ingin dihapus atau dirubah, dibawah ini saya ingin menghilangkan menu business pada menu template saya

untuk menghilangkannya dapat dengan menghapus menu business yang ditandai pada angka 2 sampai angka 3, tapi contoh diatas saya hanya menambahkan code <!– pada awal code menu business dan –> pada akhir code, fungsinya yaitu agar kode li pada menu business hanya terbaca sebagai comment di browser sehingga tidak tampil pada browser.

Baca Juga : Cara Mengetahui Keyword Pengunjung Blog

sedangkan untuk merubah menu tersebut, cukup dengan merubah kata business sesuai dengan menu yang diinginkan namun jangan lupa untuk memasukkan alamat url menu baru dengan cara memasukkan link menu pada href=’masukkan-link-menu-disini’.

Untuk membuat menu di blog dengan menggunakan fungsi page atau halaman dapat mengikuti panduan Cara Membuat Menu di Blog

nah sampai disini kita sudah dapat merubah menu template yang kita download sesuai dengan keinginan 🙂 semoga membantu

July 3, 2021
Cara menambahkan Widget Alexa Rank pada Blog

Alexa rank merupakan salah satu situs yang memberikan peringkat kepada situs-situs web ataupun blog di internet, jadi untuk mengetahui berapa peringkat sebuah blog atau website kita dapat melihatnnya di website alexa.com. Selain itu alexa juga menyediakan peringkat sebuah website secara internasional dan secara nasional sesuai dengan negara blog atau situs tersebut.

Agar kita dapat mengetahui secara jelas berapa peringkat alexa pada situs ataupun blog kita, kita dapat menambahkan widget alexa kedalam blog. Ini berguna juga sebagai motivasi untuk selalu berusaha menaikkan ranking blog kita menjadi sekecil mungkin yang artinya makin kecil ranking yang kita miliki di alexa rank berarti makin banyak pengunjung situs kita.

Memasang widget alexa rank pada blog kita harus terdaftar dalam web alexa, Bagi yang belum punya akun di alexa dapat klik disini. selanjutnya klik link ini dan masukkan alamat blog kita lalu klik tombol “build widget” nah sekarang tinggal copy code widget, ada beberapa model widget alexa rank, namun copy salah satu code widget yang sesuai dengan keinginan saja. setelah itu masuk ke dalam blogger – tataletak kemudian add gadget dan paste code alexa kemudian save. tentukan letak gadget alexa sesuai dengan keinginan.

July 3, 2021