Demo Effects CSS Gambar Postingan

Demo Effects CSS Gambar Postingann


Selamat  datang  di  artikel   Demo Preview Zoom  Gambar Postingan
Di artikel ini akan  menampil kan  Demo gambar postingan  dengan
Effects preview zoom, yang mana keterangan dan  penjelasanya ada
Di artikel yang membahas tentang demo ini,  simak di bawah ini sob

Arahkan cursor anda pada gambar di bawah ini :

Effects Rotasi 8
Demo Preview Zoom Gambar Postingan

Effects Melengkung 12
Demo Preview Zoom Gambar Postingan

Effects Melingkar 13
Demo Preview Zoom Gambar Postingan

Demo Effects CSS Gambar Postingan
Untuk  bisa  melihat  Demo Effects CSS  Gambar Postingan  Silahkan arahkan
Mouse anda pada Gambar di bawah ini sobat, maka anda akan melihat demonya

Effects Fade in blur 6

Demo Preview Zoom Gambar Postingan
Continue Reading...

Link Dan Gambar Dengan Effect Tooltip

Di season ke 2 ini saya kembali untuk berbagi buat sobat blogging semua
Kali ini saya akan bagikan cara membuat link atau gambar dengan effects
Tooltip, namun pada kesempatan kali ini yang saya sajikan bukan sebatas
Tooltip pada umum nya, karena ada sedikit berbeda dari yang ada simak

Silahkan cursor anda pada gambar di bawah ini sebagai DEMO nya :

thumbnail

Cara memasangnya :
Masuk account anda jangan lupa sign in, kemudian pilih edit template
Cari kode </head> tekan Ctrl + f untuk memudahkan pencarian kode
Selanjutnya copy kode di bawah ini dan paste tepat diatas kode </head>

<link rel="stylesheet" media="screen" href="css/jimp.css" type="text/css" /> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <script type="text/javascript" src="js/jimp.js"></script> <script type="text/javascript"> $(function() { $('#example a').jimp(); }); </script>
Setelah terpasang kode CSS nya jangan lupa save template blog anda

Kostumisasi penerapan effects tooltip
Ada dua metode yang bisa Anda lakukan untuk mengaktifkan plugin ini pada elemen.
Pertama, mengarahkan tautan langsung kepada URL gambar. 
Ke dua, mengarahkan tautan ke sebuah halaman situs, kemudian mengeset nilai tooltip 
dengan URL gambar yang disimpan di dalam atribut data di bawah ini sript nya

01.
<a href="large-image.jpg" title="Your Title"><img src="thumbnail.jpg" alt="thumbnail" /></a>

02.
<a href="page-url.html" data-preview="large-image.jpg" title="Your Title">This is an example link!</a>
Continue Reading...

Auto Recent Posts Effects Berjalan

Memulai blogging, dengan mencoba berbagi  buat sobat juga teman online barangkali
Ada yang  membutuhkan  widget  recent posts,  dengan  effects  berjalan  ke samping
Tentu akan membuat tampilan  blog anda sedikit unik, karena  pada umum nya recent
Posts pada umum nya hanya  tampil yang  biasa saja,  pada masa yang  serba canggih
Dan tekhnology  yang semakin maju  dengan  pesat,  kreativitas blogging  pun tak mau
Ketinggalan, salah satu nya widget recent posts dengan effect berjalan akan saya share

Auto Recent Posts Effects Berjalan
Auto Recent Posts Effects Berjalan
Seperti slide nantinya widget ini, bekerja di blog anda dengan berjalandari arah
Kanan ke kiri, terus menerus namun jika cursor di arahkan ke link recent posts
Secara otomatic widget nya berhenti, dan jika di lepas maka akan berjalan lagi

Penasaran silahkan simak tutorial nya berikut di bawah ini dengan sekseama :
Pertama masuk account anda, kemudian pilih dasboard lalu pilih layout atau
Tata letak pada blog anda. selanjutnya tambah widget, lalu copy kode script
Di bawah ini, pastekan pada add widget yang tadi, paste pada kolom html

<script type='text/javascript'>
var jnWidth="100";
var jnScrollAmount="10";
var jnScrollDelay="50";
var jnDirection="left";
var jntargetlink="yes";
var jnnumPosts="10";
var jnBulletchar =">>>";
var jnimagebullet="yes";
var jnimgurl="http://1.bp.blogspot.com/-fKeh7aRkfVs/Tvll57YC8yI/AAAAAAAAAvY/pUwMXLHvSc8/s1600/arrowe.gif";
var jnfontsize="16";
var jnbgcolor="FFFFFF";
var jnlinkcolor="FF0000";
var jnlinkhovercolor="3366CC";
</script><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<script type='text/javascript' src='http://dl.dropboxusercontent.com/s/fqy9x54r0lgaomx/scrolling-recent-v3-ycode.js' ></script>
<script type='text/javascript' src="http://tutorialchayikn.blogspot.com/feeds/posts/default?alt=json-in-script&callback=jnAdvRecentPostsScrollerv3&max-results=10" ></script>

Keterangan :
Ganti link yang berwarna Merah, edite dengan Url blog anda, jangan lupa save widgetnya
Sekian semoga artikel ini walau sederhana,  mudah-mudahan bisa bermanfaat buat anda
Continue Reading...
© Copyright 2013. Tutorial Blog Chayi. All Rights Reserved. Designed by: LBT (Lovely Blogging Tricks)