Search Engine di Menu Bar (Top Menu)

TUTORIAL MEMBUAT KOTAK SEARCH DI MENU BAR

Hasil yang saya buat belum sempurna betul karena masih kelihatan kotak kolom dan tombol menu search nya masih mleber keluar.

Saya ingin melebarkan top menu yang dibawah header saja agar hasilnya menjadi lebih sempurna, gimana ya caranya?

Dalam tutorial ini kita membutuhkan fitur CSE = Custom Search Engine. 

Silakan akses di sini: http://www.google.com/cse/create/new

Cara membuat Search Engine di Menu Bar (Top Menu):

Drop Down (Sub) Menu

Saya sering kagum pada blog yang mempunyai drop down menu.  Baru sekarang saya bisa membuatnya.  Nah bersama ini saya sajikan tentang cara membuat drop down menu di blogger.

 

Cara membuat Drop Down (Sub) Menu di Blogger (Blogspot):

Perkenalan CSS

Editing di CSS template menghasilkan text header yang cantik seperti gambar dibawah ini:

Membuat Link Artikel Terkait

Ini hasil membuat Link Artikel Terkait jika memilih 3 stories:

Ini hasil membuat Link Artikel Terkait jika memilih 4 stories:

Ternyata bagusan bikin link 4 stories, hasilnya jadi seperti ini:

Integrasi Comment Facebook di Blog

Aku begitu penasaran untuk memasang kotak komentar facebook di blog yang saya miliki, alamatnya disini http://www.anitanetphotography.com/ ini karena saya tahu manfaatnya lumayan besar.

Kotak komentar facebook membantu kita mendapatkan backlink berkualitas dari situs web dan di facebook kita dapat berkomentar beberapa kali dan tidak perlu ada untuk persetujuan atau moderation.

Kita juga dapat memberikan hyperlink ke website Anda dengan kata kunci dan akan membantu dalam mendapatkan peringkat yang baik di google.
Cara membuat Kotak Komentar Facebook di Blogger:

1. Untuk membuat facebook Comment, kita perlu membuat aplikasi facebook yang sederhana
2. Kita buat disini: https://developers.facebook.com/apps
3. Lalu masukan user dan password facebook yang sudah kita miliki
4. Maka akan terbukawindow seperti ini:
   
5. Klik tombol + Buat Aplikasi Baru
6. Tunggu sebentar .....
7. Maka akan terbuka window seperti ini:
   
8. Isikan Nama Aplikasinya misalnya: Anita Blog
9. App Namespace: anita_blog (jangan ada spasi)
10. Web hgosting biarkan kosong
11. Klik tombol Lanjutkan
12. Masukkan code captchanya:
    
13. Klik Lanjutkan
14. maka akan terbuka window seperti ini, disebut aplikasi sederhana kita
15. Klik tulisan Log in to my website using Facebook
16. Masukkan website yang kita mau pasang, misalnya http://www.anitanetphotography.com
17. Sandbox Mode pilih yang Nonaktif, maka warna orange pada tulisan Aplikasi ini berfungsi berubah menjadi hijau.
    
18. Maka Aplikasi Anita Blog sekarang sudah live, Aplikasi ini berfungsi (Terlihat ke semua pengguna)
19. Copykan App ID yang kita miliki, misalnya: 548070095254112
20. Sekarang kita buka dashboard kita
21. Pilih Template
    
22. Backup dulu template kita dengan mengklik tombol Cadangan/Pulihkan (Backup/Restore) template-2915624201794314600(4).xml Supaya tidak salah nanti, kalau terjadi apa bisa dikembalikan ke semula
23. Klik Edit HTML
    
24. cari <b:bskin>
25. Copykan script nya dibawah ini diatas <b:bskin>
26. seperti gambar dibawah ini:
    
27. Note: Masukkan profil facebook anda, yaitu anitasitus atau 856040553 (Ingat jangan diisi code angka ya, tapi isikan nama facebok nya yaitu anitasitus)
28. cari lagi footer-line-3
    
29. Klik enter untuk memberi ruang bagi script yang mau kita pastekan
30. lalu kita copykan script dibawah ini tepat dibawah tulisan footer-line-3, tepatnya setelah tulisan ini <div class='post-footer-line post-footer-line-3'>
    
    <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='fb-comments' data-num-posts='10' data-width='550' expr:data-href='data:post.url'/> </b:if>
    
    
31. Klik Simpan Template
32. Sekarang klik Lihat Blog (View Blog)
    
33. Lebarnya tampilan bisa diatur disini: data-width='550' rubah menjadi data-width='450'
34. Maka akan muncul kotak komentar facebook seperti ini disetiap postingan kita
35. Selesai
    
36. Maka muncul komen facebook kita
    
37. Disini masih ada kolom koment blogger, biarkan saja, sebab tidak semua orang mau komen via facebook maunya via blogger
38. Komen via facebook bisa langsung masuk ke timeline teman2 facebook kita sehingga file marketing lebih keren
39. Test..... Saya coba isi kotak komen facebook nya yang ada di blog dengan cara klik judul postingan yang mau diberi komentar
    
40. Hasilnya bisa dilihat di facebook kita seperti ini:
    
41. Berhasil !!!!

Mempercantik Kursor

Cara Mengganti Kursor di Blogspot:

1. Log in ke Dashboard Blogspot
2. Klik Template
3. Klik Edit HTML
4. Cari kode </head> dengan cara klik CTRL F di keyboard
5. Letakan kode CSS dibawah ini diatas </head>
   
   <style type='text/css'>HTML,BODY{cursor:url("http://cursors0.totallyfreecursors.com/thumbnails/hellokitty2.gif
   "),auto;}</style>
6. Klik Simpan Template
   
7. Hasilnya seperti gambar berikut:
   

Note:

Teks yang berwarna pink diatas adalah alamat kursor baru, anda bisa menggantinya dengan alamat kursor yang akan anda gunakan.

Apabila anda tidak punya gambar pengganti untuk kursor anda, anda bisa memanfaatkan http://www.totallyfreecursors.com. Saya mengambil gambar kursor berbentuk hellokitty ini di totallyfreecursors.

Agar blog terlihat lebih bervariasi, terkadang para blogger mengganti tampilan kursor blog nya ke kursor sesuai yang disenanginya. secara default kursor blog adalah berbentuk panah putih, cara mengganti kursor blog bermacam-macam bisa dengan ikon gambar atau menambahkan efek seperti bintang berjatuhan dll. Apabila anda tidak punya gambar pengganti untuk kursor anda, anda bisa memanfaatkan http://www.totallyfreecursors.com, karena pada situs tersebut terdapat ratusan/ribuan kursor yang unik.


Cara lain:

1. Buka alamat web ini: http://www.cursors-4u.com/
2. misal pilih kursor Sparkly Smiley Star
3. Pilih tab Blogger/Blogspot
4. Copy codingnya:
   
   <style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/symbols/sym-7/sym646.ani), url(http://cur.cursors-4u.net/symbols/sym-7/sym646.gif), progress;}</style><a href="http://www.cursors-4u.com/cursor/2011/12/08/sparkly-smiley-star.html" target="_blank" title="Sparkly Smiley Star"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="Sparkly Smiley Star" style="position:absolute; top: 0px; right: 0px;" /></a>
5. Buka Dashboard ---> template  ---> Edit HTML
6. Lalu paste tepat sebelum html tutup yaitu tepat sebelum </html>
   
7. Klik Simpan Template
8. Selesai, kursornya sudah berubah menjadi bentuk seperti dibawah ini:
   

Tugas 28: Show Up Your Blog

Komponen keberhasilan sebuah blog:

1. Blog berfungsi baik
2. Materi yang bermanfaat
3. Blog yang estetis
4. Pengunjung yang banyak dan berkualitas

Sebagaimana berbagai aspek kehidupan lainnya, kunci keberhasilan dalam promosi dan pemasaran blog  adalah konsistensi Anda melakukannya. Cara cepat untuk mempromosikan blog adalah dengan  mengiklankannya (berbayar). Jika Anda memilih jalur tanpa biaya, kesabaran adalah kunci untuk keberhasilan Anda. Seperti pohon yang tak langsung menghasilkan buah, Anda harus rajin merawat dan menunggu pohon hingga sampai pada waktunya untuk berbuah.

Tugas 27: Backup Blog

Guna Backup Blog adalah unyuk mengembalikan isi blog kita ke semula sebelum di utak atik atau sebelum error.

Jadi backuplah blog kita secara reguler, untuk mengatisipasi jika ada error nantinya.

Cara Backup Isi (Content):

1.  Buka Dashboard
2. Tata Letak / Setelan
   
3. Pilih Lainnya / Ekspor Blog
   
4. Klik Unduh 
5. Maka sekarang kita sudah memiliki file backup ISI (Konten) dari blog kitadalam bentuk file ber ext.xml (contohnya: blog-06-30-2013,xml)
6. Jika sewaktu2 blog kita terkena heck atau error maka kita tinggal menguploadnya sehingga isinya kembali kepada keadaan semula
7. Cara mengembalikan isi blog kita ke keadaan semula
8. Klik Impor Blog
   
9. Lalu masukkan file backup nya
10. Masukkan kode capcha nya
    
11. Klik Ungguh
12. Selesai !

Tugas 26: Statistik Blog

Statistik yang saya buat hari ini 29 Juli 2013 pakai statistik blog gratis:  http://www.histats.com/
Hasilnya adalah seperti  berikut:

Settingannya adalah seperti berikut (pilih 3 lines):

ID Histats blog ini adalah 279119

:

Statistik Blog yang dibuat blogger start 04 Juni 2013:
hari ini, 29 Juni 2013 sudah sampai 1.742

Pengunjung yang Banyak dan Berkualitas

Ukuran lain keberhasilan blog adalah jangkauan pengunjung yang membaca blog.

Jumlah pengunjung diketahui melalui statistik yang ada di dashboard blog atau melalui Google Analytics.

Ada beberapa aspek statistik pengunjung blog yang menunjukkan keberhasilan blog:

Jumlah pengunjung

Statistik yang penting untuk diketahui adalah jumlah pengunjung (visitor) per bulan dan pertumbuhannya dari waktu ke waktu.

Selain jumlah pengunjung, perlu diketahui jumlah halaman (page view) yang dibuka baik secara total atau jumlah halaman/pengunjung.

Semakin banyak jumlah halaman/pengunjung, berarti semakin banyak materi blog yang menarik/sesuai dengan kebutuhan pengunjung.

Asal pengunjung

Ada tiga sumber kunjungan utama pada sebuah blog, yaitu: mengetik alamat langsung, mesin pencari (Google), dan referensi (media sosial).

Sumber utama pengunjung blog biasanya adalah mesin pencari (70%) dan media sosial (20%).

Sumber pengunjung paling sedikit adalah mengetik langsung alamat blog Anda. Mungkin jumlah tak sampai 5%.

Pengunjung yang berasal dari mesin pencari sering dikenal dengan sebutan pengunjung organik (alami). Mereka tidak dengan sengaja mengunjungi blog Anda, tetapi mereka datang ke blog Anda karena diarahkan oleh Google saat mencari informasi tertentu.

Karena sumber utama pengunjung adalah mesin pencari, maka salah satu hal yang perlu dilakukan seorang blogger adalah belajar membuat artikel yang disukai oleh Google, yang ilmunya disebut SEO (Search Engine Optimization).

Untuk memperbanyak pengunjung dari media sosial, hal penting yang perlu dilakukan adalah melakukan integrasi dengan media sosial (Facebook, Twitter, Google+) sehingga membuat para pengunjung lebih mudah untuk melakukan like/ share/twit materi-materi di blog yang disukainya.

Tugas 25: Mengganti Domain

Sekarang saya ingin mengubah nama blogger saya  kenama domain berbayar 

Domain berbayar ini mempunyai nama dot com atau dot org atau dot info

Apa bedanya domain berbayar atau gratis?

Kalau domain gratis harus banyak kewajiban misalnya harus memasang button nya  dan tidak bisa direct dengan sempurna artinya jika kita mengetikkan anitasitus.blogspot.com dia tidak bergeser ke domain gratis tadi, tapi kalau kita mengetikkan alamat domain yang gratis dia baru bisa ke blogger.

Kalau kita mau menggantinya secara sempurna maka kita harus BELI domain

Domain bisa dibeli di jakhoster.com atau cname.com

Saya beli domaon berbayar di jakhoster.com

Nama domain nya adalah http://www.anitanetphotography.com

Cara mengganti setting CNAME pada domain berbayar yang sudah saya miliki tersebut adalah:

1. login ke tempat domain yang kita beli:  http://www.anitanetphotography.com/cpanel
2. Klik Advanced DNS Zone Editor yang ada dalam kotak  Domain
3. Lalu buat seperti ini:
   
4. Lingkaran merah pertama dulu dibuat
   Ketikkan seperti berikut:
   Name: www
   TTL: 1440
   Type: CNAME
   Record: ghs.google.com
   Kenapa answer nya ghs.google.com
   karena ini khusus buat blogspotnya google
5. Sekarang buka Dashboard blogspot kita
   Masuk ke Setelan ---->>> Tambahkan domain khusus
   ---->>> ketikkan nama domain berbayar yang kita miliki ---->>> simpan
   
6. Muncul error berwarna merah, tenang..... biarkan saja
   
7. Sekarang yang kita lakukan adalah membuat lagi seperti tadi di CPANEL berbayar
   (sekarang lingkaran merah kedua dibuat)
   Ketikkan seperti berikut:
   
   Name: pxbuuh7lcpjf
   TTL: 1440
   Type: CNAME
   Record: gv-6zfsvw5b7hhobj.dv.googlehosted.com
8. Klik SImpan
9. Maka akan muncul window seperti ini:
   
10. Tunggu kira-kira 3 jam
11. Nah sekarang kita test (setelah menunggu kira2 3 jam)
    Note: jangan lupa hapus semua file yang ada di File Manager di CPANEL Domain berbayar 
12. Hasilnya adalah jika kita  ketikkan di browser alamat ini: http://anitasitus.blogspot.com/
    maka langsung akan di alihkan ke domain berbayari:  http://anitanetphotography.com/
    

    
    

    Faviconnya juga sudah langsung ada secara otomatis sesuai dengan favicon yang kita buat di blogspot.  Tidak seperti halnya di domain gratis yang kita harus membuatnya dulu baru muncul faviconnya.
    
    
    
    

Dibawah ini adalah domain free, sebelum domain berbayar saya buat.

http://anitasitus.blogspot.com 

=
 http://www.anitasitus.co.nr

dibuat di http://www.freedomain.co.nr (free domain) 

Saya hanya buat Domain di http://www.freedomain.co.nr/
sehingga tak ada lagi tulisan blogspot dibelakang address blog ini
dan di address sekarang juga sudah muncul text www
sebagai standard alamat sebuah situs blog
http://www.anitasitus.co.nr/

Hostingnya saya tetap memakai http://www.blogspot.com
http://anitasitus.blogspot.com/ 

Caranya merubah favicon di domain gratis co.nr:

1. Login di http://www.freedomain.co.nr/,  Login dengan user dan password yang sudah kita miliki
2. Lalu pergi ke sini: http://www.freedomain.co.nr/members_basic.php?action=site
3. Pastikan ketika pilihan use favicon untuk pilih YES -> masukkan link URL faviconnya
   (upload dulu ke picasa lalu ambil urlnya)
   atau pakai favicon yang kita punyai di blogspot
   addresnya: http://namablogkita.blogspot.com/favico.ico
   dalam hal ini saya adalah:
   http://anitasitus.blogspot.com/favicon.ico
   
   
4. Setting seperti ini:
   
5. Klik Modify
6. Sekarang buka alamat domain anda
   Misalnya http://www.anitasitus.co.nr/
   Hasilnya seperti ini:
   
7. Selesai !
   Sekarang faviconnya blog kita di co.nr
   sudah berubah menjadi favicon yang sama dengan favicon di  blogspot kita