Membuat efek kotak tulisan dengan css

Kategori CSSSingkat kata singkat cerita, tambahkan kode berikut pada bagian <head>....</head>, jika anda sudah menggunakan css secara terpisah cukup tambahkan css yang sudah ada.

 

 

.kotak-ajaib {
   style="width: 200; height: 50px; overflow: auto; 
   scrollbar-face-color: #CE7E00; 
   scrollbar-shadow-color: #FFFFFF; 
   scrollbar-highlight-color: #6F4709; 
   scrollbar-3dlight-color:#11111; 
   scrollbar-darkshadow-color: #6F4709; 
   scrollbar-track-color: #FFE8C1; 
   scrollbar-arrow-color: #6F4709; 
   background-color:#659EC7;
   border:1px solid #ccc;padding:5px;
}

kemudian tambahkan kode HTML berikut pada template/source kode web anda. Menyisipkannya bebas selama dalam area <body>...</body>

  <div class="kotak-ajaib">Isi postingan atau apa aja lah...</div>

setelah itu simpan dan coba lihat hasilnya..

ini contoh hasilnya :

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Ini contoh isi nya...

Maaf untuk yang menggunakan wp atau blog mungkin harus sedikit menyesuaikan tempat menyisipkan kodenya jadi silahkan lihat template serta css masing-masing.

 

Semoga bermanfaat
Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

  • 147 Nama warna dalam css
    Sebelumnya saya menulis tentang 6 cara penulisan warna dalam css. Pada tulisan ini saya berbagi tentang 147 nama warna yang bisa anda gunakan dalam css. Nama-nama warna ini sering dikatakan sebagai keyword yang merujuk pada warna tertentu yang hampir didukung oleh semua browser yang ada sekarang.
  • Kenapa menggunakan css (Cascading Style Sheets)
    CSS sudah tidak asing lagi dikalangan para blogger atau pengembang website karena css sangat mudah digunakan dan cara penulisannya pun sangat gampang diingat. Tapi tahukah anda masih banyak lagi alasan kenapa css menjadi idola para blogger dan pengembang? Dalam artikel ini saya akan mengemukaan alasan-alasan kenapa menggunakan css.
  • Cara membuat css dengan dreamweaver
    Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver.
  • Membuat efek gambar dengan css
    CSS memiliki kemampuan efek khusus yang bisa digunakan untuk memperindah tampilan web atau blog. Selain bisa kita terapkan pada objek-objek tulisan, tabel, dan list kita juga bisa gunakan untuk mengatur tampilan gambar.
  • Membuat efek gambar di blog dengan css
    CSS sangat felxibel bisa digunakan untuk banyak keperluan, berbagai media, semua platform dan semua sistem pengelola konten (wordpress, blogger, joomla dll). Penggunaanya juga sangat mudah sehingga kita bisa brekreasi dengan tulisan maupun gambar. Kali ini saya akan berbagi cara bagaimana menyisipkan efek gambar dengan css pada blogger.

Kiriman terbaru