Tips Menciptakan Blog Yang Sukses

Setiap blogger pasti mendambakan sebuah blog yang sukses baik dari sisi brand, dari sisi jumlah visitor (pengunjung) yang tentunya dapat menambah keuntungan tersendiri, entah itu keuntungan dari hal kepuasan atau memang benar-benar keuntungan dari hal income (penghasilan).

Berikut Beberapa Tips Menciptakan Blog Yang Sukses

1. Jangan terlalu berfikir macam-macam

Sebuah blog tidaklah harus kompleks yang terdiri dari banyak topik yang kadang tidak kita kuasai. Berhentilah untuk berfikir seperti itu, santailah dan berfikirlah sesederhana mungkin. Tulislah artikel seperti hal-hal yang kita bicarakan sehari-hari dan itu lebih baik dari pada kita memaksakan sesuatu hal yang tidak kita ketahui/kuasai awal akhirnya. Dengan seperti ini seakan-akan kita mengajak para pembaca untuk berdiskusi lewat tulisan-tulisan.

2. Ketahuilah target pengunjung

Untuk siapakah artikel yang anda tulis? Apakah untuk pengunjung baru, pelanggan setia, industri professional atau pembaca pintas lalu? Jika artikel kita ditujukan untuk pengunjung baru, atau orang-orang yang belum kita ketahui asalnya, maka berhati-hatilah dalam menggunakan singkatan atau istilah-istilah asing tanpa terlebih dahulu kita jelaskan kepada mereka dalam artikel kita. Jika artikel anda ditujukan untuk pelanggan setia, maka hindari memberikan atau menjual produk yang mereka sendiri sudah memilikinya atau mengetahuinya. Membuat artikel dengan target semua pengunjung itu juga baik, tetapi artikel kita haruslah menyentuh semua target pengunjung baik itu untuk pemula ataupun untuk sesuatu yang lebih teknis/mendalam bagi mereka yang menjadi pelanggan setia kita. Atur-aturlah dan pikirkanlah dengan baik, tetapi jangan terlalu memaksakan diri untuk membuat artikel yang sulit dengan target semuanya dalam satu jenis artikel.

3. Tulislah artikel yang terbaik

Mulailah berlajar menghitung-hitung jumlah pengunjung dari salah satu blog yang sejenis kemudian hitunglah jumlah pengunjung dari blog tersebut hal ini untuk mengetahui jumlah target dari pengunjung blog kita dikemudian hari. Selain itu kita haruslah berani untuk mengambil suatu keputusan dalam menulis artikel yang lebih unik dengan karakter yang berbeda dan tentunya dengan isi lebih baik dari yang ada, tunjukanlah bahwa kita memiliki kepribadian dan semangat yang lebih tinggi dari mereka yang sudah terlebih dahulu menulis isi artikel yang mirip dengan blog kita. Jika tidak berani menciptakan terobosan maka kita akan terhempas dalam kerumunan dunia maya dan menghilang tanpa jejak. Tanyakanlah pada diri sendiri; Apa yang menyemangati kita? Apa yang membuat kita menyukai sesuatu yang kita lakukan? Apa yang akan ditonjolkan pada blog kita? Kita seharusnya menulis artikel terbaik dari apa yang kita kuasai baik dari sisi ilmu maupun pengalaman, dan janganlah menulis artikel hanya untuk mengisi blog.

4. Janganlah merasa sempurna
Blog kita tidak akan pernah sempurna maka janganlah berhenti untuk melakukan perbaikan dan perubahan dari artikel-artikel yang telah kita tulis, carilah dan temukan kesempurnaan itu diluar sana walaupun blog kita tidak akan pernah sempurna.
Mulailah dengan perlahan-lahan, janganlah terlalu tergesa-gesa. Cari informasi apakah blog anda sudah di temukan pada mesin pencari tapi janganlah terburu-buru untuk mempromosikannya. Perlahan tapi pasti akan memberikan kesempatan kepada mesin pencari untuk mengindeks halaman demi halaman blog kita sehingga kita akan menemukan bagaimana kita membiasakan diri terhadap apa yang mesin pencari lakukan. Ketika semuanya telah siap, promosikanlah.

Perhatikan bahwa jumlah pengunjung perlahan-lahan bertambah dan suatu hari anda akan memimpin sebagai salah satu blogger professional, jika sudah seperti ini publik dengan sendirinya akan menempatkan blog kita sebagai blog referensi, namun tetaplah kita berjalan perlahan dalam kepastian.

5. Utamakan pengunjung, mesin pencari menyusul

Sering kita terjebak dalam ketergesaan dengan berfikir untuk menciptakan blog yang bagus untuk SEO (Search Engine Optimization), tapi ingatlah bahwa blog kita diciptakan sebagai penerbit. Biarlah semua berjalan perlahan, hal ini justru memberi kesempatan mesin pencari agar mudah untuk mengindeks artikel-artikel kita dari artikel lama sampai dengan artikel terbaru karena toh dengan sendirinya mesin pencari akan mengarahkan lalu lintasnya pada blog kita. Jika artikel kita bermanfaat, unik dan menarik maka dengan sendirinya akan menarik mesin pencari untuk merujuk pada blog kita, hal ini adalah cara terbaik untuk mempromosikanya sendiri. Jika kita membuat artikel hanya untuk mesin pencari (teknik SEO) maka janganlah bermimpi untuk mendapatkan pengunjung sesuai dengan keinginan kita. Buatlah artikel yang terbaik untuk pengunjung, maka mesin pencari akan menyusul.

6. Aturlah tata letak artikel tetapi jangan berlebihan

Anda memegang koran sekarang? Perhatikanlah betapa mudahnya kita menemukan artikel-artikel yang menarik menurut penilaian kita. Demikian pula dengan blog kita, seberapa mudah para pengunjung menemukan artikel yang menarik dari blog kita yang terorganisir dengan baik.

Mengumpulkannya dalam suatu kategori adalah cara termudah untuk mengorganisir artikel-artikel pada blog kita, tetapi hati-hatilah dalam penempatan artikel pada suatu kategori tertentu, jangan terlalu banyak terjadi duplikat kategori (sebuah artikel terkumpul dalam beberapa kategori). Tentukanlah kategori yang tidak lebih dari 5 dalam satu artikel atau kalau bisa dalam satu blog. Hal ini sangat bermanfaat bagi pengunjung untuk meng-ubek-ubek blog kita.

7. Aktifkan Komentar

Komentar merupakan cara terbaik untuk memperoleh umpan balik dan untuk berinteraksi dengan para pengunjung. Mematikan komentar itu sama dengan kita ingin mengatakan "perhatikan aku, dengarkan aku, tapi jangan berbicara padaku". Jika kita ingin benar-benar berhubungan dengan orang lain, maka biarkanlah mereka berbicara pada kita dan kita harus siap untuk meresponnya ketika mereka berkomentar.

8. Sesuaikan Design Blog

Masih ingat artikel sebelumnya tentang Kaidah Sederhana untuk Desain Blog Terbaik? Artikel tersebut dapat kita gunakan sebagai rujukan. Sebuah blog adalah perpanjangan dari (anggaplah) perusahaan kita. Update dan perbaikilah tampilan, warna, dan hal teknis lainnya agar blog tampak serasi dengan tujuannya. Hanya menggunakan beberapa logo, warna dan atau desain yang tidak serasi membuat orang lain tidak begitu peduli akan blog kita dengan kata lain "blog kita tidak begitu unik dimata pengunjung". Carilah dan temukanlah desain terbaik untuk blog kita yang mampu menggambarkan tujuan dari blog yang kita buat.

9. Teruslah Menulis

Jika semua hal diatas gagal, dari mulai artikel-artikel terbaru, menjawab komentar-komentar, berbicara tentang apa yang anda lakukan dan pikirkan, mengapa? Atau bahkan anda belum menemukan target pengunjung atau lebih parahnya anda tidak tahu apa yang akan anda lakukan untuk menulis suatu artikel. Kita harus tetap berjalan, berlari dan janganlah berhenti untuk belajar, berfikir dan menulis. Diam berarti membunuh blog kita sendiri.

10. Santailah

Ambil napas dalam-dalam, santai dan ingatlah bahwa menulis blog itu tidaklah sulit. Berfikirlah bahwa kita hanya menuliskan sesuatu untuk dibaca oleh para pengunjung blog kita. Setiap hari kita menulis dan membaca email, berinteraksi dengan orang lain, bercengkrama dengan teman sekantor dan begitu pulalah dengan blog. Blog adalah cara lain untuk mendapatkan dan memberikan informasi dalam membantu mendidik dan menginformasikannya kembali pada orang lain.

Lalu apa yang anda tunggu? Mulailah menulis artikel blog dan Happy Blogging :)
(Gambar diambil dengan bantuan Google Gambar tanpa memperhatikan Copyright)

Read More

Mengenal dan Menggunakan Google Font

Semakin hari semakin banyak fasilitas yang diberikan Google kepada para pengguna dunia maya, gebrakan demi gebarakan membuat para pesaing bisnis dot com di dunia maya semakin kewalahan dengan langkah-langkah yang di ambil Google. Selain ditunjang dengan teknologi yang terbaik, kemudahan dalam penggunaan yang juga tentunya diberikan secara cuma-cuma alias gratis oleh Google. Diantara sekian banyak hal yang diberikan Google kepada Blogger adalah Google Font. Satu lagi fasilitas gratis yang diberikan kepada para desainer website terutama para Blogger.

Google Font merupakan alternatif atau mungkin bahkan bisa disebut sebagai jalan keluar dalam mengatasi kejenuhan dan keterbatasan penggunaan jenis font (huruf). Huruf-huruf (fonts) yang digunakan oleh para desainer web biasanya menyesuaikan jenis-jenis huruf yang tersedia secara default dan umum pada sebagian banyak komputer didunia. Sederhananya tampilan huruf pada sebuah website akan menyesuaikan dengan ketersediaan jenis huruf pada komputer yang sedang mengakses website tersebut, hal ini menjadikan jenis huruf tertentu secara tidak langsung menjadi standar umum yang digunakan pada setiap desain web.

Diantara sekian banyak jenis huruf yang sering digunakan pada suatu website adalah; Arial, Verdana, Tahoma, Georgia, serif, Courier New, monospace, hal ini menjadi aturan tidak baku bagi para web desainer. Ketidak bakuan ini karena penyesuaian ketersediaan font pada suatu komputer secara umum. Google memberikan jalan keluar untuk mengatasi kejenuhan penggunaan font standar dan "baku" dengan menyediakan fasilitas Google Font. Bagaimana menggunakan Google Font pada website/blog kita?

Google Font Directory

Google Font Directory^[1]merupakan tempat yang disediakan untuk melihat secara lengkap jenis huruf (fonts) yang sudah disediakan dan siap digunakan oleh Google Fonts. Semua font yang tersedia disini tersimpan pada Google Server dan dapat digunakan secara bebas pada website dengan lisensi dibawah Open Source License. Untuk melihat secara detail dari suatu font silahkan arahkan mouse pada salah satu jenis font dan klik, maka kita akan diarahkan pada halaman detail dari jenis font yang kita pilih.

Google Font API

Google Font API^[2] dapat digunakan pada website tanpa perlu menggunakan berbagai bahasa pemograman. Untuk menambahkannya cukup menggunakan stylesheet link yang menunjukan suatu font yang akan digunakan serta kita tidak perlu menginstall font yang akan kita gunakan pada komputer kita, karena font akan diload dan ditampilkan dari server font Google dengan teknik API, jadi walaupun suatu jenis font yang kita pilih tidak kita pasang pada komputer, font akan tetap ditampilkan pada browser dengan sempurna.

Untuk mengintegrasikan Google Font, ikuti langkah dibawah ini:
Langkah 1
Pilihlah jenis font yang akan kita gunakan disini dan login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

Langkah 5
Carilah CSS Selector yang mengandung elemen pemanggilan font, seperti contoh dibawah ini:

body {
font-family: 'Font Name', sans-serif;
font-size: 12px
}

atau :

<div style="font-family: 'Font Name', serif;">Text Anda</div>

Langkah 6
Klik tombol "SIMPAN"

Keterangan :

Ubahlah dan samakan antara Font+Name pada langkah 4 dan 'Font Name' pada langkah 5 sesuai dengan nama font yang akan kita gunakan.

Sebagai contoh kita akan menggunakan jenis font Tangerine, maka :

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"/>
body {
font-family: 'Tangerine', sans-serif;
font-size: 12px
}

Jika kita ingin menggunakan jenis font lebih dari satu, maka link (lihat langkah 4) yang kita tuliskan menjadi seperti dibawah ini:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"/>

Gunakan tanda/karakter (|) tanpa tanda kurung untuk memisahkan jenis font yang digunakan.

Gunakan tanda/karakter (+) tanpa tanda kurung untuk menggunakan font yang terdiri dari dua kata, jangan menggunakan spasi.

WebFont Loader

WebFont Loader^[3] adalah alternatif lain integrasi Google Font API selain menggunakan stylesheet link. Keuntungan menggunakan WebFont Loader adalah kemudahan mengontrol berbagai jenis font yang akan digunakan karena menggunakan Ajax API serta kecepatan load jenis font yang relatif lebih cepat dari pada menggunakan stylesheet link.
Untuk mengintegrasikan Google Font dengan WebFont Loader, ikuti langkah dibawah ini:
Langkah 1
Pilihlah jenis font yang akan kita gunakan disini dan login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan kode dibawah ini diatas kode pada langkah 3:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
</script>

Atau jika desain web anda sudah menggunakan Google AJAX API^[4] maka bisa menggunakan teknik alternatif seperti dibawah ini:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("webfont", "1");
google.setOnLoadCallback(function() {
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell' ]
}
});
</script>

Langkah 5
Carilah CSS Selector yang mengandung elemen pemanggilan font, seperti contoh dibawah ini:

body {
font-family: 'Tangerine', sans-serif;
font-size: 12px
}

atau :

<div style="font-family: 'Cantarell', serif;">Text Anda</div>

Langkah 6
Klik tombol "SIMPAN"

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Catatan Kaki:
1. Google Font Directory
2. Getting Started Google Font API
3. WebFont Loader Google Font API
4. Google's AJAX APIs
5. Technical Considerations Google Font API
6. Contoh Blog Google Font pada Hendriono Online

Read More

Kaidah Sederhana untuk Desain Blog Terbaik

Desain suatu blog sangat berpengaruh terhadap keunikan suatu blog dan hal yang unik adalah salah satu daya tarik untuk memikat para pengunjung. Setelah pengunjung menemukan suatu keunikan pada blog kita, maka mereka akan rela berlama-lama dan sering-sering mampir sekedar membaca-baca atau sekedar mempelajari hal-hal yang unik menurut mereka. Ada banyak hal yang bisa membuat blog kita menjadi unik bagi para pengunjung salah satunya adalah desain blog.

Untuk mendesain suatu blog diperlukan keahlian pada beberapa bahasa pemrograman web desain, diantaranya pengetahuan tentang koding CSS (Cascading Style Sheet) untuk mengatur tata letak dan kombinasi warna, XHTML untuk mengatur tata letak dan urutan baik itu menu atau informasi penting lainnya, dan JavaScript untuk membuat suatu desain web yang dinamis.
Sebelum kita menuliskan kode-kode sebagai dasar desain blog, sebaiknya ikuti kelima langkah dibawah ini untuk menentukan suatu desain blog yang terbaik.

• Pikirkan fokus utama dari blog kita, informasi apa yang akan kita berikan kepada para pengunjung. Dengan begitu kita akan dapat menempatkan posisi dari suatu elemen halaman yang penting untuk para pembaca blog kita. Dan mereka akan dengan mudah menemukan informasi yang diperlukannya.
• Organisasikan elemen-elemen halaman agar posisinya mudah dijangkau oleh para pembaca dan dapat terbaca dengan baik. Desain sederhana terbaik misalkan pada bagian sebelah kiri (sidebar) terdapat kumpulan judul artikel-artikel terbaru dan artikel-artikel terpopuler (paling banyak dibaca). Pada bagian halaman artikel terdapat kumpulan artikel-artikel yang terkait, kumpulan komentar dan kotak komentar.
• Optimalkan penggunaan jumlah link pada halaman artikel. Hindari menyisipkan informasi-informasi yang sama dan terlalu banyak link karena hal ini juga mempengaruhi kenyamanan pembaca dalam menelusuri blog kita.
• Tentukan jumlah tombol jaringan sosial untuk membagikan artikel kita dan integrasikan secara harmonis dengan desain halaman blog kita. Tombol jaringan sosial sangatlah bermanfaat untuk membantu meningkatkan popularitas artikel kita dan meningkatkan jumlah kunjungan pada blog kita. Tetapi bukan berarti semua tombol jejaring sosial kita sertakan pada halaman blog, pilihlah jejaring sosial yang paling banyak digunakan. Twitter, Delicious, Facebook dan Google Buzz adalah situs jejaring sosial yang terbukti dapat meningkatkan jumlah kunjungan (traffic) pada blog-blog profesional.
• Buatlah elemen iklan seminimal mungkin serta hindari (atau buang) iklan-iklan dari dalam artikel blog kita. Periklanan adalah pokok utama untuk nilai sebuah artikel pada blog kita. Tetapi pikirlah ulang, sebagai seorang pembaca, kita umumnya membenci halaman-halaman blog yang dipenuhi dengan banner dan atau jenis-jenis periklanan yang menjejali suatu halaman artikel. Kurangilah periklanan pada blog kita, dan sediakanlah ruang iklan hanya pada sidebar, karena menurut para blogger profesional posisi inilah yang terbaik untuk menempatkan iklan serta umumnya para pembaca menyukai posisi ini, selain indah juga tidak mengganggu acara "ngubek-ngubek" artikel blog.

Selamat menelaah dan semoga kita bisa menjadi bagian dari blogger-blogger besar... Happy Blogging :)

Read More

Pentingnya Sumber Artikel

Suatu hari Blogger Tune-Up berjalan-jalan (blogwalking) ke blog teman-teman blogger, alangkah terkejutnya ketika menemukan suatu blog yang didalamnya terdapat beberapa artikel Blogger Tune-Up. Sepintas mungkin artikel tersebut menggunakan bahasa sendiri terlihat dari gaya bahasa yang berbeda dengan Blogger Tune-Up, tetapi jika ditelaah baik-baik ternyata tips dan trik yang ditulis adalah milik Blogger Tune-Up. Hal ini terungkap setelah Blogger Tune-Up mencoba menggunakan script yang disertakannya. Sungguh diluar dugaan, script itu adalah buatan Blogger Tune-Up karena setelah di encode masih terdapat link Blogger Tune-Up, yang menjadi pertanyaan, kenapa sang blogger mengaku bahwa script itu dibuatnya sendiri dengan bahasa meyakinkan. Misal; "setelah hampir seminggu mengutak-atik script ini akhirnya saya berhasil membuat script ini untuk anda teman-teman blogger". Terkesan bahwa ini adalah sebuah bentuk pengakuan bahwa script tersebut dibuatnya sendiri. Apakah ada kesamaan ide dan script? Tapi kenapa link Blogger Tune-Up tertulis pada script tersebut? dan masih banyak lagi pertanyaan lainnya.

Disini yang menjadi masalah bukanlah masalah hak cipta, karena Blogger Tune-Up terbuka bagi siapa saja yang ingin mengembangkan suatu artikel. Tapi lebih ke kesadaran para blogger untuk menyampaikan suatu bentuk terima kasih atau penghargaan kepada para pembuatnya. Memang tidak ada kode etik yang mengharuskan seseorang menuliskan sumber artikel, tetapi disinilah mari kita berdiskusi mengenai sumber artikel.

Mengapa Harus Mencatumkan Sumber Artikel?

Ada beberapa alasan yang mungkin bisa kita gunakan untuk menguatkan pencantuman sumber artikel, diantaranya;

• Ide yang ditulis oleh seorang blogger jelaslah mengalir dari hasil pemikirannya, walaupun mungkin itu hal sederhana, tetapi suatu hari jika ternyata ide sederhana tersebut merupakan awal dari suatu hal yang besar maka orang akan berusaha mencari asal-usul dari mana sebenarnya ide awal itu terbentuk. Dari sini jelaslah bahwa sang pemilik ide awal sangatlah menguasai ide tersebut, memahaminya dengan baik kenapa dan darimana ide tersebut hadir dan tertuang menjadi suatu artikel blog.
• Sumber artikel sangat memudahkan blogger lain untuk mengembangkannya menurut versinya walaupun mungkin artikel tersebut telah berpindah-pindah dari suatu blog ke blog lainnya atau mungkin juga sudah beralih bahasa. Tetapi selama sumber artikelnya tersedia maka orang yang akan mencoba mengembangkannya akan dengan mudah menemukan hal-hal yang menurutnya penting untuk dikembangkan.
• Mencantumkan sumber artikel adalah suatu bentuk kesadaran dari seorang blogger yang berjiwa besar dan suatu langkah awal menjadi blogger besar. Secara alami orang yang mampu menghargai orang lain akan mendapat perlakuan yang sama pula dari blogger lain. Lihatlah para blogger professional yang selalu saling membahas suatu artikel menurut pandangan blogger pemilik ide dan kemudian meramunya dengan ide dari dirinya sendiri, dari sinilah kemudian muncul suatu kesempurnaan.
• Sumber artikel membuat suatu artikel yang sederhana menjadi suatu artikel yang sangat bermanfaat dan bahkan menjadi suatu runutan bagi generasi-generasi berikutnya yang tidak perlu lagi berangkat dari awal, kian hari maka kian sempurna.
• Sumber artikel pada suatu artikel dapat pula meningkatkan kualitas blog keduanya, baik pemilik artikel maupun pengembang artikel. Keterkaitan ini membuat sistem yang kuat dan saling menguatkan satu sama lain, dan mesin pencari akan dengan mudah menempatkan suatu blog di hasil pencariannya, dengan kata lain ini adalah salah satu teknik SEO (Search Engine optimization) murni yang membuat peringkat kedua blog tersebut menjadi penting di mata mesin pencari.

Ini semua kembali kepada kesadaran para blogger, memilih untuk menjadi terbelakang dengan kegiatan pengakuan ide orang lain atau belajar menjadi blogger yang berjiwa besar. Ini adalah sebuah pilihan, memilih untuk dihargai atau dikucilkan, memilih untuk menjadi besar atau kecil, memilih untuk menjadi pintar atau menjadi bodoh. Ide, saran, kritikan, caci maki atau apalah bentuknya dengan senang hati Blogger Tune-Up terima... Mari sama-sama belajar berjiwa besar dan menjadi besar. Happy Blogging :)

Read More

Mengenal Lebih Jauh JumpLink - Readmore

Pada artikel sebelumnya telah di bahas tentang JumpLink atau Readmore, tetapi karena sifatnya masih terlalu umum maka bahasan kali ini akan kita telusuri fasilitas JumpLink/Readmore ini lebih jauh lagi. Readmore atau JumpLink adalah fasilitas pemenggalan artikel yang telah disediakan oleh Blogger sebagai salah satu hadiah 10 tahun Blogger (1999 - 2009) tetapi penggunaannya masih kurang begitu maksimal pada sebagian blogger terutama mereka yang newbie (baru belajar ngotak-atik blog). Walau pun blogger tidak membuka secara total kode JumpLink ini tetapi bagi kita para pengguna blogger sudah termasuk cukup untuk bisa memahami dan menggunakan kode JumpLink atau Readmore ini. Bagaimana JumpLink atau Readmore ini kita pahami cara kerjanya?

Mengenal Editor Artikel

1. Editor Baru
- Mengaktifkan Editor Baru

Ini adalah jenis editor artikel versi terbaru yang dikeluarkan Blogger. Sudah semakin lengkap dengan penambahan beberapa toolbar baru yang sangat membantu kita dalam memanajemen artikel blogger. Untuk mengaktifkan jenis Editor baru ini, ikuti langkah dibawah ini:

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Pengaturan - Dasar"
Langkah 3
Scroll halaman sampai ditemukan "Setting Global (Berlaku untuk semua blog Anda.)" dan perhatikan "Pilih editor entri"

Langkah 4
Kemudian pilih "Editor yang diperbarui - Periksa fitur terbaru!"
Langkah 5
Klik tombol "SIMPAN SETELAN"

- Menyisipkan kode JumpLink/Readmore (pemenggalan artikel)

Setelah editor baru digunakan maka untuk menyisipkan kode pemenggalan (JumpLink/Readmore) cukuplah mudah, ikuti langkah dibawah ini:

Langkah 1
Buatlah artikel baru
Langkah 2
Tempatkan pointer mouse dimana kita akan memenggal artikel
Langkah 3
Klik toolbar "Insert jump break"

Langkah 4
Klik tombol "TERBITKAN ENTRI"

2. Editor Lama/Klasik
- Mengaktifkan Editor Lama

Ini adalah jenis editor artikel versi lama yang dikeluarkan Blogger. Walaupun termasuk lama tapi sebagian Blogger masih suka menggunakan edisi editor ini. Untuk mengaktifkan jenis Editor lama ini, ikuti langkah dibawah ini:

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Pengaturan - Dasar"
Langkah 3
Scroll halaman sampai ditemukan "Setting Global (Berlaku untuk semua blog Anda.)" dan perhatikan "Pilih editor entri"
Langkah 4
Kemudian pilih "Editor lama - Akan segera berakhir."
Langkah 5
Klik tombol "SIMPAN SETELAN"

- Menyisipkan kode JumpLink/Readmore (pemenggalan artikel)

Setelah editor lama diaktifkan maka untuk menyisipkan kode pemenggalan (JumpLink/Readmore) cukuplah mudah, ikuti langkah dibawah ini:

Langkah 1
Buatlah artikel baru
Langkah 2
Pindahkan mode editor pada mode "Edit HTML"
Langkah 3
Masukan kode dibawah ini dimana artikel akan dipenggal:

<!-- more -->

Langkah 4
Klik tombol "TERBITKAN ENTRI"

Identifikasi JumpLink/Readmore

JumpLink atau Readmore terdiri dari dua elemen, yaitu:

1. Elemen Penamaan
Elemen penamaan berupa kata/nama yang digunakan untuk mewakili pemenggalan artikel, biasanya menggunakan kata "Readmore", "Selengkapnya" dan lain sebagainya.
Untuk mengatur kata elemen penamaan ikuti langkah dibawah ini:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Pada Gadget Blog Posts klik link Edit pada pojok kanan bawah

Langkah 4
Kotak dialog "Mengkonfigurasi Posting Blog" akan terbuka dan perhatikan "Teks tautan laman entri"

Langkah 5
Ubahlah kalimat "Baca selengkapnya >>" sesuai dengan keinginan anda, dan kalimat inilah yang akan tampil sebagai elemen penamaan Readmore/Jumplink pada artikel blog.
Langkah 6
Klik tombol "SIMPAN"

2. Elemen Link/URL

Elemen link/URL adalah elemen yang berisi tautan terhadap link artikel yang terpenggal. Ketika seorang pengunjung meng-klik Readmore/JumpLink maka pembaca akan diarahkan pada tautan halaman artikel yang dimaksud. Kode elemen Link/URL atau tautan terdapat pada kode XHTML template. Untuk memahaminya perhatikan penjelasan dibawah ini:

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML" dan centang "Expand Template Widget"
Langkah 3
Scroll dan carilah kode dibawah ini:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Maksud dari kode tersebut adalah sebagai berikut:

<b:if cond='data:post.hasJumpLink'>

Kode diatas jika dibaca; jika artikel memiliki kode pemenggalan JumpLink (perhatikan artikel diatas "Menyisipkan kode JumpLink") maka elemen dibawah ini akan ditampilkan;

<div class='jump-link'>

Kode diatas digunakan pengaturan tampilan dari JumpLink/Readmore dan kode tersebut dipengaruhi kode CSS .jump-link

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

Kode diatas terdiri dari 2 elemen, yaitu elemen tautan menuju alamat artikel yang dipenggal dan elemen penamaan (yang diblok) sesuai dengan settingan kita pada Elemen Penamaan

</div>

Kode diatas merupkana kode penutup <div class='jump-link'>

</b:if>

Kode diatas merupakan kode penutup kondisional

Kode CSS untuk mempercantik JumpLink/Readmore

Dibawah ini adalah contoh sederhana kode CSS yang digunakan untuk mempercantik tampilan JumpLink/Readmore

.jump-link a{
background:url(http://lh5.ggpht.com/_xcD4JK_dIjU/TG_ZZUFAb0I/AAAAAAAAEa4/dAk95Zhnpj4/s800/button_continue.png) no-repeat scroll 0 0 transparent;
border:0 none;
display:block;
height:32px;
margin:4px 0;
opacity:0.8;
text-indent:-9000px;
width:162px;
}
.jump-link a:active {
background-position:0 -32px;
}
.jump-link a:hover {
opacity:1;
}

Demikianlah penjelasan lebih lengkap mengenai JumpLink atau Readmore dengan harapan lebih mengena dan mudah dimengerti daripada artikel sebelumnya.

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

Artikel Terkait Versi 5.0 - jQuery Google Data API Related Posts

Bismillah... Lama sekali Blogger Tune-Up tidak menulis artikel... Ma'af sekali teman-teman blogger, masalah klasik sedang melanda. Koneksi yang tidak stabil (endut-endutan) sehingga untuk publish artikel dan membalas komentar sangat sulit, dan ini juga sedang mengakali masalah tersebut. Sekali lagi ma'af karena jarang update dan membalas komentar, Insya Allah setelah koneksi stabil akan dibahas semua pertanyaan dan komentar-komentar teman-teman.

Setelah membahas 4 versi artikel terkait, sekarang kita akan mencoba artikel terkait yang sangat mudah sekali di integrasikan pada blog kita. Tetapi kode javascript dan jQuery-nya bukan milik Blogger Tune-Up, ini hanya ulasan dari artikel blogger lain. Walau demikian setelah di coba sesuai dengan informasinya, artikel jenis ini sangat mudah diterapkan pada blog kita, selain itu load yang sangat ringan karena menggunakan Google Data API serta ditambahkan sedikit efek jQuery walau tidak begitu terasa efeknya. Sebenarnya Blogger Tune-Up ingin membuat artikel terkait versi lain yang melibatkan gambar mini (thumbnail) yang diambil dari gambar yang ada diartikel plus sedikit ulasan artikelnya (summary post). Mungkin teman blogger ada yang punya referensinya. Nanti kalau scriptnya sudah jadi ditambahkan sentuhan efek jQuery pasti lebih mantap hasilnya. (Sayang baru angan-angan...)

1. Mengintegrasikan Artikel Terkait pada Sidebar

Untuk mengintegrasikan artikel terkait pada sidebar cukup mudah, ikuti langkah dibawah ini:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian Rancangan - Elemen Laman
Langkah 3
Tambahkan sebuah Gadget dengan type HTML/JavaScript
Langkah 4
Masukan kode dibawah ini pada bagian konten:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'loadingText':'memanggil...'
,'relatedTitle':'Artikel Terkait'
});
</script>

Langkah 5
Klik tombol Simpan dan Preview blog anda...

2. Mengintegrasikan Artikel Terkait dibawah Artikel

Untuk mengintegrasikan artikel terkait dibawah artikel, ikuti langkah dibawah ini:
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian Rancangan - Elemen Laman
Langkah 3
Tambahkan sebuah Gadget dengan type HTML/JavaScript
Langkah 4
Masukan kode dibawah ini pada bagian konten:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'memanggil...'
,'relatedTitle':'Artikel Terkait'
});
</script>

Langkah 5
Klik tombol Simpan dan Preview blog anda...

Mudah bukan? Kalau diperhatikan antara pemasangan pada sidebar dengan pemasangan dibawah artikel caranya sama saja, hanya ada penambahan kode dibawah ini:

'containerSelector':'div.post-body'

jadi kita tidak perlu masuk kebagian template blogger yang memusingkan, karena kode secara otomatis akan menempatkannya pada bagian bawah artikel...

3. Penambahan kode CSS

Sedangkan jika kita ingin mempercantik tampilan Artikel Terkait, silahkan berekspresi dengan bermain-main kode CSS dan Blogger Tune-Up memberikan contoh kode CSS seperti dibawah ini:

<style type="text/css">
#related-posts{
border:1px solid #BBB;
clear:both;
color:#CCCCCC;
margin-bottom:10px;
margin-top:5px;
padding:5px;
}
#related-posts h2{
border-bottom:1px dotted #223344;
color:#223344;
font:bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom:0.5em;
margin-top:0;
}
#related-posts ul {
list-style:none outside none;
margin:0;
padding:0;
}
#related-posts ul li{
display:list-item;
background:url(http://www2.blogblog.com/rounders/icon_arrow_sm.gif) no-repeat scroll 2px 0.4em transparent;
border-bottom:1px dotted #BBBBBB;
line-height:1.4em;
margin:0 0 3px;
padding:0 0 3px 16px;
}
#related-posts ul li:last-child{
border-bottom:none;
}
#related-posts ul li a{
text-decoration:none;
}
#related-posts-loadingtext{
color:green;
}
</style>

Untuk intergrasi kode CSS satukan saja pada kode JavaScript diatas (pemasangan pada sidebar atau dibawah artikel), sehingga kode menjadi seperti dibawah ini:

<style type="text/css">
#related-posts{
border:1px solid #BBB;
clear:both;
color:#CCC;
margin-bottom:10px;
margin-top:5px;
padding:5px;
}
#related-posts h2{
border-bottom:1px dotted #234;
color:#234;
font:bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom:0.5em;
margin-top:0;
}
#related-posts ul {
list-style:none outside none;
margin:0;
padding:0;
}
#related-posts ul li{
display:list-item;
background:url(http://www2.blogblog.com/rounders/icon_arrow_sm.gif) no-repeat scroll 2px 0.4em transparent;
border-bottom:1px dotted #BBB;
line-height:1.4em;
margin:0 0 3px;
padding:0 0 3px 16px;
}
#related-posts ul li:last-child{
border-bottom:none;
}
#related-posts ul li a{
text-decoration:none;
}
#related-posts-loadingtext{
color:green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hensblog.googlecode.com/files/new_relpost_pack.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
'containerSelector':'div.post-body'
,'loadingText':'memanggil...'
,'relatedTitle':'Artikel Terkait'
});
</script>

Selamat mencoba dan semoga berhasil... Happy Blogging :)

Special thanks to Moretechtips.net

Read More