Fitra Bloggers

Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Membuat Galeri Foto Melingkar Dengan Jquery

Mari kita langsung Ke TKP :

Langkah 1
Anda Cukup Copy Paste Kode dibawah ini, Terserah anda mau ditaru dimana di postingan juga bisa di widget (HTML/JavaScript) juga bisa.

<!DOCTYPE html>
<html>
<head>
<title>JQuery Circle Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jQuery.radmenu.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {

var posc = $("#radial_container").position();
var left = $(window).width() / 2;

if ($.browser.opera) {
$("#big").css({"left": left - 122, "top": posc.top - 13});
} else {
$("#big").css({"left": left - 122, "top": posc.top + 3});
}

jQuery("#radial_container").radmenu({
listClass: 'list',
itemClass: 'item',
radius: 220,
animSpeed:800,
centerX: 0,
centerY: 150,
selectEvent: "click",
onSelect: function($selected) {
var imgindex = $selected.index() + 1;
$(".my_class").removeClass("selected");
$(".img"+imgindex).addClass("selected");
$("#big").css("background-image", "url('images/"+imgindex+".jpg')");
},
angleOffset: 0
});

jQuery("#radial_container").radmenu("show");
});
</script>
<style>
body{
background: #f3f3f3;
}
#radial_container {
position:relative;
margin: 0 auto;
top: 80px;
height: 20px;
width: 20px;
}
.radial_div_item {
}
.radial_div_item.active {
z-index: 100;
}
.my_class {
cursor: pointer;
height: 75px;
width: 75px;
border: 5px solid #333;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius: 45px;
-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
box-shadow: 1px 1px 10px rgba(0,0,0,.5);
position: relative;
text-align: center;
font-size: 12px;
font-weight: bold;
font-family: "Arial";
}
.my_class:hover {
border-color: #0066cc;
}
.my_class:active {
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
-moz-box-shadow: 1px 5px 1px rgba(0,0,0,.5);
box-shadow: 1px 1px 5px rgba(0,0,0,.5);
top: 2px;
border-color: #e3e3e3;
}
.img1 { background-image: url("images/thumbs/1.jpg"); }
.img2 { background-image: url("images/thumbs/2.jpg"); }
.img3 { background-image: url("images/thumbs/3.jpg"); }
.img4 { background-image: url("images/thumbs/4.jpg"); }
.img5 { background-image: url("images/thumbs/5.jpg"); }
.img6 { background-image: url("images/thumbs/6.jpg"); }
.img7 { background-image: url("images/thumbs/7.jpg"); }
.img8 { background-image: url("images/thumbs/8.jpg"); }
.img9 { background-image: url("images/thumbs/9.jpg"); }
.img10 { background-image: url("images/thumbs/10.jpg"); }
.selected {
border-color: #0066cc;
}

#big {
position: relative;
border: 5px solid #0066cc;
width: 300px;
height: 300px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border-radius: 200px;
-webkit-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
-moz-box-shadow: 1px 1px 10px rgba(0,0,0,.5);
box-shadow: 1px 1px 10px rgba(0,0,0,.5);
}

</style>
</head>
<body>
<div id="radial_container">
<ul class="list">
<li class="item"><div class="my_class img1"></div></li>
<li class="item"><div class="my_class img2"></div></li>
<li class="item"><div class="my_class img3"></div></li>
<li class="item"><div class="my_class img4"></div></li>
<li class="item"><div class="my_class img5"></div></li>
<li class="item"><div class="my_class img6"></div></li>
<li class="item"><div class="my_class img7"></div></li>
<li class="item"><div class="my_class img8"></div></li>
<li class="item"><div class="my_class img9"></div></li>
<li class="item"><div class="my_class img10"></div></li>
</ul>
</div>

<div id="big"></div>

</body>
</html>

DEMO

Rating: 5

Membuat Ads Popup Dengan Efek Jquery

Langkah 1
1. Log in ke blog anda
2. Klik Rancangan
3. Klik Edit HTML
4. Cari Kode </head>
5. Setelah ketemu masukan kode di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-pesan').animate({top:"190px"}, 1000, "easeOutBounce");
// hilangkan kotak pesan saat tombol (x) diklik
$('a.close').click(function() {
$(this).parent().slideUp(800, "easeOutBounce");
return false;
});
});
</script>
<style>
#kotak-pesan{
position:fixed !important;
position:absolute; /* IE6 */
top:-900px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:10px;
background:#E9CF5F;
border:2px solid #fff;
font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}
#kotak-pesan a.close{
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
</style>

Simpan Templates anda yang sudah kamu Edit

Langkah 2

Setelah itu Masuk di Elemen Laman,
Klik Tambah Gadget

Pilih HTML/Javascript
Lalu masukan kode di bawah ini

<div id='kotak-pesan'>

ISI KONTEN YANG KAMU MAU

<a class='close' href='#'>×</a>
</div>

Rating: 5

Daftar Blogs Dammy Web 2.0

_http://blogger.com,9

_http://wordpress.com,9

_http://citeulike.org,8

_http://livejournal.com,8

_http://my.opera.com,8

_http://tumblr.com,8

_http://typepad.com,8

_http://weebly.com,8

_http://angelfire.com,7

_http://bravenet.com,7

_http://freewha.com,7

_http://jimdo.com,7

_http://multiply.com,7

_http://my.telegraph.co.uk,7

_http://officelive.com,7

_http://posterous.com,7

_http://rediff.com,7

_http://salon.com,7

_http://squidoo.com,7

_http://tripod.com,7

_http://webnode.com,7

_http://webs.com,7

_http://wikidot.com,7

_http://yola.com,7

_http://allvoices.com,6

_http://areavoices.com,6

_http://blog.co.uk,6

_http://blog.com,6

_http://blog.de,6

_http://blogsome.com,6

_http://diaryland.com,6

_http://dzone.com,6

_http://edublogs.org,6

_http://fc2.com,6

_http://freeblog.hu,6

_http://gather.com,6

_http://home.onsugar.com,6

_http://hotklix.com,6

_http://hubpages.com,6

_http://journalspace.com,6

_http://jumptags.com,6

_http://linkagogo.com,6

_http://moonfruit.com,6

_http://onsugar.com,6

_http://quizilla.teennick.com,6

_http://sphinn.com,6

_http://springnote.com,6

_http://travelblog.org,6

_http://twine.com,6

_http://twoday.net,6

_http://ucoz.com,6

_http://webspawner.com,6

_http://webstarts.com,6

_http://wetpaint.com,6

_http://xanga.com,6

_http://zimbio.com,6

_http://20six.co.uk,5

_http://350.com,5

_http://alivenotdead.com,5

_http://beep.com,5

_http://blinkweb.com,5

_http://blog.com.es,5

_http://blog.hr,5

_http://blogdrive.com,5

_http://blogs.ie,5

_http://blogtext.org,5

_http://buddymarks.com,5

_http://business.blinkweb.com,5

_http://devhub.com,5

_http://ewebsite.com,5

_http://flixya.com,5

_http://freeblogit.com,5

_http://freeflux.net,5

_http://freehostia.com,5

_http://hazblog.com,5

_http://insanejournal.com,5

_http://kirtsy.com,5

_http://livelogcity.com,5

_http://mytripjournal.com,5

_http://opendiary.com,5

_http://snappages.com,5

_http://sosblog.com,5

_http://sosblogs.com,5

_http://soulcast.com,5

_http://soup.io,5

_http://spurl.net,5

_http://tblog.com,5

_http://terapad.com,5

_http://thoughts.com,5

_http://webgarden.com,5

_http://weblogs.us,5

_http://yousaytoo.com,5

_http://zoomblog.com,5

_http://zoomshare.com,5

_http://bcz.com,4

_http://bigadda.com,4

_http://blog.ca,4

_http://blogetery.com,4

_http://bloggerteam.com,4

_http://bloggum.com,4

_http://bloghi.com,4

_http://blogreaction.com,4

_http://blurty.com,4

_http://busythumbs.com,4

_http://doomby.com,4

_http://fotopages.com,4

_http://freeblogspot.org,4

_http://getjealous.com,4

_http://hipero.com,4

_http://hpage.com,4

_http://i.ph,4

_http://inube.com,4

_http://iseekblog.com,4

_http://mywapblog.com,4

_http://netcipia.com,4

_http://nireblog.com,4

_http://ohlog.com,4

_http://spi-blog.com,4

_http://tabulas.com,4

_http://typolis.net,4

_http://upsaid.com,4

_http://visualsociety.com,4

_http://wallinside.com,4

_http://wikipages.com,4

_http://blogge.rs,3

_http://flukiest.com,3

_http://iblog.at,3

_http://journalfen.net,3

_http://mylinkvault.com,3

_http://publr.com,3

_http://spyuser.com,3

_http://weblogplaza.com,3

_http://wordcountjournal.com,3

_http://blogpico.com,2

_http://blogster.com,2

_http://evood.com,2

_http://uwcblog.com,2

_http://2itb.com,N/A

_http://blogspirit.com,N/A

_http://blogstream.com,N/A

_http://honmag.com,N/A

_http://myblogsite.com,N/A

_http://simpy.com,N/A

_http://sphere.com,N/A

Rating: 5