Mendeteksi Website Responsive dengan Mozilla Firefox

Tampilan website responsive akhir-akhir ini banyak digandrungi oleh developer maupun penikmat website. Kelebihan dari tampilan responsive ini adalah kita tidak perlu mendesain ulang website di media ataupun perangkat yang berbeda. Umumnya tampilan responsive diperuntukkan perangkat mobile yang memiliki ukuran berbeda-beda.

Banyak developer website yang berlomba-lomba membuat inovasi dalam tampilan responsive-nya. Ada yang hanya menggunakan CSS3 saja untuk menghasilkan tampilannya responsive, ada juga yang menambahkan sedikit JavaScript untuk menambah nilai interaktif sebuah website.

Ada banyak hal yang menarik dari tampilan responsive ini, namun tentu menambah beban developer website dalam mengembangkan website sejalan dengan perkembangan teknologi di dunia website. Awalnya, banyak developer yang beranggapan bahwa tampilan responsive itu tanggung jawab pembuat perangkat. Namun, lambat laun paradigma itu berubah. Akhir-akhir ini sebagian besar developer berpendapat bahwa membuat tampilan responsive itu tugas developer.

Banyak situs yang mempermudah kerja developer ini untuk mendeteksi tampilan responsive sebuah website. Coba saja kamu cek di Google, dengan kata kunci "Responsive Tools". Tentu kamu akan menemukan banyak situs yang menyediakan perangkat untuk mendeteksi tampilan responsive. Tak hanya itu, beberapa minggu yang lalu aku juga sempat iseng membuat Responsive Tools sendiri yang kuletakkan di situs profil pribadiku. Berikut adalah Reponsive Tools bikinanku sendiri.

Responsive Tools bikinan Sendiri

Responsive Tools bikinan sendiri

Cara menggunakannya amatlah mudah. Kamu masukkan saja URL situsmu, lalu klik GO.Nantinya akan muncul banyak ukuran standar perangkat mobile maupun desktop yang ada saat ini. Ingin mencoba? Kunjungi laman Responsive Tools ini.

Tak hanya itu, Mozilla Firefox juga menyediakan fitur yang mendukung kamu untuk mendeteksi tampilan responsive website tanpa mengunjungi website lain. Berikut adalah ulasannya.

Responsive Tools bawaan Mozilla Firefox

Responsive Tool bawaan Mozilla Firefox

Gambar di atas adalah salah satu contoh blog yang menggunakan template responsive bikinanku. Dengan fitur yang ada di Mozilla Firefox ini kamu dapat mengubah  kueri media sesuai keinginanmu. Gunakan tombol "rotate" untuk mengubah mode "potrait" ke "landscape" ataupun sebaliknya. Untuk menikmati fitur ini, kamu cari di Tools > Web Developer > Responsive Design View.

Cara mengaktifkan Responsive Design View

Selain itu kamu juga dapat menggunakan shortcut key Ctrl Shift M untuk Windows dan Linux, Command Option M untuk Mac OS X. Menarik bukan fitur ini? Silakan mencoba :)

Cara Menampilkan Profil Penulis di Entri Blogger

Seiring dengan semakin berkembangnya internet di dunia, beribu website pun muncul setiap harinya. Hal ini membuat semakin mudah manusia untuk mengakses informasi. Terkadang informasi yang disajikan tidak relevan, bisa juga berita bohong. Untuk itu perlu adanya pengetahuan dari pembaca atas siapa penulis artikel yang sedang dibaca. Hal inilah yang membuat Blogger merasa penting untuk memberikan fitur menampilkan penulis di bawah entri demi membuat pembaca tahu siapa penulis entri tersebut.

Tak hanya itu, dengan menampilkan profil penulis di entri, pembaca lebih mudah untuk mengetahui penulis artikel tersebut di sebuah website maupun blog yang dikelola oleh lebih dari satu penulis. Berikut adalah langkah-langkah cara menampilkan profil penulis di entri Blogger.

Langkah Menampilkan Profil Penulis

Untuk kamu yang memakai template bawaan dari blogger, langkah menampilkan profil penulis sangatlah mudah dan cepat.

1. Login akun Blogger kamu
2. Tujulah Dashboard dan klik Layout
3. Setelah itu perhatikan Posting Blog, klik Edit

Layout Dashboard

4. Akan muncul pop up window, kemudian cari Show Author Profile below post
5. Centang Show Author Profile below post
6. Kemudian klik Save

Menampilkan Penulis

Mudah bukan? Lihatlah perubahan yang terjadi di blog-mu. Untuk kamu yang menggunakan template kustom alias bukan bawaan dari Blogger, kamu juga harus melakukan langkah-langkah tadi. Setelah itu, jangan lupa untuk melakukan langkah selanjutnya. Berikut adalah langkah tambahan untuk menampilkan profil penulis di entri Blogger.

Pengaturan Tambahan untuk Template Kustom

1. Klik Template
2. Kemudian klik Edit HTML

Edit HTML

3. Klik pada bagian editornya, lalu tekan Ctrl. F
4. Cari kode post-footer-line-3

Post Footer Line 3

5. Salin kode di bawah ini (untuk mengambil kode di bawah ini, klik Download RAW)



6. Tempel kode tersebut di atas kode <span class='post-location'>
7. Di bawah ini adalah gambar hasil salin-tempelnya

Peletakan Kode

8. Simpan hasil editan template dengan klik Save Template
9. Buka blog-mu dan lihat hasilnya

Hasil dari Penerapan Kode

Dari langkah-langkah tadi, akhirnya aku bisa memunculkan profil penulis di bawah entri. Berikut adalah tampilan profil penulis Iskael, yaitu Iska dan EL.

Profil Penulis - Iska

Profil Penulis - EL

Tertarik ingin mencobanya juga? Selamat mencoba :)

Pasang Iklan Baris via SMS

Iklan adalah cara yang paling sering digunakan orang-orang untuk mempromosikan barang atau jasa dagangannya. Media iklan bervariasi, mulai dari iklan di televisi, media cetak, internet atau melalui radio.

Cara untuk memasang iklan lewat pun bervariasi. Ada yang menggunakan email untuk mengirim iklan atau mendatangi kantor iklan tersebut untuk memasang iklan. Salah satu cara yang ekonomis untuk memasang iklan adalah pasang iklan lewat SMS di Payune.com.

Di Payune.com kamu tidak dikenakan biaya untuk pasang iklan baris biasa sedangkan untuk iklan baris premium kamu dikenakan biaya.  Pasang iklan baris via SMS di Payune.com semudah SMS-an dengan teman kamu.

Payune.com

Keuntungan Pasang Iklan Baris via SMS

Banyak orang yang ingin memasang iklan di internet tapi terkadang memiliki kendala koneksi internet atau mungkin gagap internet. Bahkan terkadang mereka tidak tahu bagaimana caranya memasang iklan di internet.

Payune.com memudahkan pengguna untuk memasang iklan di internet via SMS. Mengapa menggunakan SMS? Rata-rata orang Indonesia memiliki handphone, kebanyakan orang pun lebih mudah dan familiar menggunakan SMS. Tak hanya itu biaya SMS relatif lebih murah dan terjangkau untuk segala kalangan.

Iklan baris kategori jasa

Kamu bisa memasang iklan baris via SMS, gratis atau pun yang premium. Keuntungan memasang iklan baris premium adalah iklan kamu akan selalu ada di urutan atas iklan baris yang lainnya. Tentunya ini memberikan peluang yang besar untuk mendapatkan pembeli.

Cara Pasang Iklan Baris via SMS

Pasang iklan baris via SMS di Payune.com sangat mudah. Hanya dengan mengirim SMS sesuai format yang telah ditentukan, iklan kamu akan langsung tampil di halaman iklan baris Payune.com. Cara pasang iklan baris via SMS dapat kamu lihat di sini.

Tak hanya memasang iklan baris via SMS, kamu juga bisa cari iklan baris via SMS. Fitur pencarian ini akan mengirimkan kamu SMS sesuai dengan kata kunci yang kamu kirimkan ke SMS center Payune.com.

Cari iklan baris via SMS

Hanya dengan mengirim SMS, barang atau jasa daganganmu sudah bisa dilihat oleh orang-orang yang mengunjungi Payune.com. Sungguh mudah bukan?

Membangun Website dengan CSS (Bagian 4)

Sebelumnya: Membangun Website dengan CSS (Bagian 3)

Di entri sebelumnya sudah dibahas tentang teori menggunakan CSS dan HTML. Teori tanpa praktik adalah hal yang kurang sempurna. Bisa karena biasa. Kali ini, akan dijelaskan melalui live coding pada video di bawah ini.

Sebelum menonton video tersebut, ada baiknya apabila kamu menyiapkan perangkat lunak yang dibutuhkan. Perangkat lunak yang dibutuhkan adalah text editor, seperti: Notepad, Notepad++, Sublime Text 2, GEdit, atau yang sejenisnya. Serta siapkan browser, seperti: Internet Explorer, Safari, Chrome, atau Firefox.

Pada video di bawah ini, text editor yang aku gunakan adalah Sublime Text 2 versi gratis yang bisa kamu unduh di www.sublimetext.com. Untuk melihat video dengan jelas, minimal atur kualitasnya di 480p. Hal ini dikarenakan teks yang tampil akan blur apabila kualitas video di bawah 480p dan ini akan menghambat pembelajaran kamu.

Atur Kualitas Video

Setelah semua kamu persiapkan, pastikan internet koneksi internet kamu lumayan cepat. Kamu juga bisa mengunduh video ini menggunakan ekstensi di Firefox, yaitu Easy YouTube Video Downloader di situs www.bestvideodownloader.com.

Easy YouTube Video Downloader

Semoga bermanfaat :)

Selanjutnya: Membangun Website dengan CSS (Bagian 5)

10 Tips Membuat Template untuk Pemula

Siapa sih yang tidak berkeinginan untuk bisa membuat template blog sendiri. Setiap blogger pasti punya rasa ingin bisa untuk membuat template blog sendiri yang sesuai dengan konten blog yang ditulis. Kadang, untuk melewati proses menyebalkan ini, banyak blogger yang akhirnya memutuskan untuk memakai template gratis atau membeli template berbayar. Sejauh ini, template merupakan bahasan yang hangat diperbincangkan oleh blogger, karena template bisa menyihir pengunjung untuk berlama-lama di blog yang memiliki template menarik. Lantas, bagaimana cara untuk membuat template? Membuat template membutuhkan waktu yang sangat lama untuk seorang pemula. Berikut adalah 10 tips membuat template untuk pemula agar memangkas waktu yang sangat lama menjadi agak lama.

1. Buat Kerangka Template

Untuk memulai, buat kerangka template yang ingin kamu buat. Hal ini dilakukan untuk mencegah lupa yang sering terjadi pada pembuat template karena pembuatan template yang memakan waktu lama. Bayangkan saja, terkadang untuk membuat template yang kompleks bisa membutuhkan waktu 2 minggu. Tak hanya itu, terkadang lupa datang karena terlalu fokus pada satu masalah yang terjadi saat pembuatan template. Berikut ini adalah salah satu contoh kerangka template.

Kerangka Template

2. Tentukan Warna dengan Palette

Setelah membuat kerangka template, tentukan warna yang ingin kamu gunakan. Kamu bisa menggunakan palette untuk memudahkan dalam pemilihan warna. Banyak situs yang menyediakan palette, salah satunya adalah www.colourlovers.com. Berikut adalah tampilan palette yang ada di situs tersebut.

Palette ColourLovers

3. Tentukan Fitur

Langkah ketika adalah tentukan fitur yang ada di template yang akan kamu buat. Menentukan fitur ini adalah untuk membatasi pengerjaan agar lebih tertarget dan cepat selesai. Kadang saat kita membuat template, kita memasukkan banyak fitur lalu lupa dengan tujuan template ini fungsinya untuk apa.

4. Tentukan Target Blog

Menentukan target blog sangat penting dalam pembuatan template. Template untuk blog personal sangatlah berbeda jauh dengan blog yang digunakan untuk jual beli. Adalah sebuah ide buruk apabila kamu ingin membuat template yang multitarget. Itu hanyalah akan menambah lama pengerjaan.

5. Tentukan Gaya Template

Gaya template amatlah penting untuk menentukan nuansa yang akan ditekankan di sebuah blog. Kamu bisa memilih gaya metro, iconic, atau bahkan sketsa. Setiap gaya template memiliki kelebihan dan kekurangan tersendiri.

6. Buat Kode Dasar

Buat kode dasarnya terlebih dahulu. Hal ini untuk memudahkan kamu melakukan penelusuran struktur template yang kamu buat. Jangan masukkan kode detail sebelum kamu yakin dengan struktur yang kamu buat. Memasukkan kode detail hanya menambah beban mata dan otakmu.

7. Buat Kode Detail

Setelah membuat kode dasar selesai, mulailan bangun kode detail untuk template yang akan kamu buat. Jangan lupa untuk memberikan penanda pada kode detail. Hal ini berfungsi untuk kemudian hari ketika kamu akan melakukan editing pada kode detail yang kamu masukkan di template.

8. Meminimasi Kode

Minimasi kode yang kamu buat. Hal ini untuk mempercepat akses pengunjung blog yang menggunakan template kamu. Banyak alat di internet yang memudahkan kamu untuk meminimasi kode. Salah satu situs yang bisa melakukan ini adalah htmlcompressor.com.

HTML Compressor

9. Evaluasi

Langkah selanjutnya adalah melakukan evaluasi. Biasanya template yang dibuat pasti belum sempurna dan mengalami banyak bug yang tidak terduga. Kamu pun kadang menyadari bug itu setelah mengunggahnya lalu menyebarkan di internet. Hal itu adalah wajar. Lakukan evaluasi yang matang sebelum mempublikasi template yang kamu buat. Setidaknya hal ini dapat mengurangi jatuhnya reputasi kamu sebagai pembuat template.

10. Pemversian

Lakukan pemversian pada template yang kamu buat. Template yang kamu buat tidak harus sempurna. Untuk menuju sempurna, membutuhkan waktu yang sangat lama. Jika kamu menunggu kondisi sempurna untuk mempublikasi template kamu, maka bisa-bisa karyamu di bidang template sangat sedikit, karena mengejar kesempurnaan.

Itulah 10 tips membuat template untuk pemula. Semoga tips tersebut berguna bagi kamu yang ingin mengembangkan template.