Cara Membuat Sidebar Ala Arlina Design

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

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

Belum ada Komentar untuk "Cara Membuat Sidebar Ala Arlina Design"

Posting Komentar

Catatan Untuk Para Jejaker
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel