Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Background dan Border Shadow Pada Sidebar Blog

Background dan Border Shadow 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).
Background dan Border Shadow Sidebar Blog
.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.

Berlangganan artikel via email

38 Response to "Membuat Background dan Border Shadow Pada Sidebar Blog"

keren sob setelah saya lihat demonya...
otak atik css memang asyik banget ya :D

Balas

bikin lemot blog ga nih mas.. klo di pasang????

Balas

Hasilnya jadi keren, mantep gan :)

Balas

Sepertinya sudah mahir sekali nih gan main css nya. thanks sudah share.

Balas

wow...keren banget mas kalau pakai CSS.
Sampai sampai hatiku dag dig dug

Balas

keren tutornya sob ....

Balas

jadi terlihat seperti blog profesional ya mas... :)

Balas

trus kalo buat yg kedip kayak punya mas gimana

Balas
avatar
Anonymous

langsung ijin ngobrak abrik template saya kang

Balas

Apakah ini tidak mempengaruhi loading blog?

Balas

info yang bagus.. :D

Balas

mas andes risky selalu bermanfaat jika memposting artikel, nice.

Balas

ini pengaruhnya bikin blog tambah sexy mbak, urusan loading blog tergantung dari banyaknya widget yang sudah terpasang sebelumnya

Balas
avatar
Anonymous

Kenapa dengan CSS nya mas rizky.. sampai-sampai dag dig dug gitu.. keluarin aja non, nanti kalau ndak dikeluarin bisa meledak lhoo.. hehehe...

Balas
avatar
Anonymous

Mempercantik blog dengan CSS tanpa membuat loading menjadi berat... lanjoetkan mas.. maju terus pantang mundur.. hehehehe...

Balas

.: mantab kawan, jadi lebih elegan...^_^

Balas

Wah sudah pakai background & border shadow, ditambah lagi pakai border radius.. jadi oval tuh setiap sisi border sidebar nya. Jadi mantab penampakan nya! :D

Balas

wah mantep ni mas andes..tar ane coba

Balas

nice tips sukses selalu buat blognya

Balas

Tutorial yg sangat berguna sekali sobat, sangat membantu kita semua, terima kasih sudah berbagi

Balas

tips blogging yang bagus. thanks udah share

Balas

Tutorial yg Bagus....jadi kayak blog professional deh...
Kunjungi juga aldhinya.blogspot.com

Balas

wow hanya menambahkan CSS, saya sudah menerapkan meski sedikit berbeda hasilnya ok gan. salam kenal.

Balas

THX GAN INFONYA SALAM KENAL http://idegemilang.blogspot.com/

Balas

mas mau nanya gimana ya caranya mengubah background judul sidebar menjadi efek ribbon,, pleasee!!!

Balas

bisa kasih contoh dulu mas efek ribbon yang seperti apa..

Balas

kayak gambar ini mas :

http://www.net-kit.com/wp-content/uploads/2010/06/pure-css-3d-ribbon.jpg

Balas

iya mas nanti saya share tutorialnya

Balas

Ok mas, saya tunggu tutorialnya..
jika sudah di share tolong di Link kesini ya :)

Balas

Mantap sangat Bro, Dah ane terapkan..
Hasilnya mulus tak ada kendala sama sekali, Makasih tutorialnya..

Balas

Kalo sempat tolong tutorial untuk cara mendapatkan URL gambar dari google code dari gambar komputer kita. Dah coba tutorial kawan Blogger lain tapi ane belum bisa..
Spesial Thanks..

Balas
avatar
Anonymous

Infonya Bagus Banget Teman,thanks

Balas

mksih sob tutornya, saya jajal dlu soalny tmplate saya tidak ada baground borderny hhe..
-keep blogging-

Balas

Makasih gan, akhirnya ketemu juga :D
salam kenal.
thecoret.blogspot.com

Balas

ini yg uda seminggu ini ane cari",,makasih berat gan,,
tapi ane masih sedikit penasaran neh,,tampilan widget ane, di isi kolomnya ga ada border kyak cdi demo gan..
mohon arahannya, kiranya agan sudi mampir ke blog ane n kasih reviewnya
dkarea.blogspot.com

Balas

Ini baru mantab gan,,, tinggal ngepas2in ama selera kita aja... Makasih banyak atas berbagi ilmunya gan... Salam sukses

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Background dan Border Shadow Pada Sidebar Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode