:before dan :after Elemen Pseudo pada Sidebar

CSS

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

Artikel Terkait

  • Pengertian Selector, Property dan Value
    Setelah mengetahui cara menginput kode CSS ke halaman HTML, saatnya untuk memahami kode CSS itu sendiri. Kali ini kita akan membahas inti dari CSS, yakni Pengertian Selector, Property dan Value pada CSS. Pengertian Selector CSS Karena kode CSS digunakan untuk mengubah/memanipulasi tampilan dari tag HTML, CSS membutuhkan suatu cara untuk ‘men…
  • Input Kode CSS ke Halaman HTML
    Secara garis besar, terdapat 3 cara menginput kode CSS ke dalam HTML, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets. Metode Inline Style Metode Inline Style adalah cara menginput kode CSS langsung ke dalam tag HTML dengan menggunakan atribut style, contoh penggunaan Metode Inline Style CSS adalah sebagai berikut:…
  • Pengertian CSS
    CSS atau Cascading Style Sheets merupakan bahasanya desainer web. Namun sebenarnya apa yang dimaksud dengan CSS? Kita akan membahas pengertian CCS dalam artikel ini. Pengertian CSS Untuk pengertian bebasnya, CSS adalah kumpulan kode program yang digunakan untuk mendesain atau mempercantik tampilan halaman HTML. Dengan CSS kita bisa mengubah …
  • Prioritas Selector CSS (Cascading)
    Di dalam CSS, sebuah tag bisa memiliki lebih dari dari satu kode CSS. Dalam tutorial mengenal Urutan Prioritas Selector CSS ini kita akan membahas urutan atau prioritas dari kode CSS yang akan dipakai oleh tag HTML, atau dikenal dengan istilah Cascading. Pengertian Cascading dari CSS CSS adalah singkatan dari Cascading Style Sheet, dimana ca…
  • Jenis-jenis Selector Dasar CSS
    CSS memiliki jenis selector yang bervariasi, bahkan sangat beragam tergantung kebutuhan kita untuk mendesain halaman web. Dalam tutorial mengenal dasar selector CSS ini saya akan membahas 5 jenis selector dasar di dalam CSS. Selector CSS tidak hanya 5 jenis ini, namun dalam kebanyakan kasus sudah mencukupi untuk membuat sebuah halaman web HTML…
  • Cara Penulisan Kode CSS
    Setelah mempelajari pengertian selector, property dan value dari CSS pada tutorial sebelumnya, dalam tutorial CSS kali ini kita akan mempelajari aturan dan cara penulisan kode CSS itu sendiri. Untuk lebih mudah memahami aturan dan cara penulisan kode CSS, dibawah ini adalah contoh kode HTML + CSS sederhana yang akan kita bahas secara lebih me…

2 komentar


Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...