Dalam tutorial yang ini saya akan mempostingkan bagaimana
cara membuat latar belakang posting dengan gambar dengan teknik code CSS akan
membuat latar belakan postingan lebih bagus kalian bisa melihat contohnya
* Cara pembuatannya sebagai berikut
* Login ke blogger masuk ke Rancangan pilih Edit HTML
* Cari kode ]]></b:skin> dan letakan kode CSS dibawah ini diatas atau sebelum kode ]]></b:skin>
pre {
font-size: 12px;
padding: 0;
margin: 0;
background: #f0f0f0;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
line-height: 20px; /*--Height of each line of code--*/
background: url(https://sites.google.com/site/shofisanjaya/image/pre_code_bg.gif) repeat-y left top; /*--Background of lined paper--*/
width: 600px;
overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
overflow-Y: hidden; /*--Hides vertical scroll created by IE--*/
}
pre code {
margin: 0 0 0 40px; /*--Left Margin--*/
padding: 18px 0;
display: block;
}
* Alamat url gambar https://sites.google.com/site/shofisanjaya/image/pre_code_bg.gif Bisa kalian ganti dengan gambar yang lain dibawah ini pilihan url gambarnya:
warna hitam:
https://sites.google.com/site/shofisanjaya/image/pre_code_bg_blk.gif
warna kuning:
https://sites.google.com/site/shofisanjaya/image/pre_code_bg_ylw.gif
* Setelah itu masukan kode dibawah ini ketika kalian ingin mempostingkan suatu Teks atau Code HTML
<pre><code>
Teks kalian yang ingin ditulis atau kode html
</code></pre>
* Cara pembuatannya sebagai berikut
* Login ke blogger masuk ke Rancangan pilih Edit HTML
* Cari kode ]]></b:skin> dan letakan kode CSS dibawah ini diatas atau sebelum kode ]]></b:skin>
pre {
font-size: 12px;
padding: 0;
margin: 0;
background: #f0f0f0;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
line-height: 20px; /*--Height of each line of code--*/
background: url(https://sites.google.com/site/shofisanjaya/image/pre_code_bg.gif) repeat-y left top; /*--Background of lined paper--*/
width: 600px;
overflow: auto; /*--If the Code exceeds the width, a scrolling is available--*/
overflow-Y: hidden; /*--Hides vertical scroll created by IE--*/
}
pre code {
margin: 0 0 0 40px; /*--Left Margin--*/
padding: 18px 0;
display: block;
}
* Alamat url gambar https://sites.google.com/site/shofisanjaya/image/pre_code_bg.gif Bisa kalian ganti dengan gambar yang lain dibawah ini pilihan url gambarnya:
warna hitam:
https://sites.google.com/site/shofisanjaya/image/pre_code_bg_blk.gif
warna kuning:
https://sites.google.com/site/shofisanjaya/image/pre_code_bg_ylw.gif
* Setelah itu masukan kode dibawah ini ketika kalian ingin mempostingkan suatu Teks atau Code HTML
<pre><code>
Teks kalian yang ingin ditulis atau kode html
</code></pre>
0 comments:
Post a Comment
Tinggalkan komentar anda...