Tips Mengatur Lebar Kotak Widget Arsip Blog

Modifikasi tak pernah berhenti terutama buat blogger yang gemar kutak-katik source kode template selalu kurang puas dengan hasil yang telah diraihnya. Termasuk dalam penampilan widget dan asesorisnya perlu diberi sentuhan seni dalam mengatur tata letaknya. Biasanya yang sering terjadi adalah widget yang tersedia setelah dipasang ternyata tidak sesuai dengan yang kita harapkan.

Widget arsip adalah widget yang secara otomatis ditambahkan ketika pertama kali blog dibuat, tanpa perlu menambahkan secara manual. Karena itu sangat sulit bagi pemula untuk memodifikasinya. Kalau dirasa keberadaanya mengganggu penampilan, maka tinggal hapus dan selesai permasalahannya.

Sebagian praktisi blog menganggap tepasangnya widget arsip dapat memperburuk validitas HTML, dan juga dari dari sudut pandang SEO kurang baik. Disisi lain ada juga yang memandang bahwa Widget arsip sangat penting bagi sebuah blog karena dengan adanya arsip tersebut dapat diketahui management update postingan. Semua itu saya serahkan kepada anda mau mengikuti pandangan yang mana.

Mungkin anda telah memasang widget arsip di blog dengan pengaturan seperti ini:

• Gaya: Menu dropdown
• Pilihan : Tampilkan Judul-judul entri
• Frekwensi arsip: Tiap bulan

Dan setelah dipasang ternyata lebarnya tidak pas dengan area sidebar, maka diperlukan kode CSS untuk mengaturnya. Caranya cukup mudah yaitu sebagai berikut:

1. Masuk ke template Edit HTML
2. Cari kode ]]></b:skin>
3. Tambahkan kode berikut ini sebelum kode ]]></b:skin>

#BlogArchive1_ArchiveMenu {width:248px;margin:0 15px}

Keterangan:

• kode width adalah untuk mengatur lebar widget
• kode margin adalah untuk mengatur jarak widget dari dinding sidebar
• Nilai tersebut (semakin banyak angkanya maka semakin besar nilainya) silahkan sesusuaikan dengan kebutuhan.

4. lalu simpan dan lihat hasilnya

Anda juga bisa memodifikasi widget arsip dengan bentuk yang lain disini.

Baca Selengkapnya >>

Membuat dan memasang banner animasi untuk blog

Tips Cara Membuat dan memasang Banner animasi Blog.
Banner blog adalah sebuah gambar yang mewakili alamat url suatu blog dimana jika diklik akan menuju ke alamat blog yang dilink-kan. Komposisinya terdiri dari sebuah gambar (image dalam ekstensi jpg, jpeg, png, atau bahkan gif), url blog, dan title.

Gambar dalam ekstensi jpg dan jpeg mempunyai ukuran file paling kecil dari ekstensi saudaranya (gif dan png) tetapi kelemahannya gambar tersebut tidak mendukung transparansi. Artinya gambar yang dihasilkan dalam format jpg dan jpeg menyertakan background putih sebagai canvasnya.

Ekstensi png dan gif sangat mendukung transparansi, artinya dapat diseting berbackground maupun tanpa background. Sebagai contoh jika anda membuat gambar berupa linkaran, maka di bagian luar lingkaran tersebut bisa dimunculkan maupun dihilangkan. Berbeda dengan jpg atau jpeg, gambar yang dihasilkan selalu menyertakan background. Kekurangannya gambar gif dan png membunyai size yang lebih besar .

Lantas bagaimana dengan gambar animasi, ekstensi apa yang cocok untuk membuat gambar animasi.? Jawabannya tidak lain dan tidak bukan adalah GIF. Keunggulan gambar gif untuk animasi banyak dimanfaatkan pemilik blog untuk membuat banner sehingga lebih menarik. Untuk menciptakan gambar animasi sobat bisa menggunakan software animasi gif yang banyak dishare di internet. Tentu jika anda rajin browsing maka tidak akan kesulitan mendapatkannya. Biasanya saya mempergunakan software bernama Easy GIF Animator karena lebih mudah membuatnya tak perlu keahlian khusus untuk mengoperasikannya.

Setelah anda berhasil membuat gambar animasi, saatnya menjadikan gambar tersebut untuk banner blog. Langkahnya adalah sebagai berikut:

1. Buat gambar animasi dalam ukuran pixel (misalnya width-nya 241px dan height-nya 48px)
2. Buatlah gambar semenarik mungkin, diberi tulisan sekedarnya.
3. Jika sudah jadi, unggahlah gambar animasi tersebut ke hosting yang mendukung animasi GIF.

Yang perlu diperhatikan dalam menguplod adalah dimana hosting yang support dengan animasi GIF. Berdasarkan pengalaman penulis, Picassa adalah tempat yang cocok untuk mengupload animasi GIF. Meskipun di dalam blogger sudah disediakan fasilitas upload gambar tetapi untuk gambar animasi gif untuk saat ini belum bisa berjalan. Gambar gif bisa diupload di blogger tapi untuk animasinya tidak bisa berfungsi.

Berikutnya Saya berasumsi bahwa anda sudah bisa mengupload animasi GIF ke Picasa dan berhasil mendapatkan link gambarnya. Selanjutnya untuk membuat banner animasi blog, perhatikan susunan kode berikut ini:

<a href="http://www.tegalkab.formulasi.or.id/"><img title=”Formulasi Kabupaten Tegal” border="0" height="48" width="241" title=”Formulasi Kabupaten Tegal” src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnR4Ekbf-UAkPk42MO0053tRpybcHdSB3KP4jl51WJ1Vrctf-cjFaqteC_y4VL32vOr0KO54iFdwzerthUYvoU8FiZyEVhTHpR9hs936E3hmYVtokAPJl-PCUqoCmB18hPVSqO8Kp-f9g/s241/formlsani-1.gif" /></a>

Kode tersebut di atas jika dicopy pase ke dalam widget html akan menghasilkan gambar banner seperti ini:


Keterangan Kode:

• Kode dengan warna merah adalah link atau url blog
• Kode yang berwarna biru adalah link atau url gambar yang didapat dari Picasa
• Kode berwarna ungu adalah Nama atau Judul blog
• Kode dengan warna hitam tebal adalah ukuran gambar

Sehingga jika anda ingin membuat banner animasi untuk blog anda sendiri langsung copas saja kode tersebut tetapi setelah disesuaikan valuenya (teks yg berwarna-warni).

Mudah-mudahan dengan tulisan yang ngalor ngidul ini anda bisa membuat banner blog sendiri, jika masih belum mudheng jangan sungkan untuk berkomentar.

Baca Selengkapnya >>

Menghilangkan link pada gambar header

Link dalam pengertiannya di bidang web blog disebut sebagai tautan.  Dengan link inilah alamat satu dengan lainnya dapat terhubung, sehingga dengan sekali klik browser akan membawa kita ke suatu tujuan.  Dalam penerapannya link tidak hanya berupa text saja melainkan dapat pula berupa sebuah gambar atau juga tombol.

Link yang berupa gambar sering disebut oleh kalangan neter sebagai Banner.  Contohnya gambar yang terpasang di bagian header blog.  Bisa juga banner blog yang terpasang di bagian sidebar, biasanya banner untuk iklan yang sering kita jumpai di sidebar maupun di tempat lain yang dianggap strategis oleh pemasang iklan.  Link yang berupa tombol misalnya tombol download, ketika diklik akan menuju ke tempat penyimpanan file di internet.

Ketika sebuah gambar header blog diupload maka yang terjadi gambar tersebut mengandung link, coba amati header blog anda dekatkan mouse di atasnya jika mouse pointer berubah menjadi gambar jari tangan menunjuk itu artinya ada link yang tertanam di dalam gambar tersebut.  Blogger menerapkan itu semua bukan tanpa alasan, sudah barang tentu ada mempunyai maksud tersendiri.  Header blog di dalamnya mengandung link yang mengarah kepada halaman homepage  blog. Mungkin maksud blogger menyertakan link pada gambar header adalah sebagai navigasi bagi pengunjung yang ingin melihat tampilan halaman awal sebuah blog atau website cukup dengan mengkilk gambar header.

Di sisi lain, blog sekarang beda dengan dulu.  Sekarang sudah mulai komplit, penyedia blog sudah mencantumkan fitur navigasi.  Blogspot menyediakan widget navigasi di bawah header yaitu PageList dan LinkList. Dan jika pemilik blog mengaktifkan fitur PageList maka secara otomatis Blogspot memberikan link tab dengan nama Home atau Beranda.  Home atau Beranda adalah link yang apabila diklik akan menuju ke halaman awal blog.

Setelah navigasi tersebut diaktifkan maka fungsi link pada gambar header menjadi mubadzir, karena sudah digantikan oleh tab link dengan nama Home atau Beranda.  Selain itu gambar header yang mengandung link hanya akan mengganggu pengunjung jika sedang konsentrasi membaca artikel blog tiba-tiba halaman berganti dengan sendirinya karena tanpa sengaja mengklik gambar header.

Link gambar header bisa di-nonaktifkan dengan cara menghapus url-nya. Untuk menghapusnya agar tidak berakibat fatal, perhatikan susunan kode berikut ini:

<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>

Yang perlu anda lakukan adalah mengganti kode tersebut dengan kode berikut ini:

<div style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</div>

Setelah itu simpan atau save dan lihat hasilnya, jika anda melakukannya dengan benar maka hasilnya akan seperti gambar berikut:

Baca Selengkapnya >>

Mengatur jarak antar widget sidebar blogger standar

Widget berguna untuk melengkapi blog, tanpa adanya widget blog menjadi terasa hambar. Meskipun demikian harus berhati-hati dalam menambahkan widget karena terlalu banyak widget, dapat mengakibatkan blog menjadi berat saat dibuka.

Alangkah baiknya dalam menambahkan widget, cari yang terpenting saja, misalnya Artikel Populer, Recent Post, dan Artikel terkait. Biasanya widget yang berasal dari pihak ketiga (selain bawaan Blogger) akan membebani blog, contohnya widget pengunjung blog yang disertai animasi meskipun bagus dipandang namun sangat membawa kontribusi besar dalam memperlambat loading blog.

Pemasangan widget juga harus diatur tata letaknya. Jika anda masih memakai template blogger standar bawaan Blogger alias belum dimodifikasi, jika ditambahkan widget pada sidebar akan terdapat ruang kosong alias jarak yang kurang rapat. Tentu hal ini akan menjadi pemandangan yang kurang menarik karena antar gadget atau widget saling berjauhan.

Sebenarnya hal tersebut bisa diatasi dengan menambahkan baris kode CSS, tapi permasalahannya kode css mana yang harus ditambahkan.? Saya masih ingat pernyataan seorang teman yang mengatakan bahwa sekecil apapun suatu permasalahan apabila belum tahu caranya akan terasa rumit. Untuk itu di kesempatan ini saya ingin berbagi tentang bagaimana cara mengatur jarak antar widget dengan css.

Yang perlu anda lakukan adalah menambahkan baris kode berikut ini :
.main-inner .widget {margin: 10px 0px;}
Letakkan kode tersebut di atas kode ]]></b:skin>
lalu simpan/save.

Lihat perbedaan kedua gambar di bawah ini:

Selamat mengatur jarak antar widget, semoga blog anda jadi lebih teratur.

Baca Selengkapnya >>

Membuat Hotspot Satu Modem USB untuk Beberapa Laptop

Mungkinkah satu modem usb dapat digunakan untuk banyak laptop, kenapa enggak. Hanya bermodal satu buah modem usb baik cdma maupun GSM dapat digunakan untuk mengakses internet oleh banyak laptop secara bersamaan. Harganya pun murah, ditambah lagi pulsa internetnya kalau berlangganan unlimited bulanan pasti sangat menghemat biaya.

Anda tak perlu membeli kabel jaringan dan bersusah payah merakitnya, hanya akan membuang waktu tenaga dan biaya. Jadi dengan memanfaatkan wifi wireles laptop secara optimal dapat membuat jaringan hotspot sendiri.

Lebih tepatnya dalam tutorial ini adalah membuat hotspot dengan menggunakan satu modem usb. Berdasarkan pengujian yang saya lakukan ternyata dapat diakses di ruang kelas dengan kecepatan yang lumayan. Pokoknya bisa buat internetan beramai-ramai murah meriah.

Untuk membuat hotspot dengan menggunakan satu modem usb yang di-share ke semua laptop lain memerlukan beberapa persyaratan, antara lain:

1. Modem usb masih dalam kondisi baik
2. Sinyal GSM / CDMA cukup (kuat lebih baik)
3. Modem telah terisi pulsa (harian, mingguan, bulanan maupun unlimited)
4. Laptop / PC dilengkapi dengan wifi / wireless

Jika keempat syarat tadi sudah terpenuhi, kini saatnya beraksi

1. Aktifkan perangkat wireless anda (pencet tombol keyboard bergambar sinyal tower)
2. Kemudian Buka control panel-> network and internet-> network and sharing center-> set up a new connection (lihat gambar dibawah)

3. Pilih set up a wireless adhoc (lihat gambar)

4. Isi network name dan password (password minimal 8 digit) terserah anda (lihat gambar)
Gunakan pilihan Security Type : WPE agar bisa di detect oleh Handphone

5. Klik turn on internet connection sharing (lihat gambar)

6. Pengaturan selesai, silakan klik Close

Dan hasilnya akan terlihat seperti ini :

Untuk ujicoba panggil teman-teman sambil bawa laptop atau handphone tentu saja yang ada perangkat wifinya untuk berkumpul untuk menikmati hotspot buatan sendiri.

Baca Selengkapnya >>