Postingan

Menampilkan postingan dari April, 2014

Efek Balik Gambar Ketika Hover

Gambar
Pernah melihat efek gambar dibalik saat Anda meletakkan cursor (hover) di atas gambar tersebut? Tenyata menciptakan efek itu cukup menggunakan CSS saja, tanpa JavaScript. Anda hanya membutuhkan dua buah gambar berbeda. Satu gambar untuk bagian depan dan satu gambar lagi untuk bagian belakang. Efek bolak-balik diatur melalui CSS dengan properti transtition dan transformation.

Lihat demo di bawah ini.


Bagaimana membuatnya?

Mari kita mulai. Mula-mula letakkan CSS berikut di atas tag </b:skin>.

.wrapper { position: relative; padding-top:50px; z-index: 1; -webkit-perspective:1000px; perspective: 1000px; display: inline-block; margin:50px auto; } .card { width: 750px; height: 475px; margin: 0 auto; border:8px solid white; cursor:pointer; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; /* Properti css transtition digunakan untuk …

Tooltip Sederhana Menggunakan jQuery

Gambar
Tooltip adalah tampilan informasi berupa teks maupun gambar yang tampil saat cursor di arahkan (mouse over) pada sebuah item (biasanya pada link) dalam sebuah website. Artikel kali ini menjelaskan bagaimana menerapkan tooltip menggunakan jQuery. Tooltip tanpa jQuery dapat Anda baca pada artikel Membuat Tooltip Menggunakan CSS.

Lihat contoh tooltip berikut. Arahkan cursor pada gambar atau link.

Jelasin Blog
Bagaimana membuatnya?

Letakkan CSS berikut di atas tag </b:skin>

/* tooltip */ .ll-simple-tooltip { display:none; position:absolute; border:1px solid #071585; background-color: #1e90ff; border-radius:3px; padding:5px; color:#fff; font-size:14px !important; box-shadow: 0 1px 2px black; } Selamat belajar

Setelah itu simpan jQuery berikut di atas tag </body>

<script type='text/javascript'> //<![CDATA[ $(document).ready(function() { // Tooltip only Text $('.ll-tooltip').hover(function(){ // Hover over code var title = $(this).attr('…

Contact Form Blogger di Halaman Statis

Gambar
Sebelumnya, saya telah menerbitkan artikel cara memasang Formulir Kontak di Blogger, baca artikel Cara Memasang Formulir Kontak atau Contact Form di Blogger. Formulir kontak blogger ini bisa disesuaikan dengan mudah melalui CSS. Jadi Anda dapat mengganti gaya atau tampilannya sesuai dengan gaya template. Contohnya seperti pada blog ini.

Selain itu Anda juga dapat menambahkan formulir ini ke dalam halaman statis blog sehingga formulir kontak ini tampil pada sebuah halaman khusus bukan pada sidebar. Terdengar keren bukan?

Mula-mula tambahkan Formulir Kontak Untuk Blog Anda. Jika Anda belum tahu caranaya, silahkan baca artikel Cara Memasang Formulir Kontak atau Contact Form di Blogger. Anda harus memiliki gadget ini pada sidebar atau element lainnya (misalnya di footer) sebelum menambahkan widget formulir kontak ini ke halaman statis blog.

Selanjutnya Anda harus sembunyikan widget Formulir Kontak ini dari Sidebar, sehingga nanti widget ini hanya akan tersedia pada halaman kontak situs…

Cara Memasang Font Awesome di Blogger

Gambar
Font awesome berguna mengurangi penggunaan icon dalam bentuk gambar pada tampilan situs. Anda tidak perlu lagi repot-repot dan susah mencari atau mendesain icon gambar untuk kebutuhan tampilan tertentu di situs. Apa itu font awesome? Font awesome adalah font web yang berbentuk icon siap pakai untuk antarmuka web menggunakan pemanggil CSS, umumnya digunakan untuk Twitter Bootstrap. Ada ratusan lebih icon di Font awesome dan akan bertambah tiap rilisnya.


Pertama silahkan pasang CSS font awesome di atas tag </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

Setelah Anda menambahkan CSS di atas kini saatnya kita coba menerapkan font awesome tersebut. Misalnya kita akan menggunakan font awesome pada menu.

<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li> <…

Lihat Content Social Locker Tanpa Klik

Gambar
Pernahkah Anda menemukan isi atau content yang disembunyikan? Isi tersebut hanya terlihat setelah Anda klik tombol sosial? Itu disebut Content Social Locker. Masalahnya adalah tidak semua orang senang diperlakukan seperti itu. Hanya sekedar melihat sesuatu (apalagi sebuah tutorial) kita harus melakukan sesuatu. Terkesan sedikit memaksa dan penuh pamrih.

Tetapi pendapat orang berbeda-beda. Sebagian berpendapat Content Social Locker perlu dengan alasan untuk meningkatkan rangking. Sebagian berpendapat tidak perlu.

Kita tinggalkan perbedaan pendapat. Bagaimana cara melihat content atau isi social locker tanpa klik? Anda yang enggan mengelik tombol sebaiknya membaca artikel ini. Caranya mudah. Tekan Ctrl+U, tindakan ini akan membuka source code. Pada halaman source code ini Anda bisa melihat isi Social Locker.

Blog Saya Dapat Puluhan Ribu Google Plus?

Gambar
Jika Anda jeli memperhatikan dan mengikuti dengan seksama blog ini (blog saya yang lain juga) mungkin Anda mempertanyakan suatu hal. Apa itu? Periksalah! Beberapa artikel mendapat puluhan ribu bahkan sampai seratus ribu lebih Google Plus. Lihat screenshot di atas.

Saya belum akan menjelaskan bagaimana cara saya mendapatkan Goole Plus atau g+1 sampai ribuan hanya dalam beberapa hari. Belum pasti benar mengapa g+1 bertambah sedemikian banyak, namun pada suatu waktu kembali ke awal. Maksud saya kembali ke awal adalah bila artikel saya, misalnya, "Cara Buat Template Blogger Sendiri" telah diberi g+1 oleh 5 orang, 5 akun. Lalu saya jalankan sebuah trik maka saya akan mendapatkan g+1 ribuan tanpa klik sekalipun, tanpa klik sekalipun. Tetapi setelah beberapa lama nilainya akan kembali menjadi 5.

Saya belum yakin benar trik yang saya lakukan itu. Tetapi beberapa kali saya mengulang dan berhasil. Hanya saja saya perlu melakukan lebih banyak lagi eksperimen untuk memastikan trik itu …

CSS Blockquote Membuka Otomatis

Gambar
Banyak cara memodifikasi tampilan "blockquote", saya rasa Anda pernah menerapkannya di blog kesayangan Anda, misalnya menambahkan tanda kutip besar. Nah kali ini kita akan belajar memanfaatkan css transisi dan css pseudo classes untuk membuat blockuote yang akan terbuka dengan sendirinya saat di hover, ketika pointer di arahkan ke area elemen blockquote tersebut. Trik ini murni hanya efek hover CSS, jadi lupakan JavaSript atau pun jQuery.

Demo, sorot saja segitiga di bawah ini.

Shahih Bukhari No.6353. Telah menceritakan kepada kami Muhammad bin Yusuf telah menceritakan kepada kami Ibnu Uyainah dari Az Zuhri dari Ubaidullah bin Abdullah bin Utbah dari Abu Hurairah dan Zaid bin Khalid Al Juhani mengatakan, Seorang laki-laki mendatangi Nabi shallallahu 'alaihi wasallam dan berujar; 'Saya bersumpah kepadamu dengan nama Allah, hendaknya engkau memutuskan diantara kami dengan kitabullah.' Lantas lawan sengketanya yang lebih faqih darinya berdiri dan berkata; 'Ia …

Ucapan Terimakasih di Bawah Komentar

Gambar
Perhatikan screenshot di atas, ada yang berbeda dengan kotak komentar blogger standar. Apa bedanya? Ada ucapan terimakasih telah berkomentar di bawah kotak komentar. Bagaimana cara membuatnya?

Mudah, tambahkan sebuah div di dalam template di bawah iframe comment-editor.

Buka editor template blogger, temukan baris kode berikut.


<b:if cond='data:blog.pageType == &quot;static_page&quot;'> <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/> </b:if> <iframe class='blogger-iframe-colorize blogger-comment-from-p…