Jelas in Blog

Sobat blogger tentu sudah tahu Facebook kan? Media sosial paling populer saat ini. Oleh karena itu Facebook menjadi salah satu media paling menarik untuk memasarkan blog sobat. Facebook juga menjadi alat untuk mencari dukungan. Misalnya dengan memasang plugin "Like", "Share", dll. Kali ini kita akan belajar memasang tombol berbagi (share button) Facebook untuk blogger. Share button ini dalam bentuk slide out, yaitu muncul sedikit saja dan bila disentuh barulah keluar semuanya.
Tertarik memasang Facebook Slide Out Share button untuk Blogger blogs?

Tambahkan widget HTML/JavaScript lalu copy-paste code berikut ini.


<b:if cond='data:blog.pageType == "item"'> <style> #fixed-share {background: none repeat scroll 0 0 #4C6699;bottom: 60px;font-family: Arial;font-size: 16px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;} #fixed-share:hover {right:…

Biasanya dropdown menu dibuat menggunakan JavaScript/jQuery. Padahal tanpa itupun dropdown menu (baik vertikal maupun horizonal) dapat diciptakan. Berikut ini saya salinkan untuk pembaca jelasinblog.blogspot.com beberapa contoh dropdown menu tanpa JavaScript.



Neoteric Dark Red


DEMO
HTML
<!-- Start css3menu.com BODY section --> <ul id="css3menu1" class="topmenu"> <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><img src="http://css3menu.com/images/neoteric-dark-red/home1.png" alt=""/>Home</a> </li> <li class="topmenu"><a href="#" style="height:32px;line-height:32px;"><span><img src="http://css3menu.com/images/neoteric-dark-red/info.png" alt=""/>Product info</span></a> <ul> <li><a href="#"><img src="http://…

Efek Kaca Pembesar Menggunakan jQuery dan CSS3 - Efek kaca pembesar atau lup ini akan memberi efek memperbesar gambar saat di-hover. Persis seperti saat Anda menggunakan kaca pembesar untuk mengamati sebuah benda. Efeknya benar-benar nyata. Agar lebih jelas lihat demo dibawah-arahkan mouse ke atas gambar.






Prinsipnya, properti box-shadow dan border-radius CSS3 digunakan untuk membuat kaca pembesar. Jquery digunakan untuk mengatur koordinat posisi kursor dan memposisikan gambar (yang berukuran sebenarnya) tepat sesuai koordinat tadi.

Gambar yang tampil pada halaman ini berukuran 640px, merupakan gambar kecilnya-diatur melalui CSS-, inilah gambar yang tampil saat tidak di-hover. Namun, pada saat di-hover, gambar dalam ukuran asli-gambar besarnya (1280px)-ditampilkan. Gambar besar yang ditampilkan tentu hanya sebagian yaitu seukuran kaca pembesar yang menutupi gambar kecil. Jadi tidak benar-benar memperbesar gambar dalam arti yang sesungguhnya :)

Anda akan lebih mengerti jika telah mem…

Anda tentu sering menemukan info box atau kotak informasi dalam artikel. Umumnya berbentuk sebuah kotak yang berisi kalimat-kalimat dan disampingnya ada icon sesuai kalimat. Misalnya, kalimat peringatan akan disandingkan dengan icon tanda seru (!). Info box dibuat untuk meminta perhatian, mempertegas maksud, atau memberi informasi tambahan, atau maksud-maksud lain sesuai keinginan pengelola situs.

Contoh.

Contoh info box...

Ini juga contoh info box...

Kalau yang ini info box juga dengan icon download...

Bagaimana cara membuat info box? Mudah, Anda hanya butuh CSS, HTML, dan Icon. Itu saja.

CSS
/*Atur posisi tulisan dalam box*/ .warning_box { padding:20px 15px 20px 15px; margin-bottom:20px; font-size:14px; letter-spacing:.3px; } /*Tambahkan border, warna latar belakang, dan gambar latar belakang (icon)*/ .warning_box { background:#ffcccc url(http://2.bp.blogspot.com/-nUYrO9XUJe0/V21u2kllC8I/AAAAAAAAFfU/3T1MEWrtD7s/s1600/stop-ll.png) no-repeat 10px 15px; borde…

Apa arti :before dan :after?
:before dan :after dari bahasa Inggris, before artinya sebelum dan after artinya sesudah. :before digunakan untuk menambahkan elemen sebelum elemen utama, sedangkan :after digunakan untuk menambahkan elemen setelah elemen utama.

Atau saya bisa katakan, :before digunakan untuk menambahkan elemen di sebelah kiri elemen utama, sedangkan :after digunakan untuk menambahkan elemen di sebelah kanan elemen utama.

Menggunakan CSS :before
:before{ deklarasi CSS; }
Contoh 1. Saya buat sebuah elemen bernama "tambah-kata". Nanti, saya akan tambahkan kata derajat sebelum elemen "tambah-kata", semua elemen "tambah-kata".

CSS
.tambah-kata:before { content:"derajat "; }
HTML
<div class='tambah-kata'>Celcius</div> <div class='tambah-kata'>Apa lagi ya?</div> <div class='tambah-kata'>Orang berilmu</div>

Hasil.


Contoh 2. Saya akan menambahkan "sesuatu" sebelum elemen &q…

Hari ini saya belajar atau lebih tepatnya meniru elemen yang bila di :hover (hover = melewatkan penunjuk tetikus di atasnya) maka elemen akan membuka ke bawah. Saya tiru perilaku ini dari Bitdefender report. Saya senang melihatnya lalu saya mulai meniru :)

Belum jelas? Bayangkanlah tombol sosial media yang sering kita temukan di sebuah situs, biasanya di sisi kanan atau kiri halaman. Terlihat sebagian dan tersembunyi sebagian, saat di :hover barulah bagian yang tersembunyi itu menyembul keluar.

Saya coba menerapkan perilaku ini dalam postingan blogger.

Saya tunjukkan sebuah contoh agar lebih jelas apa yang saya maksudkan. Lihat demo di bawah ini.

Tidak Bernapas Ketika Minum
Diriwayatkan dari Abu Qatadah r.a. : Rasulullah SAW pernah bersabda, “kapan pun kalian minum air, tidak boleh bernapas di dalam tempat air minum itu. Dan kapan pun kalian pergi ke kamar mandi, tidak boleh menyentuh atau membasuh kelamin dengan tangan kanan”.


Membuat ini tidaklah terlalu sulit. Hany…

Banyak situs menerapkan menu sticky, termasuk 'Header' situs yang sedang Anda baca ini. Saya sendiri tidak menemukan padanan kata sticky ini dalam bahasa Indonesia. Saya menyamakan sticky ini dengan melengket atau melekat. Menu melengket diterapkan agar memudahkan pengunjung mengeksplor situs tanpa harus bolak-balik menggulung (scroll) laman. Menu akan tetap lengket meskipun laman digulung jauh ke bawah.
Demo

Bagaimana membuatnya? Salin jQuery berikut dan letakkan di atas tag </body>.
Sesuaikan nama elemen yang akan dibuat sticky. Dalam contoh ini elemen yang saya sticky adalah 'menu'.

<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { // Menentukan elemen yang dijadikan sticky yaitu .menu var stickyNavTop = $('.menu').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya if…

Apa yang khas dari komik (comic)? Gambar dan dialog dalam bulatan-bulatan (speech bubbles). Seperti contoh comic di atas. Membuatnya cukup menggunakan CSS dan HTML saja, contoh sebagai berikut.

...jalan ceritanya begitu. Speech bubbles OMG! What is this? Akhir cerita! All images taken from flickr.com

Ingin membuat layout comic hanya menggunakan CSS seperti contoh di atas?

Ini kodenya.

CSS

/* CSS untuk lebar halaman comic */ .laman-comic { max-width:826px; margin:60px auto 0; } /* CSS untuk lebar elemen tempat meletakkan gambar */ .kotak-scene { width: 250px; height:250px; border:3px solid black; background: #fff; margin:8px; display: inline-block; position: relative; } /* CSS untuk gambar, lebar dan tinggi sepenuh elemen */ .kotak-scene img { width:100%; height:100%; display: block; } /* CSS untuk keterangan/penjelasan gambar, misalnya alur cerita. */ .jelaskan { padding:1…

Seringkali artikel membuat tabel begitu rumit. Kali ini saya berusaha membuatnya lebih mudah dimengerti, terutama bagi pemula. Semoga :)

Code untuk membuat sebuah tabel adalah <table>, <tr>, dan <td>. Sebuah tabel yang paling sederhana setidaknya terdiri dari elemen <table> yang berisi dua atau lebih <tr>, dimana <tr> akan berisi dua atau lebih <td>. <table> adalah table atau tabel, <tr> adalah table row dan <td> adalah table data. Table row sama dengan row atau baris pada pembuatan tabel di Microsoft Word, sedangkan table data sama dengan kolom. Mengapa harus dua atau lebih <tr> dan <td>? Sebab, jika hanya satu berarti hanya terdiri dari satu baris dan satu kolom saja, akan terlihat sebuah kotak saja.

Contoh 1. Tabel yang terdiri dari satu <tr> dan <td>
<table> <tr> <td>1.1</td> </tr> </table>
Hasil untuk Contoh 1.

1.1

Contoh 2. Tabel yang terdiri da…

Kita bisa membuat halaman blogger atau postingan blogger seperti layout sebuah halaman majalah atau koran. Contoh seperti di bawah ini. Jelas In Blog Rp.500 Edisi
khusus www.jelasinblog.blogspot.com 2002 "My Dear Citizens of India," its spirit of nationalism. We must thank them with respect and make their lives happy.
1947 About the National Flag The Indian national flag, represents India's long struggle August 1947 to 26 January 1950 and thereafter as the national flag of the Republic of India. .
1904:The history of the Indian flag dates back to pre independence era. It was in 1904 that
2014 Posting Blog Gaya Koran 02 Mei15th August is an important day in the history of India. It was on this day that we bid adieu to our colonial masters the British after a rule which lasted for 190…