Bismillah. Alhamdulillah. Berawal dari rasa penasaran dengan perkembangan standar bahasa HTML dan tingkah laku mesin pencari, juga rasa penasaran dengan gencarnya para Blogger membahas "cara menampilkan bintang pada hasil penelusuran Google" yang secara garis besar para Blogger baik lokal maupun global hanya membahas cara-caranya saja tanpa detail maksud dan tujuan hingga memperoleh bintang pada hasil penelusuran. Muncul berbagai pertanyaan dalam benak saya secara pribadi. Untuk apakah jika kita memperoleh bintang? Berpengaruhkan hal tersebut terhadap blog kita dihadapan mesin pencari? dan lain sebagainya. Hingga terjadilah pertemuan dengan istilah Rich Snippet yang sedang hangat dibahas, terutama Google yang gencar memperkenalkan Rich Snippet pada para webmaster. Masih hangat beberapa saat yang lalu, Blogger Tune-Up membahas tentang metadata dengan standar Open Graph, sekarang akan dibahas yang mirip-mirip namanya tetapi berbeda fungsinya yaitu microdata dan microformat. Apa perbedaan microdata dan microformat? Dan apa hubungannya dengan Rich Snippet? Atau justru masih bertanya, apa Rich Snippet? Mari sama-sama menyimak artikel ini.
Apa dan Untuk Apa Rich Snippet?
Jika diterjemahkan perkata mungkin akan menghasilkan persepsi yang berbeda. Rich Snippet dalam bahasa Indonesia berarti sama dengan Sisipan Kaya. Sesuai dengan namanya maka Rich Snippet digunakan untuk memperjelas atau memberikan deskripsi tambahan dari suatu situs agar pengunjung dengan mudah menemukan target yang dicarinya. Silahkan anda perhatikan mesin pencari dalam menampilkan suatu kata kunci, semakin sedikit situs spam yang menggunakan black hat SEO ter-index pada mesin pencari hal ini salah satunya dipengaruhi oleh Rich Snippet. Jika suatu situs menambahkan Rich Snippet sama persis seperti situs resminya maka situs tersebut dianggap sebagai situs sampah. Sisipan Kaya berfungsi untuk menambahkan atau melengkapi informasi yang penting untuk diketahui oleh pengguna internet. Misal; Kita akan mencari suatu aplikasi dengan nama "Tune Up Utilities" namun lupa nama lengkap aplikasi tersebut, yang kita ingat hanya kata "Tune Up". Ketika kita mencari aplikasi tersebut dengan kata kunci "Tune Up" pada mesin pencari maka akan disuguhkan sederet situs yang beragam, beberapa kemungkinan yang bisa saja muncul pada mesin pencari adalah sebagai berikut:
- Tune-Up yang berhubungan dengan blog ini
- Tune-Up yang berhubungan dengan mesin
- Tune-Up yang berhubungan dengan aplikasi
Situs mana yang akan diklik? Dapat dipastikan pengguna internet akan meng-klik "Tune Up Utilities 2012 - CNET Download.com" sesuai tujuannya untuk memperoleh informasi lengkap tentang aplikasi tersebut. Nomor 1 itulah yang kemudian dikenal dengan Rich Snippet yang berisi informasi sisipan tentang:
- Rating
- Penulis Ulasan
- Harga
- Sistem Operasi
- Kategori Aplikasi
Dan kecil kemungkinan pengguna nyasar ke situs "Blogger Tune Up". Disinilah fungsi Rich Snippet yang membuat mesin pencari lebih mudah untuk digunakan oleh pengguna yang awam sekalipun. Index mesin pencari pun semakin mendekati sasaran yang benar-benar dibutuhkan oleh pengguna internet. Rich Snippet akan memberikan informasi yang sangat berguna bagi pengguna.
Sedangkan Nomor 2 pada gambar biasanya diambil dari meta description.Manusia Pertama, Mesin Kedua
Human First, Machines Second adalah kalimat yang selalu ditekankan oleh para webmaster. Intinya, ketika kita membuat sebuah situs maka hal yang pertama harus diperhatikan adalah para pengunjung baik itu dari sisi usability dan accessibility. Sedangkan mesin adalah prioritas kedua dalam membangun sebuah situs. Tim Berners - Lee menyebutkan:
... berbagai informasi penting dalam desain web digunakan untuk konsumsi manusia, dan ... stuktur data tidak ditujukan untuk robot web browsing. ... Semantic Web disusun dalam membantu pendekatan bahasa untuk mengekspresikan informasi kedalam sebuah mesin pemrosesan formulir.
Dari penjelasan diatas dapat diambil kesimpulan bahwa pada dasarnya desain web itu mengutamakan manusia namun ketika kita menyusun web dengan aturan semantic berarti kita juga melakukan pendekatan pada mesin. Semantic berada diantara web desainer dan mesin yang digunakan sebagai media untuk saling berkomunikasi dan Rich Snippet harus disusun sesuai dengan Semantic Web.
Kenapa Harus Menambahkan Rich Snippet?
Kebanyakan para webmaster sangat familiar dengan tag HTML dalam menyusun halam web. Dan biasanya tag HTML ditulis untuk memberitahu browser bagaimana menampilkan informasi yang ada didalam tag. Sebagai contoh; <h1>Tune Up</h1>. Tag ini berarti memberitahu browser untuk menampilkan string teks "Tune Up" dalam format heading 1 (Judul 1). Namun, tag HTML ini tidak memberikan informasi apa-apa tentang arti string teks tersebut. Apakah string teks "Tune Up" tersebut merupakan sebuah aplikasi, sebuah blog, atau tentang mesin? Sehingga hal ini menjadi sangat sulit bagi mesin pencari untuk menampilkan informasi yang relevan kepada pengguna internet. Dimulai dari permasalah inilah kemudian mesin pencari (Google, Yahoo!, Microsoft dan Yandex) memperkenalkan Rich Snippet agar hasil pencarian mereka menjadi lebih relevan sesuai dengan apa yang dicari pengguna internet.
Seperti dijelaskan diatas bahwa untuk menyusun Rich Snippet, kita harus mengikuti aturan main semantic agar web yang kita susun mampu dengan mudah dibaca oleh mesin pencari. Dalam menyusun Rich Snippet para webmaster menyarankan dua format yaitu microdata dan microformat. Format microdata dan microformat sebenarnya merupakan pengembangan dari bahasa mark up, sehingga dalam penggunaannya pun terintegrasi didalam tag-tag HTML yang sudah ada. Namun tidak menutup kemungkinan untuk menyusun Rich Snippet didalam tag HTML secara terpisah.
Apa Microformat dan Microdata?
Microdata hampir sama dengan microformat, karena keduanya merupakan perkembangan bahasa markup yang masih termasuk kedalam machine-readable metadata (mesin pembaca metadata) untuk menguraikan konten web. Tag HTML, Microdata dan Microformat adalah bahasa markup unik yang saling melengkapi satu sama lain dan ketiganya sangat membantu mesin pencari dalam merayapi halaman-halaman web. Diantara ketiganya, microdata merupakan perkembangan bahasa markup terbaru yang keberadaannya memberikan persaingan selaras terhadap microformat yang menggunakan standar RDFa. Dalam penggunaannya, sebenarnya para webmaster bebas untuk menentukan format markup-nya, boleh menggunakan microformat saja, microdata saja atau menggunakan keduanya. Namun webmaster terutama Google menyarankan penggunaan kedua format tersebut.
Microformat didesain untuk berbagai jenis konten web secara umum. Mereka terintegrasi didalam markup dan atribut yang sebenarnya mudah untuk dipahami dan digunakan. Dan mereka sangatlah sederhana karena menggunakan kosakata pre-defined, misal; fn, author, rel, vcard, updated, dan sebagainya. Microformat menggunakan format standar yang didefinisikan oleh microformat.org.
Contoh penggunaan microformat:<dl class="vcard">
<dt class="fn"><a href="http://modification-blog.blogspot.com" class="url">Hendriono</a></dt>
<dd class="title">Web Desain</dd>
<dd class="adr"><span class="locality">Ciamis</span>, <abbr title="Jawa Barat" class="region">JABAR</abbr> <span class="postal-code">46383</span></dd>
</dl>
Perhatikan nilai dari atribut class (vcard, fn, url, title, adr, locality, region, postal-code). Dari contoh diatas dapat diambil kesimpulan bahwa microformat bisa diintegrasikan didalam atribut class, dan dapat digunakan bersama dengan CSS. (Insya Allah artikel berikutnya akan membahas tentang Microformat secara detail)
Microdata adalah bagian dari spesifikasi HTML5. Namun juga tergantung pada perubahan kosakata dan atribut baru dalam penerapan metadata. Dan itu tidak dibatasi untuk setiap jenis tertentu dari konten web, untuk dapat menjelaskan konten unik yang tidak mampu ditangani oleh Microformat. Selanjutnya, microdata dapat menggunakan notasi DOM, yang dapat membuat parsing metadata lebih mudah.
Ada dua standar kosakata microdata yang digunakan saat ini yaitu kosakata dari data-vocabulary.org dan kosakata dari schema.org. Namun dari keduanya, beberapa webmaster terutama Google menyarankan penggunaan kosakata dari schema.org, dengan alasan kosakata schema.org lebih banyak dan lebih fleksibel dari pada kosakata data-vocabulary. Walau contoh yang diberikan oleh Google masih menggunakan data-vocabulary namun disarankan pada webmaster untuk menggunakan Schema yang lebih banyak kosakatanya dan kemungkinan kedepannya, data-vocabulary tidak lagi digunakan.
Contoh penggunaan microdata:<dl itemscope itemtype="http://schema.org/Person">
<dt itemprop="name"><a href="http://modification-blog.blogspot.com" itemprop="url">Hendriono</a></dt>
<dd itemprop="title">Web Desain</dd>
<dd itemprop="address" itemscope itemtype="http://schema.org/Address">
<span itemprop="locality">Ciamis</span>, <abbr title="Jawa Barat" itemprop="region">JABAR</abbr> <span itemprop="postal-code">46383</span>
</dd>
</dl>
Nah, sekarang kita bisa membedakan, mana syntaks microformat dan mana syntaks microdata. Keduanya jelas memiliki perbedaan syntaks, microdata menggunakan itemscope untuk sinkronisasi dengan kosakata dan itemtype untuk deklarasi spesifik kosakata yang akan digunakan. Sedangkan itemprop adalah deklarasi masing-masing item yang harus sesuai dengan jenis kosakata (itemtype) yang digunakan.
Misal contoh diatas jika saya baca sebagai mesin; Tujuannya adalah memperkenalkan siapa Hendriono, maka syntaks wajibnya adalah itemscope. Kemudian menentukan jenis kosakata yang akan digunakan dalam memperkenalkan diri, maka syntaks itemtype spesifik mengarah pada perpustakaan http://schema.org/Person. Sedangkan itemprop adalah deklarasi masing-masing item; name, title dan address. Disana ada lagi penambahan kosakata lain yaitu http://schema.org/Address karena alamat memiliki begitu banyak item lainnya (dalam contoh; locality, region, postal-code). Apakah susunannya harus selalu seperti itu? Tidak...
Contoh diatas hanya menggunakan logika sederhana;- Siapa namanya? Hendriono
- Apa hobinya? Web Desain
- Dimana alamatnya? (Nah, pada pertanyaan ini, kita akan membutuhkan banyak sekali item jawaban, misal; Kabupaten, Propinsi, Kode POS, Nomor Telephone dan lain sebagainya, maka dibutuhkan sebuah kosakata lagi)
Walaupun memiliki perbedaan syntaks dan perbedaan standar namun microdata dan microformat bisa di-integrasikan secara bersama-sama. Dibawah ini contoh perpaduan Microformat dan Microdata:
<dl class="vcard" itemscope itemtype="http://data-vocabulary.org/Person">
<dt class="fn" itemprop="name"><a href="http://modification-blog.blogspot.com" itemprop="url">Hendriono</a></dt>
<dd class="title" itemprop="title">Web Desainer</dd>
<dd class="adr" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
<span class="locality" itemprop="locality">Ciamis</span>, <abbr title="Jawa Barat" class="region" itemprop="region">JABAR</abbr> <span class="postal-code" itemprop="postal-code">46383</span>
</dd>
</dl>
Warning Microformat Google Webmaster Rich Snippets
Saya secara pribadi sempat bingung dengan beberapa warning yang ditampilkan saat melakukan pemeriksaan Rich Snippet. Namun warning default yang ditampilkan Tool Rich Snippet biasanya terdiri dari tiga jenis (tidak menutup kemungkinan lebih banyak lagi) warning dan semua itu kesalahan secara default dari microformat blogger (bukan dari microdata):
Warning: Missing required hCard "author"
<span class='post-author vcard'>
<a class='url fn' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a>
</span>
Warning ini diatasi dengan menambahkan kode class='url fn'. url menunjukan link url author dan fn menunjukan nama lengkap (full name)
Warning: Missing required field "updated"
<abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>
Warning ini diatas dengan menambahkan kode class='updated published' yang menunjukan waktu diterbitkan dan waktu diupdatenya artikel.
Warning: Missing required field "entry-title"
<h2 class='post-title entry-title'>
Warning diatas diatasi dengan menambahkan entry-title pada class, untuk menunjukan judul artikel.
Situs wiki microformats.org menuliskan beberapa issue untuk para pengguna blogger, diantaranya:
- Template baru menggunakan "main" untuk identifikasi global semua artikel (entri)
- Template baru menggunakan "post" untuk identifikasi masing-masing artikel blog
- Template baru menggunakn "post-title" untuk identifikasi judul artikel
Video Rich Snippet dari Google Webmaster
Video dibawah ini dibahas oleh tim Google Webmaster khusus tentang Rich Snippet. Video-video terbaru akan ditambahkan kemudian.
Introduction to Rich Snippets
Types of Rich Snippets
Rich Snippets - Product Search
Rich Snippets - Reviews
Rich Snippets - Recipe markup
Rich Snippets - Events
Rich Snippets - Breadcrumbs
Rich Snippets - Apps
Rich Snippets - Notifying Google
Rich Snippets - Troubleshooting
When will Rich Snippets become widely available?
Kesimpulan
Artikel diatas mungkin belum memenuhi harapan akan keingintahuan tentang semantic microformat dan microdata. Artikel ini hanya pancingan agar kita jangan telalu cepat menggunakan trik-trik yang dibahas luas oleh pada blogger tanpa tahu tujuannya dan efeknya untuk blog kita. Hati-hati dalam menerapkan kode, script atau tutorial sepintas tanpa penjelasan, karena ketidaktahuan fungsi bisa membuat kita masuk dalam kotak sebagai bagian dari Blogger yang menerapkan Black Hat SEO. Dan Black Hat SEO membuat blog kita dianggap sampah oleh mesin pencari.
Lalu apakah microformat dan microdata adalah bagian dari teknik SEO. Ma'af saya bukan ahli SEO dan tidak tahu tentang SEO, saya menulis artikel ini hanya mengikuti aturan main dan standar yang ada. Blogger Tune-Up masih tetap berkomitmen "Tanpa SEO adalah SEO sebenarnya yang murni tanpa intimidasi". Sampai ketemu pada pembahasan berikutnya. Happy Blogging :)
DUNIA BLOG. Salah satu alat yang di perlukan oleh para webmaster (pemilik web/blog) adalah Google Webmaster Tools, sebenarnya tidak hanya para webmaster saja yang membutuhkan alat ini, sebagai blogger, kita juga membutuhkan alat ini untuk memantau perkembangan blog kita di search engine. Google Webmaster Tools tersedia gratis di masing-masing search engine, seperti yang ada pada search engine paling populer, yaitu Google search engine.
Kali ini DUNIA BLOG akan sedikit membahas perihal apa itu Google Webmaster Tools dan cara penggunaannya. Google Webmaster Tools bisa di kunjungi di alamat berikut ini http://www.google.com/webmasters/tools/. Kita bisa login dengan menggunakan akun Google-mail (kalau sudah daftar di Gmail, berarti kita telah mempunyai akun Google). Menggunakan Google Webmaster Tools akan memudahkan kita sebagai webmaster/blogger untuk berkomunikasi dua arah dengan Google.
Kali ini DUNIA BLOG akan sedikit membahas perihal apa itu Google Webmaster Tools dan cara penggunaannya. Google Webmaster Tools bisa di kunjungi di alamat berikut ini http://www.google.com/webmasters/tools/. Kita bisa login dengan menggunakan akun Google-mail (kalau sudah daftar di Gmail, berarti kita telah mempunyai akun Google). Menggunakan Google Webmaster Tools akan memudahkan kita sebagai webmaster/blogger untuk berkomunikasi dua arah dengan Google.
Google Webmaster Tools adalah salah satu bantuan atau fitur yang diberikan oleh Google dalam memudahkan para pemilik web/blog untuk mengamati top search keyword, domination keywords in blog, Indeks, kata kunci populer, seberapa sering Google mampir ke blog anda serta masalah - masalah lainnya seperti broken link , dan crawl errors. Tentunya Google Webmaster ini sangat berguna untuk para newbie maupun master. Namun sekarang Google Webmaster Tools semakin mantap. sekarang Google Webmaster Tools sudah mendukung data Impressions & Clickthrough untuk blog kita. Manfaat utama menggunakan webmaster tools ini adalah untuk mempercepat proses indexing blog kita oleh Google, sangat berguna pula untuk mengoptimalkan SEO blog, selain itu juga menambah trust Google terhadapat blog kita, seperti dalam rangka mendapatkan sitelinks serta dalam kaitan untuk menampilkan breadcrumb blog kita pada hasil pencarian Google.
Memaksimalkan Fungsi Google Webmaster Tools merupakan kunci utama dalam meraih keberhasilan pada pengelolaan blog agar nangkring di Google search engine pada posisi elite, tidak hanya teknik seo pada template dan meta blog tetapi settingan pada Google Webmaster Tools sangat berpengaruh besar dimana google webmaster tools berfungsi sebagai pemaksimalan proses indexing blog terhadap mesin pencari (search engine). Karena kita ada pada kekuasaan Google, jadi apa rahasia-rahasia yang ada pada webmater tools :
Membuat format feed pada sitemap
Membuat format feed pada sitemap
Salah satu cara memudahkan spider Google mengindex halaman blog yang kita miliki yaitu dengan mengarahkannya melalui sitemaps. Untuk mempermudah dalam membuat sitemaps gunakan jasa sitemaps generator khusus blogspot. Atau format standar feed Atom.xml. dan siapkan juga format cadangan feed yaitu :
rss.xml
feeds/posts/default
feeds/posts/default?alt=rss
/atom.xml?redirect=false&start-index=1&max-results=500
Lakukan site verification
Site verification adalah dengan memasang meta tag Google pada blog kita, hal ini di lakukan sebagai bukti bahwa kita telah mendaftar di Google search engine serta mempercepat kerja spider Google, serta untuk mencegah agar jangan sampai terjadi duplicate meta tag verification, karena Google tidak suka, itu mubazir.
Google akan memberikan cara memverifikasi meta ke blog kita pilih secara manual copy paste kode tersebut dalam blog, letakkan dibawah <head>
Demikianlah sedikit ulasan perihal Google Webmaster Tools, semoga bermanfaat.
DUNIA BLOG. Tulisan ini adalah merupakan kelanjutan dari bagian yang pertama, tentang bagaimana merubah News Mojo blogger template menjadi lebih SEO Friendly. Bila pada bagian yang pertama tersebut lebih menitik beratkan pada perubahan meta-tag dan headingnya, maka pada tulisan ini lebih bersifat penyempurnaan.
Baiklah, sebagai kelanjutan kita akan membahas tentang script untuk merubah judul blog dengan judul postingan blog, yang mana hal ini ditujukan untuk mempermudah calon visitor agar bersedia datang ke blog kita. Mayoritas calon pengunjung blog selalu menuliskan rangkaian kata sesuai dengan topik bahasan yang ia cari, oleh karenanya merubah judul blog dengan judul postingan menjadi langkah yang bijaksana untuk mengakomodir hal tersebut.
Berikut ini adalah script yang harus kita pasangkan pada template blog untuk maksud tersebut di atas,
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
Letakkan script ini persis di bawah script yang telah diuraikan pada bagian yang pertama, kemudian save template anda.
Selanjutnya, bilamana anda ingin template anda menjadi lebih SEO Friendly, pasangkan juga navigasi breadcrumb pada template anda. Bagaimana cara pemasangannya ? Silahkan anda mengunjungi halaman ini. Dan untuk menambah mantapnya template anda, silahkan lengkapi dengan memasang navigasi permalink yang telah saya ulas pada artikel ini.
Kiranya sampai di sini dulu artikel saya, semoga bermanfaat.
Assalamu Alaikum Wr. Wb
Puji syukur saya panjatkan kehadirat Allah SWT yang telah memberi saya kesehatan jasmani maupun rohani sehingga saya masih bisa mengucapkan kata-kata dalam postingan ini,
Solawat serta salam saya ucapkan kepada junjungan Nabi besar saya Muhammad SAW yang telah menunjukkan saya dari jalan yang gelap gulita menuju jalan yang terang benderang.
Salam Blogger, kali ini saya tidak memposting tips trick komputer pemula dan saya juga tidak memposting tips trik blog.
Kali ini saya ingin berterima kasih sebanyak-banyaknya kepada sahabat blogger yang telah mendukung blog K-T-B di networked blogs, Sahabat yang ikut bergabung di sahabat blogger dan Juga sahabat yang mau berlangganan artikel melalui Email.
Beribu-ribu terima kasih juga saya ucapkan kepada teman-teman yang lainya yang telah sudi berkunjung ke blog pemula ini, sehingga blog K-T-B akhirnya mendapatkan rangking dari google.
Rasa percaya tidak percaya saat saya iseng-iseng cek page rank yang biasanya 0/10 dan kini menjadi 1/10, yang artinya kini blog K-T-B mendapatkan page rank 1.
Bukannya saya mau pamer saat ini, tapi saya hanya merasa sangat senag sekali saat melihatnya dan bingung ingin mengucapkan apa kepada Sobat semua yang telah sudi mendukung blog K-T-B. Sekali lagi saya sebagai admin Blog K-T-B "den zuaz" Mengucapkan beribu-ribu terima kasih kepada Sobat semuanya, Mohon untuk tetap mendukung K-T-B sampai kapanpun.
Dalam kesempatan kali ini saya juga mengucapkan selamat kepada Sobat sekalian yang telah mendapatkan rangking dari google, Silakan Sobat Cek di sini Google PageRank Checker, bagi sobat yang belum mendapatkan rangking haruslah bersabar dan terus semangat untuk memposting artikel-artikel yang bermanfaat.
Demikian Ucapan Terima Kasih Saya dan saya akhiri Wassalamualaikum Wr. Wb
Hormat saya den zuaz.
Namun bagi sobat yang merasa bahwa artikel sobat sangat penting dan tidak rela untuk di copy paste, mungkin hal ini cukup berguna untuk dilakukan. akan tetapi cara tersebut tidak melindungi content blog sobat sepenuhnya, stidaknya cukup membuat orang yang berniat copas sedikit bingung apabila dia seorang newbie, karena sebenarnya ada jalan lain untuk bisa meng-copas artikel blog sekalipun sudah dilindungi dengan script anti copas.
Tanpa panjang lebar, kali ini untuk melindungi blog di blogger (blogspot) dari dari copy paste adalah dengan mendisable right click, atau lebih dikenal dengan mematikan klik kanan. Berikut tutorial cara mematikan klik kanan pada blogspot.
- Login terlebih dahulu ke Blogger.com
- Dari halaman Dashboard, silahkan Sobat menuju ke Tata Letak > Edit HTML
- Lalu cari kode <body> atau <body (dengan bantuan tekan Ctrl+F atau F3)
- Tambahkan kode dibawah ini ke dalam kode <body> atau <body tadi, atau bisa juga di ganti sekalian
<body oncontextmenu='return false' onmousedown='return false' onselectstart='return false' onkeypress='return false'>
Sobat juga bisa menggunakan beberapa tambahan kode saja, atau semuanya juga boleh, terserah kebutuhan anda.
Berikut penjelasan dari kode-kode diatas:
oncontextmenu='return false' (untuk mematikan klik kanan mouse)
onmousedown='return false' (untuk mematikan klik blok ke bawah)
onselectstart='return false' (untuk mematikan seleksi blok)
onkeypress='return false' (untuk mematikan tombol keyboard)
Jika sudah, Simpan Template blog Sobat.
Mohon maaf apabila tutorial sebelumnya tidak berhasil karena belum saya coba. untuk demonya silakan sobat lihat di sini DEMO.
Selamat mencoba dan semoga berhasil sobat.
Sumber: http://www.nova13.com
Cbox atau lebih dikenal sebagai buku tamu merupakan hal yang tidak asing lagi di dunia blogger, sudah banyak tutorial-tutorial yang membahas tentang cara pemasangan Cbox, baik dengan cara standar maupun dengan cara pengubahan kode CSS.
Kali ini saya akan memposting cara memasang Cbox auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.
Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.
Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:
Kali ini saya akan memposting cara memasang Cbox auto hiden dari segala arah, segala arah maksudnya yaitu Cbox dapat ditempatkan atau muncul dari bagian sebelah kiri blog, kanan blog, bawah blog, dan atas blog, dan disertakan juga animasi gambar gif sebagai background.
Saya kira cukup sekian bla bla bla penerangan saya, dan mari kita menuju kepokok pembahasan.
Berikut ini adalah Cara Memasang Buku Tamu / CBOX Di Blog Muncul Dari Berbagai Arah:
- Seperti biasa sobat harus Login dulu di akun blog sobat
- Pilih Tata Letak
- Tambah Gadget HTML/Java Script
- Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script.
Klik show untuk melihat
Klik save / simpan.
Keterangan:
- Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
- Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
- Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
- Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).
- Tetap login di akun blog sobat
- Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script
Keterangan:
- Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
- Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
- Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.
Sumber Script: Zuaz'Z Creator
Loading yang ringan pada blog merupakan salah satu cara untuk membuat orang senang berkunjung di blog kita, apalagi ditambah artikel-artikel yang keren, pastinya pengunjung akan membanjiri blog sobat. Cara agar loading blog kita cepat (tidak lemoet) adalah dengan memperingkas tampilan dan tidak terlalu banyak widget, salah satu caranya adalah dengan membuat widget Menu TAB View.
Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.
Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.
1. Silahkan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>
5. Letakkan kode dibawah ini diatas kode </head>
6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript
Setelah itu simpan dan lihat hasilnya.
Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.
1. Silahkan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>
5. Letakkan kode dibawah ini diatas kode </head>
6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript
Setelah itu simpan dan lihat hasilnya.
Sumber: http://cwiter.blogspot.com 
English
This is a great way to exchange links. Because we put a link that will help promoted by 1 million people over just by referring 2 people only. Easy enough to invite two people to the list, as all promotional needs, everyone wants the link spread quickly. Especially if more than 2 people ... how will we be able to link the free n again ..
Okay, like what and how to do .. my friend lives just a list, not hurt to try, free of this, here we stick to keep the link, link which can be included his post title and URL for each page had a pagerank as well .. our PR's usually only on the front page, while on post pages not have a PR.
Sign up if you are interested enough. After that please check the password sent to your email, login and then immediately put the article title, description and URL links to be promoted on this website. O Yeah ... we will get our website to promote a replica you know .. For example, I dedicate a post about Free Link Exchange, Get 1 Million Visitors, one easy way to increase traffic and Pegerank our blog.
Next live to make a post like this or just copy and paste this article to the blog and feel the benefits.
To register please click the link Free here, then scroll down and click "Sign Up Now Free" or Click To Sign Up.
Good luck with tips Free Link Exchange: Get 1 Million Visitors this.
When my friend also has other tips .. please share in comments..!!
Bahasa Indonesia
Ini adalah cara dahsyat untuk tukar link. Karena satu link yang kita pasang akan dibantu dipromosikan oleh 1 juta orang lebih hanya dengan mengajak 2 orang saja. Cukup mudah mengajak 2 orang untuk daftar, karena semua butuh promosi, setiap orang ingin linknya tersebar dengan cepat. Apalagi kalau lebih dari 2 orang… berapa link yang akan kita dapat n gratis lagi..
Oke kayak apa dan gimana caranya.. sobat tinggal daftar saja , tak ada ruginya untuk dicoba , gratis ini, disini link kita bisa nempel terus, link yg dimasukan bisa judul postingan dan URL nya agar tiap page punya pagerank juga.. kan biasanya PR kita hanya di halaman depan saja, sementara di halaman posting gak punya PR.
Kalau berminat cukup Mendaftar. Setelah itu silahkan cek password yang dikirim ke email anda, kemudian langsung login dan pasang judul artikel, keterangan dan URL link yang ingin dipromosikan pada Website ini. Oh ya … kita juga akan mendapatkan web replikanya untuk kita promosikan lho.. Sebagai contoh saya persembahkan postingan tentang Free Link Exchange: Get 1 Million Visitors, salah satu Cara mudah meningkatkan Traffic dan Pegerank blog kita.
Selanjutnya tinggal bikin sebuah postingan seperti ini atau silahkan copy paste artikel ini untuk di blog sobat dan rasakan manfaatnya.
Untuk mendaftar silahkan klik Link Gratis disini , kemudian scroll kebawah lalu klik “ Sign Up Now Free “ atau Klik Untuk Mendaftar.
Selamat mencoba tips Free Link Exchange: Get 1 Million Visitors ini.
Bila sobat juga punya Tips lain.. tolong share di komentar.. yaa..!!
Berbagi pengalaman pribadi membuat lipatan kertas pada ujung kanan blog yang menurut saya agak lumayan bikin pusing sob,
maklumlah pemula,, heheheheee,,,, 
Setelah berkali-kali mencoba merubah kode java scriptnya, akhirnya selesai juga, dan lihat hasilnya di ujung kanan blog saya, [sedikit pamer, heheheheee,, 
]
] bagi sobat yang berminat untuk membuat lipatan kerta pada ujung blog seperti blog saya [tenag aja yang saya bagi tidak ada foto jelek saya kok,, heheheheee,,, 
] silakan ikuti lankah-langkah berikut ini ya sobat:
] silakan ikuti lankah-langkah berikut ini ya sobat:1. Silahkan Login ke akun blogger sobat.
2. Lalu masuk ke design Template, klik Edit HTML
3. Seperti Biasa Centang Expand Template Widget
2. Lalu masuk ke design Template, klik Edit HTML
3. Seperti Biasa Centang Expand Template Widget
4. Kemudian cari kode berikut </body>
5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode </body>
<script type='text/javascript'>var tujuan ='http://Alamat Url Feeds Sobat'</script>
<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>
6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)
Keterangan:
- Kode warna hijau: ganti dengan URL Feeds sobat
- Kode warna biru: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.
Ikuti langkah-langkah berikut ini bila sobat ingin mengganti gambarnya.
Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.
1. Setelah sobat selesai download silakan sobat buka script tersebut dengan Notepad.
2. Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) sobat cari url berikut dalam text dan silakan ubah dengan URL gambar sobat:
http://petir-project.googlecode.com/files/fedkcl.png
(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)
3. Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) sobat ubah URL berikut dengan URL gambar sobat:
http://petir-project.googlecode.com/files/feed.png
4. Setelah selesai merubah kode URL gambar tersebut Sobat Save Text, selanjutnya silakan sobat upload text tersebut dan ganti url http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload sobat tadi.
NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.
NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.
Selamat mencoba ya sobat,,
Sumber Script: http://santaiselalu.blogspot.com
http://ardiyafardhanprayoga.blogspot.com
Sumber Script: http://santaiselalu.blogspot.com
http://ardiyafardhanprayoga.blogspot.com
Kali ini saya sedikit memberikan tips untuk sobat blogger yang ingin membuat text area yang keren,, heheheheeeee,,,
Tips ini saya dapat dari illtorro.blogspot.com. Kronologinya, pada saat lagi jalan-jalan di blog para master yang sudah ber PR tinggi saya melihat text area yang saya anggap keren, saya cari-cari akhirbya ketemu juga nih kode HTML untuk membuat text area dengan tombol pilih semua / Select all,
Nah bagi sobat yang berminat untuk membuat text area dengan tombol pilih semua / Select all silakan copy paste code dibawah ini:
<code><span ><div><form name="copy"><div align="center"><input value="Pilih Semua" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"> </div><div align="center"></div><p align="center"><textarea rows="3" cols="20" style="border: 8px inset rgb(104, 104, 204); padding: 0pt 1px; background: rgb(100, 100, 200) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(255, 255, 255); line-height: 1.5em; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;" name="txt" wrap="VIRTUAL">
</textarea></form></div></span></code>
Keterangan:
- Text warna hijau: bisa sobat ganti dengan select all / block all / tandai semua dan lain-lain sesuai selera sobat.
- Text warna kuning: adalah ketinggian text area tersebut, silakan sobat sesuaikan sendiri.
- Text warna biru: adalah panjang kolom text area tersebut, silakan sobat sesuaikan sendiri.
- text warna merah: merupakan tempat untuk kode yang inggin sobat taruh di dalam text area tersebut.
Selamat mencoba dan semoga bermanfaat ya sob,,!!
Sumber: http://illtorro.blogspot.com
pada salah satu blog saya yang tidak tampil diposting tentang Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.Berikut ini akan saya sampaikan cara-caranya beserta keterangan gambar. Tutorial ini saya dapatkan dari hackerzpro.blogspot.com nah silakan anda ikuti cara-cara berikut ini,,
Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:
<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
</div></div></div>
Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:
Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.
Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.
Klik show untuk melihat
Yang di atas adalah contoh sederhana tentang cara pembuatan tombol show hide di blog, selanjutnya bisa teman-teman kembangkan sendiri.
Sumber : http://www.thecyber.co.cc
Share kumpulan efek blog yang telah di posting oleh sobat CHRISTIAN TATELU kumpulan efek-efek blog baik dari yang ringan hingga yang berat, untuk diterapka pada blog sobat sekalian, singkat cerita saja silakan simak keterangan berikut.
Kumpulan Efek - Efek Blog ( Lengkap ) - Memang selalu ada cara untuk mempercantik penampilan blog. Setelah sebelum memposting cara memasang animasi di blog, kali ini saya akan kasih sobat berbagai macam / jenis efek - efek blog yang bisa di pasang di blog.
Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .
Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.
A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.
1. Efek salju berjatuhan
2. Efek hati bertaburan
3. Efek bintang bertaburan
4. Efek kembang api
5. Efek Gelembung
Cara pemasangan :
B. Efek Menengah - Berat
Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO
1.Meteor Jatuh
2. Banjir
3. Bunga Mekar
4. Bom Atom
5. Ufo
6. Graffity
7. Shaver
8. Gun
9.Bloody gun
10. Paint ball
11. Chainsaw
12. Dinosaur
13. Lebah
14. Lalat
15. Semut
16. Siput
17. Cacing
18. Mold
19. Bayi merangkak
20. Telur mata sapi
21. Kopi tumpah
22. Terbakar
23. Tomat
24. Creampie
25. Murka
26. Sapi Jorok
27. Anjing Jorok
28. Kencing Sembarangan
Cara pemasangan :
Tambahan :
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ). so, pilih mana yang terbaik menurut sobat.. salam..
Sumber: http://christiantatelu.blogspot.com
Sebelum kita masuk ke intinya, terlebih dahulu saya ingatkan pada sobat bahwa efek, animasi dan widget - widget serupa akan menambah beban loading blog sobat, jadi mohon di perhitungkan sebelum sobat memasang efek ini. Efek yang akan saya posting kali ini, akan saya bagi 2 yaitu efek ringan ( loading ringan ) dan efek menegah hingga berat. ( kayak tinju aja.. ) .
Sobat yang tertarik memasangnya silahkan ikuti tutorial memasang efek - efek pada blog berikut.
A. Efek Ringan
Mungkin Ini adalah efek yang biasa sobat lihat saat sobat blogwalking.
1. Efek salju berjatuhan
2. Efek hati bertaburan
3. Efek bintang bertaburan
4. Efek kembang api
5. Efek Gelembung
Cara pemasangan :
- Klik rancangan --> Edit html
- Letakkan script efek di atas kode </body>
- Klik Save
B. Efek Menengah - Berat
Efek ini saya ambil dari http://www.netdisaster.com. Untuk demo dari salah satu script berikut, silahkan lihat di sini.. DEMO
1.Meteor Jatuh
2. Banjir
3. Bunga Mekar
4. Bom Atom
5. Ufo
6. Graffity
7. Shaver
8. Gun
9.Bloody gun
10. Paint ball
11. Chainsaw
12. Dinosaur
13. Lebah
14. Lalat
15. Semut
16. Siput
17. Cacing
18. Mold
19. Bayi merangkak
20. Telur mata sapi
21. Kopi tumpah
22. Terbakar
23. Tomat
24. Creampie
25. Murka
26. Sapi Jorok
27. Anjing Jorok
28. Kencing Sembarangan
Cara pemasangan :
- Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
- Masukkan script efek di dalam kotak yang di sediakan
- Klik save dan lihat hasilnya.
Tambahan :
Efek yang ke 2 berbeda dengan efek yang pertama. di efek ke 2, efek bisa dimatikan secara manual, sedangkan yang pertama sebaliknya ( tidak bisa dimatikan selama masih memasang scriptnya ). so, pilih mana yang terbaik menurut sobat.. salam..
Sumber: http://christiantatelu.blogspot.com
