Image Demo:
Content View Demo:
How to install to blogger
Step 1:
Go to EDIT HTML and Past the below code above </head>
<script src='http://js-files-hosting-and-sharing.googlecode.com/files/jquery-1.2.2.pack.js' type='text/javascript'/>
<script src='http://js-files-hosting-and-sharing.googlecode.com/files/facebox.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
<script src='http://js-files-hosting-and-sharing.googlecode.com/files/facebox.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
step 2:
past the below css code above ]]></b:skin> or Go to Design>Template Designer>Advanced>Add CSS past the code and Apply to Blog
/*--facebox
-------------------------*/
#facebox .b {
background:url(http://3.bp.blogspot.com/-ISW2GRGR_qY/TlJJ1k_ovcI/AAAAAAAABU8/QmnbzaHjV5k/s1600/b.png);
}
#facebox .tl {
background:url(http://3.bp.blogspot.com/-HBD69TFIrCA/TlJJ2Ot2QII/AAAAAAAABVU/lC4dKK_WirI/s320/tl.png);
}
#facebox .tr {
background:url(http://3.bp.blogspot.com/-4HXZ5BCSs0w/TlJJ2re0kZI/AAAAAAAABVc/V1IrL7WD_sc/s1600/tr.png);
}
#facebox .bl {
background:url(http://2.bp.blogspot.com/-5IOIk_QON8g/TlJJ15mu15I/AAAAAAAABVE/faIO6zrqTrg/s320/bl.png);
}
#facebox .br {
background:url(http://1.bp.blogspot.com/-N_JF3s0rBaA/TlJJ1yL9TwI/AAAAAAAABVM/Hf2jE_ixwP0/s320/br.png);
}
#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}
#facebox .popup {
position: relative;
}
#facebox table {
margin: auto;
border-collapse: collapse;
}
#facebox .body {
padding: 10px;
background: white;
width: 370px;
}
#facebox .loading {
text-align: center;
}
#facebox .image {
text-align: center;
}
#facebox img {
border:0;
}
#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 10px;
text-align: right;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}
-------------------------*/
#facebox .b {
background:url(http://3.bp.blogspot.com/-ISW2GRGR_qY/TlJJ1k_ovcI/AAAAAAAABU8/QmnbzaHjV5k/s1600/b.png);
}
#facebox .tl {
background:url(http://3.bp.blogspot.com/-HBD69TFIrCA/TlJJ2Ot2QII/AAAAAAAABVU/lC4dKK_WirI/s320/tl.png);
}
#facebox .tr {
background:url(http://3.bp.blogspot.com/-4HXZ5BCSs0w/TlJJ2re0kZI/AAAAAAAABVc/V1IrL7WD_sc/s1600/tr.png);
}
#facebox .bl {
background:url(http://2.bp.blogspot.com/-5IOIk_QON8g/TlJJ15mu15I/AAAAAAAABVE/faIO6zrqTrg/s320/bl.png);
}
#facebox .br {
background:url(http://1.bp.blogspot.com/-N_JF3s0rBaA/TlJJ1yL9TwI/AAAAAAAABVM/Hf2jE_ixwP0/s320/br.png);
}
#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
}
#facebox .popup {
position: relative;
}
#facebox table {
margin: auto;
border-collapse: collapse;
}
#facebox .body {
padding: 10px;
background: white;
width: 370px;
}
#facebox .loading {
text-align: center;
}
#facebox .image {
text-align: center;
}
#facebox img {
border:0;
}
#facebox .footer {
border-top: 1px solid #DDDDDD;
padding-top: 5px;
margin-top: 10px;
text-align: right;
}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
height: 10px;
width: 10px;
overflow: hidden;
padding: 0;
}
<a href="image.jpg" rel="facebox">Image Eye</a>
div facebox jquery use:
<p><a href="#mydiv" rel="facebox">View DIV with id="mydiv" on the page</a></p>
<div id="mydiv" style="display:none">
This is the contents of a hidden DIV on the page, with ID="mydiv" and style set to "display:none" <br />(you can add some adsense code here to be displyed when clicked)
</div>
Comments
Post a Comment