Coding membuat lingkaran dan kurva di widget dan postingan tanpa image
-
Ini tips khusus untuk Anda para pemula. Untuk yang sudah ulung, silakan bagi-bagi tips di sini dan jangan sok pelit hehehehe….
Di blog wordpress ini, Anda bisa membuat lingkaran, garis pemisah, kotak siku maupun kotak dengan ujung kurva, yang bisa dibuat warna-warni baik backgroundnya maupun tulisan serta garisnya. Bisa tebal bisa tipis sesuka kita. Semua bisa dipasang di widget maupun postingan.
Saya akan meneruskan tips ini hanya untuk Anda yang berminat saja. Artinya, kalau tidak ada yang berminat dan tidak ada pertanyaan, tidak perlu diteruskan.
Nah untuk Anda yang berminat, sekadar sebagai bekal tanya jawab, silakan kopi saja kode yang saya tuliskan di bawah ini DALAM MODE HTML DI PAPAN EDITOR ANDA. JANGAN SEKALI-KALI DISWITCH ATAU DIOPER ATAU DIBUKA PADA MODE VISUAL. Pokonya begitu ditempel di mode HTML, langsung dipublish/terbitkan. Baru kemudian dilihat di tampilan jadi (front-end). Anda akan melihat contoh bentuk-bentuk kotak dan lingkaran.
Ini kodenya:
<div style=”height:4em;visibility:hidden;”>ANY CHARACTER HERE</div> Garis pembatas <div class=”aligncenter” style=”width:125px;”> <hr /> </div> <div style=”height:4em;visibility:hidden;”>ANY CHARACTER HERE</div> Garis pembagi putus-putus <div class=”aligncenter” style=”width:325px;height:3px;border-top:2px dotted #ff7500;border-bottom:2px dotted #ff7500;font-size:0;”>-</div> <div style=”height:4em;visibility:hidden;”>ANY CHARACTER HERE</div> <p style=”border-bottom:1px solid #ff7500;padding-bottom:12px;”>Garis Batas Bawah</p> <div style=”height:4em;visibility:hidden;”>ANY CHARACTER HERE</div> Teks di dalam kotak <p style=”border:4px solid #9fb6cd;border-radius:6px;padding:10px;”>INI SEKADAR CONTOH TULISAN DENGAN SEKELILINGNYA PEMBATAS BERUPA KOTAK DENGAN WARNA BERBEDA</p> <div style=”height:4em;visibility:hidden;”>ANY CHARACTER HERE</div> Teks di dalam kotak dengan background <p style=”border:4px solid #9fb6cd;border-radius:15px;background-color:#f3e88e;padding:10px;”>INI SEKADAR CONTOH TULISAN DENGAN SEKELILINGNYA PEMBATAS BERUPA KOTAK DENGAN LATAR BELAKANG DAN WARNA GARIS YANG BERBEDA</p> <div style=”height:4em;visibility:hidden;”>ANY CHARACTER HERE</div> Kotak rata bawah <p style=”border:solid 6px #9fb6cd;border-top-left-radius:12px;-khtml-border-top-left-radius:12px;-webkit-border-top-left-radius:12px;-moz-border-radius-topleft:12px;border-top-right-radius:33px;-khtml-border-top-right-radius:33px;-webkit-border-top-right-radius:33px;-moz-border-radius-topright:33px;padding:10px;”> INI SEKADAR CONTOH TULISAN DENGAN SEKELILINGNYA PEMBATAS BERUPA GARIS SIKU DI ATAS DAN LENGKUNG DI BAWAH. BISA JUGA DIBUAT BENTUK LENGKUNG ATAU KURVA DI ATAS</p> <div style=”height:4em;visibility:hidden;”>ANY CHARACTER HERE</div> KOTAK DENGAN POJOKAN KURVA <p style=”border:4px solid #9fb6cd;border-radius:15px;-khtml-border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;background-color:#f3e88e;padding:10px;”> INI SEKADAR CONTOH TULISAN DENGAN SEKELILINGNYA PEMBATAS BERUPA GARIS LENGKUNG DI ATAS DAN LENGKUNG DI BAWAH. BISA JUGA DIBUAT BENTUK LENGKUNG ATAU KURVA BERADA DI SEBELAH MANA SAJA </p> <div style=”height:4em;visibility:hidden;”>ANY CHARACTER HERE</div> <div style=”border:solid 15px #9fb6cd;border-radius:100px;-khtml-border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;width:140px;height:140px;text-align:center;font-size:400%;color:#cd3278;line-height:140px;padding:15px;”> KICAU </div> <div style=”height:4em;visibility:hidden;”>ANY CHARACTER HERE</div> <div style=”height:4em;visibility:hidden;”>ANY CHARACTER HERE</div>Oke?
Sementara begitu saja dulu ya.
Semangaatttt…Blog yang perlu diperbaiki adalah: (hanya ditampilkan ke pengguna yang sudah login)
-
Sekadar menambahi, model kotak dan bulatan yang sudah jadi bisa dilihat contohnya di sini.
-
kalau boleh tahu, itu pake CSS versi berapa om?
terus apa fungsi atribut visibility:hidden? mengapa harus dihidden? -
-
Itu pengkodean biasa untuk formatting di wp.com. Visibility hidden berfungsi untuk menambah spasi. Di sana ada style: height yang bisa diubah2 besarannya untuk mengatur seberapa tinggi spasi tambahan yang mau kita buat.
Kalau dilihat di mode visual, maka mode visual akan “menghapus” kode yang ditulis dalam mode HTML karena memang demikian setting otomatis mode visual di wp.com.
Mode visual (WYSWYG) diperuntukkan bagi koder pemula yang belum hafal kode-kode HTML.Untuk blogger yang sudah mahir pengkodean di page/post editor maka diberi pilihan oleh wp.com untuk mematikan fungsi mode visual itu agar tampilan postingan atau halaman bisa seperti yang mereka formatkan.
Lihat di Dasbor > Pengguna > Pengaturan Pribadi >
Nah di sana ada opsi personal “Nonaktifkan penyunting visual ketika menulis” yang bisa kita klik kalau kita memang sudah mahir menulis dengan HTML.
Pilihan itu saya ambil bukan karena masalah mahir pemformatan, tetapi agar tidak ada kode yang rusak akibat mode visual.
-
Visibility hidden berfungsi untuk menambah spasi. Di sana ada style: height yang bisa diubah2 besarannya untuk mengatur seberapa tinggi spasi tambahan yang mau kita buat.
bukannya bisa pake tag
om? -
owww … rupanya tag <br/> di sini diberlakukan
maksud saya bukannya bisa pake tag <br/> om untuk nambah ‘spasi’?
-
Tag
tergantung css masing-masing tema tetapi kiita tidak tahu persis berapa lebar jaraknya. Untuk jarak 2 cm atau 5 cm misalnya, berapa tumpukan kode
harus digunakan?
Kalau pakai ruang yang dihidden tinggal ngasih berapa tingginya saja. Kalau di contoh atas saya gunakan 2 atau 3 kali kode, sebenarnya cukup satu baris kode dan ubah tingginya (misalnya dari.4em menjadi 2em, 5 em dst, dan kita sudah tahu berapa tinggi 1em itu).
Kira2 sih begitu. -
wah maaf beberapa kode
<br />ngilang karena saya lupa pakai backtick kode atau tidak saya kasih spasi kodenya.
Ya begitulah mangsudnya. -
-
perintah style itu sudah menunjuk css, tapi css yang langsung disisipkan pada tag. karena css eksternal di wp.com belum bisa dikostumisasi (class ataupun id). menggunakan perintah yang ditulis om duto adalah cara yang cerdas.. usefull…
-
-moz-border-radius-topleft:12px;border-top-
right-radius:33px;
berguna untuk browser mozilla
-webkit-border-top-right-radius:33px;
untuk safari dan chrome
-khtml-border-top-right-radius:33px;
nah ini saya belum tau…
-
KHTML (engine browser untuk Konqueror, browsernya KDE desktop) itu cikal bakalnya engine webkit yg dipake safari+chrome ^_^
.
-
-
@Isaninside + Inimu:
Iya betul itu Om.= Lihat misalnya di sini: http://blog.nixternal.com/2009.06.19/css-border-radius/
Saya tambah referensi bukannya tambah cerah ini Om, malah tambah puyeng karena penasaran hehehe…
-
@om duto
Mantap itu om, referensi juga oke… “tambah puyeng” cikal bakal sesuatu yang baru.. wkwkwkwk. om duto tua-tua keladi, semakin tua semakin menjadi-jadi..
- Topik ‘Coding membuat lingkaran dan kurva di widget dan postingan tanpa image’ tidak lagi menerima balasan baru.
id.WordPress.com Forums 