Posts

Showing posts from April, 2014

Efek Balik Gambar Ketika Hover

Image
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

Image
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

Image
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

Image
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> <…

Ucapan Terimakasih di Bawah Komentar

Image
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…