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:
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.
Itulah cara membuat border dan background pada posting
sist :) nanya donk ,, inikan blognya sist ada background warna birunya yah ?? nah aku tuh mau ngrubah backgroundnya cuma lupa tutorialnya , sbelumnya udah pernah ku coba trus brhasil ini mau ngrubah lgi lupa caranya , mhon dibantu donk :D
ReplyDeletebackground warna biri iti letaknya di bawah code Main atau:
Delete.main-outer {
background:#C4E1FF url();
}
Makasih tutorialnya. Blockquote-nya bagus :)
ReplyDeletethank you
ReplyDelete