HomeMembuat Background dan Border Shadow Pada Sidebar Blog – merupakan cara
sederhana untuk membuat border pada sidebar blog.
Kenapa saya posting mengenai cara Membuat Border Shadow Pada Sidebar Blog ini,
karena pada tahap awal setiap template blog bawaan asli dari blogger/default
blogger memang sudah tersedia sidebar, akan tetapi masih belum memiliki border
maupun background. Dengan adanya hal ini maka untuk meminimalisir sahabat
blogger yang mungkin ingin membuat border pada sidebar blog maka bisa dengan
mudah menggunakan tutorial ini. Pada judul widget juga sudah sedikit saya
modifikasi sehingga saat judul widget tersebut tersentuh mouse atau hover maka
akan menampilkan teks efek 3D. Sedangkan untuk penerapannya kedalam blog, maka
berikut adalah tutorial cara Membuat Border Shadow Pada Sidebar Blog:
- Login ke akun blogger.
- Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).
| .main-inner .sidebar .widget h2 { margin-top: 0px; margin-bottom: 1px; margin-left-value: 0px; margin-right-value: 0px; padding: 3px 3px; color: #00ff00 !important; text-align: center; border: 1px solid #666666; border-radius: 4px; box-shadow: 1px 1px 6px 1px #7f7fff; background: #000000; font: bold 25px Helvetica, Arial, Sans-Serif; text-shadow: 1px 1px #ff0000, 2px 2px #ff0000, 3px 3px #ff0000; -webkit-transition: all 0.12s ease-out; -moz-transition: all 0.12s ease-out; -o-transition: all 0.12s ease-out; } .main-inner .sidebar .widget h2:hover { text-shadow: 1px 1px #ff0000, 2px 2px #ff0000, 3px 3px #ff0000, 4px 4px #ff0000, 5px 5px #ff0000, 6px 6px #ff0000; } .main-inner .sidebar .widget-content { margin: 0px; padding: 2px 2px; text-align: justify; text-decoration: none; border: 1px solid #674ea7; border-radius: 4px; box-shadow: 1px 1px 6px 1px #7f7fff; background: #f2f2f2; } .main-inner .widget #ArchiveList { .main-inner .widget ul, |
Keterangan:
- Untuk merubah warna background judul widget silahkan ganti tulisan berwarna merah dengan dengan warna lain yang di inginkan.
- Untuk merubah warna font judul widget silahkan ganti tulisan berwarna biru dengan warna lain yang di inginkan.
- Untuk merubah warna font judul widget silahkan ganti tulisan berwarna ungu dengan warna lain yang di inginkan.
- Untuk merubah warna background konten widget silahkan ganti tulisan berwarna orange dengan warna lain yang di inginkan.
- Untuk merubah warna border dan efek menyala silahkan ganti tulisan berwarna hijau dengan warna lain yang di inginkan.
3. Klik Terapkan ke Blog
Disalin dari Artikel : Mas-andes.blogspot.com
Tidak ada komentar:
Posting Komentar
Terimakasih telah berkunjung di blog kami ini, semoga bermanfaat, dan tinggalkan pesan dan saran dari anda.di kolom tersedia di bawah ini. Terimakasih.Jazakumullah khairan.