Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Tuesday, February 15, 2011

Sentuh SEO hanya dengan CSS

Belajar SEO Blogspot – Pekerjaan untuk mengoptimasi keywords atau yg biasa kita kenal dengan SEO memang cukup menarik. Sayangnya, terkadang jika kita terlalu over melakukan semua optimasi tadi, kita sampai lupa dengan kenyamanan para pembaca atau pengunjung. Ada beberapa kasus dimana seorang blogger menggunakan BOLD, STRONG, EM dan ITALIC secara berlebihan pada keyword yang di bidik, termasuk saya sendiri. Akibatnya, para pengunjung akan merasa cukup terganggu dengan pengoptimasian seperti itu tadi. Untuk menghindari hal tersebut tanpa harus melupakan optimasi SEO yang kita buat, sebenarnya kita bisa mempercantik SEO dengan sentuhan CSS yang sederhana.

Maka dari itu, kali ini perkenankan saya berbagi tips cara mempercantik SEO dengan sentuhan CSS supaya tetap SEO friendly dan juga visitor friendly. Langkah yang perlu dilakukan untuk mempercantik tampilan artikel yang kita buat adalah sebagai berikut.

1.      Buka style.css dari template anda.
2.      Tambahkan kode css di bawah ini dimana saja, atau jika memungkinkan, masukkan di sekitar .post.

.post em, u, b, strong {
font-style: normal;
text-decoration: none;
font-weight: normal;
}

3.      Save style.css anda dan selesai.

Setelah itu, lihat apa hasil dari penambahan kode di atas, saya yakin semua keywords yang dibuat BOLD, STRONG, EM, dan ITALIC akan terlihat seperti tulisan normal. Dengan teknik mempercantik seperti ini, di jamin usaha SEO kita tetap jalan, namun kenyamanan pembaca pun tetap terjaga.

(belajarseo.com)

Saturday, October 30, 2010

Analisa Kecepatan Loading Blog Anda Sekarang!

Teknik SEO Blogspot – Sudah kita ketahui bersama, performa sebuah blog sangat ditentukan oleh beberapa hal, seperti template yang cukup menarik, kualitas isi postingan, dan juga kecepatan loading blog. Tampilan blog dengan template yang cantik dan isi artikel yang berkualitas dan juga menarik akan menjadi sia-sia jika loading blog sangat lambat.

Ada beberapa cara yang dapat kita lakukan untuk mengurangi loading blog kita, seperti apa yang pernah saya posting di artikel sebelumnya, yaitu dengan kompress css dan kompress javascript. Nah, dengan meminimalisasi penggunaan CSS dan juga JavaScript, blog yang tadinya lambat akan berubah menjadi lebih cepat.

Berikut adalah beberapa tools gratis yang bisa sobat gunakan untuk mengukur dan menganalisa kecepatan loading blog sobat. Teknik pembacaannya berupa angka dari bagian-bagian blog sobat, mulai dari HTML, HTML image, CSS image, JavaScript, CSS, multimedia, dll. Semuanya terbaca dalam satuan KB. Sobat bisa bandingkan saja sendiri semua tools di bawah ini, karena setiap tools mempunyai tingkat akurasi yang berbeda-beda.







2.      Free Speed Test









3.      Aptimize










4.      Tools Pingdom








Empat situs di atas akan memberikan hasil yang berbeda-beda. Jangan jadikan satu patokan saja, karena itu coba satu-persatu sebagai pembanding. Semoga tips ini berguna dan menjadi bahan pertimbangan buat sobat dalam penggunaan CSS dan juga JavaScript di template sobat.

Terima kasih.

Wednesday, August 11, 2010

Cara Menyembunyikan Tampilan Navigation Bar (Navbar) Pada Blogger


Cara menyembunyikan tampilan Navigation Bar (Navbar) pada Blogger. Itulah judul artikel blog Doodey kali ini. Sesuai dengan judulnya, sekarang saya akan membahas mengenai hal itu.

”Bagaimanakah caranya?”

Sabar! :)

Sebelum saya memberitahu bagaimana cara untuk menyembunyikan navbar, pertama saya ingin mendeskripsikan sedikit, apa sih navbar itu?

Setiap blog yang dibuat di situs Blogger secara otomatis akan memiliki sebuah batangan horizontal navigasi (navigation bar) di bagian atas tampilan blog, seperti contoh gambar di bawah ini!


Sesuai dengan namanya, navigation bar (navbar) dirancang dan disesuaikan sebagai sarana navigasi pengunjung blog. Pada navbar, kita dapat melihat berbagai tombol pilihan, diantaranya terdapat kotak pencarian (Search) untuk mencari blog yang lain, dan tombol Next Blog untuk mengarahkan untuk mengarahkan pengunjung secara acak ke URL blog lain (masih dalam lingkup Blogger tentunya).

Namun sebagian blogger, navbar ini bukan elemen yang cukup fungsional, malah terkadang mereka menganggap kalau navbar itu merupakan elemen penggangu yang merusak tampilan blog mereka. Nah lho..!! :(

Beberapa hal yang dipandang merugikan dari Navbar, yakni :
  • Navbar seringkali dianggap merusak keutuhan dan keindahan dari tampilan desain sebuah blog yang dirancang oleh admin blog sendiri. Tampilan navbar yang seadanya dan kurang begitu estetis sulit untuk dibuat menyatu dengan elemen lain dari desain blog mereka.
  • Jika pemilik blog telah memasang Google AdSense for Search (Adsense untuk pencarian), mereka tentu lebih menginginkan pengunjung blog atau situs untuk melakukan sebuah pencarian dengan kotak pencarian Google disediakannya. Keberadaan kotak pencarian lain pada navbar dapat ‘mengacu’ peluangnya untuk mendapatkan uang tambahan dari AdSense for Search tersebut.
  • Keberadaan tombol Next Blog dapat menjadi bumerang bagi pengunjung. Mengapa? Bayangkan saja, ketika pengunjung menekan tombol Next Blog tersebut, mereka akan diarahkan secara acak (random) ke alamat blog lain yang juga menggunakan layanan Blogger. Apa jadinya jika pengunjung blog Anda kebetulan seorang di bawah umur, lalu dia menekan tombol tersebut, lalu diarahkan ke blog lain yang menyuguhkan materi-materi yang tidak senonoh? Bahaya! :(

Nah, dari deskripsi pendek di atas, untuk itu sekarang saya akan membagi tips kecil untuk Anda agar tampilan navbar bisa disembunyikan. Ikuti saja langkah-langkah berikut! :)

  1. Login dulu ke Blogger
  2. Pilih Layout
  3. Klik Edit HMTL
  4. Pada sembarang tempat di dalam area sektor body, yang dapat Anda lihat seperti ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

  1. Tambahkanlah kode berikut ini

margin-top:0px;
position: relative;
top: -50px;

  1. Sehingga keseluruhan akan menjadi seperti ini (kode tambahan diberi warna merah)

body {
margin-top:0px;
position: relative;
top: -50px;
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Sedikit penjelasan!
Nilai (-50px) merupakan negatif dari lebar (width) navbar yang sebesar 50 pixel. Dengan menerapkan nilai yang berlawanan dari lebar navbar tersebut, tampilan navbar akan ‘dibenamkan’ seluruhnya sehingga tak lagi mengganggu pandangan. Jika nilai -50px terlalu besar hingga sebagian tampilan blog Anda ikut hilang, coba kurangi nilainya, misalnya menjadi -30px. Anda dapat mencoba nilai yang lain sesuka Anda.

Perlu dicatat juga bahwa trik yang kita lakukan di sini adalah untuk MENYEMBUNYIKAN (hiding), bukan MEMBUANG (remove) navbar. Artinya tindakan Anda tidak berlawanan dengan TOS (Terms of Service) alias kontrak hukum antara Anda selaku pihak pengguna layanan Blogger dengan Pyra-Blogger (penyedia layanan). Pada TOS memang disebutkan bahwa :



By creating your BlogSpot Site, you agree that Pyra has the right to run such advertisements and promotions.

You also agree that you will not attempt to block or otherwise interfere with advertisements displayed on your BlogSpot site via JavaScript or any other means. Doing so is grounds for immediate termination of service. The manner, mode and extent of advertising by Pyra on your BlogSpot Site are subject to change.



Kalau mau sedikit “cangkeman” alias adu mulut secara yuridis, yang kita lakukan di sini bukanlah mencoba untuk melanggar pasal mengenai “block or otherwise interfere with advertisements displayed on your BlogSpot site via JavaScript or any other means“ sebagaimana disebutkan dalam kontrak di atas dengan cara membuang navbar, melainkan sekadar melakukan reposisi tampilan navbar tersebut sesuai dengan kebebasan pemilik blog untuk memodifikasi desain blognya. Biarpun hasilnya sama (navbar tak lagi terlihat) namun implikasi hukumnya akan berbeda.

Ok, sekian tips dari saya tentang “Cara Menyembunyikan Tampilan Navigation Bar (Navbar) Pada Blogger” yang sudah kita praktekan tadi. Semoga apa yang saya berikan kali ini dapat bermanfaat dan berguna buat Anda. :)

Terima kasih.