Tips dan Cara memperlebar halaman blog

Mungkin dari sebagian besar template default yang disediakan blogger, tidak semuanya memeliki lebar halaman yang penuh. Rata – rata setiap template masih memiliki ruang untuk dimanfaatkan baik untuk memperlebar sidebar, ataupun halaman posting. Kali ini saya akan coba memberikan sedikit gambaran tentang memperlebar halaman blog. Cuma, cara ini akan lebih pas jika diaplikasikan di template minima, yaitu template default blogger. Tapi…tidak menutup kemungkinan juga dapat diaplikasikan di template default blogger yang lainnya. Oke….berikut penjelasannya. Sebelumnya, saya asumsikan kalo temen2 sudah berada di menu edit html. Dan ingat…tidak usah memberikan tanda centang pada kolom expand template widget karena hanya akan membingungkan saja. Sebelumnya, silahkan cari kode css #outer-wrapper. Untuk lebih mudah mencarinya, tekan ctrl+f lalu ketikkan kode yang di cari. Kalo sudah ketemu, maka akan tampak kode seperti berikut :

#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #main-wrapper { width: 410px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 220px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Penjelasan : #outer-wrapper --> kode untuk lebar halaman blog. #main-wrapper --> kode untuk lebar postingan blog #sidebar-wrapper --> kode untuk lebar sidebar blog. Untuk merubah lebar halaman blog, temen2 tinggal mengganti angka – angka yang terdapat pada setiap kode css diatas. Semakin besar angkanya, maka halaman blog pun semakin lebar. Contoh : Misalnya, temen2 ingin mengganti lebar halaman blog menjadi 950 pixel. Maka silahkan ganti jumlah angka pada tag width untuk kode css #outer-wrapper menjadi --> 950px; Sehingga hasilnya seperti dibawah ini :

#outer-wrapper { width: 950px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; }

Nah…setelah mengganti kode #outer-wrapper, jangan lupa untuk mengganti kode tag width pada #main-wrapper dan #sidebar-wrapper juga. Karena jika tidak diganti maka jarak antara halaman posting dan sidebar blog akan sangat lebar. Untuk mengantisipasinya, rubah juga angka pada tag width #main-wrapper dan #sidebar-wrapper menjadi 500px untuk #main-wrapperdan 400px untuk #sidebar-wrapper. Sehingga menjadi :

#main-wrapper { width: 500px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 400px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Untuk merubah lebar kolom pada #main-wrapper dan #sidebar-wrapper, harus sesuai dengan lebar kolom pada #outer-wrapper. Misalnya, lebar halaman blog 950px maka jumlah dari lebar postingan dan sidebar blog harus kurang dari 950px. Hal ini dikarenakan supaya postingan blog dan sidebar blog tidak berdempetan dan mempunyai jarak antara keduanya. Jarak antara postingan dan sidebar bisa disesuaikan dari 30px s.d 50px.

Nah…setelah merubah lebar bagian blog diatas, ada satu bagian lagi yang harus dirubah yaitu bagian bawah blog. Temen2 tinggal mencari kode #footer-wrapper dan rubah angka pada tag width-nya menjadi sama dengan lebar halaman blog (#outer-wrapper). Jika semua bagian telah mengalami perubahan, maka sebelum nge-save template lebih baik melihat dulu hasil perubahan dengan mengklik pratinjau / preview. Jika memang sudah sesuai baru di save. Jika belum temen2 tinggal klik bersihkan edit / clear edit untuk mengembalikan perubahan2 yang telah terjadi pada template. Ok….selamat mencoba.

Tips Memperlancar Browsing Internet

Browsing internet yang telat, sering menyebabkan kita menjadi serasa bt. Yaa...gimana ngga coba, disaat kita butuh dengan yang namanya internet, Eh..taunya malah macet alias lagi gangguan. Nah...untuk menghindari hal2 tersebut, saya punya tips buat para internet mania supaya ketika sedang browsing tidak mengalami gangguan. Yaa seengga-nya bisa mempermulus browsing anda semua. Supaya ga bt lagi..... Bagaimana caranya...?!
  • Hindari Jam2 Sibuk - Jika memungkinkan, jangan melakukan browsing pada saat jam2 sibuk. Biasanya....jam2 sibuk itu sama seperti jam kerja. Sekitar pukul 09.00 s.d 17.00.
  • Tambahkan cache browser - Saat anda mengunjungi suatu situs, IE menempatkan kode HTML dan grafik dari situs tersebut pada cache. Cache membantu IE bekerja lebih cepat saat anda mengklik tombol Back. Agar berselancar menjadi cepat, anda perlu mengalokasikan jumlah yang memadai untuk cache. Dari menu Tools, pilih Internet Options, lalu tab General. Pada bagian Temporary Internet Files, klik Settings. Di bawah Amount of Disk Space to Use, geret tombol ke arah kanan. Alokasikan sekitar 5 % dari space (ruang) pada hard disk anda untuk cache.
  • Tidak Menampilkan animasi dan multimedia - Animasi mungkin membuat berselancar menyenangkan, tetapi memperberat kerja browser. Untuk menonaktifkan animasi, klik Tools > Internet Options > tab Advanced. Geser layar ke bawah (scroll down) sehingga sampai di bagian Multimedia, hapus tanda cek pada opsi Play Animations dengan mengklik kotaknya, lalu klik OK. Kini browser hanya akan mengambil frame pertama dari setiap animasi GIF, jadi gambar yang tampil tidak bergerak. Demikian pula untuk menon-aktifkan suara dan video, kosongkan tanda cek pada kotak di depan Play Sounds dan Play Video. Bahkan kalau perlu, anda pun bisa mencegah ditampilkannya gambar (bila anda hanya butuh teks) dengan mengosongkan tanda cek di depan Show Pictures.
  • Hentikan Proses Download - Jika browser terlalu lama mengakses suatu halaman Web dan belum selesai juga, klik tombol Stop. Anda bisa membaca sebagian isi halaman yang sempat ditampilkan, bila sesuai dengan yang anda cari, boleh dilanjutkan. Klik tombol Refresh agar IE mengulangi proses download. Kadang rute yang digunakan browser macet dan dengan mengulang proses download (refresh), browser dapat menemukan jalur baru yang ‘plong’ di Internet.
  • Membuka jendela baru - Selama anda menunggu proses download, anda boleh melanjutkan kegiatan browsing yang lain dengan membuka jendela browser yang baru. Caranya, tekan Ctrl+N atau pilih menu File > New > Window.
  • Gunakan tombol klik kanan mouse - Dengan menekan tombol klik kanan mouse pada halaman web yang ditampilkan oleh browser akan muncul pop-up menu yang isinya tergantung dari posisi pointer mouse. Penggunaan klik kanan ini banyak manfaatnya dan sangat membantu kegiatan selancar anda. Bila pointer mouse menunjuk sebuah link kemudian anda klik kanan maka akan muncul menu-menu seperti: Open in New Window (untuk membuka halaman yang ditunjuk oleh link pada jendela baru), Copy Shortcut (untuk meng-copy alamat URL dari link itu), Save Target As (untuk menyimpan file yang ditunjuk oleh link). Bila pointer mouse berada di atas sebuah (image) maka akan muncul menu Save Picture As atau Save Background As untuk menyimpan file gambar itu ke hardisk.
  • Menyimpan situs / blog favorit - Bila anda menemukan sebuah situs atau halaman web yang menarik dan anda merencanakan untuk mengunjunginya lagi suatu waktu, sebaiknya anda memasukkannya dalam daftar favorit anda. Caranya, dalam keadaan halaman web itu terbuka, klik menu Favorites lalu Add to Favorites maka akan muncul jendela pop-up. Anda boleh mengubah namanya sekehendak anda atau langsung tekan Enter (atau klik OK). Maka nama halaman web itu akan tersimpan dalam menu Favorites sebagai shortcut (jalan pintas) untuk membuka halaman web itu. Untuk mengaksesnya, kita tidak perlu lagi menulis alamat URL-nya, klik saja menu Favorites lalu pilih nama situs tersebut.
  • Offline Browsing - Offline Browsing adalah sebuah cara untuk menghemat penggunaan waktu online. Dengan offline browsing, anda dapat menyimpan sebuah dokumen web ( lengkap dengan link dan isinya) ketika anda sedang online (terhubung ke internet) untuk anda buka kembali kapan saja meskipun dalam keadaan offline ( tidak terkoneksi dengan internet).

Cara Pasang Link Teman di Kotak Blogroll

Duh...rupanya masih ada yg ga ngerti tentang artikel saya tentang kotak blogroll. Sebenernya maksud dari kotak blogroll tersebut adalah untuk menampilkan link2 teman yang ingin tukeran link. Ok deh....kali ini saya akan coba jelaskan, mudah2an pada ngerti. Untuk menampilkan link di kotak blogroll tsb, setelah temen2 copy code yang ini : <marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" style="border: 1px solid #000; padding: 5px; text-align: center;" width="150px" height="150px"><a href="http://kursus-blog.blogspot.com/" target="_blank">Kursus Blog</a> <a href="http://bloggertemplates-foryou.blogspot.com/" target="_blank">Free Templates</a></marquee> Coba lihat kode html yg berwarna merah, nah...disana lah link itu ditempatkan. Nah, bila ingin menambahkan link di kotak blogger tersebut, cari kode </marquee> lalu simpan link yang akan dibuat sebelum kode terebut (Bila belum tau cara buat link, silahkan baca yg ini). Contoh : Misalnya link yg akan disimpan adalah link blogger tutorials. Maka kode htmlnya seperti berikut : <a href="http://mizwar-tutorials.blogspot.com/">blogger tutorials</a> Setelah itu, simpan kode barusan sebelum kode </marquee>. Sehingga kode seluruhnya kurang lebih seperti ini : <marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" style="border: 1px solid #000; padding: 5px; text-align: center;" width="150px" height="150px"><a href="http://kursus-blog.blogspot.com/" target="_blank">Kursus Blog</a> <a href="http://bloggertemplates-foryou.blogspot.com/" target="_blank">Free Templates</a> <a href="http://mizwar-tutorials.blogspot.com/">blogger tutorials</a></marquee> Nah...temen2 liat kode yg berwarna biru, itu kode link yg baru saja dimasukan. Sehingga hasilnya bila ditampilakan kurang lebih seperti ini : Kursus Blog Free Templates blogger tutorials Gimana...Mudahkan...?? Selamat mencoba.

Bikin Kotak Blogroll dengan Marquee

Apa sih kotak blogger itu….?! Mungkin bagi sebagian blogger udah ada yang tahu maksudnya dengan postingan saya yang ini. Tapi…bagi anda yang belum tahu, yang dimaksud dengan kotak blogger disini yaitu suatu kotak tempat menyimpan link blog lain. Intinya setiap blog yang mau tukeran link dengan blog kita sendiri, kita pasang link blog mereka di kotak blogger tersebut. Nah…pada kursus kali ini, ada sedikit variasinya..yaitu dengan menambahkan efek marquee. Bagi yang belum tahu apa itu marquee, baca artikel tentang marquee. Untuk lebih jelasnya mengenai kotak blogger dengan marquee silahkan liat tampilan di bawah ini :
Kursus Blog Free Templates
Bagus ga….?! Ok deh…buat temen2 semua yang pengen pasang kolom blogger seperti diatas, silahkan ikuti langkah2nya di bawah ini :
  • Login di blogger
  • Di jendela dashboard, klik menu layout lalu add new page element di sidebar layout anda. (Cara ini bisa juga dipasang di footer. Intinya terserah temen2 semua mau pasang dimana)
  • Setelah itu, pilih Html/javascript kemudian copy paste kode berikut : <marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" style="border: 1px solid #000; padding: 5px; text-align: center;" width="150px" height="150px"><a href="http://kursus-blog.blogspot.com/" target="_blank">Kursus Blog</a> <a href="http://bloggertemplates-foryou.blogspot.com/" target="_blank">Free Templates</a></marquee> Ket :
    • direction="up" arah dari marquee bergerak keatas. Jika ingin berganti arah, ganti kata "up" dengan "down" (bawah), "left" (kiri) atau "right" (kanan).
    • scrollamount="2" kecepatan bergerak. Semakin besar angkanya, maka semakin cepat pula marquee tersebut bergerak.
    • border:1px solid #000 merupakan deskripsi dari garis kolom. 1px --> tebal garis solid --> type garis. bisa diganti dengan kata dashed (-) atau dotted (.) #000 --> warna garis hitam. bisa diganti sesuai keinginan anda
    • text-align:center Text berada di tengah. Bisa diganti dengan left, right atau justify (rata kiri kanan)
    • width="150px" lebar kolom sebesar 150 pixel. Biar lebih sesuai dengan lebar dimana anda menyimpan marquee, anda tinggal mengganti 150px dengan 100%
    • height="150px" panjang dari kolom marquee. Semakin besar angkanya (dalam pixel), maka semakin panjang pula kolom marquee
  • Save dan Selesai

Technorati Rank Widget

Huh...akhirnya, bisa juga nih mulai posting lagi. Setelah 5 hari libur blogging. Gimana kabar semuanya...?? Mudah2an sehat selalu ya....amiin. Kalo ini, kursus blog akan sedikit membahas mengenai technorati rank, dan cara menampilkan widget technorati rank di blog anda semua.

Sekilas Mengenai Technorati Rank

Technorati Rank = Ranking technorati. Alias...nilai / rangking blog anda di technorati. Mungkin, untuk blogger newbie seperti saya, technorati merupakan sebuah direcktori blog yang berguna. Karena hampir setiap blogger mendaftarkan blognya di technorati. Sehingga, kalo misalnya rangking blog kita bagus di technorati maka secara tidak langsung, akan memberikan nilai plus bagi traffic blog.

Perhitungan rangking di technorati, dihitung berdasarkan jumlah linkback dari blog yang juga terdaftar di technorati. Beda lagi kalo misalnya blog anda di linkback oleh blog yang tidak terdaftar di technorati. Nilai rangkingnya pun beda seperti pagerank google, maksudnya...semakin kecil nilai rangking kita berarti semakin baik posisi blog kita di technorati. Makanya....jangan dulu seneng kalo misalnya anda liat rank blog anda di technorati nilainya gede. Bagi yang belum tahu....rangking blognya di technorati, untuk mengeceknya silahkan menuju technorati.com lalu di kolom search paling atas, masukin url blog anda. Tunggu sebentar...barudeh keliatan ranking blog anda di technorati.


Pasang Technorati Rank widget di blog



Nah....buat temen2 semua yang pengen pasang widget technoati rank diblognya, silahkan ikutin tutorialnya...dibawah ini.
  1. Login di Blogger

  2. Di dashboard, klik layout lalu edit html

  3. Jangan kasih tanda centang pada expand template widget

  4. copy paste kode berikut dan simpan sebelum tag ]]></b:skin>

    div.tec_rank {
    background: url(http://static.technorati.com/static/css/img/icn/talkbubble.png) 0 2px no-repeat;
    padding-left: 16px;
    border:0;
    }

    div.tec_rank a:link, div.tec_rank a:visited {
    color: #390;
    text-decoration:none;
    }

    div.tec_rank a:hover {
    border-bottom:1px dotted #390;
    }

    span.tec_link {
    display:none;
    }


  5. Save Template

  6. Langsung menuju ke page element

  7. Untuk menampilkannya, pilih add new page element lalu html / javascript. Anda bisa menyimpannya di sidebar atau footer.

  8. Copy paste kode dibawah

    <script src="http://purplemoggy.clawsorpaws.com/technorati/rank.php?u=http://kursus-blog.blogspot.com" type="text/javascript"></script>



    Nah...text yg berwarna merah ganti dengan url blog anda.

  9. Save dan Selesai
Ingat...widget ini, hanya bisa di tampilakan untuk blog yang sudah terdaftar di technorati. Bagi yang belum mendaftar, silahkan menuju ke cara daftar technorati untuk langkah2 pendaftaran d technorati.

blogger