Membuat Backgroud Teks pada Postingan Blog

Memasang atau membuat Background gambar pada sebuah tulisan secara sederhana dapat dilakukann dengan penggabungan Kode HTML ke dalam tulisan itu sendiri, cara ini lebih mudah untuk dipraktekan dan dalam pelaksanaan pembuatannya sendiri hanya hanya diperlukann sebuah url gambar yang nantinya harus ditanamkan dalam rumusan html tersebut. 

Tips 

Memberikan sentuhan yang berbeda pada Widget atau gadget di blog adalah salah satu cara untuk membuat blog kita kelihatan menarik. Tetapi hal tersebut menjadi dilema bagi para Blogger, karena semakin banyak kode-kode HTML yang kita pasang di template akan membuat semakin lambat loading blog. Sebelumnya saya sudah menulis tentang cara mempercepat loading blog dengan CSS Compressor, jadi untuk temen-temen yang tetap ingin menambah kode-kode HTML ke dalam template sebaiknya melakukan kompres file agar loading blognya tidak lamban.

Colour Background Style

Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:

#side-wrapper {

float: left;

margin: 0px 0px 0px 0px;

padding: 25px 0px 0px 0px;

width: 315px;

background: #ffffff;

}

Tambahkan kode merah seperti di atas pada widget yang ingin anda tambahkan warna background. Untuk warna, anda bisa menggunakan kode warna yang terdapat pada page menu di blog ini, atau Tool Online untuk mengetahui kode warna, dan jangan lupa menggunakan tanda pagar (#) sebelum kode.

Image Background Style

Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Nah, untuk pemasangan style ini, ada beberapa perubahan pada sintaks. Berikut selengkapnya:

.post-footer {

display: block;

margin: 15px 0px 25px 0px;

padding: 7px 20px 7px 20px;

text-align: left;

font: $postfooterTextFont;

color: #ffffff;

font-weight: normal;

line-height: 1.6em; 

text-decoration: none;

background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwBBgBQ2MKUS8p_VKFXz5ivdNYRwI3rEFO_9xDgOfQvJn-GIc4nA2_TBe2-Kzxd6qcDR3TxI_XcTkJJh8ndNBoR0xaC-KBJQxbib8-4QhWqfZZhF5BGTBHQuv_wB-b0Ixb8S6EmEfchiM/s1600/banner+demomaskolis.jpg"); 

background-color:#0092dd;

background-position:top right;

background-repeat:no-repeat;

border: 1px solid $postfooterBorderColor;

}

Keterangan :

• Background Image diisi URL gambar.

• Background Color diisi kode warna yang sesuai dengan gambar.

• Background Position diisi dengan posisi penempatan gambar. Misal top-left, bottom-left, top-right, bottom-right, center-right, center-left.

• Background Repeat diisi ke sebelah mana gambar akan diulang. Untuk ke atas, gunakanrepeat-y menjadi: background-repeat: repeat-y; Untuk ke samping, gunakan repeat-xmenjadi: background-repeat: repeat-x; Dan jika tidak ingin diulangm gunakan no-repeatseperti contoh awal.

Hover Image Background Style

Style unik, seperti yang digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, namanya HOVER STYLE. Teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:

#main .widget {

margin: 0px 0px 0px 0px;

padding: 0px 25px 20px 25px;

}

Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:

#sidebar .widget {

margin: 0px;

padding: 0px;

}

Pemberian efek ini sangat mudah. Copy-Paste seluruh kode widget dan taruh di bawahnya, lalu tambahkan :hover pada akhir kata widget dan beri style background di dalam kode tadi. Selengkapnya:

#main .widget {

margin: 0px 0px 0px 0px;

padding: 0px 25px 20px 25px;

}

#main .widget:hover {

background:#e3e3e3;

}

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Membuat Backgroud Teks pada Postingan Blog
Ditulis oleh Unknown
Rating Blog 5 dari 5

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://tips-triks-ilmu-komputer.blogspot.com/2014/10/membuat-backgroud-teks-pada-postingan.html. Terima kasih sudah singgah membaca artikel ini.
Anda Ingin Kursus Mastering Komputer ?
KLIK DISINI