Membuat border dan background pada posting blog

| 7 Mei 2013 | |


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:


Untuk ukuran px bisa diubah sendiri menurut keinginan, kode warna juga boleh ditukar sendiri dan url image/gambar yang aku tandai dengan warna pink 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 ^^

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.

selamat mencoba chingu ^^
Posting Lebih Baru Posting Lama
meyy al-idrus. Diberdayakan oleh Blogger.
© Design 1/2 a px. · 2015 · Pattern Template by Simzu · © Content ♥Welcome To My Site♥