» » Thickbox Jquery Efek CSS3

Thickbox Jquery Efek CSS3

ehem, pas saya cari tutorial Thickbox Jquery Efek CSS3 nggak di sengaja nemu tutorialnya Bang Andre Pandet ya langsung saya Copy Paste. hehe begini Thickboxnya,


ya sekarang ke cara pembuatannya
loggin Blogger> Rancangan> Edit Html
Cari kode ]]></b:skin> pastekan kode berikut diatasnya

/* CCs Thickbox*/ {
  padding:0;
  margin:0;
}
#pandet_window {
  font:17px Arial,Helvetica,sans-serif;
  color:#333333;
}
#pandet_secondLine {
  font:19px Arial,Helvetica,sans-serif;
  color:#666666;
}
#pandet_window a:link {
  color:#666666;
}
#pandet_window a:visited {
  color:#666666;
}
#pandet_window a:hover {
  color:#000;
}
#pandet_window a:active {
  color:#666666;
}
#pandet_window a:focus {
  color:#666666;
}
#pandet_overlay {
  position:fixed;
  z-index:100;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
}
.pandet_overlayMacFFBGHack {
  background:#000;
}
.pandet_overlayBG {
  background-color:black;
  filter:alpha(opacity=90);
  -moz-opacity:0.7;
  -khtml-opacity:0.7;
  opacity:0.7;
}
* html #pandet_overlay {
  /* ie6 hack */position:absolute;
  height:expression(document.body.scrollHeight > document.body.offsetHeight ?document.body.scrollHeight :document.body.offsetHeight + 'px');
}
#pandet_window {
  position:fixed;
  background:#002200;
  z-index:102;
  color:#999;
  display:none;
  border:10px solid #fff;
  text-align:left;
  top:50%;
  left:50%;
  -webkit-box-shadow:0px 0px 30px #000;
  -moz-box-shadow:0px 0px 30px #000;
  background:#333;
}
* html #pandet_window {
  /* ie6 hack */position:absolute;
  margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (pandetWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#pandet_window img#pandet_Image {
  display:block;
  margin:15px 0 0 15px;
  border:2px solid #001100;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  -moz-box-shadow:0px 0px 10px #000;
}
#pandet_caption {
  height:25px;
  padding:7px 30px 10px 25px;
  float:left;
}
#pandet_closeWindow {
  height:25px;
  padding:11px 25px 10px 0;
  float:right;
}
#pandet_closeAjaxWindow {
  padding:7px 10px 5px 0;
  margin-bottom:1px;
  text-align:right;
  float:right;
}
#pandet_ajaxWindowTitle {
  float:left;
  padding:7px 0 5px 10px;
  margin-bottom:1px;
}
#pandet_title {
  background-color:#888;
  height:27px;
}
#pandet_ajaxContent {
  clear:both;
  padding:2px 15px 15px 15px;
  overflow:auto;
  text-align:left;
  line-height:1.4em;
}
#pandet_ajaxContent.pandet_modal {
  padding:15px;
}
#pandet_ajaxContent p {
  padding:5px 0px 5px 0px;
}
#pandet_load {
  position:fixed;
  display:none;
  height:13px;
  width:208px;
  z-index:103;
  top:50%;
  left:50%;
  margin:-6px 0 0 -104px;
  /* -height/2 0 0 -width/2 */;
}
* html #pandet_load {
  /* ie6 hack */
position:absolute;
  margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (pandetWindowMargin = document.documentElement &&document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#pandet_HideSelect {
  z-index:99;
  position:fixed;
  top:0;
  left:0;
  background-color:#002200;
  border:none;
  filter:alpha(opacity=0);
  -moz-opacity:0;
  opacity:0;
  height:100%;
  width:100%;
}
* html #pandet_HideSelect {
  /* ie6 hack */position:absolute;
  height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight :document.body.offsetHeight + 'px');
}
#pandet_iframeContent {
  clear:both;
  border:none;
  margin-bottom:-1px;
  margin-top:1px;
  _margin-bottom:1px;
}
#rata {
  text-align:center;
}
button {
  width:300px;
  color:#ccc;
  font-size:17px;
  padding:8px;
  text-decoration:none;
  -webkit-border-radius:5px;
  -moz-border-radius:1px;
  -moz-box-shadow:0px 5px 10px #000;
  text-shadow:1px 1px 2px #000;
  border:1px solid #000;
  background:-moz-linear-gradient(bottom,#333,#000);
}
button:hover {
  background:-moz-linear-gradient(top,#333,#000);
}
    

selanjutnya cari kode </head> dan pastekan kode berikut diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script src=' http://generation-platinum2.googlecode.com/files/thickbox.1.1.js' type='text/javascript'/>

kode yang berwarna merah jika sudah ada di template anda, anda tidak perlu memasukkannya lagi

Selanjutnya untuk kode pemanggilan

pemanggilan dengan Gambar

<div id="rata">
<a class="thickbox" href="INI ADALAH TEMPAT UNTUK URL GAMBAR DI TAYANGKAN" title="Silahkan kasih judul di sini"><img src="INI ADALAH TEMPATNYA URL GAMBAR PEMANGGIL" title="Klik di sini" /></a></div>


 Pemanggilan dengan button
<a class="thickbox" href=" INI ADALAH TEMPAT UNTUK URL GAMBAR DI TAYANGKAN " title="Silahkan kasih judul di sini"><button>Klik disini</button></a>  


Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Unknown, Published at 09.25 and have 7 komentar

7 komentar: