Kamis, 10 September 2009

Pasang Iklan di bawah posting

Seperti yang diinformasikan pada posting terdahulu, bahwa blogger sekarang telah mempunyai sistem read more sendiri, oleh karena itu semua posting kang Rohman terdahulu yang berhubungan dengan kode read more yang lama menjadi usang atau out of date, sehingga artikel-artikel tersebut harus diperbaharui atau di update. Salah satu postingan yang telah usang tersebut adalah tentang cara memasang iklan di bawah posting. Kenapa kang Rohman langsung menyoroti hal ini? ini di karenakan pada posting tentang sistem read more bloger yang baru kemarin ada beberapa komentar yang bernada khawatir bahwa apabila memakai sistem read more baru blogger maka iklan yang di pasang di bawah setiap posting akan terganggu.

Satu yang harus di ingat adalah teknik ini tidak hanya untuk memasang iklan saja tapi bisa juga memasang banner, pesan, informasi subscribe serta yang lainnya yang ingin di pasang dibawah posting. Yang perlu di ingat pula yaitu iklan atau pesan yang terpasang tidak akan tampil dihalaman depan, namun akan tampil dibawah setiap posting apabila pembaca meng klik link "Read more" atau baca "selengkapnya" atau dengan kata lain artikel anda di baca secara keseluhan.

Teknik yang dipakai adalah sebagai berikut, biasanya kode untuk posting adalah seperti ini :

 

<div class='post-body entry-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

atau ada juga yang seperti ini

 

<div class='post-body entry-content'>
      <p><data:post.body/></p>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

 

Dua-duanya sama saja karena kode tambahan <p></p> itu adalah kode html untuk "paragrap" atau dengan kata lain agar kode posting mempunyai paragrap yang berbeda dengan yang lain.

 

Untuk memasang iklan atau pesan atau apapun sesuai keinginan anda di bawah posting, maka anda hanya perlu menambahkan kode tambahan seperti ini :

 

<div class='post-body entry-content'>
      <data:post.body/>

      <b:if cond='data:blog.pageType == "item"'>

     <p> Kode iklan, banner, pesan atau apapun di pasang disini! </p>

     </b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

 

Nah, ternyata gampang bukan. jadi anda tidak perlu khawatir dengan sistem read more baru blogger, karena kita bisa beradaptasi.

 

Namun ingat, beberapa kode iklan seperti kode iklan adsense, adbrite dan yang lainnya tidak bisa langsung di pasang disitu tapi harus di parse terlebih dahulu seperti yang pernah kang Rohman terangkan dahulu pada posting tentang  Pasang Iklan Google Adsense di Bawah Posting.

 

Masih bingung tentang cara pasang iklan di bawah posting, berikut sebagai gambaran agar lebih gampang di praktikan :

 

  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik Tab Edit HTML. lalu backup dahulu template anda.
  4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "

    expand-template-widget

  5. Carilah kode yang mirip seperti Ini :


    <div class='post-body entry-content'>
          <data:post.body/>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>

  6. Silahkan tambahkan kode yang di cetak dengan warna merah serta hijau;

    <div class='post-body entry-content'>
          <data:post.body/>

          <b:if cond='data:blog.pageType == "item"'>

         <p> Kode iklan, banner, pesan atau apapun di pasang disini! </p>

         </b:if>

    <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>

  7. Klik tombol SIMPAN TEMPLATE
  8. Selesai.

Untuk teknik yang berhubungan dengan read more yang baru, mudah-mudahan bisa diposting berikutnya.

Rabu, 09 September 2009

Blogger sudah support fungsi Readmore

Untuk melengkapi hadiah perayaan hari ulang tahunnya yang ke 10, kini blogger menambahkan satu tombol yang sangat di tunggu-tunggu oleh ribuan blogger didunia yaitu tombol "Jump Breaks" atau tombol "More" atau tombol "Read more" yang mempunyai fungsi untuk memotong tulisan di halaman depan (home page) atau lebih populer dengan sebutan "fungsi read more".

read more

Ini artinya, untuk memotong artikel agar tidak terlalu panjang tampil di halaman depan, anda hanya tinggal klik tombol " Read more" saja dan anda tidak harus repot lagi mengetikkan kode read more hasil hack atau apapun.

Namun, sepertinya tombol ini hanya muncul pada post editor baru dan dalam posisi mode "Compose" dan tidak muncul pada mode "Edit HTML". Walaupun seperti itu, anda masih tetap bisa menggunakan fungsi "read more" pada post editor lama serta dalam posisi mode "Edit HTML" yaitu dengan mengetikkan secara manual kode    

 

<!-- more -->

edit HTML

 

Untuk anda yang memakai template asli yang disediakan blogger akan langsung bisa menikmati fasilitas ini dan hasilnya akan muncul tulisan " Read more » "  seperti ini :

read more

 

Bagi anda yang memakai template bukan yang disediakan oleh blogger atau template hasil download dari situs lain, fungsi "  Read more " akan tetap berfungsi secara baik atau dengan kata lain artikel anda akan tetap terpotong namun tulisan " Read more » " tidak akan muncul. Untuk hal ini anda harus menambahkan kode tambahan pada template anda. Berikut langkah-langkahnya :

 

  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "

    expand-template-widget

  5. Carilah kode yang mirip seperti Ini :


    <div class='post-body entry-content'>
          <data:post.body/>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>

  6. Copy lalu paste kode berikut persis di bawah kode yang tadi :

    <b:if cond='data:post.hasJumpLink'>
          <div class='jump-link'>
            <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> 
          </div>
        </b:if>

    code

  7. Klik tombol SIMPAN TEMPLATE
  8. Selesai.

Dengan cara tersebut, tulisan " Read more » " akan muncul walaupun anda tidak menggunakan template yang disediakan oleh blogger.

 

Secara default tulisan yang akan muncul adalah " Read more » ", namun anda bisa mengubahnya sesuai keinginan anda, caranya seperti ini :

 

  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Elemen Halaman.
  4. Klik "Edit" pada elemen "Posting Blog" atau "Blog post" untuk yang bahasa inggris.

    posting-blog-element

  5. Setelah muncul jendela baru, gantilah tuisan Read more »  menjadi tulisan sesuai dengan keinginan anda.

    edit read more

  6. Klik Tombol SIMPAN

  7. Selesai.

Untuk anda yang menggunakan trik membuat read more seperti yang kang Rohman posting disini! sebaiknya di hilangkan saja karena blogger sekarang sudah mempunyai sistem read more sendiri. Cara mengembalikannya silahkan baca saja trik tersebut secara terbalik yaitu di baca dari bawah ke atas.

Membuat Gambar Gradasi Dengan Gradient Image Maker

Membuat Gambar  Gradasi Dengan Gradient Image Maker - Beberapa hari yang lalu ada yang mengirim pertanyaan seputar bagaimana cara membuat background blog dengan warna gradasi, dan hari ini kang Rohman mencoba menyempatkan waktu untuk membahas tentang hal ini.

Untuk membuat sebuah background dengan tampilan warna gradasi, ada beberapa langkah yang sekiranya dapat anda lakukan. Berikut langkah-langkahnya :

 

  1. Buatlah sebuah gambar dalam bentuk warna gradasi, tentunya anda bisa membuat berbagai variasi gradasi ataupun ukuran gambar sesuai keinginan anda. Contoh gambar dengan warna gradasi :

    gradienvgradien

  2. Untuk di muat pada blog atau website, gambar tersebut tidak harus dalam ukuran penuh, namun anda bisa memotongnya ( crop ) sekecil mungkin, bisa arah horizontal atupun arah vertikal  ( nanti berhubungan dengan pembuatan kode pada CSS nya ). Contoh :

    horizontalgrad verticalgrad

  3. Uploadlah gambar gradasi yang telah anda buat dan telah di potong sekecil mungkin tadi ke hosting tempat biasanya anda menyimpan gambar, apakah itu mau disimpan di blogger, photobucket.com, tinypic.com ataupun yang lainnya.

  4. Catat  atau copy alamat gambar yang tadi diupload, misal :  http://i32.tinypic.com/2im8j1y.jpg
  5. Masuk ke bagian kode CSS template anda, lalu masukkan alamat gambar tadi di bagian body, contoh :

    body {

    background:#ffffff url(http://i32.tinypic.com/2im8j1y.jpg) repeat-x left top;
    ......
    ......
    }
  6. Save template anda. Selesai.

Langkah-langkah diatas merupakan teori secara umum untuk anda yang menggunakan fasilitas hosting gambar gratisan, jika anda menggunakan hosting sendiri maka tentu saja gambar di upload ke hosting sendiri.

Karena kang Rohman menginginkan agar tutorial ini mudah untuk di pahami, maka pembahasan tentang cara membuat background blog dengan warna gradasi akan dibagi menjadi dua bagian. Posting ini khusus untuk membahas bagaimana cara membuat gambar gradasi atau gradient dan posting selanjutnya akan di bahas tentang bagaimana memasang kode CSS pada template blog anda.

 

OK lanjut ….

Bagi anda yang sudah familiar dengan program desain grafis seperti photoshop atau corel draw ataupun sofware yang lainnya, membuat gambar gradasi tentu saja merupakan hal yang gampang untuk di lakukan. Namun, terkadang ada juga yang merasa kesulitan dalam membuat sebuah gambar dengan berbagai alasan, mungkin karena memang tidak menguasai teknih desain grafis atau mungkin tidak tersedianya software desain grafis pada komputer yang anda gunakan.

Untuk anda yang merasa kesulitan dalam membuat sebuah gambar gradasi, anda bisa menggunakan alternatif lain yaitu menggunakan tool "gradient maker" yang bisa anda download secara gratis di internet, silahkan googling saja dengan keyword "gradient maker".

Alternatif yang lainnya lagi yaitu dengan menggunakan tool online gradient image maker. dengan tool ini anda bisa membuat gambar gradasi atau gradient dimana saja dan kapan saja, yang penting anda terhubung dengan internet. Website penyedia layanan gradient image maker banyak sekali, salah satu diantaranya adalah http://tools.dynamicdrive.com/gradient. Dengan tool dari website ini anda bisa dengan mudah membuat sebuah gambar gradasi.

gradien-maker

 

Dengan Tool ini anda hanya perlu memasukkan nilai lebar gambar ( gradient width ), tinggi gambar ( gradient height ), memasukkan warna yang anda inginkan yaitu dengan cara klik pada warna dibagian selec color, kemudian klik tombol "Get full size image", setelah muncul jendela baru dan gambar yang dibuat telah ada, silahkan klik kanan pada gambar tersebut lalu pilih "Save Image As…"

 

Contoh :

 

  • Select Gradient Type :  Type pertama ( paling kiri )
  • Gradient Width : 1  ( agar tidak harus memotong lagi )
  • Gradient Height : 650
  • Top Color : 13ABEB
  • Bottom color : FFFFFF
  • Image Output format : JPEG atau PNG juga boleh
  • Klik tombol "Get full size image"
  • Setelah muncul jendela baru, sorotkan mouse komputer anda pada gambar yang ada, klik kanan lalu pilih opsi "Save Image As…"
  • Silahkan simpan gambar tersebut di komputer anda untuk nanti di upload ke hosting gambar.
Untuk langkah selanjutnya akan di bahas pada posting berikutnya.

Kamis, 03 September 2009

Blogger luncurkan Post Editor Baru

Blogger luncurkan Post Editor Baru - Setelah sekian lama bertengger di blogger in draft, akhirnya post editor baru sudah resmi dipakai untuk blogger. Tentunya dalam post editor baru ini ada beberapa fitur yang ditambahkan yang tentunya akan lebih memudahkan kita dalam mengedit isi posting. Berikut screenshot dari post editor baru milik blogger :

post editor blogger

 

Beberapa fitur yang di tambahkan pada post editor baru :

 

  • Improved Image Handling
  • Improved Raw HTML
  • geotagging
  • Vertical resizing
  • Easy link editing in Compose mode
  • Full Safari 3 support
  • New Preview dialog
  • Placeholder image for tags
  • New toolbar

Keterangan lengkap tentang fitur-fitur baru tersebut bisa anda baca di sini ( males nerangin mode on Big Grin)

 

Berikut cara mengaktifkan post editor baru :

 

  1. Silahkan login ke blogger dengan ID anda.
  2. Klik Pengaturan. Biasanya anda langsung di bawa ke tab Dasar.
  3. Tuju bagian bawah. Pada opsi Pilih editor entri, silahkan pilih "Editor yang diperbarui"

    editor-baru
  4. Klik tombol SIMPAN SETELAN.
  5. Selesai.

 

Sepertinya untuk merayakan hari ulang tahunnya yang ke 10, Blogger habis-habisan menambahkan fitur-fitur baru pada mesinnya.

Ubitmenu: Menu Klasik Untuk Office 2007 / office 2010

Ubitmenu: Menu Klasik Untuk Office 2007 / office 2010 - Terus terang, ketika kang Rohman pertama kali menginstall office 2007 sedikit tercengang melihat tampilan menu barunya. Betapa tidak, menu yang terdapat pada office 2007 benar-benar berbeda 100% dari versi sebelumnya yaitu office 2003. Oleh karena itu, kang Rohman harus belajar dari awal lagi untuk mengenal menu-menu yang terdapat pada office 2007.

Bagi anda yang menggunakan office 2007 atau office 2010 namun tampilan menu nya ingin seperti office 2003, ada satu Add-ins yang bisa membuat menu office 2003 pada ofice 2007 / office 2010 namanya adalah UbitMenu. UbitMenu mampu menambahkan satu menu yang tampilannya mirip dengan office 2003 baik itu pada Microsoft Word, Microsoft Excel serta Microsoft PowerPoint.

 

UbitMenu

 

UbitMenu bisa anda download secara gratis, namun untuk pemakaian pribadi atau untuk versi trial saja. Untuk pemakaian pada instansi atau kantoran harus membayar lisensi. File UbitMenu tidaklah terlalu besar, hanya sekitar 336 KB.

Yang berminat, silahkan langsung pada situs penyedianya di http://www.ubit.ch/software/ubitmenu-languages.

Semoga dengan adanya menu ini, anda tidak usah berpusing ria. Tapi tentunya kita harus pula belajar dengan tampilan menu baru yang ada pada office 2007 atau 2010.

Selasa, 01 September 2009

Download opera 10

opera_logo Download opera 10 - Bagi para pecinta browser opera, ada kabar baik untuk anda. Kini opera versi 10 sudah bisa anda download.

Dengan desain yang lebih cantik serta penambahan teknologi Turbo terbaru untuk koneksi internet yang lambat, serta fitur-fitur baru lainnya,  opera 10 sepertinya layak untuk anda miliki.

Yang mau mencoba kehandalan opera 10, silahkan download langsung dari situs resminya di http://www.opera.com/browser/download

Update : Opera yang ini adalah versi Final, bukan versi beta atau release candidate.