Cara Membuat Sidebar Ala Arlina Design

Assalamualaikum, syukur alhamdulillah pada kesempatan kali ini saya akan memberikan tutorial lagi bagi kalian semua yaitu Cara Membuat Sidebar Ala Arlina Design. Ini saya pelajari beberapa minggu akhirnya saya cari kodenya.

Cara membuatnya ternyata sangatlah mudah, kalian cukup menggunakan CSS Aja, bagaimana caranya berikut ini adalah tutorialnya.

Cara Membuat Sidebar Ala Arlina Design

Langkah pertama Log in Akun Blogger kalian, pilig Tema dan klik Edit HTML, masukkan CCS berikut ini di ]]></b:skin> :

/* Sidebar Arlina */
#sidebar{width:32.1%;float:right;padding:0 0 10px 10px}.sidebar a{color:#000}.sidebar a:hover{color:#f24a4a}.sidebar .widget{margin-bottom:20px;padding:0;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.05);}.sidebar .widget h2{position:relative;overflow:hidden;font-size:16px;margin-top:0;padding:15px 20px;border-bottom:1px solid rgba(0,0,0,0.08);margin:0;border-top:2px solid #f24a4a}.sidebar .widget h2:after{content:'\f005';font-family:fontawesome;font-size:1.2rem;font-weight:normal;float:right;margin:0 0 0 15px;color:#a4b0be;transition:all .6s}.sidebar .widget:hover h2:after{color:#f1c40f;animation:rubberBand 1s}#HTML6 h2:after{content:'\f09b'}#HTML85 h2:after{content:'\f079'}#Label1 h2:after{content:'\f02c'}.sidebar .widget-content{padding:20px;overflow:hidden}table.gsc-search-box td{vertical-align:middle;display:block;margin:10px 0}input.gsc-search-button{margin-left:0}td.gsc-search-button{width:auto}.BlogArchive #ArchiveList ul{line-height:2;font-size:18px}.BlogArchive #ArchiveList ul.posts li{list-style-type:square}.FeaturedPost h3{margin:0 0 10px 0;line-height:35px;font-size:20px}.FeaturedPost p{margin:10px 0;line-height:2;font-size:18px}#HTML85,#HTML1,#AdSense1,#HTML5,#HTML98,#HTML4{box-shadow:none}#HTML1 .widget-content,#HTML4 .widget-content{padding:0}#HTML5 .widget-content,#HTML2 .widget-content,#HTML3 .widget-content,#HTML4 .widget-content,#HTML8 .widget-content{padding:0;margin:auto;text-align:center}#HTML3,#HTML4,#HTML8{box-shadow:none;background:transparent;margin:0 auto 20px auto;text-align:center}#HTML5{text-align:center}

Kemudian Simpan Template.

Bagaimana, mudah banget kan caranya, bagi blogger pemula ini sangatlah tidak sulit.

Itulah Cara Membuat Sidebar Ala Arlina Design Dengan CSS, Selamat Mencoba. Blogger CSS Tutorial Widget

Ivhaa Netmedia

Ingin menjadi seorang blogger sukses dunia akhirat

• Share
• Share

Dapatkan Tips Menarik Setiap Harinya!

• Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
• Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
• Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense