kania blog

Showing posts with label gambar. Show all posts

Thursday, November 7, 2013

Cara Membuat Lightbox Pada Gambar Blog

Lightbox Pada Gambar Blog

Cara Membuat Lightbox Pada Gambar Blog - Postingan ini merupakan insiprasi template yang saya gunakan, Pada Kesempatan ini ( Tutorial Belajar Blog) akan memberikan Javascript untuk membuat Lightbox ini terotomatisasi pada setiap gambar yang ada pada postingan blog/web anda.

Apa Itu Lightbox Gambar , Lightbox itu Sejenis Pop Up, Tetapi Bukan Pop Up,Lightbox gambar itu Jika Di Click pada gambar kemudian muncul kotak yang muncul pada saat mengklik atau melihat suatu gambar.

Contoh Tampilan

KLIK DISINI DEMO

Untuk memasang Lightbox Gambar Pada Blog dengan Jquery ikuti langkah-langkah berikut :

1. Login akun Blogger anda.
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode berikut ini dibawah kode ]]></b:skin>

#jquery-overlay{position:absolute;
top:0;left:0;z-index:90;
width:100%;height:500px}
#jquery-lightbox
{position:absolute;top:0;left:0;width:100%;
z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover
{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box
{position:relative;background-color:#fff;border-radius: 5px 5px 0px 0px;
width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;
height:25%;width:100%;text-align:center;
line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;
height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext
{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;
background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;
width:100%;padding:0 10px 0;border-radius: 0px 0px 5px 5px;}
#lightbox-container-image-data
{padding:0 10px;color:#666}
#lightbox-container-image-data
#lightbox-image-details
{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber
{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;
padding-bottom:0.7em}

Kemudian letakkan kode berikut ini diatas kode </body>


<script src=http://lightbox-blogger.googlecode.com/files/jquery.min.js type=text/javascript/>
<script src=http://lightbox-blogger.googlecode.com/files/lightbox.min.js type=text/javascript/>

Simpan Template Kemudian Lihat hasilnya dengan klik gambar pada postingan anda.

Saturday, November 2, 2013

Membuat Kursor Animasi Gambar dan Bintang Bertabur

Nah kali ini NGEBLOG™ bagi-bagi tips Cara Membuat Kursor di Blogspot Bertabur Bintang. Sobat Blogger sekalian pingin beda tampilan kursor blognya...?? iya pasti donk :D.

Banyak cara yang dibuat oleh setiap blogger untuk membuat tampilan blognya terkesan cantik, unik dan macam-macam . Diantaranya dengan modifikasi template yang sudah ada, memasang ragam widget danragam aksesoris blog termasuk mengganti tampilan kursor. Kalau sobat pingin kursor seperti ini Cara mengganti Kursor Blog Dengan Gambar klik disini

Pingin mencobanya?

Langkah-langkah sebagai berikut:

1. Login ke blogger.
2.Masuk ke Layout-->Page Element
3.Tambahkan gadget HTML/JavaScript
4.Pilih kode taburan bintang dibawah ini.

Kode Bintang Hijau
<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>

Kode Bintang Ungu
<script src=http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.ungu.js type="text/javascript"></script>

Kode Bintang Merah
<script src=http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js type="text/javascript"></script>

Kode Bintang Biru
<script src=http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.biru.js type="text/javascript"></script>

Kode Bintang Putih
<script src=http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js type="text/javascript"></script>

5. Simpan