Blogger adalah blog engine yang salah satu kelebihannya adalah fleksibilitas dalam mengutak-atik kode HTML blog kita untuk bereksperimen dan mempercantik blog dengan mudah.
Sebenarnya, tidak perlu menjadi ahli koding jika ingin mengutak-atik template blog. Yang diperlukan adalah pengetahuan dasar tentang html dan css. Saya rasa pengetahuan tentang keduanya saja sudah cukup untuk memulai eksperimen dengan template blogger.
Di sini saya akan coba tunjukkan beberapa hack sederhana pada blog untuk menambah fungsionalitas blog dan sekaligus memberi tampilan yang lebih baik.
1. Social Bookmark Button
Social bookmark memudahkan pengguna internet untuk menyebarluaskan informasi lewat web social bookmark, seperti like Facebook atau tweet Twitter. Keuntungannya adalah semakin tersebarlah info dari blog kita dan tentu saja menarik banyak minat pembaca.
Ada tiga widget yang bisa dicoba, yaitu AddThis, Floating Social Media Button, dan share button standar dari Blogger.
AddThis button bisa didapatkan secara gratis di addthis.com. Hanya dengan beberapa klik, kamu bisa mendapat kode untuk memasang share social bookmark di blog kamu. Tampilan yang akan didapat akan menjadi seperti gambar di bawah ini.
Jika ingin kodenya, tinggal klik Get AddThis dan secara otomatis akan dibawa ke halaman selanjutnya dan tinggal copy-paste kodenya. Silakan menuju web AddThis di sini untuk mendapatkan widget keren ini.
Yang kedua adalah Floating Social Media Button yang dibuat oleh pemilik BloggerSentral.com. Tampilannya berupa kotak memanjang vertikal yang berisi share Facebook, Tweeter, StumbleUpon, Digg, dan Google PlusOne.
Instalasinya lebih mudah karena tinggal memasang Add A Gadget pada Page Element di editor desain Blogger. Langsung saja menuju halaman di BloggerSentral di sini.
Yang terakhir dan nggak kalah seru adalah yang dari Blogger sendiri. Share button ini bisa ditemukan di halaman Page Element dan klik Edit pada bagian Postingan. Akan ada pilihan tentang share button. Tampilannya seperti ini:
2. Related Post dengan Thumbnail
Related post adalah posting/artikel di blog yang memiliki label yang paling mirip dengan artikel yang sedang dibaca sekarang. Tujuannya untuk memberikan rekomendasi artikel lain untuk dibaca.
Related post memiliki kelebihan bagi blogger karena blog bisa menyarankan artikel yang memiliki tema yang mirip, karena mungkin hal ini akan mendorong pembaca untuk membaca artikel yang direkomendasikan itu.
Related post dengan thumbnail berarti daftar related post itu dilengkapi dengan thumbnail gambar yang ada di artikel yang disarankan.
Jika blog kamu dilengkapi gambar di tiap artikel/posting, related post dengan thumbnail ini membantu pembaca untuk memutuskan apakah akan membaca artikel atau tidak berdasarkan gambar yang dilihat. Siapa tahu pembaca tertarik, hehehe.
Tutorial lengkap bisa dilihat di sini
http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html
Tutorial di atas juga menjelaskan cara merubah jumlah posting yang akan ditampilkan, judul widgetnya, bisa merubah thumbnail default, dan bisa merubah splitter color/ warna pembatasnya. Langsung cek aja, Gan!
3. Hack Label dan Archive Link
Jika kita menyediakan label untuk memudahkan pembaca mencari artikel dengan label tertentu, jika label ini di-klik, maka yang muncul adalah semua artikel dengan label yang dipilih.
Hal ini kadang merepotkan karena hasilnya tidak enak dibaca. Padahal pembaca cuma ingin mendapatkan Judul artikel dan beberapa kata saja supaya tidak terlalu memenuhi halaman.
 | |
| Hasil Hack Label dan Archive |
Tutorial membuat halaman label dan archive dengan judul saja ada di
http://www.bloggersentral.com/2009/06/showing-title-only-in-archive-label-and.html
Kalau tutorial halaman label dengan archive dengan sedikit snippet post, ada di http://www.bloggenes.com/2013/07/how-to-show-only-post-titles-thumbnails.html
4. Memberi highlight pada posting
Highlight yang dimaksud adalah penanda supaya mudah dibaca oleh pembaca blog, karena mungkin ada beberapa kalimat yang ingin kita tekankan.
Yang perlu dilakukan adalah memodifikasi kode HTML pada saat kita melakukan posting. Saat menulis di posting, klik Edit HTML dan kemudian copy-paste kode berikut:
<div style="background-color: gold; border: 1px dashed grey; color: #222222; padding: 5px 10px;"> BACKUP template Anda sebelum modifikasi kode Blogger karena saya tidak akan menanggung kegagalan dalam tutorial ini. </div>
Hasilnya adalah seperti ini.
BACKUP template Anda sebelum modifikasi kode Blogger karena saya tidak akan menanggung kegagalan dalam tutorial ini.
Tentu saja warna-warna atau style bisa dirubah sesuai selera, silakan langsung edit saja bagian background-color: gold dengan warna semau kamu. Misalnya background-color: yellow yang akan merubah background menjadi warna kuning.
5. Memasang SyntaxHighlighter pada blogger
SyntaxHighlighter adalah open source code by Alex Gorbatchev untuk memberi tampilan menarik pada potongan kode-kode pada blog. Kode-kode ini bisa kode apa saja, misalnya c++, c, html, css, dll...Contoh lansgungnya adalah pada poin 4 di atas, ada potongan kode html dan bisa dicopy oleh pembaca :D
Untuk melihat dokumentasinya dll ada di sini
http://alexgorbatchev.com/SyntaxHighlighter/
Tapi ada tutorial yang lebih mudah di
http://www.cyberack.com/2007/07/adding-syntax-highlighter-to-blogger.html
yang menjelaskan cara memasang SyntaxHighlighter dan beberapa tambahan keterangan. Tinggal copy-paste dan beres.
Kesimpulan
Untuk sekarang sepertinya ini dulu, jika kapan-kapan ada tambahan, saya akan update. Selamat mencoba^^ dan kreatiflah!!
10 comments:
Thanks. Very useful post.
Untuk highlight kode/ Syntax.
Codenya bisa otomatis terformat ga. Misalnya klo kode aslinya ada spasinya. Apakah ketika di posting, masih ada spasinya? Maaf saya ga pake blogger soalnya.
@badcoding
Kalo di blogger, syntaxhighlighter itu pake tag <pre> dan </pre> HTML untuk menandai kodingan yang mau ditampilkan di posting.
Jadi apapun kodingan yang ditulis (ada spasi, atau tidak ada) nanti akan ditampilkan apa adanya diantara tag <pre> itu... :D
Begitulah kalau di blogger hehehe
Pernah nyoba Dreamweaver kan?
Nah. itu contoh kodingan yang terformat dengan tidak baik [klo tidak boleh menyebut buruk].
Beda klo pake Visual Studio. Biasanya klo kita bikin kelas baru. Pasti formatnya juga rapi.
Bagaimana dengan blogger?
*)maksud spasi: Alignment
Oh makudnya seperti ini?
Contoh buruk:
if(kondisi=true){maka_lakukan_ini; lakukan_itu;}
else ya_sudah_selesai;
Contoh baik:
if(kondisi=true)
{
maka_lakukan_ini;
lakukan_itu;
}
else
ya_sudah_selesai;
Sepertinya harus dirapikan sendiri dan tidak bisa otomatis. Kalau mau menulis menjorok ya dikasi spasi sendiri, dll.
Soalnya menurut referensi, syntaxhgltr ini fungsinya cuma mengenali bahasa2 dan memberikan tampilan warna pada syntax2 tertentu, memberi nomor baris, dan membuat "sense" ngodingnya lebih terasa. Selain lebih mudah untuk di copy-paste.
Fitur untuk memperbaiki format tulisan sepertinya belum, barangkali mau mencoba membuat :D CMIIW.
iwow @.@
ada nga demo untuk membedakan antara yang menggunakan atau nga ya?
@Yusmi
Ngga ada mas^^ Tapi sudah saya kasi gambar contohnya hehehe. Mungkin ini masukan juga mas, terimakasih sudah berkunjung :D
trims atas infonya
terima kasih tutorialnya mbak.. saya coba praktekkan...
Posting Komentar