Posts

Showing posts from 2011

Membuat Breaking News Menarik Dibawah Navigasi Menu

Image
P ada artikel kali ini saya akan menjelaskan bagaimana membuat breaking news atau berita berjalan yang biasanya terdapat di bawah navigasi menu pada sebuah blog atau biasa disebut newsticker. Banyak sudah artikel yang membahas mengenai newsticker ini di internet, misalnya dengan menambah efek marquee sehingga teks tersebut dapat berjalan, tapi kali ini saya akan menjelaskan cara memasang breking news dengan sentuhan jQuery sehingga hasilnya akan lebih menarik dan yang pasti dapat mempercatik blog anda. Pertama kali saya melihat tampilan breaking news ini pada template Sporty Magazine 2 buatan Borneo Template, waktu itu template masih berbayar sekarang sepertinya sudah gratis di download. Disini saya akan memodifikasi sedikit tampilannya sehingga tampilannya seperti tampak pada gambar diatas, demonya anda bisa lihat disini . (http://martin-big.blogspot.com) Ternyata cara memasangnya sangat gampang sekali, dan jika Anda tertarik berikut ini langkah-langkah untuk membuatnya : Login ke ...

Cara Buat Tombol Back To Top di Blogspot

Image
Cara membuat/memasang tombol back to top/go top di blogger, tombol back to top adalah sebuah tombol yang berfungsi untuk membuat/mempercepat scrolling dari bawah keatas di sebuah web page ataupun blog page sehingga akan mempermudah reader ataupun visitor untuk kembali�pada bagian atas dari blog/website dengan cepat ketika berada dibagian bawah halaman dengan hanya sekali klik pada tombol back to top tersebut. Sebagai contoh sobat bisa melihat pada bagian kanan bawah dari blog saya ini Fitur back to top yang kita buat/bahas sekarang ini adalah fitur tombol back to top menggunakan jQuery. Efek jQuery ini sedikit lebih lembut dan smooth daripada efek javascript lainnya seperti pada animasi bintang jatuh dari kursor yang menggunakan javascript biasa. Kelebihan nya juga adalah efek back to top ini sangat ringan ketika di loading dan sangat cocok digunakan didalam blog tentunya bagi yang suka me-modifikasi blog-nya dengan sesuatu yang unik, indah dan bermanfaat. Untuk membuat nya silahkan...

Cara Buat Bintang Jatuh dari Kursor

Image
Cara membuat efek bintang jatuh dari cursor di blog, animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse ketika digerakkan, hal ini sangat menarik untuk dipasang di sebuah blog atau website karena animasi nya yang indah dan unik sehingga akan menarik visitor blog untuk betah tinggal lama-lama untuk membaca blog sobat Buat sobat yang senang me-modifikasi blog nya dengan sesuatu yang beda dan unik mungkin perlu mencoba animasi bintang jatuh yang satu ini. Cara membuat bintang jatuh ini juga tidak susah-susah amat dan sobat tidak perlu meng-edit kode yang ada di template, cukup hanya copy paste kode-kode yang akan saya berikan dibawah nanti ke edit html pada bagian add gadget dan juga untuk mengganti warna bintang nya pun sobat bisa rubah sesuai dengan warna background template blog sobat dengan bantuan Colorpic software , tertarik? silahkan ikuti tutorial blogger dibawah ini Pemasangan Efek Bintang Jatuh Pada Cursor di Bl...

Colorpic | Software Untuk Mengetahui Kode Warna HTML

Image
Colorpic software untuk mengetahui kode warna HTML, Colorpic adalah sebuah desktop color picker software atau alat (tools) untuk mengetahui kode warna html yang sangat berguna bagi web designer ataupun blogger untuk meng-edit website atau blog khususnya dalam hal pengetahuan dan edit warna. Bagi saya sendiri colorpic adalah software kode warna yang wajib saya miliki di komputer saya karena sangat membantu di saat saya kesulitan untuk mengetahui kode warna yang saya inginkan untuk meng-edit blog. Cara kerja colorpic ini juga sangat mudah dan saya kira sobat juga pasti akan cepat bisa memahaminya, setelah selesai meng-instal sobat bisa langsung menggunakannya dengan hanya mengarahkan kursor atau mouse ke warna pilihan yang ada di desktop maka kode warna tersebut akan otomatis diketahui, mudah bukan? untuk screenshot nya sobat bisa lihat gambar yang ada dibawah, gambar ini adalah contoh untuk mengetahui kode warna kuning dari Yahoo Messenger emoticons . Gambar diatas adalah contoh penga...

Yahoo Messenger Emoticons (Smileys) di Blogspot

Image
Cara membuat/memasang Yahoo! messenger emoticons di kotak komentar Blogger, YM emoticons adalah kumpulan smileys / ikon yang dimiliki oleh yahoo untuk menggambarkan atau mengekspresikan suasana perasaan kita pada saat kita chat sama teman-teman kita, ikon tersebut bisa dalam bentuk gambar yang bergerak maupun tidak, mungkin dari sobat blogger sudah tidak asing lagi dengan emoticons ini bukan? Yahoo emoticons ini bisa kita lihat pada software Yahoo messenger, bagi yang belum punya software YM bisa di download di situsnya Yahoo! biasanya sih online installer sama seperti aplikasi Windows Live Writer saat di-instal minta koneksi internet tapi yang full installer juga ada kok tinggal search aja di om Google Cara Memasang Yahoo Messenger Emoticons di Kotak Komentar Blogger Secara default kotak komentar (form comment) Blogger platform tidak dilengkapi dengan emoticons, tapi sobat jangan khawatir dengan sedikit tips dan trik kita bisa mengakalinya dengan memasang dan menambahkan sedikit scr...

Windows Live Writer | Menulis Artikel Blog Post Offline

Image
Menulis artikel blog post dengan Windows Live Writer secara offline, Windows Live Writer adalah sebuah aplikasi desktop publishing blog yang dikembangkan oleh Microsoft yang merupakan bagian dari Windows Live, kegunaan aplikasi ini salah satunya adalah sobat bisa menulis artikel langsung dari desktop tanpa harus masuk ke dashboard editor blog untuk menulis artikel post Selain itu sobat juga dapat menulis dan memasukkan foto secara offline dengan aplikasi Windows Live Writer (WLW) ini, hal itu sangat menguntungkan bagi sobat yang mempunyai koneksi internet yang lambat apalagi kalau hanya mengandalkan WIFI gratisan  untuk koneksi internet, jadi sobat bisa menulis banyak artikel dan disimpan di draft kemudian sobat bisa publish artikel post nya kapan saja sobat sempat, sangat menghemat waktu dan biaya bukan? sobat juga bisa memasukkan link (hyperlink), maps, tabel (table), video, tags dan masih banyak lagi yang lainnya. Tidak salah kenapa aplikasi ini banyak dipakai oleh para blogger...

Cara Buat Breadcrumb Seo Friendly di Blog

Image
Breadcrumb navigation adalah sebuah menu yang dipakai untuk navigasi halaman sebuah website atau blog, sehingga akan memudahkan visitor atau pembaca untuk me-navigasi halaman blog atau website sobat. Dalam SEO, pemasangan breadcrumb adalah wajib yang sangat berguna untuk mempermudah seacrh engine untuk menjelajah atau crawling halaman blog sobat sehingga blog akan menjadi SEO friendly dan disenangi oleh search engine bot, dan juga blog sobat akan cepat ter-index oleh search engine ( Google khususnya ) Gambar diatas adalah contoh breadcrumb navigation yang saya ambil dari screenshot blog saya ini, kebetulan judul post-nya waktu itu adalah tentang burung twitter terbang , untuk membuat dan memasang breadcrumb saya kira tidak begitu sulit jadi sobat bisa membuat nya dengan tutorial blogger yang saya berikan berikut ini: Cara Membuat Navigasi Breadcrumb Seo Friendly di Blogspot Login di Blogger Pilih Design  Pilih Edit Html Centang pada Expand Widget Templates Cari kode ]]>...

Membuat Artikel Terkait Dengan Ringkasan Artikel

Image
U ntuk mengobati kerinduan saya kepada teman-teman blogger, kali ini saya akan menulis sebuah tutorial baru tentang artikel terkait atau related post. Sebelumnya saya sudah membahas cara membuat artikel terkait itu pada versi 1 dan versi 2 . Dari kedua artikel terkait yang pernah saya tulis dan coba, versi ini merupakan versi yang sangat menguras waktu, di samping tingkat kerumitannya yang cukup tinggi juga kurangnya pengetahuan saya tentang bahasa JSON Feed sehingga proses penulisan script cukup memakan waktu yang sangat lama. Dari sisi tampilan dan kelengkapan, versi ini sangat berbeda jauh dengan yang lainnya dan bahkan boleh dikatakan memiliki fitur yang sama persis dengan yang dikembangkan oleh para pengguna Wordpress. Untuk demonya lihat blog saya disini dan gambarnya anda bisa lihat di bawah ini : Artikel terkait dengan fasilitas gambar mini dan ringkasan artikel ini memiliki beberapa kelengkapan yang sangat menarik yaitu : Menggunakan bahasa JSON Feed turunan JavaScri...

Membuat Efek Memindahkan Gambar Dengan jQuery

Image
G ambar dalam sebuah artikel sangat berarti dalam memperjelas isi atau konten yang sedang kita buat. Tampilan gambar juga bisa dimodifikasi sehingga menjadi lebih cantik, Setelah sebelumnya saya pernah membahas dalam mempercantik tampilan gambar dengan efek zoom , kali ini saya akan berbagi  lagi satu tips untuk memperindah gambar yang kita tampilkan di artikel, yaitu memindahkan gambar dengan jQuery. Maksud dari effect ini ialah kita dapat menggeser atau mendrag gambar sesuai dengan keinginan kita pada gambar posting kita atau gambar di blog kita. Untuk lebih jelasnya klik tombol demo dibawah ini, geser salah satu gambar yang ada disana.: Nah jika temen-temen tertarik untuk membuatnya, perhatikan langkah-langkahnya di bawah ini : Login dulu di Blogger dengan akun anda. Pada dashboard pilih Rancangan >> edit HTML Jangan lupa Centang Expand Template Widget Klik Download template lengkap untuk jaga-jaga. Sekarang pasang Css kode dibawah ini diatas kode ]]></b:skin> ...

Bagaimana Agar Template Anda SEO Friendly?

Image
S elamat siang  temen-temen blogger semua, bagaimana kabar anda? Semoga baik-baik aja, kali ini saya akan berbagi lagi dengan anda semua. Topik yang saya bahas adalah bagaimana  agar template yang kita pakai SEO friendly. Terkadang kita memilih template dari penyedia situs template gratisan di internet hanya sekedar memenuhi selera keindahan, tapi kita lupa apakah template yang kita pakai sudah SEO friendly atau belum. Pada tutorial kali akan dibahas cara memanipulasi template blogger agar SEO friendly, khususnya dengan memberi tag h1 untuk judul postingan. Namun, jika Anda melakukannya secara sembarangan bisa jadi malah justru terjadi multiple tag h1 pada halaman Anda. Seperti kita ketahui semua, banyak template blog yang bagus secara design diluar sana, kebanyakan dari template tersebut mementingkan masalah design. Kita yang akan memakainya perlu sedikit memodifikasi agar optimal. Baiklah, langsung saja saya akan berikan kepada temen-temen semua langkah-langkah dalam ...

Bagaimana Cara Memilih Nama Blog Yang Baik?

Image
N ama memang belum tentu mencerminkan sebuah kepribadian, tapi paling tidak gambaran kasar kita dapat ketika kita membaca atau mendengar sebuah nama. Seperti juga nama untuk sebuah blog, banyak yang bilang apalah arti sebuah nama, kutipan dari Shakespeare di Romeo and Juliet. Terkadang kita membuat blog tanpa perencanaan yang matang, hanya sekedar ikutan temen.  Hal ini akan menjadikan kita bingung dalam memilih nama blog, kebingungan ini bukan hal yang aneh saat kita akan membuat blog. Dulupun waktu pertama kali saya mau membuat blog juga begitu. Baiklah, di hari Minggu yang penuh dengan hujan deras ini saya akan berbagi sedikit pengalaman tentang cara memilih nama blog yang baik. Jika Anda punya keinginan untuk menjadikan blog terkenal, maka mulailah dengan memilih nama blog yang baik. Langsung saja, di bawah ini adalah tips untuk anda bagaimana memilih nama yang baik untuk sebuah blog : Nama blog harus dapat menggambarkan blog secara keseluruhan Anda bisa bayangkan, hanya ...

Menambah Elemen Di Bawah Sidebar

Image
P ostingan kali ini saya akan memberikan penjelasan mengenai cara menambah elemen (add gadget) di bawah sidebar yang sudah ada. Postingan ini sebenarnya karena permintaan dari sahabat saya Propolis Club yang meminta penjelasan cara menambah 2 elemen di bawah sidebar " kalau sidebarnya yang di bagi duanya sebagian aja jdi ngak semuanya jadi dua kolom gimana sob, mohon pencerahan trims ". Untuk contoh gambar bisa anda lihat di bawah ini, ada penambahan dua kolom elemen sidebar di bawah sidebar utama. Artinya, dua kolom sidebar tersebut masih merupakan bagian dari sidebar-wrapper . Berbeda dengan posting terdahulu membagi sidebar menjadi 2 kolom yang menjadikan sidebar utama terbagi dua. Jika tertarik, temukan perbedaannya antara tutorial yang itu dengan tutorial yang sedang anda baca sekarang ini. Seperti biasa, perbedaan kode CSS pada template pasti ada namun tidak banyak. Silahkan menyesuaikan dengan desain template anda. Oke langsung saja kita pada langkah-langkah pe...

Membuat Recent Post Berdasarkan Kategori

Image
S ebuah blog belum lengkap jika belum ada widget recent post di sidebar. Seperti kita ketahui recent post berfungsi untuk menampilkan postingan terbaru di blog. Dengan memasang Recent posts di blog maka pengunjung dapat dengan cepat mengetahui topik apa yang sedang dibahas di blog kita. Pada postingan sebelumnya saya sudah pernah membahas tentang cara membuat recent post thumbnail + spy . Kali ini saya akan memberikan tutorial membuat recent post berdasar kategori. Sebenarnya tidak ada yang istimewa di widget ini. Sama seperti Recent Post pada umumnya, widget ini menampilkan beberapa post di blog kita yang bisa pengunjung sortir berdasar kategori. Gambar diatas adalah contoh widget recent post berdasarkan kategori. Jika teman-teman ingin melihat contoh widget ini bisa dilihat di sidebar blog ini. Baiklah kita langsung aja ke cara pasangnya: Masuk ke blogger dengan akun anda. Kemudian pilih halaman tata letak (Layout) Pilih elemen laman >> pilih add a gadget (tambah gadg...

Membuat Recent Comment di Blog

Image
S udah lama sekali saya tidak menulis tentang tutorial blog, kali ini saya akan mencoba memberikan satu lagi penjelasan tentang cara membuat recent post di blog. Sebenarnya tutorial ini jadul dan sudah banyak beredar di internet, tapi apa salahnya jika saya tulis kembali. Recent comment atau komentar terbaru adalah sebuah fungsi untuk menampilkan komentar terbaru secara real-time pada blog kita. Jadi jika ada pengunjung yang berkomentar di postingan kita maka kita bisa langsung tahu dan bisa langsung untuk menanggapinya. Cara ini sangat berguna bagi blog yang sering mendapat komentar. Sebenarnya ada cara lain untuk mengetahui komentar masuk yaitu dengan fasilitas pemberitahuan komentar via email yang disediakan oleh blogger. Namun cara ini kurang efektif karena kita harus selalu login ke email untuk mengeceknya. Tunggu apa lagi, langsung saja pada langkah-langkah pembuatannya : Masuk ke blogger dengan akun anda. Kemudian pilih halaman tata letak (Layout) Pilih elemen laman...

Menghapus Blog Yang Kita Ikuti (Follow)

Image
P ernahkah terbayang di benak anda jika kita sudah terlalu banyak mengikuti (follow) blog teman lain? Terkadang kita mengikuti blog hanya sekedar untuk menyenangkan hati si empunya karena sudah meminta lewat kotak komentar atau buku tamu, misalnya " eh... follow me dong....! " Ya, basa-basi retoris gitu... Hal ini membuat kita sulit untuk memilih blog mana sebagai prioritas mana yang bukan.  Nah, pada postingan kali ini saya akan membahas bagaimana cara menghapus salah satu Blog dari list blog yang kita ikuti. Jika temen-temen ada yang mau menghapus salah satu blog yang kita ikuti, berikut langkah-langkahnya Seperti biasa masuk ke Dashboard blog kita dengan cara login ke Blogger Kemudian setelah itu tekan tombol manage pada bagian Daftar Bacaan Lalu tekan tombol setelan/setting pada pada nama blog yang akan kita hapus Setelah muncul tab/window baru pada browser anda, klik tombol Google kemudian masuk dengan alamat email anda Setelah itu anda akan kembali ke halam...

Membuat Favicon Di Blogspot

Image
S elamat siang temen-temen semua, lagi pada ngapain? Yah, kalau saya ya tiap hari kerjaanya begini ini. Ngisi postingan, makan, tidur, bangun, ngisi postingan lagi. Maklum blogger pemula ya jadi tiap hari penginya ngisi terus, nggak tau itu isinya mungkin bagi para pakar-pakar blogger mungkin udah basi. Basi juga nggak pa-pa, daripada nggak ngisi sama sekali. Setelah kemarin saya menulis artikel tentang Spam , hari ini saya akan kembali ke jalur semula yaitu tutorial blogspot atau blogger. Kali ini saya akan menulis tentang cara mengganti ikon address (favicon) yang ada di sebelah kiri alamat blog kita. Tidak semua situs memiliki favicon, namun jika anda sering mengakses situs Yahoo, Google atau Facebook maka di awal alamat situsnya anda akan melihat ikon, Y , G , atau F , nah itulah yang dinamakan favicon. Favicon digunakan untuk memberikan gambaran atau identitas sebuah website. Favicon bisa berupa Logo, Photo atau gambar yang lain. Dengan Favicon, maka website kita akan menja...