Beranda » CSS » :before dan :after Elemen Pseudo pada Sidebar

:before dan :after Elemen Pseudo pada Sidebar

:before dan :after Elemen Pseudo pada Sidebar

Ini adalah metode lain menggunakan properti :before dan :after dan akan bekerja tanpa masalah di browser apapun, termasuk IE8. trik ini akan membagi bar header sidenar ke kiri dan kanan bagian, di mana kiri akan berisi judul dan kanan link terkait.

Ide menghasilkan Adobe ini sebenarnya dibahas oleh css-trik yang disesuaikan dengan Blogger.

Bagaimana cara membuat Adobe seperti diatas pada Blogger

Langkah 1. Login ke dashboard Blogger Anda> pilih Template> Edit HTML, kemudian klik dimana saja di dalam kode area untuk mencari - tekan CTRL + F dan temukan tag </head>

Langkah 2. Tepat di atasnya, copy dan paste kode ini:

<style>
.module h2 {
  background-color: #D5D5D5;
  border-radius: 20px 0 0 20px;
  color: #FFFFFF;
  font-family: Verdana;
  font-size: 14px;
  line-height: 32px;
  margin: 0;
  padding: 0 0 0 20px;
  text-shadow: 2px 1px 1px #222;
}

.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
  padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: &quot;&quot;;
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px solid #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Langkah 3. Simpan Template.

Langkah 4. Sekarang buka Tata letak dan Tambah Gadget HTML/JavaScript baru dan pilih salah satu kode di bawah ini untuk masing-masing judul widget:

Latar belakang biru:

<div class="module blue">
<h2>Judul Widget <a href="Link URL">more</a></h2>
</div>

Latar belakang kuning:

<div class="module yellow">
<h2>Judul Widget <a href="Link URL">more</a></h2>
</div>

Latar belakang hijau:

<div class="module green">
<h2>Judul Widget <a href="Link URL">more</a></h2>
</div>

Latar belakang merah:

<div class="module red">
<h2>Judul Widget <a href="Link URL">more</a></h2>
</div>

Catatan: ubah teks "Judul Widget" dengan judul widget Anda dan more teks di sebelah kanan, kemudian tambahkan Link URL untuk itu.

Langkah 5. Setelah Anda menyimpan HTML/Javascript gadget yang berisi kode di atas, drag dan drop mereka tepat di atas widget Anda dan Simpan Pengaturan tersebut.

Semoga berhasil...

:before dan :after Elemen Pseudo pada Sidebar

Belum ada tanggapan untuk ":before dan :after Elemen Pseudo pada Sidebar"

Post a Comment