Cara Menyesuaikan Kode Kotak HTML

Hi sobat blogger, dalam sebuah blog, sering kita membuat kalimat/paragraf quote. Namun tampilannya kadang-kadang tidak menarik dengan bawaan blogger. Nah, pada tips kali ini saya akan mencoba memodifikasi bentuk quote. Mungkin sebagai contoh bisa sobat blogger seperti di blog ini. Tetapi yang saya pasang di blog ini bukanlah berdasarkan tips ini. Saya meneditnya dari template bawaan blogger itu sendidir. Dan untuk tahu lebih banyak tentang bagaimana untuk menggunakannya silahkan Check out tutorial ini

Dalam tips ini saya akan memberikan tiga tipe background kodenya, jadi kalo ada yang tertarik, silahkan di jalankan aja perintah yang diminta di bawah ini. Kalopun masih ada yang kurang jelas, monggo kita sama-sama belajar sobat blogger.

OK.sebelum kita melangkah lebih jauh, saya akan memberikan kode-kode dari ketiga style background nya buat sobat.

1. Style Satu

Contoh backgroun 1

Kodenya adalah sebagai berikut:

.code { margin : 10px; padding: 0px 25px 5px 20px; background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKWnNSUOt5VrR_CyoZwaSTo7METrhhzfp3ruHbOzcsTAAeFmHwcl-QdcRME6CTpHkv_lGpA6dOba2v0qwIWUnf1CvHRQYt1eUDBNz8jLM0jioxLqaTqoo_-7oh-xUz6qdAUpN1YJKCK6S/s1600/codesbg1.png) no-repeat top left; font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #767675; border: 1px solid #767675;

2. Style Dua

Kodenya adalah sebagai berikut:

.code{ margin : 15px 15px 15px 15px; padding : 40px 10px 10px 10px; clear : both; list-style-type : none; background : #f9f9f9 url(http://i764.photobucket.com/albums/xx289/kartajaya/codeview2.gif) no-repeat left top; border : 3px solid #eeeeee; color : #7D7D7D; }

3. Style Tiga

Kodenya adalah sebagai berikut:

.code { margin : 0 20px; padding: 70px 20px 20px 40px; background : #F9F9F9 url(http://i764.photobucket.com/albums/xx289/kartajaya/codeview3.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #BFBFBF; }

Oke setelah sobat blogger menemukan style background kode yang akan sobat blogger pasang pada blog sobat, sekarang kita mengarah pada cara menampilkannya pada blog kita.
Nah, sekarang COPY kode style baclground yang anda suka, kemudian cari kode ]]></b:skin> pada Edit HTML blog anda. Setelah itu letakkan kode stylenya di atas (sebelum) kode ]]></b:skin>.Kemudian silahkan Simpan Template blog anda.

Setelah selesai menyimpan kode stylenya sekarang kita akan membuat kalimat/paragraf/kode tampil dengan backgroun pada postingan blog kita. Caranya adalah dengan menambahkan kode berikut ini pada postingan anda, dengan catatan saat memasangnya anda harus berada dalam format HTML.

<div class="code">  
Letakkan teks/kode anda di sini
</div>

Setelah selesai, silahkan  Publikasikan tulisan/postingan anda. Dan selesai. Semoga bermanfaat dan mohon maaf jika ada kesalahan.