Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Make a Magazine Style Drop Caps

Sebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa indonesia, semoga dengan datangnya hari bahagia ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).

Saya rasa cukup deh ngomong seriusnya ya, soalnya kalau terus-terusan serius otak ku menjadi beku, jari-jari ku menjadi kaku, lidah ku menjadi kelu, mulutku menjadi bisu, asa ku menjadi layu (keterusan deh). Oke…. sobat, kita kembali ke…. blog tutorial tentunya. Sebelum mulai, saya mau ngadain kuiz dulu, tolong jawab yang jujur ya, Apakah sobat pernah membaca koran atau surat kabar? jawabannya pasti sudah pernah. benarkan? yeeeehh jawabannya ketebak deh , lalu apa hubungannya dengan tutorial blog? ceritanya seperti ini, di dalam tulisan sebuah koran, hampir menjadi suatu kewajiban bahwa hurup awal dari sebuah artikel di cetak lebih besar di banding dengan tulisan lainnya. Nah bagi sobat yang mempunyai keinginan untuk membuat tulisan yang bergaya seperti tulisan dalam koran, maka teruslah membaca sampai akhir postingan.

Untuk membuat huruf awal di cetak lebih besar, maka sobat perlu membubuhkan kode css ke dalam style sheet nya. Karena template blogger masih terbagi dua yaitu klasik dan baru, maka untuk cara penempatan kode pun ada sedikit berbeda. Untuk itu silahkan ikuti langkah-langkah
berikut ini !

  • Untuk Template Klasik
    1. Sigin di blogger
    2. Klik menu Template
    3. Klik menu Edit HTML
    4. Copy seluruh kode template, lalu paste pada notepad kemudian save. Ini untuk berjaga-jaga apabila terjadi kesalahan melakukan editting
    5. Copy paste kode berikut di antara kode <style type=’text/css’> dan kode </style>
      dan kalau sobat merasa bingung, maka tempatkan saja di atas kode </style>
    6.  

      /* kode untuk hurup awal
      ----------------------------------------------- */
      .awal {
      float:left;
      color: #000000;
      background:#ffffff;
      line-height:80px;
      padding-top:1px;
      padding-right:5px;
      font-family:times;
      font-size:100px;
      }

    7. Klik tombol Simpan Perubahan Template
    8. Selesai

  • Untuk Template Baru
    1. Sign in di blogger
    2. Klik menu Layout
    3. Klik menu Edit HTML
    4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
    5. Copy paste kode berikut di antara kode <b:skin><![CDATA[ dan kode
      ]]></b:skin> , atau jika bingung simpan saja persis di atas kode
      ]]></b:skin>
    6.  

      /* kode untuk hurup awal
      ----------------------------------------------- */
      .awal {
      float:left;
      color: #000000;
      background:#ffffff;
      line-height:80px;
      padding-top:1px;
      padding-right:5px;
      font-family:times;
      font-size:100px;
      }

    7. Klik Tombol Simpan Template
    8. Selesai.

    Langkah-langkah di atas merupakan langkah pertama, langkah selanjutnya yang harus sobat lakukan adalah ketika melakukan posting harus pada posisi Edit HTML bukan pada Compose, nah simpanlah huruf awal artikel pada kode berikut <span class=”awal”>hurup awal </span>.
    Setelah itu terserah sobat, mau tetap pada posisi Edit HTML atau berpindah ke mode Compose tidak
    ada masalah. Contoh penulisan artikelnya seperti ini :

    <span class=”awal”>S</span>ebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa
    tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa
    indonesia, semoga dengan datangnya hari ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).

    Maka hasilnya nanti akan seperti ini :

    Sebelum membicarakan tentang tutorial blog, karena hari ini merupakan hari ulang tahun kemerdekaan Republik Indonesia, maka saya selaku salah satu dari sekian banyak anak bangsa tak ada salahnya jika saya mengucapkan selamat merayakan hari kemerdekaan kepada sobat semua selaku bagian dari bangsa indonesia, semoga dengan datangnya hari ini bangsa kita menjadi bangsa yang lebih dewasa, lebih maju, lebih makmur, dan lain sebagainya yaitu menuju kearah yang lebih baik. (tumben ngomongnya serius).

    Bagaimana sobat, menarik bukan? bukan. ah ko gitu sih
    Agar sobat menjadi lebih faham tentang kode-kode diatas tadi, maka akan saya bahas.

    /* kode untuk hurup awal
    ----------------------------------------------- */
    .awal {
    float:left;
    color: #000000;
    background:#ffffff;
    line-height:80px;
    padding-top:1px;
    padding-right:5px;
    font-family:times;
    font-size:100px;
    }

    .awal    –> ini adalah penamaan saja, mau di ubah jadi begin, start, atau apa saja boleh, cuma jangan lupa untuk membubuhkan tanda titik (dot) di awal tulisan.

    float:left;    –> ini adalah kode agar tulisan awal di letakan pada posisi kiri alias mepet ke kiri, jangan di ubah kalau yang ini.

    color: #000000;    –> ini adalah kode untuk warna tulisan, kode #000000 adalah kode warna hitam, jika sobat ingin warna yang lain maka silahkan saja di ganti.

    background:#ffffff;    –> ini adalah kode untuk warna latar belakang, kode #ffffff adalah kode warna putih, jika sobat ingin warna yang lain silahkan di ganti sesuai keinginan.

    line-height:80px;    –> ini adalah kode untuk jarak baris, sebaiknya jangan di ganti.

    padding-top:1px;    –> ini adalah kode untuk jarak sela antara tulisan dengan bagian atasnya, sebaiknya jangan di ganti.

    padding-right:5px;    –> ini adalah kode untuk jarak sela antara tulisan awal dengan tulisan selanjutnya sebesar 5 pixel, jika sobat berniat
    mengganti jaraknya, silahkan ganti nilainya saja.

    font-family:times;    –> ini adalah kode jenis hurup, yang di pakai adalah jenis times, jika tidak suka dengan times bisa di ganti dengan yang lain, mau Georgia, Verdana, sans-serif atau yang lainnya silahkan saja.

    font-size:100px;    –> ini adalah kode untuk besarnya hurup, jika mau di ganti silahkan ganti nilainya saja.

    Sudah jelaskah? nah jika sobat ingin berkreasi dengan yang namanya warna tapi tidak mengetahui kodenya, jangan khawatir, kawan saya bang iwan sangat kreatif, yakni menuliskan kode warna sekalian bentuk warnanya pada bagian footer blog beliau, jika sobat minat silahkan kunjungi blog beliau di http://free-7.blogspot.com

    satu lagi yang terakhir yaitu apabila sobat ingin melihat blog yang memakai sistem ini dengan warna lain, silahkan sobat klik di sini !

    Selamat berkreasi !

    17 Agustus 2007 - Posted by | aksesori blog, blog tutorial

    11 Komentar »

    1. Met ultah negeriku tercinta :), tadi ke KBRI ikut upacara, seru juga. Btw aku udah bisa yg kaya’gini mas, pengen nyobain yang hurufnya didalam kotak dan dimiringin dgn background yg bwarna. Bagi2 yah ilmunya kalo ada 🙂

      Komentar oleh ati | 17 Agustus 2007 | Balas

    2. to mba ati : kalo pengen hurufnya di dalam kotak, dan berwarna, ya tinggal kasih border aja mba, trus untuk warna background ya tinggal ganti warna backgroundnya, contoh untuk background dengan warna biru, dan tulisanya warna putih :

      /* kode untuk hurup awal
      ———————————————– */
      .awal {
      float:left;
      color: #ffffff;
      background:#07304F;
      line-height:80px;
      padding:8px;
      font-family:times;
      font-size:100px;
      border:4px solid #3A4D5C;
      }

      untuk warna lain, ya tinggal ganti kode warnanya saja mba..

      Komentar oleh rohman | 17 Agustus 2007 | Balas

    3. ada yang lupa mba, hurufnya mau miring ya? coba kodenya jadi seperti ini:

      .awal {
      float:left;
      color: #ffffff;
      background:#07304F;
      padding:25px;
      font-family:times;
      font-size:50px;
      border:4px solid #3A4D5C;
      font-style: italic;
      margin: 0px 10px 10px 0px;
      }

      untuk melihat contohnya, coba klik

      di sini !

      Komentar oleh rohman | 17 Agustus 2007 | Balas

    4. Mas Rohman yang selalu gelisah. Hehehe. Saya mau tanya lagi. Semoga gak bosen jawabnya.
      Saya sudah sukses membuat ‘tulisan bergaya koran’. Cuman font nya mau saya ganti. Mas tahu kan rokok A mild. Yang lambangnya ( huruf A) itu nama font nya apa? Header saya mau saya ganti dengan font itu. Mungkin teman2 yg lain juga bisa membantu.
      Yang kedua. Kan banyak font-font unik dari situs gratisan. Kalau misalnya header saya ganti dengan font tsb, bisakah pengunjung melihat header tulisan itu. Kan belum tentu mereka menginstal font unik tsb di pc mereka. Apa tampilannya jadi blank?

      Komentar oleh blacxx125 | 22 Januari 2008 | Balas

    5. saya kok nggak sukses buat drop cap di blogger saya ya (yoyokr.blogspot.com) apa sebabnya nih kang rohman (harap maklum, masih bau kencur…)

      Komentar oleh yoyokr | 23 April 2008 | Balas

    6. udah jd nih dropcap ku,trims..mau tanya lagi nih..gimana caranya biar postingannya kaya koran jadi ada lebih dari satu kolom dalam satu kali posting. trims jawabannya
      (yoyokr.blogspot.com)

      Komentar oleh yoyokr | 9 Mei 2008 | Balas

    7. Ilmu dibagi-bagi, semakin lama semakin bertambah, iya toh…..

      Komentar oleh an-xoin | 25 Juni 2008 | Balas

    8. Wah keren juga tuch….
      makasi ya ilmunya 😀

      Komentar oleh funday | 14 Juli 2008 | Balas

    9. uda dicoba juga n sukses…nuhun kang…

      Komentar oleh Gigi Sehat Badan Sehat | 15 Juli 2008 | Balas

    10. hatur nuhun benget kang Rohman tutorialnya wuuuOK…
      saya mo nanya kalo nambah halaman di blogger gimana caranya?.

      Komentar oleh Insan | 13 Agustus 2008 | Balas

    11. Keren mas…

      Komentar oleh Armand | 22 Agustus 2008 | Balas


    Tinggalkan Balasan

    Isikan data di bawah atau klik salah satu ikon untuk log in:

    Logo WordPress.com

    You are commenting using your WordPress.com account. Logout / Ubah )

    Gambar Twitter

    You are commenting using your Twitter account. Logout / Ubah )

    Foto Facebook

    You are commenting using your Facebook account. Logout / Ubah )

    Foto Google+

    You are commenting using your Google+ account. Logout / Ubah )

    Connecting to %s

    %d blogger menyukai ini: