Home > Ekspresi > Bikin Kartu

Bikin Kartu

December 27th, 2010 Leave a comment Go to comments

Kalau bicara tentang gambar atau image memang dilema, khususnya untuk yang koneksi internetnya lambat atau yang spacenya terbatas. Tapi sampai kapan kita alergi masang gambar?.

Bagi sahabat yang nggak mau pusing mikir loading dan nggak takut space bangkrut, kali ini saya akan berbagi tentang bagaimana bikin kartu ucapan animasi seperti yang terpasang di sidebar itu. Kelebihan dari teknik ini adalah suport di sembarang blog. Di wordpress.com dan blogspot dipastikan jalan dengan normal.

Lagi2 saya katakan bahwa layanan gratis untuk bikin kartu banyak tersedia dan nggak ribet. Tapi kekurangan dari layanan gratis itu biasanya muncul logo sponsor milik penyedia, lagi pula yang namanya gratisan pasti banyak yang menyamai. Kalau bikin sendiri kan limited edition.

Pakai software photoshop juga bisa, tapi saya berani taruhan hasilnya pasti beda dengan bikinan saya. Photoshop sich biasa. Sekali2 perlu nyoba yang anti biasa

Yang perlu kita siapkan adalah gambar animasi yang bisa kita download dari banyak sumber. Kalau yang saya pakai ini ngambil dari www.cellsea.com. Gambar tersebut akan menjadi background kartu. Langkah selanjutnya adalah menambah kode untuk bikin teksnya.

ini backgroundnya

ini setelah ditambah teks

METAMARSPHOSE

mengucapkan
Selamat Tahun Baru

© Blog Tjap Koepoe Biroe™

Kode untuk menggabungkan gambar dan teksnya adalah sbb :

<center><div style="background-image: url('url background'); background-repeat: no-repeat; background-position: center center; padding: 0px;">
<p style="text-align: center;padding-top:40px;padding-bottom:30px;line-height:130%;font-size:140%;color: #ffffff;">teks baris pertama</p>
<p style="text-align: center;padding-top:20px;padding-bottom:10px;line-height:130%;font-size:120%;color: #ffffff;">teks baris kedua</p>
</div></center>

Gantilah kode warna merah dengan isian yang sesuai. Tujuannya adalah agar letak teks proporsional dengan background imagenya. Kalau mau mudah, sahabat bisa copy paste kode berikut lalu ubah teks warna merah dengan nama sendiri…

<center><div style="background-image: url('http://metamarsphose.files.wordpress.com/2010/12/wp4d003ae3bf680.gif'); background-repeat: no-repeat; background-position: center center; padding: 0px;">
<p style="text-align: center;padding-left:0px;padding-bottom:0px;padding-top:50px;padding-right:0px;line-height: 120%;font-size:180%;color: #ffffff;"><b>METAMARSPHOSE</b></p>
<p style="text-align: center;padding-bottom:10px;padding-top:10px;line-height: 130%;font-size:140%;color: #ffffff;"><b>mengucapkan<br />Selamat Tahun Baru</b></p><p style="text-align: center;padding-bottom:20px;padding-top:130px;line-height: 120%;font-size:100%;color: #ffffff;">&#169; Blog Tjap Koepoe Biroe&#8482;</p>
</div></center>

Untuk yang berkenan, mari silakan dicoba, untuk yang nggak suka ya nggak apa2. Tak ada yang disuka semua, dan tak ada yang nggak disuka semua. Selamat menyambut tahun baru 2011…

~ Grazie ~
Categories: Ekspresi
  1. December 27th, 2010 at 18:44 | #1

    Yesss !!!!!!!!! aku dapat tips dan trik gratis.


    Selamat mencoba Mas…

    [Reply]

    adu Reply:

    pesan apa dari surga pak…?


    Pesen Kartu Domino Mas…

    [Reply]

  2. December 27th, 2010 at 18:59 | #2

    Alhamdulillah, akhirnya bisa ke blog nya Pak Mars lagi.


    Kok kemarin2 nggak bisa knapa ya Mas…

    [Reply]

  3. December 27th, 2010 at 19:02 | #3

    Selamat tahun baru….:)


    Selamat taun Baru Prof…

    [Reply]

  4. nakjaDimande
    December 27th, 2010 at 20:01 | #4

    kartunya cantik semua Dik, makasi sharingnya ya :)


    Makasih Kak…
    Kakak boleh ambil satu

    [Reply]

  5. riFFrizz
    December 27th, 2010 at 20:02 | #5

    mantab jaya pak, saya juga pernah nggabungin pakek CSS gini


    Limited Edition paling mantab

    [Reply]

  6. mamah Aline
    December 27th, 2010 at 20:20 | #6

    keren…keren… pingin niru kartu ala pak mars, matur nuwun tipsnya pak…


    Makasih juga Mbak…

    [Reply]

  7. December 27th, 2010 at 20:23 | #7

    alamak! Keren banget mas bikin yang aniamsi begitu, wkakakakaka…. saya biasanya cuma pake website penyedia e-card, hahahaha….

    nice..really inspiring!


    Ini bisa sesuai kemauan Mas…

    [Reply]

  8. Ikkyu_san
    December 27th, 2010 at 20:44 | #8

    waduh sudah pak eM menghias blognya jadi cantik untuk countdown nih
    buatin dong pak
    **digaplok**

    EM


    Kode untuk countdown kan sudah saya tulis kemarin Mbak…
    Tinggal dicopas dowang

    [Reply]

  9. December 27th, 2010 at 21:38 | #9

    apik tenannnnn….


    Makasih

    [Reply]

  10. December 27th, 2010 at 21:43 | #10

    kartunya bagus pak mars..


    Makasih Mbak Fitri…

    [Reply]

  11. December 27th, 2010 at 22:41 | #11

    bener2 antibiasa, pak mar. yang biasa sih saya ndak pernah bikin sendiri, pak, hehe … bisanya cuma kopi-paste. wah, bisa ikut nunut kamukten pak mar nih!


    Iki jek ajaran kok Pak… :D

    [Reply]

  12. December 27th, 2010 at 22:41 | #12

    Pak Mars ini di sekolah ngajar apa sih? Bissssaaa aja edit ginian…


    Ini masih belajar Mas…
    Sambil praktek :D

    [Reply]

  13. December 27th, 2010 at 23:06 | #13

    Tak copas dulu mas, sekalian buat kartu untuk anak-anak.


    Mari Mas…
    Selamat mencoba

    [Reply]

    Aldy Reply:

    Hasilnya maknyus, putri saya senang, bapaknya sudah pintar bikin kartu ucapan tahun baru.
    Padahal mereka ndak tahu bapaknya sampai harus jungkir balik belajar membuat kartu :(


    Makasih kalau berkenan Mas…

    [Reply]

  14. Akbar PU
    December 27th, 2010 at 23:17 | #14

    Keyen abis !


    Makasih

    [Reply]

  15. ibnu
    December 27th, 2010 at 23:38 | #15

    wah lumayan ada referensi, thanks :)


    Sama2 Mas…

    [Reply]

  16. Reza Fauzi
    December 28th, 2010 at 01:39 | #16

    oke deh akan dicoba, semoga bisa bagus kaya biinan mas ya hehe :D


    Selamat Mencoba

    [Reply]

  17. Anas
    December 28th, 2010 at 01:45 | #17

    keren pak.. met tahun baru..


    Met Taun Baru juga Mas…

    [Reply]

  18. December 28th, 2010 at 04:10 | #18

    mantab…langsung coba dan berhasil :-D mau bikin banyak ah :-D
    trimakasih info dan tips triknya mas

    salam sejahterah


    Salam Sejahtera juga…

    [Reply]

  19. budiarnaya
    December 28th, 2010 at 06:29 | #19

    Heheheheh pakde mamang tau kemauan saya yach?..kemarin komen tentang gambarnya bagus, baru buka sekarang udah ada rumusnya…terima kasih Pakde


    Sudah dicoba apa belum Bli…

    [Reply]

  20. ceuceu
    December 28th, 2010 at 07:02 | #20

    makasi sharingnya pak.. ( hmm..liat coding2 itu… pedes… :) )


    Kan tinggal copy paste dan edit sedikit Mbak…

    [Reply]

  21. pakeko
    December 28th, 2010 at 08:12 | #21

    Langsung dicoba!


    Ditunggu hasilnya

    [Reply]

  22. December 28th, 2010 at 10:31 | #22

    hyaa,,saya balik kembali pakkk…
    wah keren sekali paakk,,,
    saya mau satu bolehhh…???
    code2nya ditaruh dimana ya pak…untuk gabung2in ntu???mksh^^


    Ditaruh di sidebar kan bisa Mbak…
    Di postingan juga oke…
    Pokoknya dimana aja…
    Nggak perlu masuk ke edit html…

    [Reply]

  23. pendarbintang
    December 28th, 2010 at 10:45 | #23

    Pagi PakDhe Om…..

    Kayanya emang harus diparktekin nie….

    Bisa dipamerin buat orang kantor, heeee

    siapa tahu nanti malah milih bikinan saya daripada designer graphicnya :mrgreen:


    Ditunggu laporannya :D

    [Reply]

  24. December 28th, 2010 at 10:58 | #24

    Haiyaaa …
    Keren juga ya …
    Dan yang terpenting …’
    ini bisa dicoba di blog gratisan
    heheh

    salam saya


    Berhasil apa enggak Om :D

    [Reply]

  25. Dany Farid Habibi
    December 28th, 2010 at 11:09 | #25

    Mantap banget pak!!!


    Mari dicoba Mas…

    [Reply]

    Dany Farid Habibi Reply:

    Ditunggu backlinknya pak!!!


    Iya Mas…

    [Reply]

  26. advertiyha
    December 28th, 2010 at 13:01 | #26

    kalo yang bikin pak Guru, pokoknya okeh bangget deh.. ngikutttttttttttt… :)
    trims pak..


    Makasih Mbak Iyha…

    [Reply]

  27. masyhury
    December 28th, 2010 at 14:37 | #27

    wah ini yang saya cari, sudah lama saya cari cara menggabungkan image dgn gambar, akhirnya ketemu disini deh,, :D
    lumayan, gk pake script,, :lol:


    Mari dicoba…

    [Reply]

  28. December 28th, 2010 at 15:43 | #28

    tolongin saya pa…footer masih di kanan :(


    Yang avatar itu perlu di cek kode2nya…
    Coba dipindah di notepad lalu emailkan ke saya Mas…
    Saya cek satu2… :D

    [Reply]

    adetruna Reply:

    baik pa mars….terima-kasih sebelumnya sy persiapkan segera :wink:


    Oke…
    Ditunggu…

    [Reply]

    adetruna Reply:

    notepad, kemarin sudah saya kirim via gmail, pa :)


    OK…

    [Reply]

  29. TuSuda
    December 28th, 2010 at 19:14 | #29

    ikut mengucapkan Selamat juga buat pakde..yang selalu senang berbagi bersama kami…. :)


    Berbagi nggak pernah rugi…

    [Reply]

  30. iiN
    December 28th, 2010 at 19:56 | #30

    wah coba ah.. izin yaaaa..:)


    Mari dicoba…

    [Reply]

    iiN Reply:

    wah, susah ya.. kok ga bisa yaaaaaa… *nyerah dulu deh.. he


    Pasti ngopynya nggak lengkap Mbak…
    Coba sekali lagi… :D

    [Reply]

  31. December 28th, 2010 at 20:07 | #31

    master bagi2 tips nih..:p


    Sambil belajar Mas…

    [Reply]

  32. December 28th, 2010 at 22:13 | #32

    wah bagus sekali ne…. makasih ya mas infonya… kuat g yadipajang di blogku.. he he he


    Makasih juga Mas…

    [Reply]

  33. Abdul Hakim
    December 28th, 2010 at 22:48 | #33

    bener-bener anti biasa, keren pak mars


    Makasih Mas…

    [Reply]

  34. December 28th, 2010 at 23:39 | #34

    Wuih, keren sangat! Meriah sumringah binti absah (opo iki?)! :D


    Semua telah sah…

    [Reply]

  35. Erdien
    December 29th, 2010 at 01:05 | #35

    Selalu ada yang unik dan kreatif di sini Pak. Keren!!!
    Tak salah kiranya kalo guru Matematika saya dulu pernah bilang, “Dengan bermain angka dan logika matematika, seseorang bisa menghancurkan sebuah negara dengan senjata yang diciptakannya”.
    Banyak hal unik dan kreatif dari ahli matematika ternyata :D


    Xixixi…
    Makasih Mas…

    [Reply]

  36. and1k
    December 29th, 2010 at 07:20 | #36

    wah thanks banget kang atas infonya langsung ke tkp :))


    Mari mas…

    [Reply]

  37. Khai
    December 29th, 2010 at 08:29 | #37

    keren….sangat keren… Itu berapa batang Mild yg dihabiskan untuk membuat banner itu mister? :D


    Cukup sebungkus Om…

    [Reply]

  38. December 29th, 2010 at 10:29 | #38

    selalu berbagi tips dan trik
    gimana gak keren coba :)


    Sekalian belajar Mas…

    [Reply]

  39. December 29th, 2010 at 12:17 | #39

    kunjugan menjelang final AFF.
    gambarnya cantik banget ya…?cara mengubah ukurannya gmn ya…?izin ya pak,gambarnya saya tempel di rmh maya ku…!


    Kalau ngrubah ukuran kan bisa gunakan mode visual Mas…
    Lalu didrag…

    [Reply]

  40. rahajahe
    December 29th, 2010 at 15:12 | #40

    keren imfonya sobat….


    Makasih sobat…

    [Reply]

  41. December 29th, 2010 at 15:15 | #41

    ijin nyoba ya masss


    Mari silahkan

    [Reply]

  42. December 30th, 2010 at 00:11 | #42

    Trims atas berbai ilmunya Pak.

    Salam

    “Ejawantah’s Blog”


    Sama2 Pak…

    [Reply]

  43. Pakde Cholik
    December 30th, 2010 at 07:38 | #43

    apik tenan mas, langsung ijon copy kodenya ya mas
    terima kasih
    salam hangat dari Surabaya


    Mari PakDhe…

    [Reply]

    Pakde Cholik Reply:

    salah ketik, harusnya” ijin “, bukan ” ijon ”
    maaf.

    [Reply]

  44. December 30th, 2010 at 11:41 | #44

    mangstap pak…
    kartu remi ada ga pak?


    Makasih…

    [Reply]

  1. January 1st, 2011 at 08:34 | #1

Current month ye@r day *

silakan buka katalog untuk melihat postingan lainnya
~ terima kasih ~