Programming Tutorials

This is any more tutorial on popup widget using JQuery For Blogger. This widget is planned for get more Face-book like box. The more Face-book likes way more traffic to your blog. As You Know Social Media has turn out to be the most famous platform to share your blog posts with the world and Face-book is really the king of Social Media. When visitor come to your blog first Face-book like box will emerge and when visitor find the way to another page or visit back later on like box never be evidence for.

Adding up Facebook Like-box Popup To Blogger

· Go To Blogger > Design

· Template> Edit Template

· Click on Choose a Gadget

· Select HTML/Javascript Widget

· Paste the following code inside it

<style>

/* JQuery Facebook

Like-box Popup Version 1.0 by tutorialsprogram.blogspot.com/

#colorbox,

#cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;

overflow:hidden;}

#cboxOverlay{position:fixed; width:100%; height:100%;}

#cboxMiddleLeft,

#cboxBottomLeft{clear:left;}

#cboxContent{position:relative;}

#cboxLoadedContent{overflow:auto;}

#cboxTitle{margin:0;}

#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0;

left:0; width:100%;}

#cboxPrevious,

#cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

.cboxPhoto{float:left; margin:auto; border:0; display:block;}

.cboxIframe{width:100%; height:100%; display:block; border:0;}

User Style:Change the following styles to modify the appearance of ColorBox. They are ordered & tabbed in a way that represents the nesting of the generated HTML.

#cboxOverlay{background:#000;opacity:0.5 !important;}

#colorbox{

box-shadow:0 0 15px rgba(0,0,0,0.4);

-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);

-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); }

#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmpowcDG1T1i1c9bb8_ay_ScRfYTrvpYanI0pa_vPn0S2_KOChRQFNWbsPW6KenzQZGtk1ZuqZ25PTzEGI8Zmt_S05J7oHydbsMONg9w5sRI5H28csieFaemBPvkq8dV6Eb5Ph809a32g/s1600/controls.png)

no-repeat 0 0;}

#cboxTopCenter{height:14px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF7NSl0eiSqSTdaJRzmFaE8AYLxxxDcOSR_jYAH8IXoGbFSxMrS9CvaCUk7PhPGbw8o2JKa-Nw-OGxMPcV5WtDEBMKkBrRxHuE_r3DJVSVBvT0IS2_Vkqx1mdv1ylu2rFbz2YRrwfYWDc/s400/border.png)

repeat-x top left;}

#cboxTopRight{width:14px; height:14px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmpowcDG1T1i1c9bb8_ay_ScRfYTrvpYanI0pa_vPn0S2_KOChRQFNWbsPW6KenzQZGtk1ZuqZ25PTzEGI8Zmt_S05J7oHydbsMONg9w5sRI5H28csieFaemBPvkq8dV6Eb5Ph809a32g/s1600/controls.png)

no-repeat -36px 0;}

#cboxBottomLeft{width:14px; height:43px;

no-repeat 0 -32px;}

#cboxBottomCenter{height:43px;

repeat-x bottom left;}

#cboxBottomRight{width:14px; height:43px;

no-repeat -36px -32px;}

#cboxMiddleLeft{width:14px;

repeat-y -175px 0;}

#cboxMiddleRight{width:14px;

repeat-y -211px 0;}

#cboxContent{background:#fff; overflow:visible;}

#cboxLoadedContent{margin-bottom:5px;}

#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs_vCXbqIYJJzDOakmcKq9chEKaCzw0s3bAjBY2_3E_xzWM3c4FR-DZyBiFf_3QOD58T2w3DNsjNSLZSvgb2IKmhMeEOQMVQQli9v0K-nVuIdvD51x577-3_Qm7OxLGyGHl03B2pAp2Bo/s400/loadingbackground.png)

no-repeat center center;}

#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSsj7B2nYaFLj1OSwhlXVtVk95HjD7-PhGYLZR80eJoOZOI-n9-qDRX0RV1xSBUEFEt2V6vJDLDomWNp9ndetZJ0EWufULgL2TMshmA_8bQ2ea-7V5lztRMdbpgiZnq7QlsogZ6cL8myI/s400/loading.gif)

no-repeat center center;}

#cboxTitle{position:absolute;

bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold;

color:#7C7C7C;}

#cboxCurrent{position:absolute; bottom:-25px; left:58px;

font-weight:bold; color:#7C7C7C;}

#cboxPrevious,

#cboxNext, #cboxClose, #cboxSlideshow{position:absolute; top:-5px;

no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}

#cboxPrevious{left:0px; background-position: -51px -25px;}

#cboxPrevious.hover{background-position:-51px 0px;}

#cboxNext{left:27px; background-position:-75px -25px;}

#cboxNext.hover{background-position:-75px 0px;}

#cboxClose{right:0; background-position:-100px -25px;}

#cboxClose.hover{background-position:-100px 0px;}

.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;

right:27px;}

.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}

.cboxSlideshow_off

#cboxSlideshow{background-position:-150px -25px; right:27px;}

.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

/*———————————————————————————–*/

/* Facebook Likebox popup For Blogger Version 2.0 */

/*———————————————————————————–*/

#subscribe {

font: 12px/1.2

Arial,Helvetica,san-serif; color:#666;

}

#subscribe a,

#subscribe a:hover,

#subscribe

a:visited {

text-decoration:none;

}

.box-title {

color: #00B3FF;

background-color:#333;

font-size: 18px

!important;

font-weight:

bold;

margin: 10px 0;

border:1px solid

#ddd;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

box-shadow: 5px

5px 5px #00B3FF;

padding:10px;

line-height:25px;

font-family:arial !important;

}

.box-tagline {

color: #999;

margin: 0;

text-align: center;

}

#subs-container {

padding: 35px0 30px 0;

position: relative;

}

a:link, a:visited

{

border:none;

}

.demo {

display:none;

}

/* ———Subscribe Form———- */

.box-title1 {

border:1px solid

#00B3FF;

background-color:#666;

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

box-shadow: 5px

5px 5px #CCCCCC;

padding:10px;

margin: 10px 0;

}

.enteryouremail{

background: #fff !important;

border: 1px solid #d2d2d2;

padding: 0px 8px 0px 8px;

color: #a19999; font-size: 12px;

height: 25px; width: 165px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

margin:0px;

}

.submitbutton{

background:#00B3FF;

border: 1px solid #00B3FF;

text-shadow: 1px 1px 1px #333;

box-shadow: 3px 3px 3px #666;

font:bold 12px Arial, sans-serif;

color: #fff;

height: 25px;

padding: 0 12px 0 12px;

margin: 0 0 0 5px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

cursor:pointer;}

</style>

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js’></script>

<script>// ColorBox v1.3.16 – a full featured,

light-weight, customizable lightbox based on jQuery 1.3+

// Licensed under the MIT license:

http://www.opensource.org/licenses/mit-license.php

f},U.init=function(){y=a(c),q=W().attr({id:e,”class”:m?f+(n?”IE6″:”IE”):””}),p=W(“Overlay”,n?”position:absolute”:””).hide(),r=W(“Wrapper”),s=W(“Content”).append(z=W(“LoadedContent”,”width:0; height:0; overflow:hidden”),B=W(“LoadingOverlay”).add(W(“LoadingGraphic”)),C=W(“Title”),D=W(“Current”),F=W(“Next”),G=W(“Previous”),E=W(“Slideshow”).bind(g,_),H=W(“Close”)),r.append(W().append(W(“TopLeft”),t=W(“TopCenter”),W(“TopRight”)),W(!1,”clear:left”).append(u=W(“MiddleLeft”),s,v=W(“MiddleRight”)),W(!1,”clear:left”).append(W(“BottomLeft”),w=W(“BottomCenter”),W(“BottomRight”))).children().children().css({“float”:”left”}),A=W(!1,”position:absolute;

width:9999px; visibility:hidden; display:none”),a(“body”).prepend(p,q.append(r,A)),s.children().hover(function(){a(this).addClass(“hover”)},function( {a(this).removeClass(“hover”)}).addClass(“hover”),K=t.height()+w.height()+s.outerHeight(!0)-s.height(),L=u.width()+v.width()+s.outerWidth(!0)-s.width(),M=z.outerHeight(!0),N=z.outerWidth(!0),q.css({“padding-bottom”:K,”padding-right”:L}).hide(),F.click(function(){U.next()}),G.click(function(){U.prev()}),H.click(function(){U.close()}),I=F.add(G).add(D).add(E),s.children().removeClass(“hover”),a(“.”+V).live(“click”,function(a){a.button!==0&&typeof a.button!=”undefined”||a.ctrlKey||a.shiftKey||a.altKey||(a.preventDefault(),ba(this))}),p.click(function(){J.overlayClose&&U.close()}),a(b).bind(“keydown.”+f,function(a){var b=a.keyCode;R&&J.escKey&&b===27&&(a.preventDefault(),U.close()),R&&J.arrowKey&&x[1]&&(b===37?(a.preventDefault(),G.click()):b===39&&(a.preventDefault(),F.click()))})},U.remove=function(){q.add(p).remove(),a(“.”+V).die(“click”).removeData(e).removeClass(V)},U.position=function(a,c){function g(a){t[0].style.width=w[0].style.width=s[0].style.width=a.style.width,B[0].style.height=B[1].style.height=s[0].style.height=u[0].style.height=v[0].style.height=a.style.height}var d,e=Math.max(b.documentElement.clientHeight-J.h-M-K,0)/2+y.scrollTop(),f=Math.max(y.width()-J.w-N-L,0)/2+y.scrollLeft();d=q.width()===J.w+N&&q.height()===J.h+M?0:a,r[0].style.width=r[0].style.height=”9999px”,q.dequeue().animate({width:J.w+N,height:J.h+M,top:e,left:f},{duration:d,complete:function(){g(this),S=!1,r[0].style.width=J.w+N+L+”px”,r[0].style.height=J.h+M+K+”px”,c&&c()},step:function(){g(this)}})},U.resize=function(a){if(R){a=a||{},a.width&&(J.w=X(a.width,”x”)-N-L),a.innerWidth&&(J.w=X(a.innerWidth,”x”)),z.css({width:J.w}),a.height&&(J.h=X(a.height,”y”)-M-K),a.innerHeight&&(J.h=X(a.innerHeight,”y”));if(!a.innerHeight&&!a.height){var b=z.wrapInner(“<div style=’overflow:auto’></div>”).children();J.h=b.height(),b.replaceWith(b.children())}z.css({height:J.h}),U.position(J.transition===”none”?0:J.speed)}},U.prep=function(b){function h(b){U.position(b,function(){var b,d,g,h,j=x.length,k,n;!R||(n=function(){B.hide(),$(i,J.onComplete)},m&&Q&&z.fadeIn(100),C.html(J.title).add(z).show(),j>1?(typeof J.current==”string”&&D.html(J.current.replace(/\{current\}/,P+1).replace(/\{total\}/,j)).show(),F[J.loop||P<j-1?"show":"hide"]().html(J.next),G[J.loop||P?"show":"hide"]().html(J.previous),b=P?x[P-1]:x[j-1],g=P<j-1?x[P+1]:x[0],J.slideshow&&E.show(),J.preloading&&(h=a.data(g,e).href||g.href,d=a.data(b,e).href||b.href,h=a.isFunction(h)?h.call(g):h,d=a.isFunction(d)?d.call(b):d,Y(h)&&(a(“<img/>”)[0].src=h),Y(d)&&(a(“<img/>”)[0].src=d))):I.hide(),J.iframe?(k=a(“<iframe/>”).addClass(f+”Iframe”)[0],J.fastIframe?n():a(k).load(n),k.name=f++(new Date),k.src=J.href,J.scrolling||(k.scrolling=”no”),m&&(k.frameBorder=0,k.allowTransparency=”true”),a(k).appendTo(z).one(l,function(){k.src=”//about:blank”})):n(),J.transition===”fade”?q.fadeTo(c,1,function(){q[0].style.filter=””}):q[0].style.filter=””,y.bind(“resize.”+f,function(){U.position(0)}))})}function g(){J.h=J.h||z.height(),J.h=J.mh&&J.mh<J.h?J.mh:J.h;return J.h}function d(){J.w=J.w||z.width(),J.w=J.mw&&J.mw<J.w?J.mw:J.w;return J.w}if(!!R){var c=J.transition===”none”?0:J.speed;y.unbind(“resize.”+f),z.remove(),z=W(“LoadedContent”).html(b),z.hide().appendTo(A.show()).css({width:d(),overflow:J.scrolling?”auto”:”hidden”}).css({height:g()}).prependTo(s),A.hide(),a(Q).css({“float”:”none”}),n&&a(“select”).not(q.find(“select”)).filter(function(){return this.style.visibility!==”hidden”}).css({visibility:”hidden”}).one(j,function(){this.style.visibility=”inherit”}),J.transition===”fade”?q.fadeTo(c,0,function(){h(0)}):h(c)}},U.load=function(b){var c,d,g=U.prep;S=!0,Q=!1,O=x[P],b||Z(a.extend(J,a.data(O,e))),$(l),$(h,J.onLoad),J.h=J.height?X(J.height,”y”)-M-K:J.innerHeight&&X(J.innerHeight,”y”),J.w=J.width?X(J.width,”x”)-N-L:J.innerWidth&&X(J.innerWidth,”x”),J.mw=J.w,J.mh=J.h,J.maxWidth&&(J.mw=X(J.maxWidth,”x”)-N-L,J.mw=J.w&&J.w<J.mw?J.w:J.mw),J.maxHeight&&(J.mh=X(J.maxHeight,”y”)-M-K,J.mh=J.h&&J.h<J.mh?J.h:J.mh),c=J.href,B.show(),J.inline?(W().hide().insertBefore(a(c)[0]).one(l,function(){a(this).replaceWith(z.children())}),g(a(c))):J.iframe?g(” “):J.html?g(J.html):Y(c)?(a(Q=new Image).addClass(f+”Photo”).error(function(){J.title=!1,g(W(“Error”).text(“This image could not be loaded”))}).load(function(){var a;Q.onload=null,J.scalePhotos&&(d=function(){Q.height-=Q.height*a,Q.width-=Q.width*a},J.mw&&Q.width>J.mw&&(a=(Q.width-J.mw)/Q.width,d()),J.mh&&Q.height>J.mh&&(a=(Q.height-J.mh)/Q.height,d())),J.h&&(Q.style.marginTop=Math.max(J.h-Q.height,0)/2+”px”),x[1]&&(P<x.length-1||J.loop)&&(Q.style.cursor=”pointer”,Q.onclick=function(){U.next()}),m&&(Q.style.msInterpolationMode=”bicubic”),setTimeout(function(){g(Q)},1)}),setTimeout(function(){Q.src=c},1)):c&&A.load(c,function(b,c,d){g(c===”error”?W(“Error”).text(“Request unsuccessful: “+d.statusText):a(this).contents())})},U.next=function(){!S&&x[1]&&(P<x.length-1||J.loop)&&(P=P<x.length-1?P+1:0,U.load())},U.prev=function(){!S&&x[1]&&(P||J.loop)&&(P=P?P-1:x.length-1,U.load())},U.close=function(){R&&!T&&(T=!0,R=!1,$(j,J.onCleanup),y.unbind(“.”+f+” .”+o),p.fadeTo(200,0),q.stop().fadeTo(300,0,function(){q.add(p).css({opacity:1,cursor:”auto”}).hide(),$(l),z.remove(),setTimeout(function(){T=!1,$(k,J.onClosed)},1)}))},U.element=function(){return a(O)},U.settings=d,a(U.init)})(jQuery,document,this);</script>

</script>

<div style=’display:none’>

<div id=’subscribe’ style=’padding:10px; background:#fff;’>

<h3 class=”box-title”>Stay Updated Via Our Facebook Page<br>Just Click Like Button Below<center><p style=”line-height:3px;”>▼</p></center></h3>

<center>

<iframe src=”//www.facebook.com/plugins/likebox.php href=http%3A%2F%2Fwww.facebook.com%2FTutorialsprogram&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:300px; height:258px;” allowtransparency=”true”></iframe>

</center>

<div class=”box-title1 “>

<center>

<h3 style=”color:#00B3FF;”>Receive Free Email Updates Via Email:</h3>

<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Tutorialsprogram ‘,

‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return

true”><input gtbfieldid=”10″

class=”enteryouremail” name=”email” value=”Enter your

email here…” onblur=”if (this.value == '')

{this.value = 'Enter your email here…';}” onfocus=”if

(this.value == 'Enter your email here…') {this.value = '';}”

type=”text” /><input value=” Tutorialsprogram”

name=”uri” type=”hidden” /><input

value=”Submit” class=”submitbutton” type=”submit”

/></form>

</center>

</div>

<!–Please Do not Remove the Credits –>

<p style=”float:left; margin-right:35px; font-size:9px;” >Powered By <a style=” font-size:9px; color:#3B78CD; text-decoration:none;” href=”http://www.bestbloggercafe.com” rel=”nofollow”><strong>Blogger Widgets</strong></a></p>

</div>

Make Following Changes

· The Green Text Above can be changed with your Desired Words.

· Replace Tutorialsprogram with your face-book username.

· Next replace twice Tutorialsprogram with your feed title.

· Save the Widget

· Done

Friday, August 8, 2014

Face-book Like box For Blogger

Thursday, August 7, 2014

Examples With Basic HTML Tags