Postingan

Menampilkan postingan dari Oktober, 2013

Show Hide Related Post Blogger

Bagaimana cara membuat show hide pada related post di blog? Mari kita lihat bagaimana membuatnya. Syaratnya tentu sobat blogger sudah harus mmasang jQuery. Sebelum memulai ada baiknya lihat dulu hasil akhir show related post blogger yan akan kita buat

Nanti hasilnya akan seperti berikut ini. Silahkan klik.


Jika sobat ingin menerapkan trik show hide pada related post ini silahkan ikuti langkah membuatnya di bawah ini.

Seperti yang saya sebutkan sebelumnya, pastikan di template sobat sudah terpasang jQuery. Minimal seperti berikut ini.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'>
Kemudian letakkan css berikut ini di antara css template blog Anda.

.rp-tombol-jib{ width:100%; padding:10px; margin:0px auto; background-color:#0099cc; font-size:16px; color:#fff; border:1px solid #ddd; text-transform:uppercase; line-height:40px; vertical-align: middle; position:relative; cursor:pointer; tex…

CSS Efek Glowing atau Berpendar

Gambar
Seorang teman, Welson Oktario, bertanya kepada saya bagaimana cara membuat efek 'glow' pada header Yujikop.com. Yaitu sebuah efek glow atau efek berpendar ketika sebuah div atau elemen di :hover, dengan kata lain ketika Anda menyorot atau meletakkan pointer mouse pada sebuah elemen maka elemen itu nampak berpendar. Membuat efek ini mudah, cukup menggunakan CSS namun hasilnya terlihat bagus.  Efek ini menggunakan code CSS berupa box shadow atau memberikan bayangan pada sebuah div atau elemen dimana shadow tersebut berbentuk kotak. Contoh,

#efekglow{ -moz-box-shadow: 0 0 10px #36A6A3, 0 0 30px #36A6A3, 0 0 50px #36A6A3, 0 1px 3px #000!important; -webkit-box-shadow: 0 0 10px #36A6A3, 0 0 30px #36A6A3, 0 0 50px #36A6A3, 0 1px 3px #000!important; box-shadow: 0 0 10px #36A6A3, 0 0 30px #36A6A3, 0 0 50px #36A6A3, 0 1px 3px #000!important; }
Anda cukup mengganti warnanya dan properti lainnya menyesuaikan dengan warna website agar terlihat artistik saat diterapkan pada website Anda.

Se…

Cara Menampilkan Deskripsi Penelusuran Blogger

Gambar
Bila Anda menggunakan 'Custom Template' atau template yang dirancang sendiri yaitu bukan template bawaan (default) Blogger maka kemungkinan Anda akan mendapatkan sedikit masalah seperti yang saya alami. Masalah tersebut adalah tidak munculnya pilihan "Deskripsi Penelusuran" saat Anda menulis artikel. Coba perhatikan "Setelan entri" di sebelah kanan, di sana ada pilihan Label, Jadwal, Tautan Permanen, Lokasi, Deskripsi Penelusuran, dan Pilihan. Nah, jika Anda menggunakan 'Custom Template' seperti yang saya sebut tadi maka pilihan 'Deskripsi Penelusuran' tidak ada. Bagaiman cara memunculkannya? Mudah, mari kita praktik.