BREAKING NEWS :
Loading...

Membuat border dan background pada posting

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
2.Expand template widget dan tick F3 atau CTRL + F cari kode 
.post-body {
3.Letakkan kode berikut ini diatasnya:

.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;
}
Atau seperti gambar di bawah ini jadinya:

Membuat border dan background pada posting

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:

.post-outer {
-moz-border-radius: 25px;
border-radius: 25px;
border: 3px dotted #00CACA;
background: #FFD0FF;
padding: 15px 20px;
margin: 0-20px 20px;
}
.post-body {
Atau letakkan di bawah kode  .post-outer { dan kalau di bawahnya ada kode embel-embel tolong hapus dulu xD

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.

Itulah cara membuat border dan background pada posting 

Subscribe to receive free email updates: