Pages

Home » Posts filed under jquery
Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Membuat Lightbox Dengan Jquery

type='html'>
Ada sejuta trik blogger untuk mengedit blog khususnya dalam editing tampilan gambar di blogger. Salah satunya dengan membuat lightbox dengan jquery. Trik membuat lightbox itu sendiri sebenarnya sudah lama sekali dibuat oleh master-master blog. Namun akhir-akhir ini banyak website ternama bahkan jejaring sosial Facebook dan Google+ masih menggunakan trik ini.

Sebenarnya apasih lightbox di Blogger itu? Lightbox di blogger bukan diartikan sebagai kotak lampu atau lampion di blogger melainkan menampilkan gambar yang masih dalam halaman posting. Maksudnya menampilkan gambar blogger di halaman posting dengan lebih mengutamakan gambar itu sendiri. Bukan halaman gambar atau alamat gambar. Maka dari itu di luar tampilan gambar agak samar, terarsir, atau bahkan hitam.

Sebagai contoh klik gambar di atas atau yang lebih menarik (lihat Cewek Imut) dan akan terlihat hasilnya seperti saat kita melihat foto di facebook atau google+. Daripada berpanjang lebar malah gak jelas, Mari kita buat lightbox dengan jquery.

1. Login di blogger.

2. Dalam posisi dasboard blog sahabat semua klik Design

3. Klik lagi Edit HTML

4. Centang

5. Jangan lupa backup dulu ya sobat

6. Cari kode di bawah ini :

7. Paste di atasnya kode berikut :

8. Tambahkan di atas kode berikut :
9. Sekarang klik

10. Untuk Uji coba sekarang Posting seperti biasa.

11. Tulis sesuka sobat. Dan Upload Gambar sobat.

12. Setelah Upload gambar. Klik Edit HTML di sebelah kiri Compose. (Dalam keadaan Edit HTML saat posting)

13. Dalam posisi Edit HTML. Gambar akan berubah menjadi kode seperti ini
14. Edit kode gambar sahabat dengan menambahkan  class="spicebox" dan title="Judul Gambar" Sehingga ilustrasi kodenya menjadi :

15. Untuk hasil akhirnya kode gambar no. 13  kurang lebih akan menjadi seperti berikut :

16. Klik atau untuk melihatnya. Dan jadilah lightbox dengan jquery.

Jika sahabat tidak menggunakan cara 1 sampai 16. Dengan cara berikut ini sahabat bisa juga membuat lightboxt di blogger dengan jquery dengan script berikut ini.

Copy kode di atas dan pastekan di atas dan simpan. Sahabat tidak perlu susah payah menambah kode setiap postingan. Cukup posting seperti biasa. Namun jika menggunakan cara tersebut, secara tidak langsung menelanjangi kemampuan atau ilmu sahabat dan mematikan kreatifitas sahabat. Sekarang terserah sahabat semua mau bersusah payah sedikit atau yang praktis tanpa tahu bagaimana membuat lightbox di blogger dengan jquery. 

Bagi sahabat yang menggunakan tampilan dasboard baru, berbeda dengan cara di atas. Sahabat bisa membuat lightbox di blogspot dengan alamat di bawah ini :

http://www.bloggerplugins.org/2011/09/official-blogger-light-box.html
http://bloggerfreelayouts.blogspot.com/2011/08/jquery-blogger-image-gallery-blogspot.html

Happy Blogging! by. Sejuta Trik Blogger
Labels: , , ,

Thickbox Jquery Efek CSS3

type='html'>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 ]]> 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 dan pastekan kode berikut diatasnya

Labels: ,

Item Blur Effect With CSS3 and Jquery

type='html'>Setelah Saya pikir pikir ini cocok untuk Saya Postingin karena alasan yang tidak bisa saya jelaskan wkwkwk, ini  saya dapatkan di suatu website yang tutorialnya keren keren, ye mungkin kalian sudah tau ya, langsung lihat screenshot dibawah ya
  
                             

biar lebih jelas ni saya kasi demo

[DEMO]

Kerangka




Template Cyber-JM V2


01 April 2012

Pada hari minggu tepatnya tanggal 1 April 2012 saya mau bagi template Cyber-JM yang kedua, tadinya mau bagi template pertama ane, karena backup terlalu banyak jadi pusing,





Tooltip keren (Link,Gambar, Akronim)


30 Maret 2012

oke jadi ke inget sama cyber jm yang dulu yang pake tooltip ke semua(link,title,gambar) pas udah inget langsung coba lagi di template lain ternyata bisa, lansung di share, lihat screenshot berikut.. preet





On Mouse over Alert


29 Maret 2012

On mouseover alert berfungsi untuk menampilkan pesan pada saat pengunjung blog menggerakkan cursor di atas gambar. Bentuk KODE yang digunakan adalah sebuah javascript yang sangat sederhana





Text-Shadow Dengan Efek Hover


28 Maret 2012

Text-shadow dengan efek hoverLangsung aja Sekarang mari kita mulai pembahasan CSS3 Text-shadow dengan efek hover silahkan arahkan kursor ke kalimat di bawah:





Membuat Menu Melayang Dengan Efek Fade Out


27 Maret 2012

Malam sobat, ok artikel kali ini berjudul  Membuat Menu Melayang Dengan Efek Fade Out  menu ini mungkin belum banyak di share blog-blog mudah mudahan Cyber-JM yang pertama. Amin hehe





Modifikasi tampilan blogroll


26 Maret 2012

Sudah beberapa hari ini saya nggak posting, lagi sibuk dengan dunia nyata, oke dari pada mikirin ntu lebih baik modif tu tampilan blogroll sobat, hehehe.ni saya kasi blogroll ini mengikuti u






Javascript Popup Window Dengan Animasi


22 Maret 2012

udah berapa hari ya saya gak posting.. hehe soalnya saya gak ada bahan dan sekarang baru dapat oke udah pernah kan klik button yang nantinya keluar popup





CSS

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* Fonts */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* General Demo Style */
body{
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
background: #ddd url(../images/noisy_blue.jpg) repeat top left;
font-weight: 400;
font-size: 15px;
color: #333;
}
a{
color: #333;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
text-align: center;
}
.clr{
clear: both;
}
.container > header{
padding: 30px 30px 10px 30px;
margin: 0px 20px 10px 20px;
position: relative;
display: block;
}
.container > header:after{
content: '';
height: 1px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
background: rgba(0,0,0,0.1);
box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.7);
}
h1{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
text-transform: uppercase;
font-size: 50px;
line-height: 50px;
position: relative;
font-weight: 400;
color: #111;
text-shadow: 0px 0px 1px rgba(0,0,0,0.7);
    padding: 0px 0px 5px 0px;
margin: 0px 20px;
    text-align: center;
}
h1 span{
color: #ffd252;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
h2{
font-size: 16px;
font-style: italic;
padding: 0px 0px 15px 0px;
}
/* Header Style */
.header{
font-family:'Arial Narrow', Arial, sans-serif;
line-height: 24px;
font-size: 11px;
background: #000;
opacity: 0.9;
text-transform: uppercase;
z-index: 9999;
position: relative;
-moz-box-shadow: 1px 0px 2px #000;
-webkit-box-shadow: 1px 0px 2px #000;
box-shadow: 1px 0px 2px #000;
}
.header a{
padding: 0px 10px;
letter-spacing: 1px;
color: #ddd;
display: block;
float: left;
}
.header a:hover{
color: #fff;
}
.header span.right{
float: right;
}
.header span.right a{
float: none;
display: inline;
}
p.demos{
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    text-align:center;
display: block;
line-height: 30px;
padding: 20px 0px;
}
p.demos a{
    display: inline-block;
width: 60px;
height: 60px;
background: #222;
margin: 0px 4px;
color: #fff;
line-height: 60px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 50%;
font-size: 16px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.2);
}
p.demos a:hover{
opacity: 0.7;
}
p.demos a.current-demo,
p.demos a.current-demo:hover{
background: #ffd252;
}
.ib-container{
position: relative;
width: 800px;
margin: 30px auto;
display: block;
}
.ib-container:before,
.ib-container:after {
    content:"";
    display:table;
}
.ib-container:after {
    clear:both;
}
.ib-container article{
display: block;
width: 140px;
height: 220px;
background: #fff;
cursor: pointer;
float: left;
border: 10px solid #fff;
text-align: left;
text-transform: none;
margin: 15px;
z-index: 1;
-webkit-backface-visibility: hidden;
box-shadow:
0px 0px 0px 10px rgba(255,255,255,1),
1px 1px 3px 10px rgba(0,0,0,0.2);
-webkit-transition:
opacity 0.4s linear,
-webkit-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-moz-transition:
opacity 0.4s linear,
-moz-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-o-transition:
opacity 0.4s linear,
-o-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-ms-transition:
opacity 0.4s linear,
-ms-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
transition:
opacity 0.4s linear,
transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
}
.ib-container h3 a{
font-size: 16px;
font-weight: 400;
color: #000;
color: rgba(0, 0, 0, 1);
text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
opacity: 0.8;
}
.ib-container article header span{
font-size: 10px;
font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
padding: 10px 0;
display: block;
color: #FFD252;
color: rgba(255, 210, 82, 1);
text-shadow: 0px 0px 0px rgba(255, 210, 82, 1);
text-transform: uppercase;
opacity: 0.8;
}
.ib-container article p{
font-family: Verdana, sans-serif;
font-size: 10px;
line-height: 13px;
color: #333;
color: rgba(51, 51, 51, 1);
text-shadow: 0px 0px 0px rgba(51, 51, 51, 1);
opacity: 0.8;
}
.ib-container h3 a,
.ib-container article header span,
.ib-container article p{
-webkit-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
-moz-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
-o-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
-ms-transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
transition:
opacity 0.2s linear,
text-shadow 0.5s ease-in-out,
color 0.5s ease-in-out;
}
/* Hover Style for all the items: blur, scale down*/
.ib-container article.blur{
box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.7;
}
.ib-container article.blur h3 a{
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
color: rgba(0, 0, 0, 0);
opacity: 0.5;
}
.ib-container article.blur header span{
text-shadow: 0px 0px 10px rgba(255, 210, 82, 0.9);
color: rgba(255, 210, 82, 0);
opacity: 0.5;
}
.ib-container article.blur  p{
text-shadow: 0px 0px 10px rgba(51, 51, 51, 0.9);
color: rgba(51, 51, 51, 0);
opacity: 0.5;
}
/* Hover Style for single item: scale up */
.ib-container article.active{
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
box-shadow:
0px 0px 0px 10px rgba(255,255,255,1),
1px 11px 15px 10px rgba(0,0,0,0.4);
z-index: 100; opacity: 1;
}
.ib-container article.active h3 a,
.ib-container article.active header span,
.ib-container article.active p{
opacity; 1;
}
Javascript
Labels: ,

Show/Hide pada Menu komentar dengan jquery

type='html'>Sobat Blogger Sudah pernah lihat menu bagian dari komentar blog kita buat tambahan Menu show/hide? atau jelasnya seperti menu dengan tombol untuk membuka dan menutup menu yang kita inginkan, dan untuk sekarang saya coba terapkan pada Menu Form Komentar.
Untuk Demonya bisa dilihat >>>> Di Sini



  • Login blogger
  • Rancangan, Edit Html
  • Download Template Lengkap
  • Centang menu Expand Template Widgets

Cari kode ]]> dan simpan CSS berikut diatasnya :

6. Berikutnya simpan Script berikut diatas kode :
7. Cari kode seperti dibawah ini (ctrl+F untuk mempermudah pencarian) :


8. Simpan template dan lihat hasilnya. Silahkan dikembangkan sesuai keinginan. Semoga bermanfaat.

Labels: , , ,
Subscribe to: Posts (Atom)