Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Trik Percantik Image Posting dg CSS3 Border Radius Property

Ini benar-benar trik sungguhan. He... Sungguh, lhoh! Tak banyak blogger yang tahu cara ini. Yah ...mungkin saja baru di gubhugreyot saja yang ada (uhuiii...Sombong dikit boleh, khan?!). Bener! Sungguh! Hui ... katanya suruh banyak posting yang original! Yang jelas aku sudah coba browsing dan tak ketemukan satupun yang sama dengan "teknik & trik" yang coba aku gunakan. Tapi .., ya .. itu, nggak tahu klo browsingnya ada nyang kelewat. Oi ... namanya juga manusia, broer..., mas... mbak , bu..., mbah, kek..., ... mbuh sopo maneh... sik rung tak sebut!

Dengan cara baru ini semua menjadi terasa gampang, cepat dan bisa dilakukan siapa saja. Sebenarnya,sih, ada cara lain yang sangat-sangat simpel kode html-nya, tapi sayang di opera nggak support seperti di Safari, Crhome atau mozilla ... Yah ...tak apalah, sementara kita gunakan cara yang ini dulu. Yang penting sampeyan semua jadi lebih bisa berimprovisasi dengan gambar-gambar di blog (gambar posting dan yg lain).

D E M O


Gambar di atas dan yang di bawah ini salah satu contoh image yang dibuat menggunakan css3 border radius (rounded corners) dengan memainkan border radius dalam nilai persen (%). Dalam tutorial ini juga tak disertakan xHTMLnya karena semua kode tersedia di halaman demo.



Silahkan lihat contoh gambar lainnya melalui link demo di bawah ini:

DEMO: Klik untuk lihat demo lain beserta xHTML-nya!

Kode CSS
.GRphotokuL,.GRphotokuR,.GRphotoku{
      padding:1%; /* code by: gubhugreyot */
      background:#eee;
      box-shadow:0 0 10px #555;
}
.GRphotokuL{
      float:left;
      margin:5px 15px 5px 0;
}
.GRphotokuR{
      float:right;
      margin:5px 0 5px 15px;
}
.GRphotoku{
      margin:15px auto;
      display:block;
      text-align:center;
}

Cara menggunakan:
  1. Simpan kode css di atas kode ]]></b:skin>
  2. Untuk menampilkan image/gambar di blog gunakan kode html seperti yang terlihat di demo.
  3. Untuk gambar di sebelah kiri (float:left;} gunakan class="GRphotokuL"
  4. Untuk gambar di sebelah kanan (float:right;} gunakan class="GRphotokuR"
  5. Untuk gambar di tengah gunakan class="GRphotoku"
  6. Untuk merubah berbagai bentuk lengkungan image beserta sudut lengkungnya, rubah nilai border-radius dengan memperbesar atau memperkecil (dalam %).
  7. Nilai persen (%) harus dengan kelipatan 10 karena diluar nilai tersebut tak akan bekerja (10%, 20%, 30% ... s/d 100%).
  8. Jika background berwarna gelap, lakukan beberapa perubahan warna pada box-shadow, background dan border.
  9. Panduan menyimpan kode css dapat anda buka di deret menu sebelah kiri blog (Special Tutorials).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Kemis WAGE, February, 29, 2012

» Happy Blogging - gubhugreyot «

8 komentar:

  1. Bos tolong kasih tutorial juga buat slide show tapi berbingkai, soalnya saya buat slide show gak berbingkai.
    Tolong sms ke nomer : 081382882919
    Entar saya tlp si bos, Penting banget. tks

    BalasHapus
  2. Pro Admin :

    Nich tak kasih alamat email saja.
    Silahkan hub:
    rhiebrandall@gmail.com

    Salam ....

    gubhugreyot

    BalasHapus
  3. hahahah,
    aneh tu orang ya bg,
    dah dia yang butuh tapi kita pula di suruhnya sms dia dan kasih tutorial

    BalasHapus
  4. Ha ... ha ... Dunia memang aneh! Bukan dunia klo nggak aneh, tapi yang lebih spektakuler memang manusia diciptakan untuk berulah yang aneh2. Ha .. hanya binatang saja yang tak suka aneh2. Makanya biar disebut manusia berbuatlah yang aneh2! Ha ....
    Thank's, BlogWare Team and ...

    God Bless you!

    gubhug reyot

    BalasHapus
  5. Gubhug Reyot emang keren abis, ijin mengaplikasikan tutorialnya mas, ini alamat blog saya: klik!. Saya ijin pasang link blog ini di blog saya ya. Makasih Bro!

    BalasHapus
  6. SuMber-sumbER-sUmbeR insfirasi bungget Mas..
    izin pake ilmu ne, moga terus inspiratif..Belajar ngeblogs
    (salam buat Ibu Kartini..he,)

    BalasHapus
  7. Kang mAs Mbak Yuuu ... Aku Ikuttan Dong ... aku ojo di tinggal pokok'e Aku melu... !!! ha ha ha..

    BalasHapus

 
GR | Edited by | gubhug reyot