Related Posts Slide Out Boxes

0 komentar Sabtu, 07 April 2012
Berhubung postingan kali ini permintaan dari teman blog saya, karena fitur ini dari Tympanus.net dan di tutorial tersebut tidak dijelaskan bagaimana cara menerapkanya di Blogger jadi disini saya akan membahas bagaimana cara memasang Related Posts Slide Out Boxes di Blogger. 

Baiklah, fitur kali ini menurut saya sedikit kurang pengunaan feed jadi proses pengantian related posts harus secara manual, Berikut screenshot dari Tympanus silahkan lihat Demo di blog Sahabat Metal-XP Demo

1. Pergi ke Template/Rancangan > Edit Html
2. Cari kode <b:skin> dan letakan kode CSS berikut diatas kode <b:skin>
  <link href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css' media='screen' rel='stylesheet' type='text/css'/> 

3. Selanjutnya cari </body> dan letakan kode JS berikut diatas kode </body>


4. Sekarang letakan struktur HTML ini juga diatas kode  </body>



Struktur diatas hanyalah sebuah contoh jika anda ingin merubah thumbnail image, judul dan link. yang perlu Anda rubah adalah seperti struktur berikut

<li>
<div>
<img height='72' width='72' alt='JUDIL-IMG' src='URL-IMAGE'/>
<span class='rp_title'>JUDUL-POST</span>
<span class='rp_links'>
<a href='LINK-ARTIKEL' target='_blank'>Article</a>
<a href='LINK-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>


Anda bisa menambahkan struktur tersebut minimal 5. Dalam JavaScript kita akan mendefinisikan bahwa hanya menampilkan 5 posting pada suatu waktu. Tentu saja, Anda harus mengganti teks berwana dengan link dan judul Anda.
5. Terakhir Klik Save Template
Read On

CSS Shadow - Membuat Bayangan Dengan CSS

0 komentar Jumat, 06 April 2012
CSS ShadowPada postingan sebelumnya saya sudah membahas bagaimanacara membuat efek gradasi menggunakan CSS. Pada postingan kali ini saya akan membahas bagaimana cara membuat efek bayangan menggunakan CSS seperti pada gambar di samping ini, hanya saja gambar di samping ini sengaja saya convert ke jpg supaya teman-teman yang masih menggunakan browser versi lama tetap bisa melihat contohnya. Sama seperti postingan sebelumnya, efek ini hanya akan berjalan di browser-browser versi terbaru, untuk mozilla firefox effect ini hanya berjalan di versi 3.6 keatas. 

CSS shadow adalah salah satu cara termudah untuk membuat effect bayangan untuk sebuat objek tertentu. Pada postingan kali ini saya akan mencoba membuat efek bayangan pada text dan objek dengan perintah CSS yang tidak jauh berbeda.

BOX SHADOW 
Box shadow dibagi menjadi 2 jenis yaitu offset shadow dan inner shadow, untuk membuat offset shadow kita bisa membuat kode CSS seperti di bawah ini:
.shadow {
box-shadow: 5px 5px 7px #222;
-moz-box-shadow: 5px 5px 7px #222;
-webkit-box-shadow: 5px 5px 7px #222;
}
Keterangan:
5px adalah ukuran x-offset 
5px adalah ukuran y-offset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil bayangan ini bisa dilihat di gambar awal postingan ini.

Sedangkan untuk membuat inner shadow kita tinggal menambahkan kode inset seperti di bawah ini: 
.inner-shadow {
box-shadow: inset 0 5px 7px #222;
-moz-box-shadow: inset 0 5px 7px #222;
-webkit-box-shadow: inset 0 5px 7px #222;
}


Keterangan:
0 adalah ukuran x-inset 
5px adalah ukuran y-inset
7px Tingkat blur shadow
#222 adalah warna bayangan
Contoh hasil CSS inner shadow bisa dilihat di bawah ini:


TEXT SHADOW
Cara menggunakan dan sistem kerja text shadow sebenarnya tidak berbeda dengan box shadow, perbedaannya kita tinggal merubah tulisan box-shadow menjadi text-shadow. Berikut ini contohnya:
.textshadow {
text-shadow: 5px 5px 7px #222;
-moz-text-shadow: 5px 5px 7px #222;
-webkit-text-shadow: 5px 5px 7px #222;
}


dan untuk inner text shadow menjadi seperti ini:
.inner-textshadow {
text-shadow: inset 0 5px 7px #222;
-moz-text-shadow: inset 0 5px 7px #222;
-webkit-text-shadow: inset 0 5px 7px #222;
}


Mudah-mudahan postingan kali ini bisa bermanfaat buat teman-teman semua. Seperti biasanya, selamat mencoba :)

Read On