Menggunakan Google Chrome Mendesain Blog

Google Chrome memiliki kemampuan yang sangat baik yang memungkinkan Anda untuk melihat bagaimana desain blog Anda  menyesuaikan pengaturan yang anda lakukan. Anda dapat mendesain ulang atau mengedit  gaya situs web apapun keinginan Anda menggunakan Chrome. Selain merancang template, salah satu hal yang membutuhkan waktu banyak yang alignment objek pada bagian <div>. Properti margin dan padding juag bisa membuat kepala sakit jika Anda tidak terbiasa dengan alat seperti Chrome.  Anda juga dapat melihat kode CSS properti seperti jenis font dan efek sebuah situs yang digunakan. Semua ini dilakukan menggunakan Perangkat Pengembang yang disediakan oleh Google Chrome. Yang memungkinkan Anda untuk mengedit CSS, HTML dan Script dari setiap website online Anda. Saya yakin Anda akan menikmati tutorial ini.

Desain Menu Menggunakan Chrome

Sebelum menggunkan  perangkat ini terlebih dahulu anda download dan instal Google Chrome pada Laptop atau PC anda. Jika belom anda download, silahkan Download di Sini.

Setelah melakukan kedua hal (Download dan Intal) di atas, silahkan buka blog/site yang akan anda edit.

Kita ambil contoh untuk engedit Menu Navigasi Blog.

Silahkan klik kanan pada blog anda (dimana aja boleh), kemudian pilih "Periksa Halaman/Inspect element" seperti gambar di bawah ini

Maka tampilannya akan tampak seperti gambar berikut ini

Dengan Memilih "Periksa elemen" akan membuka jendela baru dengan dua kolom. Kolom pertama (sebelah kiri) menunjukkan HTML utama  dari blog Anda dan kolom kanan menampilkan gaya CSS yang diterapkan pada setiap bagian <div> pada blog anda.
Ketika Anda bergerak ke atas atau bawah kursor mouse anda ke atas tag <div> di bagian HTML anda akan melihat daerah yang sedang disorot jelas di dalam blog Anda. Karena saya mengklik navigasi sub karena itu bagian <div> untuk navigasi sub disorot secara default di bagian html dan saya dapat dengan jelas melihat gaya CSS yang muncul di sebelah kanan bawah kolom CSS. Berikut adalah gaya CSS untuk navbar seperti yang ditunjukkan pada kolom CSS:

#catmenu {
margin: 0px;
padding: 0px;
width: 962px;
background: rgb(37, 37, 37) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj06Pk3GsrpyIkdVOrirq-LHjCY-SWstOhu_z_yIXhS7SMk1tb2f5wn0EQI6Q425iZlgj0SHP28-m_qFzA80Wqud_gJSwQAUxWeACoWfL_5aAln5vuNGmLHbZ4weE2zixctfajKkZI9kX_V/) repeat-x;
height: 33px;
}

Anda dapat melihat gambar yang disediakan dengan 7 sifat yang berbeda. Kita dapat mengubah warna latar belakang dari menu, kita bisa mengatur lebar dan tinggi, warna font, perbatasan dan keselarasan menggunakan margin dan padding. Untuk mengedit properti apapun hanya klik dua kali dan mengubahnya. Mari kita mengubah latar belakang Merah.Untuk mengedit backgroundnya silahkan lakukan double klik pada kode warnanya tersebut. Sehingga tampak seperti gambar di bawah ini

Sehingga tampilannya tampak seperti di bawah ini:

perubahan yang terjadi

Selain tiu juga sobat blogger dapat mengubah sifat-sifat yang terdapat pada elemen blog Anda. Mungkin lebih jelasnya sobat blogger dapat mempraktekkannya sendiri. Jika ada pertanyaan silahkan tinggalkan komentar di bawah ini. Semoga bermanfaat, dan mohon maaf jika ada kesalahan. (Jkt/2012)

Cara Menyimpan Hosting File JavaScript di Google

Jika temen-temen sedang mencari tempat hosting javascript yang handal dan terpercaya maka Google code adalah jawabannya. Google Code merupakan layanan hosting milik Google sehingga soal kredibilitas sudah tidak perlu diragukan lagi. Melalui project hosting dari Google code, anda bisa menyimpan file Javascript, PHP, Ajax, Flash, CMS, dan lain-lain secara gratis di Google Code. Kapasitas yang diberikan tidak tanggung tanggung yakni 2GB dan unlimited bandwith sehingga anda tidak perlu khawatir bakal kehabisan bandwith

Sebenarnya layanan hosting yang mendukung file javascript sudah dihadirkan oleh Google melalui Google Sites. Hanya saja berdasarkan pengalaman pribadi, file javascript yang disimpan di Google sites tidak bekerja jika kita tidak sedang login di akun Google Sites. Saya tidak tahu apakah anda juga mengalami masalah yang sama dengan Google sites jika iya maka Google Code bisa menjadi alternatifnya.

Berikut cara menyimpan file javascript di Google Code :

1. Pertama login ke akun Google anda kemudian kunjungi http://code.google.com/hosting/

2. Klik create a new project 
3. Isi data-data sesuai yang diminta lalu klik Create Project.
   

4. Pilih tab 'Download' dan klik New download 
5. Klik Browse dan pilih file javascript yang ingin upload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.
   

6. Sekarang file javascript anda akan diupload ke Google code. 
7. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) seperti contoh.
   

Silahkan dicoba dan semoga bermanfaat. (Jkt/2012)

Cara Mengganti Profil Blogger Menjadi Profil Google +

Akhirnya Google + sekarang bergaung ke Blogger. Tim Blogger kemarin mengumumkan bahwa sekarang Anda dapat Gunakan  profil Google + pada semua blog yang ada di BlogSpot. Setelah beralih profil default  Blogger anda akan diganti dengan profil + Google dan semua postingan blog sobat, komentar dan widget Penulis profil akan diarahkan ke Google plus profil. Nama samaran blog Anda akan diganti dengan nama umum Anda. Blog foto dan info akan diganti dengan yang di Google ditambah. Google + ini bekerja saat ini dengan Blogger dalam konsep dan setelah beberapa minggu ia akan bekerja di blogger.com juga. Jika sobat sudah mepunyai account di Google + bisa anda ganti profil blogger anda menjadi profil Google +. Untuk tampilannya bisa anda lihat gambar di bawah ini.

Untuk cara mengganti drofil blogger menjadi profil  Google+ bisa sobat lihat langkah-langkahnya di bawah ini.

Catatan Penting:

Perpindahan profil ini mungkin tampak menarik, tetapi Anda harus terlebih dahulu mengetahui poin-poin penting berikut ini:

1. Setelah Anda beralih ke profil Google + , Anda hanya memiliki 30 hari untuk kembali ke profil lama blogger anda. Setelah batas waktu tersebut, data profil Blogger Anda akan dihapus secara permanen.
2. Informasi mengenai profil Blogger Anda tidak akan ditransfer ke profil  Google + Anda, sehingga Anda secara manual harus menyalin data profil blogger anda ke profil Google + anda.

Mengganti Profil Blogger ke Google +
1. Silahkan kunjungi Link Ini.
2 Silahkan baca petunjuknya dengan hati-hati. Jika sudah selesai, silahkan centang tulisan "Saya telah membaca....." seperti gamabr di bawah ini. 

3. Kemudian pilih "BERALIH SEKARANG JUGA"
4. Selesai dan lihat perubahannya.
Semoga bermanfaat, mohon maaf jika ada salah. (Jkt/2012) 

Cara Menggunakan "Google Custon Font" pada Blog

Selama bertahun-tahun, Blogger dan pengguna blogger yang menggunakan font tersebut selalu sederhana dengan gaya blog dan template yang sederhana juga. Mereka tidak memiliki pilihan untuk mengubah font tersebut karena hanya ada beberapa font yang diterima seluruh dunia sebagai font web. Mustahil untuk menggunakan font lain pada halaman web seperti blogger.com.

Tapi sekarang Google telah meluncurkan layanan baru  font web Google dengan slogan - 'Making the Web Beautiful!'. Layanan ini akan memungkinkan Anda untuk menggunakan font kustom pada direktori font  google pada blog kita / website tanpa sign up atau apa pun. Seperti dari 'Google', hal ini tidak memiliki komplikasi dan juga benar-benar gratis untuk penggunaan komersial
dan swasta, Tidak ada pembatasan yang diadakan atau tidak tindakan hukum yang keras.. Ini bisa membuat blog Anda terlihat lebih menarik dan berlaku untuk blog blogger juga. Jangan heran, Ini Benar! Saya akan menunjukkan cara untuk melakukannya dengan blogger.

Oke guys..langsung aja kita ke pokok permasalahan.
1. Login ke blogger.com dengan account anda (jangan lupa back-ut template anda)
2. Pilih Edit HTML
3. Klik kalaman google font tersebut [KLIK di SINI]
4.Kemudian pilih font yang akan anda pasang pada blog sobat.

5. Setelah anda pilih fontnya, maka akan terbuka window baru, kemudian pilih "Get the Code"
6. Langkah selanjutnya adalah, beralih ke blog anda. Lebih tepatnya pada Edit HTML.
7. Sekarang Anda harus menyalin kode yang diberikan dan letakkan kode ke template blogger Anda,tepat diBAWAH kode <head>. 


Kode tersebut mungkin terlihat seperti kode berikut ini:

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

Note:
Tambahkan tanda garis miring ("/")  sebelum tanda (">") sehingga kode di atas harus seperti kode berikut ini;

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>

 8. Setelah itu silahkan copy kodenya di bawah kode <head>.

Langkah selanjutnya adalah langkah memasukkan kode CSS pada blog anda.
Sekarang langkah terakhir dan final. Pada langkah ini, Anda harus menentukan di mana Anda ingin menambahkan font dan harus menambahkan kode css untuk itu.

Jika Anda ingin membuat font muncul untuk kalimat tertentu hanya di posting blog Anda, silahkan gunakan kode HTML di bawah ini

<div style="font-family: 'FontName', serif;">Your text</div>

Lihat kode berwarna di atas:
Fontname: nama font yang anda pilih dari google. 
Your Text: Teks yang inginkan anda rubah fontnya.


Jika anda ingin  fonya muncul pada:
1. Judul Blog
2. Judul Post
3. Isi Post
4. Tulisan sidebar
Anda harus menambahkan kode CSS untuk hal itu. Jangan khawatir, Ini sangat sangat mudah. Di sini saya akan memberitahu Anda Bagaimana mengubah ke empat hal di atas.

1. Mengubah Judul Postingan, gunakan kode css berikut ini .post h3 atau  .post-title h3. (silahkan cari kode tsb)
Ini adalah kode css umum untuk judul posting di blogger. sekarang kita harus menambahkan kode css untuk font baru untuk judul blog,. Untuk ini, tambahkanm  kode css berikut di bawah kode di atas.

font-family: 'google Font Name';

kode akhir harus terlihat seperti ini:

.post h3 {
font-family: 'Your Font Name';
}

2. Sekarang untuk merubah font isi postingan adalah dengan mencari kode .post-body 
3. Setelah ketemy kodenya silahkan tambahkan kode:

font-family: 'google Font Name';

Sehingga kode akhirnya adalah sebagai berikutt:

.post-body {
font-family: 'Your Font Name';
}

 Setelah itu silahkan SIMPAN TEMPLATE. dan lihat perubahannya.
Semoga berhasil dan mohon maaf jika ada kesalahan. (Jkt/2012)

Cara Membuat "Contact Form" dari Google docs

Form Message

Sobat blogger mungkin sudah familiar dengan gambar di samping. Yah..kalopun masih ada mungkin sobat blogger yang tidak tahu menahu dengan gambar di samping. Tetapi saya yakin, meliht dari judul tips kalini, sobat blogger pasti sudah ada gambaran mengenai gambar di samping.

Gambar di samping merupakan form dari message (pesan) dari blog ini. Dimana form ini disediakan oleg Google. Sistem kerja dari tools ini adalah semua pesan yang dikirim oleh pengunjung kepada kita akan terkirim langsung ke e-mail kita. Jado hal yang pertama perlu diperhatikan adalah, kita harus memiliki account do Google.com. Nah...jika sobat blogger sudah mempunya account di google.com, yang mau menampilkan tools ini silahkan ikuti langkah-langkah yang akan saya berikan. Tetapi sebelum menampilkannya, alangkah baiknya jika sobat melihat terlebih dahulu seperti apa bentuk Contact form ini.
Untuk lebih jelasnya, silahkan lihata Contact form yang sangat simple di bawah berikut:

DEMO

Untuk langkah-langkah menemapilkan tools ini, silahkan lihat di bawah ini:

1. Pertama silahkan klik alamat url ini di "Open New Tab" [https://docs.google.com/#home]
2. Pilih "CREATE"

 

3. Kemudian Pilih "Form"

 

4. Kemudian silahkan anda lakukan pengeditan sesuai keinginan anda.

Klik gambar untuk memperbesar

5. Adapun hal-hal yang perlu diperhatikan adalah sbb:

• Pada tulisan"Untitled form" silahkan ganti dengan judul Form yang akan anda Buat
• Tulisan "Sample Question 1" ganti dengan pertanyaan yang akana anda buat. Mis. Nama
• Tulisan "Help Text", diperlukan jika anda mempunyai petunjuk untuk menjawab pertanyaan yang telah dibuat sebelumnya.
• Pada "Question Type" pilih bentuk Text. untuk Sample Question Pesan anda menggunakan "Question Type"nya adalah "Paragraph Text"
• Kemudian Pilih "Done"
• Untuk menambah Pertanyaan yang lain, silahkan pilih icon "Duplicate" seperti yang terlihat pada gbr berikut ini.

Klik gambar untuk memperbesar gbr. Lihat icon yang dilingkari.

6. Jika sudah selesai, silahkan klik "Save" yang berada di pojok kanan.

7. Kemudian pilih "More Action" kemudian "Embed"

8. Kemudian copy kode HTML nya. Seperti gbr berikut ini.

Copy kode HTMLnya

Sekarang adalah waktunya untuk memasang Contact Form tersebut ke dalam blog.

1. Sekarang pilih "Entri Baru" atau Post Baru.

2. Silahkan Pastekan kode HTML yang tadi anda Copy. (harus dalam posisi post HTML)

3. Setelah itu "Publikasikan"

Sekarang lihat perubahan yang terjadi pada blog anda. Semoga bermanfaat. Jika ada pertanyaan, silahkan berkomentar pada form komentar di bawah. terima kasih . (Jkt/2012)

Cara Mendapatkan Google Sitelinks

Sobat blogger jika Anda memasukkan sebuah kata yang umum di Google, misalnya microsoft maka website www.microsoft.com akan muncul pada urutan pertama, dan di bawahnya ada sekitar 4 baris yang berisi link-link dalam web tersebut. Itu yang disebut Google Sitelinks. Baru di bawahnya ada urutan kedua, ketiga, dan seterusnya. Keren ya? Seolah-olah web tersebut spesial banget. Tadinya saya kira hanya situs-situs besar yang mendapat Google Sitelinks. Bagaimana cara mendapatkannya?

Sayangnya, tidak ada dokumen resmi dari Google yang menjelaskan secara detail agar web atau blog kita mendapatkan Sitelinks. Dokumen resmi dari Google yang dapat dijadikan referensi adalah ini.

Dari hasil browsing dan membaca dokumen tadi, ada beberapa faktor atau cara untuk mendapatakan Google Sitelinks:

1. Harus menjadi nomor satu untuk kata kunci tertentu di Google

Sejauh yang saya lihat di Google Search Result, hanya sebuah situs yang mendapat Google Sitelinks, yaitu situs yang berada di urutan pertama untuk kata kunci tertentu. Untuk mendapat peringkat tinggi di search engine dapat digunakan teknik SEO, yang teknik dasarnya ada 2, yaitu:

• Membuat artikel original (bukan copy-paste) yang berkualitas.
• Mengusahakan halaman lain memasang link ke halaman tersebut.

2. Dalam hompage minimal ada 3 buah link

Mengutip pernyataan Google:

we only display sitelinks when a site has a minimum of three sitelinks available.

Jadi sebuah halaman website yang didalamnya berisi sebuah animasi flash yang menawan dan hanya ada satu tombol untuk masuk atau login, tidak bisa mendapatkan sitelinks dari Google.

3. Link tersebut banyak di-klik pengunjung situs kita

Mengutip pernyataan Google:

We only show sitelinks for results when we think they’ll be useful to the user.

Kata “useful to the user” saya artikan bahwa pembaca yang datang ke homepage kita, banyak yang mengklik link tersebut.

4. Relevan dengan kata yang dimasukkan pengunjung ke Google

Mengutip pernyataan Google:

(If) we don’t think that the sitelinks for your site are relevant for the user’s query, we won’t show them.

Ini berarti link-link dalam sitelink, harus cocok dan relevan dengan kata kunci yang dimasukkan pengunjung.

5. Umur situs atau jumlah pengunjung?

Ada referensi yang menuliskan bahwa umur situs harus minimal 2 tahun untuk mendapatkan sitelinks, itu tidak benar, karena blog saya ini masih bayi, jadi saya belum mendapatkan Sitelinknya. Sebagai catatan, unik pageview untuk blog ini (sekarang) adalah > 2000 per hari. Point ke-5 ini berkaitan dengan point ke-1.

Cara Mengoptimasikan SEO Website

Sekarang anda bisa mengoptimasikan SEO website atau situs anda dengan menggunakan Microsoft  Search Engine Optimization (SEO) Toolkit dimana ini merupakan cara terbaru untuk strategi mengoptimalkan SEO dari Microsoft yang baru saja diluncurkan. Versi beta dari Microsoft SEO Toolkit tersebut adalah Internet Information Services (IIS). SEO Toolkit tersebut telah dirilis sebagai bagian dari Microsoft Web Platform. Apa saja yang bisa didapatkan dari IIS SEO Toolkit tersebut?? Berikut ini kutipannya :

• Meningkatkan kualitas dan traffic website pada search engine
  Dengan analisis situs memungkinkan webmaster untuk melihat internal dan eksternal link dengan tujuan mengoptimalkan konten situs tersebut, struktur, dan URL untuk crawler mesin pencari. Selain itu, Analisis Situs modul dapat digunakan untuk menemukan masalah umum dalam isi situs yang negatif mempengaruhi pengalaman pengunjung situs.
• Membuat serta mengelola modul robot.txt dan index sitemap.xml lewat interface IIS untuk optimasi seo website dan blog.
• Dan masih banyak lagi fungsi dan kegunaannya, bisa dilihat di situs resminya

IIS SEO Toolkit ini tersedia secara GRATIS dan dapat didownload melalui Microsoft Web Platform. Toolkit ini sangat  membantu web developer, penyedia hosting, web server dan administrator dalam meningkatkan jumlah pengunjung ke situs Web mereka dengan membuat konten - konten khusus di situs mesin pencari yang lebih ramah.
Semoga Bermanfaat,


Klik Untuk Download  IIS SEO Toolkit Gratis

Informasi lebih lanjut mengenai IIS SEO Toolkit, klik  http://www.iis.net/download/SEOToolkit