Membuat Background dan Border Shadow Pada Sidebar Blog

Membuat 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:

1. Login ke akun blogger.
2. 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 {
margin: 0px;
}

.main-inner .widget ul,
.main-inner .widget li,
.main-inner .widget ul li,
.main-inner .widget #ArchiveList ul.flat li {
margin: 0px;
padding: 2px;
list-style: none;
}

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.