SEKEDAR SHARE

S etelah kita membuat reply pada kotak komentar , langkah selanjutnya adalah membedakan komentar pemilik blog dengan komentar pengunjung. Untuk membedakan komentar pemilik blog dengan komentar pengunjung bisa dengan latar belakang warna, latar belakang gambar, garis pembatas komentar, membedakan jenis huruf atau kotak komentar yang dibuat agak menjorok ke dalam. Istilah yang sering dipakai oleh orang Inggris sana adalah Highlight author comments , artinya menyorot komentar pemilik blog, kalau orang Indonesia bilang membedakan tampilan komentar pemilik blog , kira-kira begitulah. Manfaatnya tentu saja ada, membedakan komentar pemilik blog dan pengunjung pasti membantu pembaca mengetahui bahwa anda telah memberi tanggapan atas komentar yang masuk dari pengunjung blog anda. Secara default pada template blogger kita tidak dapat melihat perbedaan antara komentar pengunjung serta tanggapan dari yang punya blog. Semuanya disama ratakan oleh blogger. Agar lebih jelas apa itu Highlig...

S ebuah blog sudah pasti sangat membutuhkan kotak pencarian atau search box . Kotak pencarian adalah sebuah kotak dimana anda dapat mengetikkan teks yang akan dicari di dalamnya. Informasi yang anda ketik akan dikirimkan ke server untuk memproses teks yang anda cari untuk menemukan hasilnya. Dengan kotak pencarian ini juga akan memudahkan pengunjung untuk menemukan artikel pada blog seperti artikel yang sudah lama diposting. Seperti layaknya kotak cari pada google, yahoo dan search engine lainnya, maka anda pun bisa membuatnya sendiri. Blogger sendiri sebenarnya sudah menyediakan fitur kotak cari atau kotak penelusuran ini. . Pada tutorial blog kali ini saya akan membahas bagaimana membuat kotak penelusuran yang lebih menarik dan bisa anda atur sendiri sesuai template blog anda. Pada umumnya tombol default kotak cari ini berwarna abu-abu seperti yang sering anda temui. Anda bisa merubahnya dengan warna lain serta modifikasi kotak pencarian lainnya. Memodifikasi kotak ...

L ink untuk sebuah blog memiliki peran yang sangat penting, hal itu sudah saya jelaskan pada artikel saya sebelumnya pada cara membuat internal link di blog . Jika temen-temen belum baca silahkan dibuka dulu arsipnya. Pada setiap template blog memiliki bentuk tampilan link (tautan) yang berbeda-beda. Ada yang menggunakan bentuk garis bawah (underline) , warna, ada pula yang menggunakan bentuk perubahan huruf. Nah, pada tutorial kali ini saya akan memberikan tips bagaimana cara membuat link ketika disorot mouse warnanya berubah-ubah, jadi tidak hanya satu warna tapi banyak warna, bahasa kerennya rainbow effect atau efek pelangi. Untuk contoh soalnya anda bisa lihat disini . Ada dua script yang saya dapat untuk membuat efek pelangi pada blog, sangat mudah juga ternyata. Oke, langsung saja pada langkah-langkah pembuatannya : Login ke blogger dengan akun anda.  Setelah itu pilih tata letak/layout Klik menu Edit HTML dan jangan lupa untuk mencentang Expand Template Widget Kemudia...

P ada postingan sebelumnya saya sudah jelaskan bagaimana membuat menu horisontal drop down , menu horisontal dan kotak pencari , atau acrobatic horizontal menu . Nah, kali ini saya akan memberikan satu lagi alternatif dalam membuat menu horisontal, yaitu dengan menggunakan MyCSSMenu, Proses pembuatannya kita memanfaatkan situs penyedia menu ini yaitu mycssmenu.com . Selain menu horisontal di MyCSSMenu ini juga menyediakan untuk menu vertikal. MyCSSMenu juga mempunyai ragam pilihan yang cantik, dari pilihan warna, model menu dari kotak persegi sampai model melengkung, serta animasi menarik yang menyertai menu ketika di klik. Hanya dalam waktu kurang lebih 10 menit menu pun sudah siap di tempatkan  di blog. Jika anda tidak menguasai bahasa pemrograman seperti kode HTML atau CSS yang ribet, jangan kecil hati karena menu yang tersedia di sini sangat mudah, hanya dengan klik �Customize Menu� anda bisa mengaturnya sesuka hati. Jika sudah jadi, maka anda tinggal meletakkan kode sc...

A rtikel kali ini mungkin sedikit menarik bagi temen-temen blogger yang punya hobi chatting. Ya, disini saya akan berikan tutorial singkat bagaimana cara memasang Yahoo Messenger di bloger. Fasilitas ini seperti yang ada di friendster, jadi kita bisa langsung ngobrol dengan pengunjung. Seperti itulah kira-kira fungsi dari menu ini, soalnya saya sendiri juga belum pernah pake Friendster, maklum orang dusun yang kadang-kadang kalau lagi nulis artikel listriknya mati. Untuk memasang Yahoo Messenger ini kita bisa memanfaatkan fitur Pingbox yang disediakan Yahoo!. Lewat Pingbox, kita akan mendapatkan kode yang harus kita pasang di blog, profil Friendster, atau website kita . Berikut ini cara membuat Pingbox : Kunjungi http://messenger.yahoo.com/pingbox/studio/ untuk menuju ke halaman seperti pada gambar di bawah ini: Pilih Background Theme sesuai dengan preferensi kita; Di kolom Display name , masukkan nama yang akan kita tampilkan. Contrenglah opsi Show Yahoo! Messenger display ima...

B agi temen-temen yang ingin menambah aksesoris untuk blognya, saya masih ada lagi satu tips agar blog itu lebih kelihatan hidup dan menarik, Ya, kali ini saya akan memberikan penjelasan mengenai cara mengganti tampilan cursor blogger. Secara default, tampilan cursor pada blog adalah berbentuk panah namun bagi anda yang merasa bosan dengan tampilan tersebut atau ingin memberi decak kagum bagi pengunjung. Anda bisa menggantinya dengan icon gambar sehingga jika ada pengunjung yang datang ke blog anda, tampilan kursornya akan berubah sesuai dengan icon yang anda gunakan. Agar lebih jelas anda bisa lihat disini . Untuk mengubah tampilan kursor menjadi icon gambar, caranya sangat mudah. Berikut langkah-langkahnya: 1.  Login ke Blogger dengan akun anda. 2.  Masuk ke menu Design->Edit HTML 3.  Cari kode </head> 4.  Letakkan kode css berikut diatasnya <style type="text/css"> HTML,BODY{cursor: url(" http://downloads.totallyfreecursors.com/thumbnails/c...

S ebenarnya gambar untuk sebuah blog mempunyai banyak maksud dan fungsinya, fungsi yang paling menonjol adalah untuk memperjelas suatu pembahasan. Dan fungsi lainya hanya sebagai aksesoris atau mempercantik tampilan suatu blog saja, supaya pengunjung lebih betah dan lama-lama mengintip blog yang kita kelola. Kali ini saya akan memberikan tutorial yang sangat sederhana, tutorial yang sifatnya hanya untuk menambah aksesoris blog anda. Tapi bisa juga berfungsi untuk menghemat ruangan blog, karena lokasi penempatannya berada di pojok kanan atau kiri. Nah, bagi temen-temen yang tertarik dan ingin menambah aksesoris untuk blog, di bawah ini akan saya jelaskan langkah-langkah pemasangannya : Login ke blogger dengan akun anda Rancangan >> Edit HTML Cari kode ini ]]></b:skin> kalo dah ketemu taruh kode berikut ini di atasnya. #gambar_mojok { position:fixed;_position:absolute; bottom :0px; left :0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ docu...

U ntuk membuat blog lebih kelihatan menarik, terkadang kita perlu untuk memasang banner agar tidak terlalu banyak space kosong. Apalagi banner yang kita pasang berupa animasi sehingga lebih atraktif. Dalam memasang banner kita harus menentukan posisi yang menarik sehingga pengunjung dengan mudah melihatnya dan jika klik banner tersebut maka akan muncul informasi yang relevan atau masuk ke website Anda. Dalam memasang banner hal yang perlu diperhatikan adalah penataan yang strategis agar mudah dilihat dan disesuaikan dengan komposisi template web. Jadi tidak asal tempel karena mata pengunjung tidak suka melihat seuatu yang kurang menarik. Pemasangan banner dapat disusun secara vertical dari atas ke bawah juga secara horizontal arah menyamping dari kiri ke kanan. Tergantung selera masing-masing pemilik blog. Tapi saya pribadi lebih suka pada susunan yang horizontal menyamping karena akan langsung terlihat semua tanpa harus memutar scroll mouse, apalagi bila ada banyak banne...

M enu navigasi horisontal untuk sebuah blog sangatlah penting, karena akan memudahkan pengunjung untuk menulusuri keseluruhan isi dari blog itu. Setelah sebelumnya saya menulis tentang cara membuat menu navigasi horisontal dan kotak pencari , kali ini saya akan memberikan lagi sebuah tutorial untuk menu navigasi. Tapi kali ini berbeda dengan sebelumnya, menu navigasi ini bisa bejungkir balik seperti sirkus, makanya dinamakan acrobatic horizontal menu. Cara kerja menu ini saat cursor mouse menyorot menu ini, maka salah satu menu ini akan terselip atau berjungkir balik. Untuk lebih jelasnya temen-temen bisa lihat demonya disini . Nah, bagi temen-temen yang suka dan ingin memasangnya, di bawah ini saya akan berikan penjelasannya : 1.  Login di blogger dengan akun anda. 2.  Pilih Rancangan ---> EDIT HTML 3.  Simpan CSS berikut diatas kode ]]></b:skin> ul#topnav { margin: 10px 0 20px; padding: 0; list-style: none; font-size: 1.1em; clear: both; float: left; ...

T emen-temen tahu nggak apa itu Emoticon ? Emoticon adalah ikon kecil yang berbentuk wajah dan memiliki arti. Kali ini saya akan memberikan tutorial cara memasang emoticon pada kotak komentar. Dengan memasang emoticon di kotak komentar maka para komentator akan lebih mudah untuk mengekspresikan perasaannya. Selain itu, juga akan membuat blog kita lebih ekspresif bukan? Nah untuk memasang emoticon dikotak komentar. Anda harus men-setting kotak komentar agar muncul dibawah postingan terlebih dahulu. Bagi anda yang kotak komentarnya berada pada halaman pop-up. Silahkan diatur dulu agar kotak komentarnya muncul di bawah postingan. Jika temen-temen tertarik ikuti saja langkah-langkah pembuatannya di bawah ini : Pertama harus login dengan akun blogger anda Klik rancangan Edit HTML centang expand widget templates pada kotak kecil Cari kode </body> Lalu letakkan script dibawah ini diatas kode </body> <script src='http://kendhin.890m.com/emoticon/smile1.js' ty...

T ahukah temen-temen apa itu tombol share post? Tombol share post atau yang lebih dikenal sebagai tombol-tombol social bookmark sedikit banyak memang membantu meningkatkan pengunjung dari social bookmark yang bersangkutan. Contoh saja twitter, dengan mengintegrasikan feedburner dan twitter ketika ada artikel baru dari sebuah blog, maka secara otomatis akan langsung terupdate di twitter. Dengan begitu para follower yang penasaran dengan artikel tersebut akan langsung melihat artikelnya. Nah, untuk kali ini saya akan memberikan tips untuk memasang tombol share post melayang, untuk anda yang penasaran bisa dilihat contohnya disini .   Membuat tombol share post melayang ini sangat mudah karena kita tidak perlu pusing mengutak-atik HTML template kita. Kita tinggal memasukkan ke dalam widget sidebar. Untuk lebih jelasnya berikut ini adalah langkah-langkah pemasangannya : 1.  Login dengan akun blogger anda. 2.  Pilih Rancangan >> Elemen Halaman 3.  Klik...

S yntax Highlighter adalah suatu fitur biasanya dari text editor khususnya editor source code bahasa pemrograman tertentu untuk menampilkan text tersebut dalam berbagai warna agar dapat memudahkan programmer dalam membaca dan menganalisa source code tersebut. Bagi Anda yang sering posting source code pada Web/Blog tentu fitur Syntax Highlighter akan sangat membantu agar source code yang kita posting mudah dibedakan sebagai source code dan tentunya lebih menarik bagi pengunjung. Nah, sekarang masalahnya bagaimana cara kita menggunakan Syntax Highlighter ini pada blog khususnya di Blogger.com? Jika di blogspot kita biasa menampilkan kode supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote , Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namuan Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. kode untuk Syntax Highlighter ini sendiri dibuat oleh Alex Gorba...

S atu lagi cara untuk modifikasi blog yang akan saya bahas disini adalah dengan menggunakan Rounded Corners. Rounded corners atau sudut melengkung adalah lengkungan atau belokan pada sudut dari suatu bentuk bangunan persegi. Sudut melengkung ini biasa digunakan dalam pembuatan design template agar template menjadi tampak lebih menarik dan tidak terlihat terlalu kaku dan monoton. Pada umumnya code css yang digunakan untuk membuat rounded corners adalah : -moz-border-radius: 3px ; >> berasal dari Mozilla dan digunakan pada Firefox   -khtml-border-radius: 3px ; >> berasal dari Linux dan digunakan pada Konqueror   -webkit-border-radius: 3px ; >> berasal dari Safari dan digunakan pada untuk mac dan windows   border-radius: 3px ; >> hanya merupakan spesifikasi dari standart CSS3 .  Penerapan Rounded Corners di Postingan 1.  Rounded corners pada seluruh sudut <div style="background-color: #F7F8E0; border: 2px solid rgb(66, 66, ...

M embuat tombol Back to top kira-kira seperti itu judul tutorial blog kali ini. Tapi ngomong-ngomong temen-temen sudah tahu belum seperti apa sih tombol back to top itu? Kalau diuraikan dengan kalimat tombol back to top itu adalah tombol yang digunakan untuk kembali ke halaman atas. Biasanya tombol ini berada di bagian bawah halaman dan kebanyakan dibagian pojok halaman bawah. Kalau temen-temen mau lihat contohnya disini .  Di samping itu tombol Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tombol itu. Dalam tutorial pembuatan back to top kali ini saya menggunakan jquery. Perbedaan dengan yang biasa adalah ketika kita berada di halaman atas tombol back to top ini tidak terlihat dan ketika kita scroll mouse ke halaman bawah tombol ini baru ada.   Nah, jika anda tertarik untuk membuat tombol itu, di bawah ini akan say...

P ada postingan sebelumnya saya sudah menjelaskan bagaimana kita memasang baloon tooltip pada kata atau kalimat tertentu. Bagaimana untuk memasangnya pada setiap link? Nah, itu pembahasan kali ini yaitu cara memasang tooltip pada link di blog. Jadi setiap link yang ada di dalam postingan jika cursor kita arahkan ke link tersebut akan muncul tooltip di bawahnya. Untuk pengertian tooltip sendiri sudah saya jelaskan pada postingan sebelumnya, jadi saya tidak perlu mengulangi lagi, bagi temen-temen yang belum membaca bisa dibuka dulu itu artikelnya. Untuk membuat tooltip ini anda bisa ikuti langkah-langkah berikut : 1.  Login ke Blogger anda 2.  Pilih Rancangan 3.  Pilih EDIT HTML (centang Expand template widget) 4.  Sekarang simpan CSS berikut diatas kode ]]></b:skin> /* start Tooltip blogger maskolis*/ body div#toolTip { position:absolute; z-index:1000; min-width:150px; background:#000000; border:2px double #E80101; text-align:left; padding:5px; min-heigh...

T utorial blog kali ini saya akan membahas tentang memasang Tooltip di blog. Bagi temen-temen yang belum tahu saya akan jelaskan Tooltip adalah tampilan informasi dalam bentuk teks (bisa juga gambar) yang muncul ketika kita melakukan mouse over ke dalam suatu item di website. Biasanya Tooltip berbentuk kotak kecil yang melayang di atas item tersebut. Jika temen-temen penasaran dapat dilihat disini . Klik pada tulisan Norah Jones maka akan muncul tooltip. Jika temen-temen tertarik untuk membuatnya, berikut ini langkah-langkahnya : 1.  Login ke Blogger Kalian 2.  Masuk ke rancangan / tata letak 3.  Pilih Edit HTML ( Back Up template dulu ) 4.  Cari kode ]]></b:skin> 5.  Lalu sisipkan kode berikut diatas kode tadi /*---------- bubble tooltip -----------*/ a.tt{ position:relative; z-index:24; color:#3CA3FF; font-weight:bold; text-decoration:none; } a.tt span{ display: none; } /*background:; ie hack, something must be changed in a for ie to execute it...

T erkadang karena terlalu asyik nge-blog kita jadi lupa jika space atau ruang untuk tempat widget sudah penuh. Nah, untuk temen-temen blogger yang mengalami masalah seperti itu, kali ini saya akan memberikan tips kepada anda semua tentang cara menampilkan widget hanya pada halaman tertentu. Ini seperti template buatan Kang Rohman yang ada sebagian widgetnya hanya muncul pada homepage, sedangkan saat di klik postinganya widgetnya hilang. Agar lebih jelas anda dapat melihat di blog ini dimana widget artikel terbaru dengan thumbnail tidak terlihat di halaman posting tapi jika anda klik homepage saya widget tersebut akan nongol. Jika anda tertarik, di bawah ini adalah cara-cara membuatnya : Login dengan account blogger anda. Kemudian menuju  layout >> Edit HTML Jangan lupa centang expand widget template nya, karena kalau tidak kode di bawah nanti tidak akan keluar. Sebenarnya kita hanya perlu menambah kan 2 tag kode saja, lihat kode dibawah ini: <b:widget id='HTML1' ...