Bagaimana membuat catatan kaki artikel?

Catatan kaki artikel biasanya dibuat untuk menyampaikan pesan kepada pengunjung blog. Baik itu ucapan terima kasih, ataupun peringatan untuk tidak melakukan copy paste tanpa memberikan kredit bagi blog kita.

Pada umumnya catatan kaki ini juga sudah terintegrasi dengan rich snippet, jadi contoh yang diberikan kali ini akan memadukan catatan kaki dengan rich snippet review yang sudah dibuat sebelumnya.

Jadi untuk membuatnya ikuti langkah-langkah sederhana berikut ini:

• Masuk ke dalam akun blogspot anda
• Pilih menu Template dan klik Edit HTML
• Lanjutkan dan pilih Expand Widgets Template
• Cari kode <data:post.body/>
• Letakkan kode berikut di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='vcard' id='hcard-Ricky-Pratama' style='margin-top: 30px; padding: 10px; font-size: 12px; font-family: Arial; background: #ffe6a3; line-height: 1.3em; color: #cc0000'>
<span style='color:#cc0000; font-size:18px; margin-top:10px'>Terima Kasih Atas Kunjungan Anda</span><br/>
Judul: <span itemprop='itemreviewed'><data:post.title/></span><br/>
Ditulis Oleh <span class='fn n'><span class='given-name'><span itemprop='reviewer'><data:post.author/></span></span></span><br/>
<span style='text-align: justify'>Jika mengutip harap berikan link yang menuju ke artikel <b><a expr:href='data:post.url'><data:post.title/></a></b> ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya</span>
</div>
</b:if>

Keterangan kode di atas:

• Kode dengan latar kuning adalah kode untuk memerintahkan HTML code hanya dieksekusi pada halaman-halaman artikel saja. Jadi kode ini tidak akan tampil di beranda blog.
• kode latar biru adalah kotak untuk tampilan kode ini. Saudara bisa mengubah warna untuk color dan background sesuai dengan selera. Jangan lupa mengubah nama Ricky-Pratama, menjadi nama saudara di blogger.
• kode dengan latar hijau adalah perintah untuk mengeksekusi kode rich snippet microdata review.
• kode tercetak tebal warna merah adalah kode yang dibutuhkan untuk menampilkan judul artikel dan URL artikel.

Catatan: Jika kode <data:post.body/> lebih dari satu, saudara bisa coba pasang salah satunya dulu. Jika tidak tampil segera pindahkan kode ini ke yang lainnya lagi.

Contoh tampilan dari kode di atas bisa dilihat pada gambar di bawah ini.

Demikianlah cara membuat catatan kaki artikel yang lengkap dengan rich snippet bintang lima. Mudah-mudahan artikel ini bisa membantu.

Rich Snippet Bintang Lima Dengan Foto Tanpa Daftar Google +

Setelah membahas Rich Snippet versi Review/Ulasan yang menampilkan Rich Snippet bintang lima. Ternyata ada sobat blogger yang ingin agar rich snippet tersebut juga menampilkan foto. Dalam jawaban balasan, saya mengatakan bahwa rich snippet aggregate review juga menampilkan foto.

Masalahnya; tips untuk menampilkan foto pada rich snippet sering meminta kita melakukan verifikasi authorship dengan Google Plus. Hal ini cukup banyak membingungkan blogger pemula. Sehingga banyak yang gagal memasang rich snippets pada blognya. Jadi saya akan memakai cara yang sedikit lebih mudah. (lihat contoh gambar di bawah)

Contoh Tampilan di Google

Contoh Tampilan Pada Blog

Jadi bagi anda yang ingin menampilkan foto tanpa repot melakukan konfirmasi authorship via Google Plus, maka cara ini bisa menjadi pilihan. Cara pemasangannya juga sederhana. Cukup lakukan langkah-langkah berikut ini:

• Masuk ke akun blogger.com anda
• Pilih blog yang akan diedit dan masuk ke Menu Template
• Di dalam menu Template  pilih Edit HTML
• Klik Expand Widget Template
• Cari kode <data:post.body/>
• Pasang kode di bawah ini tepat setelah kode <data:post.body/> (biasanya masing-masing template berbeda, ada yang cuma satu <data:post.body/>, ada yang lebih dari satu. Buat yang lebih dari satu, pasang saja semuanya ... daripada bingung)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top:30px'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
<div style='padding:5px; width:85px; float:left;'>
<img itemprop='photo' src='URL GAMBAR PROFIL ANDA' /></div>
<div style='padding:5px; font-size:11px; float:left;'>
Judul: <span itemprop='itemreviewed'><data:post.title/></span><br />
Rating: <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
      <span itemprop='average'>10</span>
      out of <span itemprop='best'>10</span>
    </span>
    based on <span itemprop='votes'>24</span> ratings.
    <span itemprop='count'>5</span> user reviews.<br />
Ditulis Oleh <data:post.author/><br /><br />
Terima Kasih Atas Kunjungan Anda...</div>
</div>
</div>
</b:if>      

• Perhatikan kode yang tercetak merah di atas. Kode itu terlebih dahulu harus diubah menjadi URL gambar foto yang anda inginkan.
• Jika sudah selesai silahkan klik Simpan Template

UJI RICH SNIPPET AGGREGATE REVIEW ANDA

Untuk menguji apakah pemasangan markup HTML anda berhasil, silahkan ikuti prosedur sederhana berikut ini:

• Buka halaman Google Rich Snippet Testing Tool
• Pada halaman tersebut masukkan URL salah satu artikel anda ke dalam kotak yang bertuliskan "Enter a web page URL to see how it may appear in search results"
• Klik tombol Preview
• Tunggu beberapa saat sampai alat ini menampilkan contoh tampilan hasil pencarian blog anda di Google (lihat di bagian bawah halaman)

Jika anda sudah melihat tampilan Rich Snippet yang disertai foto dan tanda bintang lima plus rating dan jumlah review itu berarti pemasangan kode markup yang anda lakukan sudah berhasil. Tinggal tunggu apakah google "merestui" blog anda memakai rich snippet itu.

PERHATIAN: TIPS INI BISA GAGAL JIKA DITERAPKAN PADA TEMPLATE DINAMIS BLOGGER.COM

Panduan Blogspot - Menu Setelan Dasar

Bagi para blogger pemula, setelah saudara selesai membuat blog di blogspot, sekarang anda sudah siap untuk melakukan beberapa pengaturan. Jadi mari kita berkenalan dengan menu Setelan pada konsol blog anda. Menu setelan ini terdiri atas beberapa fitur dan kali ini kita akan membahas fitur pengaturan Setelan Dasar.

Pengaturan setelan dasar blogspot terdiri atas:

Judul

Dengan mengklik tombol Edit anda dapat mengubah judul blog yang sedang anda gunakan saat ini. Sedapat mungkin judul blog berisikan kata kunci utama dari blog anda. Jika sudah selesai mengedit klik Simpan Perubahan

Deskripsi

Ini berbeda dengan meta description. Deskripsi yang anda masukkan ini adalah deskripsi yang akan ditampilkan pada header blog di bawah judul. Pastikan deskripsi blog ini juga memuat kata kunci dari blog anda. Jika sudah mengisi deskripsi blog, silahkan klik simpan perubahan.

Privasi

Setelan ini untuk mengatur apakah blog anda terdaftar di kumpulan blog blogger.com, dan apakah blog anda boleh dirayapi oleh robot search engine seperti Google. Untuk mengubahnya klik edit. Gunakan pilihan "Tidak" hanya jika anda benar-benar ingin blog anda tidak diketahui publik. Setelah itu simpan perubahan.

Alamat blog

Fitur ini dapat anda gunakan jika anda ingin mengganti nama subdomain yang anda gunakan saat ini. Misalnya, jika anda ingin mengubah nama blog dudipunya.blogspot.com menjadi tutorialseo.blogspot.com. Catatan: Perubahan hanya bisa terjadi jika nama yang diinginkan belum digunakan orang lain.

+ Tambahkan domain khusus

Pilihan ini bisa anda gunakan jika anda sudah membeli domain baru atau memiliki domain gratisan dan ingin mengalihkan subdomain blogspot yang anda gunakan saat ini. Nanti akan saya tuliskan tutorial SEO untuk blogger pemula tentang cara mengganti atau mengalihkan nama domain.

Penulis Blog

Di dalam setelan dasar ini anda bisa menambahkan akun-akun e-mail lain yang juga bisa ikut menulis di dalam blog saudara. Akun tambahan ini cuma bisa ikut posting tapi tidak bisa mengubah setelan apapun dari blog saudara. Sangat cocok untuk blog yang dikelola banyak orang. Seperti blog komunitas ataupun blog yang mengizinkan guests posts. Untuk menambah penulis cukup masukkan alamat e-mail mereka dan undang.

Pembaca blog

Fitur Setelan dasar ini memungkinkan anda untuk mengatur siapa saja yang bisa/boleh membaca tulisan anda di blog.

Jadi itulah setelan dasar yang bisa anda lakukan pada blogger.com.

Membuat Rich Snippet Bintang Lima (Review)

Membuat Rich Snippet Bintang Lima yang biasanya diikuti kata diulas oleh adalah salah satu rich snippet yang paling mudah untuk dibuat. Rich snippet ini tidak akan mempengaruhi ranking dari artikel anda. Hanya saja tampilan bintang lima tersebut bisa membuat artikel anda terlihat mencolok dan mengundang orang untuk mengklik.

Jika anda belum tahu apa yang dimaksud dengan Rich Snippet, bisa baca di artikel Apa yang dimaksud Rich Snippet? Rich Snippet yang akan dibahas kali ini adalah type Review atau Ulasan.

Aturan Penggunaan Rich Snippet Bintang 5 Review (Review)

• Pada saat anda menggunakan markup HTM Review bintang lima ini, maka Google menginginkan agar halaman tersebut benar-benar hanya membahas satu produk secara spesifik. Anda tidak bisa memberikan banyak review atau ulasan yang berbeda dalam satu halaman. Jadi satu halaman hanya boleh ada satu markup review.
• Google tidak memberi support pada review produk atau layanan dewasa. Jadi jika blog anda berisikan cerita dewasa, atau konten pornografi, maka kemungkinan Google tidak akan menampilkan hasil markup anda pada snippet hasil pencarian.
• Jika Markup Review ini diberikan untuk ulasan satu orang saja, maka nama yang memberi ulasan haruslah valid, dan tidak menggunakan karakter yang tidak diizinkan. Contoh nama yang tidak diizinkan adalah "Diskon 50%"

Dengan menggunakan Rich Snippet Review Bintang 5 ini, maka hasil pencarian anda akan terlihat seperti pada gambar di bawah ini....

Cara Membuat Rich Snippet Bintang 5 (Review)

Untuk membuat Rich Snippet bintang 5 ini, silahkan lakukan prosedur sederhana berikut:

• Masuk ke dalam menu Template blog anda.
• Pilih Edit HTML dan lanjutkan, setelah itu centang Expand Widget Template.
• Gunakan Ctrl f pada browser anda untuk mencari kode <data:post.body/>
• Tepat di bawah kode <data:post.body/> masukkan kode berikut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top: 30px; font-size: 11px; color:#777;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<center>Judul: <span itemprop='itemreviewed'><data:post.title/></span>;  Ditulis oleh <span itemprop='reviewer'><data:post.author/></span>;  Rating Blog: <span itemprop='rating'>5</span> dari 5</center>
</div>
</div>
</b:if>

•  Jika sudah memasukkan kode ini, klik Simpan Template

Silahkan lakukan pengujian, apakah pemasangan kode ini berhasil. Untuk pengujian ikuti prosedur berikut ini:

• Masuk ke halaman Google Rich Snippet Testing Tool
• Pada halaman tersebut masukkan URL salah satu artikel anda ke dalam kotak yang bertuliskan "Enter a web page URL to see how it may appear in search results"
• Jika sudah memasukkan URL artikel silahkan klik tombol Preview
• Alat ini akan segera menampilkan contoh tampilan hasil pencarian blog anda di Google (lihat di bagian bawah halaman)

Jika anda sudah melihat tampilan Rich Snippet yang disertai tanda bintang lima itu berarti pemasangan kode markup yang anda lakukan sudah berhasil.

Template Blog SEO Friendly Black Line Editable (Bisa diedit)

Template Blog SEO Friendly Black Line Editable yang bisa diedit ini saya buat untuk menanggapi banyaknya komentar yang meminta agar template SEO friendly itu bisa diedit dengan lebih leluasa. Sayangnya semua komentar tidak bisa saya publikasikan karena bahasanya tidak baku. Jadi template blogspot bernama "Black Line" ini sekedar upaya saya mencoba menampung aspirasi teman-teman blogger. Mudah-mudahan membantu....

PERHATIAN:
Mungkin ada baiknya saudara melihat-lihat dulu ragam koleksi template SEO friendly saya. Silahkan klik di sini untuk melihat semua koleksi, atau silahkan juga membaca lebih lanjut siapa tahu suka dengan tipe ini. Link download ada di bagian bawah artikel.

Template blogspot seo friendly ini tidak dilengkapi slider, karena slider sendiri membutuhkan script yang panjang. Bagi teman-teman yang menginginkan slider silahkan membuka koleksi template Blog SEO friendly Simple Slider saya. Template yang memiliki slider ini terdiri atas 5 pilihan warna. Lihat di bawah....

Berbeda dengan template sebelumnya yang harus saya bagi dalam 5 warna. Template baru ini tidak perlu demikian, karena bisa diedit ... jadi template ini sendiri walaupun cuma satu file; tapi bisa menghasilkan desain yang tak terbatas. Dua contoh desain yang bisa saya tampilkan di sini dapat dilihat pada gambar di bawah ini.

Kedua tampilan di atas di buat dari satu file template yang sama. Jadi teman-teman blogger bisa bebas berkreasi menghasilkan tampilan-tampilan yang lain yang sesuai dengan selera dan jiwa anda sebagai blogger.

Kriteria apa saja yang dipenuhi template Black Line ini sebagai Template SEO friendly?

1. Title Tag sudah SEO Friendly, anda tinggal perlu menambahkan meta description untuk setiap artikel
2. Judul Post dihadirkan sebagai judul halaman artikel dengan tag H1
3. Sudah dilengkapi breadcrumbs untuk membantu Google mengenali hirarki blog
4. Sudah dilengkapi rich snippet review bintang 5 dengan format microdata
5. Komentar tetap nofollow untuk menjaga pagerank flow
6. Minim script sehingga lebih SEO friendly
7. Tidak ada iframe sehingga dan sebaiknya anda nanti tidak memasang iframe juga

Lalu apa saja yang bisa diedit dari template SEO friendly Black Line ini?

1. Gambar latar blog bisa diganti sesuka hati dengan ratusan pilihan latar default blogger
2. Lebar blog dan sidebar bisa diatur juga sesuai keinginan anda
3. Posisi artikel, sidebar, dan variasi footer juga bisa diubah/diedit pada template SEO friendly ini (Tapi saran saya pertahankan artikel di sebelah kiri layar)
4. Jenis huruf untuk body dan warna serta ukuran bisa diatur sesuka hati
5. Warna latar untuk body, header/footer, main/sidebar bisa diubah-ubah
6. Warna link saat aktif, terpilih, dan sudah dikunjungi juga bebas diatur
7. Warna, Jenis huruf, dan ukuran untuk judul blog, judul posting, dan judul gadget bisa diatur
8. Anda juga bisa menambahkan CSS jika anda menguasainya, dan masih banyak lagi yang bebas anda edit.

Bagaimana cara mengedit Template SEO friendly ini?

1. Silahkan masuk ke akun blogger anda, 
2. Buka akun blog yang diinginkan dan pilih TEMPLATE. 
3. Di menu TEMPLATE klik tombol SESUAIKAN
4. Pada tampilan Perancang ada 5 pilihan, jangan apa-apakan pilihan Template jika anda masih ingin memakai template ini.
5. Silahkan edit template ini pada keempat pilihan lainnya seperti Latar Belakang, Sesuaikan Lebar, Tata Letak, dan Tingkat Lanjut.

PASANG MENU TEMPLATE YANG DISEDIAKAN

1. Berhubung Menu yang saya sediakan harus dipasang dari menu TATA LETAK jadi silahkan buka file MenuHTMLcode.txt yang juga disertakan di dalam file zip yang saudara download.
2. Edit kode HTML sesuai kebutuhan blog anda
3. Masuk ke menu Tata Letak dan anda akan melihat sebuah kolom HTML/JAVASCRIPT dalam kotak hitam. Klik  Edit pada kolom HTML/JAVASCRIPT tersebut.
4. Ganti kode di dalamnya dengan kode HTML Menu yang sudah anda edit tadi lalu klik Simpan

Silahkan kunjungi blog demo dari template ini:

Contoh Blog 1

Contoh Blog 2

Jika anda berminat mencoba template ini silahkan download pada link di bawah ini...

Download Black Line

UPDATE TERBARU:

Jika ingin melakukan perubahan coba baca MODIFIKASI BLACK LINE TEMPLATE.