Membuat Border dan Background pada Posting
Sebelum ini aku sudah menuliskan artikel tentang cara membuat border pada judul posting dan sekarang aku akan menuliskan tutorial tentang membuat border dan background pada posting atau artikel contohnya seperti gambar di atas border biru melengkung dan ada background polka dots pink di dalamnya. Langkah-langkahnya seperti berikut:
1.Masuk Dashboard > Template > edit HTML
.post-body {
3.Letakkan kode berikut ini diatasnya:
Atau seperti gambar di bawah ini jadinya:
.post-outer {
-moz-border-radius: 25px;
border-radius: 25px;
border: 3px dotted #00CACA;
background :
url(http://i1243.photobucket.com/albums/gg546/alice4ja/10382769_zps4cda3464.gif);padding: 15px 20px;
margin: 0 -20px 20px;
}
Untuk ukuran px bisa diubah sendiri menurut keinginan kode warna juga boleh ditukar sendiri dan url image/gambar yang aku tandai dengan warna purple/ungu juga boleh diubah sendiri. Dotted adalah jenis border dan bisa diubah juga menjadi dashed, solid, dll. Itu adalah kalau background posting mau ditaruh warna kesukaan, pakai kode di atas/no 3, dan kalau ingin menaruh warna background dengan warna biasa maka kodenya jadi seperti di bawah:
Atau letakkan di bawah kode .post-outer { dan kalau di bawahnya ada kode embel-embel tolong hapus dulu xD
.post-outer {
-moz-border-radius: 25px;
border-radius: 25px;
border: 3px dotted #00CACA;
background: #FFD0FF;
padding: 15px 20px;
margin: 0-20px 20px;
}
.post-body {
Warna pink itu kode warna dan bisa diubah juga sesuai keinginan, dotted itu jenis nama border nya, bisa diubah sendiri misalnya menjadi solid, dashed, dll sesuai keinginan dan tentang jenis-jenis nama border aku pernah juga tuliskan atrikelnya sebelum ini.
4.Tekan pratinjau dulu jadi atau tidak? kalau jadi baru tekan simpan template xD.
Categories:
Tips & Trik
0 komentar:
Post a Comment
Pembaca yang baik, berkomentar lah yang bijak..
dan jangan lupa klik LIKE dan Berbagi lah untuk kepentingan bersama