BlogKu.BlogSpot.com

CSS Selector- :link :visited :hover :active

Contoh Penggunaan:

CSS Contoh

NB: arahkan mouse ke area preview contoh

Preview Contoh

Contoh Penggunaan :link - Konten Disini

Contoh Penggunaan :visited - Konten Disini (berubah jika merupakan tempat yang dikunjungi)

Contoh Penggunaan - :hover-Konten Disini (berubah jika mouse diarahkan kesini)

Contoh Penggunaan - :active-Konten Disini (berubah jika mouse diklik

Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

Membuat Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

Masuk ke halaman editor HTML, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Salin kode di bawah ini, kemudian letakkan tepat di atas kode </head>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <style type='text/css'>
          #related_posts h4              {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
          #relpost_img_sum               {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
          #relpost_img_sum:hover         {background:none;}
          #relpost_img_sum ul            {list-style-type:none;background:none;margin:0;padding:0;}
          #relpost_img_sum li            {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
          #relpost_img_sum li:hover      {background-color:#F0ECE9;}
          #relpost_img_sum .news-title a {color:#2C6BA8;}
          #relpost_img_sum .news-title   {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
          #relpost_img_sum .news-text    {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
          #relpost_img_sum img           {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
     </style>
     <script type='text/javascript'>
          var relnojudul = 0;
          var relmaxtampil = 10;
          var numchars = 200;
          var morelink = "baca selengkapnya";
     </script>
     <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>
</b:if>

Selanjutnya temukan kode ini:

TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.

Salin kode di bawah ini, kemudian letakkan tepat di atasnya:

<!-- Artikel Terkait dengan Gambar dan Ringkasan -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div id='related_posts'>
          <h4>Artikel Terkait</h4>
          <b:loop values='data:post.labels' var='label'>
               <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'></script>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
     </div>
</b:if>
<!-- Akhir Artikel Terkait dengan Gambar dan Ringkasan -->

Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan frase post-footer umumnya memang berada di bawah posting. Begitu saja logikanya.
Jika sudah selesai, klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.

Penyesuaian-Penyesuaian:

Atur ukuran thumbnail dengan mengubah nilai dalam selektor #relpost_img_sum img{ ... }, yaitu pada deklarasi width:55px dan height:55pxnya.
var relmaxtampil adalah variabel untuk menentukan jumlah posting yang akan ditampilkan.
var morelink adalah variabel untuk menentukan teks "baca selengkapnya". Kamu bisa mengganti "baca selengkapnya" dengan "read more" atau yang lainnya.
var numchars adalah variabel untuk menentukan jumlah karakter ringkasan.
Tentukan judul artikel terkaitmu dengan mengubah teks "Artikel Terkait" pada kode yang Saya beri tanda.

Sumber: http://modification-blog.blogspot.com

CSS Box Shadow - Membuat Efek Bayangan pada Area

Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek:

CSS Bayangan Outset:

div {
  -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */
  -moz-box-shadow:10px 10px 7px #222;    /* Firefox */
  box-shadow:10px 10px 7px #222;         /* W3C */
}

CSS Bayangan Inset:

div {
  -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */
  -moz-box-shadow:inset 10px 10px 7px #222;    /* Firefox */
  box-shadow:inset 10px 10px 7px #222;         /* W3C */
}

10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:

Top-Down	Inline
`#kotak1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='kotak1'>OBJEK</div>`	`<div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'> OBJEK </div>`

Dan ini adalah contoh-contoh penerapan yang lebih detail. Saya sudah memberikan warna merah dan hijau untuk mempertegas bagian mana yang harus menjadi perhatian:

-webkit-box-shadow: 10px 5px 7px #222;

-moz-box-shadow: 10px 5px 7px #222;

box-shadow: 10px 5px 7px #222;

-webkit-box-shadow: 0 10px 7px #222;
-moz-box-shadow: 0 10px 7px #222;
box-shadow: 0 10px 7px #222;

-webkit-box-shadow: 10px 0 7px #222;

-moz-box-shadow: 10px 0 7px #222;

box-shadow: 10px 0 7px #222;

-webkit-box-shadow: 0 0 7px #222;

-moz-box-shadow: 0 0 7px #222;

box-shadow: 0 0 7px #222;

-webkit-box-shadow: 0 0 20px #222;

-moz-box-shadow: 0 0 20px #222;

box-shadow: 0 0 20px #222;

-webkit-box-shadow: 0 0 20px #f10c0c;

-moz-box-shadow: 0 0 20px #f10c0c;

box-shadow: 0 0 20px #f10c0c;

-webkit-box-shadow: 10px 5px 0 #222;

-moz-box-shadow: 10px 5px 0 #222;

box-shadow: 10px 5px 0 #222;

-webkit-box-shadow: -10px -5px 0 #222;

-moz-box-shadow: -10px -5px 0 #222;

box-shadow: -10px -5px 0 #222;

-webkit-box-shadow: inset 10px 5px 7px #222;

-moz-box-shadow: inset 10px 5px 7px #222;

box-shadow: inset 10px 5px 7px #222;

-webkit-box-shadow: inset 0 10px 7px #222;

-moz-box-shadow: inset 0 10px 7px #222;

box-shadow: inset 0 10px 7px #222;

-webkit-box-shadow: inset 10px 0 7px #222;

-moz-box-shadow: inset 10px 0 7px #222;

box-shadow: inset 10px 0 7px #222;

-webkit-box-shadow: inset 0 0 7px #222;

-moz-box-shadow: inset 0 0 7px #222;

box-shadow: inset 0 0 7px #222;

-webkit-box-shadow: inset 0 0 20px #222;

-moz-box-shadow: inset 0 0 20px #222;

box-shadow: inset 0 0 20px #222;

-webkit-box-shadow: inset 0 0 20px #f10c0c;

-moz-box-shadow: inset 0 0 20px #f10c0c;

box-shadow: inset 0 0 20px #f10c0c;

-webkit-box-shadow: inset 10px 5px 0 #222;

-moz-box-shadow: inset 10px 5px 0 #222;

box-shadow: inset 10px 5px 0 #222;

-webkit-box-shadow: inset -10px -5px 0 #222;

-moz-box-shadow: inset -10px -5px 0 #222;

box-shadow: inset -10px -5px 0 #222;

CSS Input Text dan Textarea

textarea dengan css

textarea biasa

Dan ini adalah CSS untuk mengubah tampilannya:

blockquote.collapsed {
  margin:15px 30px;
  font:italic 14px Georgia,Serif;
  height:0px;
  padding:0px 0px;
  background-color:#FFE046;
  border:10px solid #FDD404;
  border-left-color:#D7362E;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
}

blockquote.collapsed:hover {
  padding:10px 15px;
  background-color:#47AD47;
  border:5px solid #156715;
  height:350px;
}

Letakkan kode tersebut di atas </style> atau ]]></b:skin>
Dari penampilan kode ini Saya rasa kalian sudah mengerti maksudnya.

input[type="text"] { ... }



textarea { ... }

Nah, untuk kode yang terakhir itu digunakan untuk membuat tampilan warna textarea dan input text menjadi berubah ketika kursor sedang aktif di dalamnya.

input[type="text"]:focus,
textarea:focus {
  background-color:#FFE4B5;
}

Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

Seseorang bertanya tentang bagaimana cara membuat quote tertutup yang bisa membuka saat pointer berada di atasnya. Caranya sangat sederhana, yaitu dengan menggunakan CSS Pseudo Classes dan CSS Transisi:

Salin kode di bawah ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

blockquote.collapsed {
  margin:15px 30px;
  font:italic 14px Georgia,Serif;
  height:0px;
  padding:0px 0px;
  background-color:#FFE046;
  border:10px solid #FDD404;
  border-left-color:#D7362E;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
  transition:all 1s cubic-bezier(1,0,0,1) 0.5s;
}

blockquote.collapsed:hover {
  padding:10px 15px;
  background-color:#47AD47;
  border:5px solid #156715;
  height:350px;
}

Proses aktivasi bisa dilakukan dengan cara menambahkan class="collapsed" pada elemen <blockquote> yang Anda inginkan:

<blockquote class="collapsed">
    Konten di sini...
</blockquote>

CSS Margin dan Padding

Secara sederhana, margin dapat didefinisikan sebagai kerenggangan antara area dengan daerah luar, sedangkan padding adalah kerenggangan antara area dengan objek di dalamnya.Deklarasi margin dan padding dapat dituliskan seperti ini:

margin:5px;
padding:5px;

CSS Margin dan Padding

5px adalah contoh value dari properti margin dan padding. Selain ukuran kerenggangan dalam piksel, ukuran margin dan padding juga dapat ditentukan dengan satuan em, pt ataupun %, meskipun sebenarnya ada juga satuan pengukuran yang lainnya. Kamu bahkan bisa menuliskan ukuran kerenggangan negatif seperti -5px, -100px, dll.

Margin dan padding dapat dipecah menjadi empat bagian seperti ini:

Deklarasi	Keterangan
margin-top:5px;	Menentukan margin sebelah atas sebesar 5 piksel
margin-right:5px;	Menentukan margin sebelah kanan sebesar 5 piksel
margin-bottom:5px;	Menentukan margin sebelah bawah sebesar 5 piksel
margin-left:5px;	Menentukan margin sebelah kiri sebesar 5 piksel
padding-top:5px;	Menentukan padding sebelah atas sebesar 5 piksel
padding-right:5px;	Menentukan padding sebelah kanan sebesar 5 piksel
padding-bottom:5px;	Menentukan padding sebelah bawah sebesar 5 piksel
padding-left:5px;	Menentukan padding sebelah kiri sebesar 5 piksel

Atau kamu juga bisa menggunakan cara yang lebih praktis, yaitu dengan menggabungkan keempat pengukuran kerenggangan yang berbeda dalam satu properti margin/padding saja seperti ini:

Deklarasi	Keterangan
margin:1px 2px 3px 4px;	Margin atas: 1 piksel Margin kanan: 2 piksel Margin bawah: 3 piksel Margin kiri: 4 piksel
margin:1px 2px 3px;	Margin atas: 1 piksel Margin kanan dan kiri: 2 piksel Margin bawah: 3 piksel
margin:2px 4px;	Margin vertikal (atas dan bawah): 2 piksel Margin horizontal (kanan dan kiri): 4 piksel
padding:1px 2px 3px 4px;	Padding atas: 1 piksel Padding kanan: 2 piksel Padding bawah: 3 piksel Padding kiri: 4 piksel
padding:1px 2px 3px;	Padding atas: 1 piksel Padding kanan dan kiri: 2 piksel Padding bawah: 3 piksel
padding:2px 4px;	Padding vertikal (atas dan bawah): 2 piksel Padding horizontal (kanan dan kiri): 4 piksel

State Aktif untuk JQuery Accordion

State Aktif JQuery Akordion

Tambahkan class active pada panel akordion yang sedang aktif:

JQuery

$(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

Kerangka

<div id='accordion'>
    <h2>Panel 1</h2>
    <div class='content'>
        ....
    </div>
    <h2>Panel 2</h2>
    <div class='content'>
        ....
    </div>
    <h2>Panel 3</h2>
    <div class='content'>
        ....
    </div>
    <h2>Panel 4</h2>
    <div class='content'>
        ....
    </div>
</div>

Contoh Hasil Penerapannya Ada Dibawah ini :

Panel 1

....
Contoh Isi Panel 1

Panel 2

....
Contoh Isi Panel 2

Panel 3

....
Contoh Isi Panel 3

Panel 4

....
Contoh Isi Panel 4

CSS Selector- :link :visited :hover :active

Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

Membuat Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

Penyesuaian-Penyesuaian:

CSS Box Shadow - Membuat Efek Bayangan pada Area

CSS Input Text dan Textarea

Membuat Auto Expand Blockquote Sederhana dengan CSS Transisi

CSS Margin dan Padding

State Aktif untuk JQuery Accordion

JQuery

Kerangka

Panel 1

Panel 2

Panel 3

Panel 4

BlogKu.BlogSpot

Artikel Terbaru

Daftar Isi

Entri Populer

Komentar Terbaru

Follower

Friends Connect

Statistik

Backlink