Posts filed under 'Diff'

Insert Contact Form

Wanna your own contact form into your MP site. it’s easy.

first
visit this site for register. –> http://kontactr.com/signup/
after submit and activate account via your email.
then login in http://kontactr.com/login/.
after login, you directly refer into several embed code that can use for website.
choose Embed Widget (first box)

embed_code

copy all the code and paste it in notepad.
leave it for a moment.

second
make a journal post.
write the title of journal. ie; Contact Form
then uncheck “edit html”, copy paste embed code from notepad (#1)

uncheck_html

no need to fill “Tags”.
Set access for everyone.
also uncheck “allow replies” –> i think contact form dont need replies, right?
save as draft –> just to see whether it’s good or whatever you like.
satisified?
save and publish it.
done.

—-
PS.
for Bahasa Indonesia, you can visit here
see live demo

5 comments August 12th, 2008

Creating a Nice Textarea/Comment-Box

A textarea is an element on a webpage that you can type into. In Multiply lay-out commonly used as commenting areas, and guestbook. All browsers have defaults styles for textareas which vary. You can take control of your textareas and style them with CSS.

in example of my lay-out, there is a writing : “Thanks for commenting” at bottom right box.
well you can do this with css and of course with your own style.

comment_box

first you should know that there is two syntax (command) for comment box in multiply lay-out, dh ; [.replybox textarea] and [textarea].
for [.replybox textarea] just leave it, dont mess it. we just play here with [textarea] syntax

for text background in comment box, use it with images. you can create it with your favorite image editor,such as photosop, etc.
after you’ve make text images, see the size of your created text images. i recomend that size of that text image is not larger than 400px.85px.
upload that text-image in your fav image hosting, otherwise you can upload it in multiply photos-album. make a note link that given for text-image.
leave it for a while.

then copy paste this css code and insert it in your custom css.

textarea {
background-image: url(http://YOUR LINK TEXT-IMAGE);
background-position: bottom right;
background-repeat: no-repeat;
background-color: #fff; /* this background-color is adjusted with your background text-images */
}

do preview and if your text-image in comment box is right in position, well done.
but if not, you must be edit your text-images and adjust it with width and height of your comment box.
after edit it, do preview again and if it’s correct, save it.

that’s it.
want more modified of your comment box?
ok, we can make more nice for submit button and Preview & Spell Check button.
just copy this css code below and paste it into your custom css ;

input {
border: 1px solid #ffffff;
margin: 0;
padding: 2px;
color: #444444;
}

input:hover {
border: 1px solid #000000;
margin: 0;
padding: 2px;
color: #444444;
cursor: pointer;
}

you can be a creative person to modify this 2 buttons. just change border color. otherwise you can change font-type, font-style, or font-weight
in input:hover, thats for command if cursor points the button. and yes, you can create it too.

here is additional css code for font :
font-family: "Verdana","Lucida Sans",Sans-Serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-size: 12px;

you can insert that css code of font into input or input:hover syntax.

there is one more trick for comment box, but it only works in IE6 browser and above.
you can insert this css code ;

input:focus, textarea:focus {
background-color: #eee;
}

this css code is used for matching any element that has keyboard input focus. Keyboard input focus describes any element that’s ready to receive user input. It can apply to a form control.
just try it. and i believe this :focus code make your multiply more cool.

30 comments March 26th, 2008

Modifikasi Favicon Multiply (Bahasa Indonesia)

favicon_desc.jpg

yang belum tahu makanan jenis apa yang namanya favicon, silahkan baca disini
tapi jangan lupa balik lagi kesini yak :P

berikut tutorial nya :

      1. pilih images/gambar yang mau dijadiin favicon. terserah mau tipe gambar .jpg, .png, i.gif, .ico. tapi lebih baik pilih tipe .jpg. kalau tipe .ico, mungkin kesulitan mau di-hosting dimana.

      2. ubah ukuran gambar yang akan dijadiin favicon menjadi ukuran 16px.16px (width: 16px, height: 16px) dan harus 16px. gak boleh lebih atau kurang.
      terserah mau tools apa(potosop kek, paint kek, acdsee) untuk ngubah ukuran gambar tsb. setelah gambar/images jadi 16px, upload gambar tsb. terserah mau upload dimana (Photobucket, Imageshack, dll). aku lebih pilih aplot aja di multiply. tapi inget!!, multiply tidak bisa nerima gambar dengan tipe .ico, jadi kalo mau aplot di MP yaa lebih baik gambar yg mau dijadiin favicon pilih tipe .jpg, .gif, atau .png.

      3. setelah diaplot, copy paste di notepad (jangan office-word/worpad) link/url dari gambar/image yang telah diaplot.
      misal : _http://tinypic.com/wefgwe.jpg
      inget!! hanya direct link yang di copy-kan, bukan yang ada <a href…>sampe sini, jelas??? kalo lum jelas, coba baca pelan2 dari poin 1. kalo perlu minum dulu deh.. :D

      4. setelah dipaste di notepad. tinggalin bentar tuh link di notepad.
      skr liatin di link/url hasil paste tadi, ada http:// iya kan??
      nah, ganti titik dua [:] di http:// dengan %3A (inget!! case-sensitive, bahasa indonesia-nya apa yak?)
      setelah diganti jadi gini :–>> http%3A//LINK_IMAGE_YANG_UDAH_DIAPLOT_DOT_COM

      5. skr copy paste di notepad kode berikut :

      6. dah dipaste. skr tinggal ganti di kode diatas tadi yang ada tulisan EDITED_IMAGE_URL dengan http%3A//LINK_IMAGE_YANG_UDAH_DIAPLOT_DOT_COM
      inget!! gak ada spasi ataupun tanda lainnya. lebih baik di copy dulu link imagenya yg udah dimodifikasi tadi, lalu sorot/blok tulisan EDITED_IMAGE_URL pada kode diatas, lalu paste.
      hasilnya seperti ini :

      7. dah selesai? lom.. :P
      skr copy kode di poin 7 tadi. skr masuk ke homepage multiply kamu. pilih customize site, trus pilih edit untuk site title. gak tau site title, itu tuh kotak yang paling atas. kalo di MP aku, yang ada tulisannya difa is [still] here.
      setelah itu, paste kode yg dicopy tadi. paste-in nya setelah tulisan judul .. atau setelah kode gambar (kalo yang pake gambar untuk site title-nya)
      misal nih di MP aku, edit site title-nya kayak ini:

      8. kalo udah, save, done.
      pasti lom muncul favicon-nya..iya kan?
      coba refresh/reload homepage MP kamu..kalo perlu, matiin tuh browser-nya trus idupin lagi. coba masuk ke MP kamu lagi..
      voila…favicon kamu muncul. kalo muncul, well-done deh. kalo lom muncul juga, coba deh: suruh temen kamu tuk liat MP kamu, tanyain ada gak favicon nya?
      kalo lom ada juga, skr coba kamu buka hasil aplot gambar yg mau dijadiin favicon. kalo di browser kamu muncul gambarnya, bearti link/url gambarnya dah bener.
      skr coba lagi reload/refresh MP kamu, muncul gak?
      kalo lom muncul juga, kemungkinan ada kesalahan di kode yang ada di site title tadi.
      coba ulangi lagi dari poin 1 di atas. kalo ngikuti bener2 dari awal, mudah2an pasti muncul favicon-nya.

      9. inget, untuk pengguna browser internet explorer (IE 6, IE7) favicon-nya biasanya gak muncul, munculnya kalo website tsb di-bookmark.
      buat pengguna mozilla, opera, dan browser laen pasti muncul favicon-nya disebelah link address.

      10. selesai..
      jika ada pertanyaan/bantuan/atau mau kasih sumbangan/donasi :P , silahkan tinggalkan komentar dibawah.

This tutorial was a translation from English to Bahasa Indonesia by Diff.
Click this link FavIcon: Icon beside your Site’s Name for the Original English Version.

11 comments March 19th, 2008


Calendar

September 2010
S M T W T F S
« Jan    
 1234
567891011
12131415161718
19202122232425
2627282930  

Posts by Month

Posts by Category