Facebook style lightbox pop up box for blogger- Facebox

Facebox is a Facebook lightbox like pop-up box that displays any content or image in a pop-up box. This widget can be used for displaying any kind of content in blogger. The credit for making this fantastic pop up box script goes to FamSpam.com and I would thank Dynamic Drive for Sharing it! i am too using this on my blog on the feed subscription links and other places. You can view the demo right here.

• You can see the demo on the top navigation links on my page

I am providing with a method to use it on your blogger blog without hosting any javascripts or CSS files or even images anywhere, just copy and paste the code and you are done!

Note- The code would be big to see because i am uploading javascripts in blogger itself

To add this feature to your template follow these steps:

• Go to Blogger dashboard> Layout edit HTML section
• Copy and paste this code just above </head> section in your template.

<script type='text/javascript'>
//<![CDATA[
/*
* Facebox (for jQuery)
* version: 1.1 (03/01/2008)
* @requires jQuery v1.2 or later
*
* Examples at http://famspam.com/facebox/
*
* Licensed under the MIT:
*   http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2007, 2008 Chris Wanstrath [ chris@ozmm.org ]
*
* Usage:
* 
*  jQuery(document).ready(function() {
*    jQuery('a[rel*=facebox]').facebox()
*  })
*
*  <a href="#terms" rel="facebox">Terms</a>
*    Loads the #terms div in the box
*
*  <a href="terms.html" rel="facebox">Terms</a>
*    Loads the terms.html page in the box
*
*  <a href="terms.png" rel="facebox">Terms</a>
*    Loads the terms.png image in the box
*
*
*  You can also use it programmatically:
*
*    jQuery.facebox('some html')
*
*  This will open a facebox with "some html" as the content.
*   
*    jQuery.facebox(function() { ajaxes })
*
*  This will show a loading screen before the passed function is called,
*  allowing for a better ajax experience.
*
*/
(function($) {
  $.facebox = function(data, klass) {
    $.facebox.init()
    $.facebox.loading()
    $.isFunction(data) ? data.call($) : $.facebox.reveal(data, klass)
  }
  $.facebox.settings = {
    loading_image : 'http://i642.photobucket.com/albums/uu149/ujujjaval/loadinggt6.gif',
    close_image   : 'http://i642.photobucket.com/albums/uu149/ujujjaval/closelabelpn7.gif',
    image_types   : [ 'png', 'jpg', 'jpeg', 'gif' ],
    facebox_html  : '\
  <div id="facebox" style="display:none;"> \
    <div class="popup"> \
      <table> \
        <tbody> \
          <tr> \
            <td class="tl"/><td class="b"/><td class="tr"/> \
          </tr> \
          <tr> \
            <td class="b"/> \
            <td class="body"> \
              <div class="header"> \
                <a style="text-align:right;" href="#" class="close"> \
                  <img src="http://i642.photobucket.com/albums/uu149/ujujjaval/closelabelpn7.gif" title="close" class="close_image" /> \
                </a> \
              </div> \
              <div class="content"> \
              </div> \
              <div class="footer"> \
                 <a href="http://technotricksng.blogspot.com/"> \
                  Get This \
                </a> \
              </div> \
            </td> \
            <td class="b"/> \
          </tr> \
          <tr> \
            <td class="bl"/><td class="b"/><td class="br"/> \
          </tr> \
        </tbody> \
      </table> \
    </div> \
  </div>'
  }
  $.facebox.loading = function() {
    if ($('#facebox .loading').length == 1) return true
    $('#facebox .content').empty()
    $('#facebox .body').children().hide().end().
      append('<div class="loading"><img src="'+$.facebox.settings.loading_image+'"/></div>')
    var pageScroll = $.facebox.getPageScroll()
    $('#facebox').css({
      top:    pageScroll[1] + ($.facebox.getPageHeight() / 10),
      left:    pageScroll[0]
    }).show()
    $(document).bind('keydown.facebox', function(e) {
      if (e.keyCode == 27) $.facebox.close()
    })
  }
  $.facebox.reveal = function(data, klass) {
    if (klass) $('#facebox .content').addClass(klass)
    $('#facebox .content').append(data)
    $('#facebox .loading').remove()
    $('#facebox .body').children().fadeIn('normal')
  }
  $.facebox.close = function() {
    $(document).trigger('close.facebox')
    return false
  }
  $(document).bind('close.facebox', function() {
    $(document).unbind('keydown.facebox')
    $('#facebox').fadeOut(function() {
      $('#facebox .content').removeClass().addClass('content')
    })
  })
  $.fn.facebox = function(settings) {
    $.facebox.init(settings)
    var image_types = $.facebox.settings.image_types.join('|')
    image_types = new RegExp('\.' + image_types + '$', 'i')
    function click_handler() {
      $.facebox.loading(true)
      // support for rel="facebox[.inline_popup]" syntax, to add a class
      var klass = this.rel.match(/facebox\[\.(\w+)\]/)
      if (klass) klass = klass[1]
      // div
      if (this.href.match(/#/)) {
        var url    = window.location.href.split('#')[0]
        var target = this.href.replace(url,'')
        $.facebox.reveal($(target).clone().show(), klass)
      // image
      } else if (this.href.match(image_types)) {
        var image = new Image()
        image.onload = function() {
          $.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
        }
        image.src = this.href
      // ajax
      } else {
        $.get(this.href, function(data) { $.facebox.reveal(data, klass) })
      }
      return false
    }
    this.click(click_handler)
    return this
  }
  $.facebox.init = function(settings) {
    if ($.facebox.settings.inited) {
      return true
    } else {
      $.facebox.settings.inited = true
    }
    if (settings) $.extend($.facebox.settings, settings)
    $('body').append($.facebox.settings.facebox_html)
    var preload = [ new Image(), new Image() ]
    preload[0].src = $.facebox.settings.close_image
    preload[1].src = $.facebox.settings.loading_image
    $('#facebox').find('.b:first, .bl, .br, .tl, .tr').each(function() {
      preload.push(new Image())
      preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
    })
    $('#facebox .close').click($.facebox.close)
    $('#facebox .close_image').attr('src', $.facebox.settings.close_image)
  }
  // getPageScroll() by quirksmode.com
  $.facebox.getPageScroll = function() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
      xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {     // Explorer 6 Strict
      yScroll = document.documentElement.scrollTop;
      xScroll = document.documentElement.scrollLeft;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
      xScroll = document.body.scrollLeft;   
    }
    return new Array(xScroll,yScroll)
  }
  // adapter from getPageSize() by quirksmode.com
  $.facebox.getPageHeight = function() {
    var windowHeight
    if (self.innerHeight) {    // all except Explorer
      windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
      windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
      windowHeight = document.body.clientHeight;
    }   
    return windowHeight
  }
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
    jQuery(document).ready(function($) {
      $(&#39;a[rel*=facebox]&#39;).facebox()
    })
</script>
<script src='http://ads.googlecode.com/files/jquery-1.2.2.pack.js' type='text/javascript'/>
<style>
#facebox .b {  background:url(http://i642.photobucket.com/albums/uu149/ujujjaval/94484389sa1.png);}
#facebox .tl { background:url(http://i642.photobucket.com/albums/uu149/ujujjaval/tlsd4.png);}
#facebox .tr {  background:url(http://i642.photobucket.com/albums/uu149/ujujjaval/trxw1.png);}
#facebox .bl {  background:url(http://i642.photobucket.com/albums/uu149/ujujjaval/blnk5.png);}
#facebox .br {  background:url(http://i642.photobucket.com/albums/uu149/ujujjaval/brgw6.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: #fff; 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 .header {padding-top: 0px; margin-top: 0px;  text-align: right;}
#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {height: 10px; width: 10px;
  overflow: hidden;padding: 0;}
.current_page_item {background:#dee5e5;color:#2299ff;}
</style>

• Display an image using Facebox: If you want to display images using facebox, use the following code;

<p><a href="http://www.x.com/image.jpg" rel="facebox"> Wolverine Hacks</a></p>

• FaceBox used to display an inline DIV: This is the most useful code. It can be used to display text notes, announcement, disclaimer, contact form and so on... In this case a link is placed on your blog and when you click on that link, the pop up (like facebook) appears.

<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 blog, with ID="mydiv" and style set to "display:none" <br /><a="http://www.link-address.com">Link name</a></div>

3. FaceBox used to display an external page, plus apply a CSS class to the container (to further style it): It is like previous one only, but with more styling is added to the pop up.

<style type="text/css">.thickstyle{background: silver;}</style>"<p><a href="external.htm" rel="facebox[.thickstyle]">View "External.htm" fetched via Ajax, further styled with ".thickstyle" CSS class</a></p>

Note: Set href attribute point it to any external link, It will not Work.
That's all you need to do. If you like this post please comment and give feedback!

 

 

hhhBlogger widget,Pop-up widget,blogger,Facebook style,lightbox,facebox, jquery gadget,popup box

Read more “Facebook style lightbox pop up box for blogger- Facebox”

Pop up box widgets in blogger

I found a Pop up box hack for blogger using which you can show content in Pop up Boxes, within your own site! This Widget is called Absolute Pop up box by alexiel. This widget is useful to show some showcase or short content. I have just modified the method a little bit to avoid uploading a .js file using my hack to host .js files on blogger itself.
To add this to blogger follow these step:

• Go to Blogger Dashboard> Layout> edit HTML
• Paste this code before </body> section of your layout

<script type='text/javascript'>
//<![CDATA[
function move_box(an, box) {
var cleft = 0;
var ctop = 0;
var obj = an;
while (obj.offsetParent) {
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 8;
if (document.body.currentStyle &&
document.body.currentStyle['marginTop']) {
ctop += parseInt(
document.body.currentStyle['marginTop']);
}
box.style.top = ctop + 'px';
}
function show_hide_box(an, width, height, borderStyle) {
var href = an.href;
var boxdiv = document.getElementById(href);
if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
}
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#fff';
var contents = document.createElement('iframe');
contents.scrolling = 'yes';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;
boxdiv.appendChild(contents);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);
return false;
}
//]]>
</script>

• Save your template and you are done!

Now if you want to add pop box to your blog links or show some website in pop up box, use this kind of code .Add an onClick handler to the hyperlinks you want to display in the boxes. The handler should call the show_hide_box function with four parameters. The first should always be 'this'. The second is the width of the box in pixels, the third is the height in pixels, and the last one is the border style.

<a href="http://technotricksng.blogspot.com/" onClick="return show_hide_box(this,200,270,'2px dotted')">Techno Trick</a>

You are done!

Read more “Pop up box widgets in blogger”

Disable right click on Your Blogger blog

Many times you come across articles that you have written on other blogs, that is fine that you are getting a publicity, but many times people forget to give credits for your work and that's the most annoying thing. So the solution is either notifying on your blog about your license and give link back  to you or the stricter method to disable right click on your blog and thus, disabling copy/paste!

To disable right click on your blog follow these steps:

• Login to your blogger dashboard.
• Go to Layout-->Page Elements sections.
• Click on "Add a Gadget" and select 'HTML/JavaScripts and copy the code given below:

<SCRIPT

language=JavaScript>
<!-- http://www.spacegun.co.uk -->
var message = "function disabled";
function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; }
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } }
document.onmousedown = rtclickcheck;
</SCRIPT>

• Click on save and you are done!

When somebody will right click on your blog, a warning window will open saying “ function disabled” . If you want to change the message then edit the content in bold in code above.

Read more “Disable right click on Your Blogger blog”

Add 4 column footer to blogger

Most Professional looking templates use 3 column footers today. Three column footers are very common but four column footers are not very common as i am using. So if you want to add four column footer to your blog follow these steps.

1.Log in to your dashboard--> layout- -> Edit HTML
2.Scroll down to where you see this:

<b:section class='footer' id='footer'/>

Look at the picture below.

3.Now Replace above Line with below code.

<div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>
</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>
<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader'

type='Text'/>
</b:section>
</div>
<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

4.Now again scroll down to where you see this:

]]></b:skin>

5.Now add below code before the  ]]></b:skin>

#footer-column-container { border: .3px dotted #cccccc;}
.footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}
.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}
.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}
.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}
.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

6.Now save your template and you are done.

Read more “Add 4 column footer to blogger”

Socio Fluid Social Bookmarking buttons for Blogger

First  go to Socio Fluid Website and preview the widget:

2.If you are not like it you can customize it,

You can change size of icon,add or remove icon,....

3.scroll down at the end of the page and press generate widget button:

4.Preview the widget on top of the page and if you like it Click on 'Add to Blogger' or 'Copy to Clipboard'.But if you want to add this widget below each blog posts click on 'Copy to Clipboard' to copy the code.

5.Now Log in to your dashboard--> layout- -> Edit HTML

6.Click on "Expand Widget Templates"
7.Scroll down to where you see this:

<data:post.body/>

8.Now paste your widget code, below of the above line.

9.Now save your template and your done.It look like this.

Read more “Socio Fluid Social Bookmarking buttons for Blogger”

Host Javascripts .js files on blogger for free unlimited bandwidth.

This has been one of the main drawbacks of blogger that we cannot host our javascripts or .js files on to it. But now there is a solution for it. You can now host your javascripts on blogger with unlimited bandwidth and free.
To host your javascripts or .js files on blogger-

* Your JavaScript looks like this:


Now replace the first code with the second code you got after adding your javascript form .js file. Save your template or gadget and you are done!

Read more “Host Javascripts .js files on blogger for free unlimited bandwidth.”

Add Slide over Page Peel Effect To Blogger Template

You can add a CSS Based Page Peel Effect to Blogger Blog to display ads or to show Feed Subscription links. This Page peel effect is very attractive and gives a complete new web 2.0 feel to your blogger template. I do not use this hack because i already have a lot of hacks related to feed subscription on my blog.
The initial look is like this:
image
On mouse hover it looks like this:
image
if you want to use it on your blog then follow these steps:

* Login to your blogger dashboard > layout> Edit HTML (Don’t "Expand Widget Templates")
* Find ]]> tag in your template and paste the following code just before it:

#pageflip {
position: relative;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
z-index: 50;
right: 0; top: 0;
background: url(http://2.bp.blogspot.com/_p4Te9Li52fs/So9Qb5J1yWI/AAAAAAAAAAU/8_mR7vt-tCw/subscribe.png) no-repeat right top;
text-indent: -9999px;
}

* Find tag in your

template and paste the following code just before it:



* Find tag in your template and paste the following code just before it:

Subscribe via RSS

Remember to change YOUR FEEDBURNER ID
Save Your Template and you are done!

Read more “Add Slide over Page Peel Effect To Blogger Template”