SISTEMPAKAR

Bagi beberapa sobat blogger yang demen ngelayap cari info baru tentang kode html dan segala bentuk desainnya pasti pernah menjumpai box posting kode html yang dibuat dalam bentuk animasi. Yang teramat sering terlihat adalah box yang ketika tersentuh cursor ukurannya bertambah lebar. (he ... he ... nggak bertambah panjang kaya punya sampeyan, broer! Asal tersentuh sedikit saja sudah molor sepanjang tiang listrik, he ...). Jika mungkin diantara sampeyan ada yang membatin tentang kode html seperti apa yang digunakan, mungkin melalui posting ini semua akan terjawab. Kita nggak akan terlalu merumitkan diri dengan javascript yang sering menjadi penambah lemotnya loading blog. Cara terpraktis dan termudah aku kira akan jadi solusi yang paling tepat untuk mendapatkan box serupa dengan fungsi yang setara. Ya ... kita manfaatkan saja CSS3. Asyik, lho hasil box yang berhasil kita buat. Nggak kalah dah sama yang biasa terlihat. Ada dua bentuk box, malah. Silahkan sampeyan pilih yang mana yang akan digunakan. Oye ... silahkan lihat saja demonya. KLIK yang di bawah ini:

Tooltips! Ah ..., aku sungguh sangat menyukai ini. Sebuah desain yang tidak saja bermanfaat bagi pengunjung, akan tetapi dia juga merupakan sebuah "barang berharga" yang mampu membuat sebuah blog terlihat lebih cantik, lebih keren serta mampu mencerminkan sebuah kesungguhan dalam "pribadi pengelola blog". Maaf..., itu hanya penilaian subyektif dari aku. Yang jelas bahwa toolttip memang menambah "gaya" dan "penampilan". Rasa suka akan tooltip ini membuat aku mencoba menuangkannya dalam beberapa posting. Yah ..., moga-moga saja memberi manfaat bagi para sobat blogger. Hanya perlu aku sampaikan bahwa posting "javascript tooltip-4" yang sudah aku terbitkan beberapa bulan yang lalu "tidak diperuntukkan bagi blogspot". E ..., barangkali saja ada yang ngeblog di luar blogspot dan tertarik untuk menggunakannya. O..., ya..., sebagai pelengkap koleksi tooltip, aku punya sebuah tooltip yang sangat menarik yang pada saat ini juga masih aku gunakan (23-Okt-10), mungkin sampeyan tertarik untuk memanfaatkan sebagai pelengkap blog. Silahkan coba untuk dibuat.

Javascript ZigZagLap Tooltip

Javascript-1:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://gubhugreyot-javascript.googlecode.com/files/GRzigzaglaptooltip.js" type="text/javascript"></script>

Javascript-2:

<script type="text/javascript">
$(".GRzigzag a[title]").myGRzigzagtips({effect: 'bouncy'});
$(".GRzigzag img[title]").myGRzigzagtips({effect: 'bouncy'});
</script>

Cara Membuat ZigZagLap Tooltip

Login ke blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
Copy dan pastekan Javascript-1 di bawah kode <head>.
Cari kode </body>.
Copy dan pastekan Javascript-2 di atas kode </body>.
Klik Simpan Template (Save Template).

Catatan :

Jika anda sudah menggunakan jQuery yang sama dalam blog, silahkan gunakan javascriptnya saja. Dalam satu blog hanya perlu satu jQuery saja!

Cara Menggunakan Kode tooltip

Tooltip akan bekerja dengan memanfaatkan title yang berada dalam "tag a" atau "tag img". Sampeyan tak perlu menambahkan terlalu banyak kode lain. Satu kode tambahan yang di butuhkan adalah "tag DIV" yang menjadi wadah bagi "tag a" ataupun "tag img". Tooltip cantik ini bisa bekerja dengan baik di semua bagian blog, seperti di sidebar ataupun dalam posting. Cara menuliskan kodenya sebagai berikut:

Dalam tag a (link berbentuk teks dan gambar):

Contoh penggunaan kode tooltip-1 :

<div class="GRzigzag">
<a href="URL" title="Tuliskan teks tooltip di sini!">Teks Link</a>
</div>

Contoh penggunaan kode tooltip-2 :

<div class="GRzigzag">
<a href="URL" title="Tuliskan teks tooltip di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw8wiOeNIWFjktel6170ZV4PEsgvxzssKMq5R_jxaHqmKnJ64d_2ypsA8gPERrxzpTf0U5Qj0OaihrOsZBshbEqU3GbJFv1oiz5CodAV4AAEVSNCHfHdKG45nnIU57ZqawrexwNO6XOxY/s220/36_2_34.gif" width="100" height="90" /></a>
</div>

Dalam tag img :

Contoh penggunaan kode tooltip-3 :

<div class="GRzigzag">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw8wiOeNIWFjktel6170ZV4PEsgvxzssKMq5R_jxaHqmKnJ64d_2ypsA8gPERrxzpTf0U5Qj0OaihrOsZBshbEqU3GbJFv1oiz5CodAV4AAEVSNCHfHdKG45nnIU57ZqawrexwNO6XOxY/s220/36_2_34.gif" width=".." height=".."  title="Tuliskan teks tooltip di sini!" />
</div>

Tooltip untuk seluruh content :

Tooltip ini dapat sekaligus berfungsi bagi seluruh kontent berupa link dalam area tertentu (misalnya box posting) atau keseluruhan blog.

Contoh penggunaan kode tooltip-4 :

<div class="GRzigzag">
Letakkan kode <div class="GRzigzag"> sebagai tag pembuka dan isikan seluruh konten berikut link, baik berupa tek link ataupun image link. Anda bebas menggunakan link dalam jumlah tak terbatas di antara kode <div class="GRzigzag"> dan </div> Cobalah ini sebagai contoh setelah anda menyimpan javascript dalam template. Anda bisa mencoba di box posting maupun melalui Add a Gadget.<br />
<a href="http://gubhugreyot.blogspot.com" title="Panduan dan tutorial blogger terlengkap. Dapatkan berbagai trik dan tip termudah untuk memodifikasi template, pasang widget, tooltip ... ">Tutorial, tips & trik blogger GR</a>
Setelah link di atas, anda masih bisa menempatkan link lain di bawahnya. Silahkan tambah sebanyak yang anda butuhkan. Ya ... hingga tetes terakhir.... ha ..... <br />
<a href="http://gubhugreyot.blogdetik.com" title="Gambar spesial buat anda. Silahkan simpan buat bantal tidur!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw8wiOeNIWFjktel6170ZV4PEsgvxzssKMq5R_jxaHqmKnJ64d_2ypsA8gPERrxzpTf0U5Qj0OaihrOsZBshbEqU3GbJFv1oiz5CodAV4AAEVSNCHfHdKG45nnIU57ZqawrexwNO6XOxY/s220/36_2_34.gif" width="100" height="90" /></a><br /≶
Sudah dua link terpasang di atas, berupa teks link d an image link. Silahkan anda tambah sendiri di bawahnya. Yah ... anda bisa coba pasang lagi 100 buah link sebagai koleksi sekaligus biar ada lemburan!
Ha... ha... ha....<br />
</div>

SISTEMPAKAR

Jumat, 16 Januari 2015

Box Posting HTML dengan animasi

Membuat zigzagLap dengan Javascript dan JQuery

Javascript-1:

Javascript-2:

Contoh penggunaan kode tooltip-1 :

Contoh penggunaan kode tooltip-2 :

Contoh penggunaan kode tooltip-3 :

Contoh penggunaan kode tooltip-4 :

Tulisan animasi baca selanjutnya atau read more ZigZagTooltip

Membuat navigasi menu horizontal animasi dengan CSS3

Arsip Blog