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 dan berikut 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.

Berbagi :